 |
|
This partially would possibly perchance perchance perchance well moreover very well be more of a what’s extinct is original yet again, but here’s what I employ:
– 100% server side rendered
– Step by step enhanced (fully works with out JS, but having JS enabled makes it nicer)
– In have interaction out areas where I need SPA-love snappiness I employ a ~100 line lengthy DOM diffing algorithm (I assign a query to stout HTML by AJAX and diff it into essentially the most novel page; if the particular person has no JS enabled then the page genuine refreshes in general)
– Running on a single, low-impress VPS; no Docker, no Kubernetes, no serverless
– No SQL database; I genuine defend everything in memory in native recordsdata structures and flush to disk periodically; I comprise a colossal swap file instruct up in divulge that I can defend a working instruct bigger than the RAM
– Written in Rust, so it’s like a flash; I can toughen tens of thousands of connections per 2d and thousands concurrent customers on my low-impress VPS
|
|
|
|
> I employ a ~100 line lengthy DOM diffing algorithm
Since here is no longer vDOM diffing (which most JS frameworks today present) are you able to lend a hand fragment the algorithm if its already out within the open / non-proprietary?
|
|
|
|
> I genuine defend everything in memory in native recordsdata structures and flush to disk periodically;
Can you make bigger on what you mean by this? I am interpreting that to mean that you are genuinely writing to a file and reading from a file in preference to the employ of SQL?
|
|
|
|
They’re storing their recordsdata in native Rust objects and skim or write them in server utility RAM. In case recordsdata turns into higher than accessible RAM, they’ve instruct up a substantial swap, which is a file or a disk partition that the OS uses when no more exact RAM is accessible, whereas acting love nothing is occurring (and everything gets 1000x slower). They periodically serialize these in-memory objects to a file on disk, and presumably (they didn’t specify, but I occupy it’s implied) they’re reading this file and deserialize all of it over initialization/startup section.
|
|
|
|
Just. Even supposing I don’t read everything on startup. About a of the records (e.g. per particular person recordsdata) is easiest loaded as soon as it is important.
Moreover, the swap would not make everything slower as lengthy as my energetic working instruct is smaller than the accessible RAM. That is, I comprise more recordsdata loaded into “memory” than I comprise RAM, but I am no longer the employ of all of it your complete time, so things are easy like a flash. Or no longer it’s most incessantly an OS managed database. (If I were the employ of a customary SQL database I’d discover a an identical behavior where actively venerable recordsdata would sit down in RAM and never more venerable recordsdata would possibly perchance perchance perchance perchance be read from the disk.)
|
|
|
|
I plot this loads this expose day with prototypes and poc’s but in general with Lag since I’m more conscious of it. Sure it easiest works on one machine, but it surely’s in general so like a flash scaling map it became as soon as a success and now you comprise a war chest.
I’d add including s3 to backup things though.
|
|
|
|
No SQL database is the one factor I disagree with. What whereas you happen to ought to comprise to write a SQL quiz/document? Make you comprise transactions? As the app gets bigger it’s seemingly you’ll perchance perchance perchance perchance moreover desire that.
|
|
|
|
> No SQL database is the one factor I disagree with.
I am no longer announcing this scheme is a factual suggestion in every case. There are many instances where I’d employ an genuine database. It surely is dependent on what accomplish of app you are building, what accomplish of queries you ought to comprise to stir, how colossal is your dataset, your failover and availability necessities, your programming language, and so forth.
In my case it became as soon as a colossal resolution. The code is modest, and the records is convenient to discover admission to since it is already packed in native recordsdata structures. And it’s surely, surely like a flash since the final “queries” are most incessantly LLVM-optimized machine code.
> What whereas you happen to ought to comprise to write a SQL quiz/document?
I genuine write a couple of lines of customary Rust code to plot that. Sure, it isn’t as convenient. Nonetheless I don’t must plot that as in general, so I don’t care.
> Make you comprise transactions?
The thought that of ‘transaction’ would not surely make sense in this scheme, since I am straight bettering the records in memory, every trade I make is atomic and can’t fail, and I flush the records to the disk atomically as well.
|
|
|
|
Including in a provider love a SQL database because “it’s seemingly you’ll perchance perchance perchance perchance moreover desire that” in due route is no longer a factual suggestion. Apps would possibly perchance perchance perchance well moreover easy plot what they must plot and no more. “Future proofing” is practically continually a slay of time – even whereas you happen to surely desire the perform in due route it’s in general better to add it in when it is important than including it early and comprise to toughen something that adds no rate yet.
As for experiences and transactions particularly, noSQL databases toughen both.
|
|
|
|
|
|
|
|
No longer OP, but we had a an identical venture lengthy lend a hand. All recordsdata is in maps and structs. We didn’t had free textual voice material search, all filters had a corresponding Plan of key to []ids. A major blueprint from id to object. Needs heaps of RAM, but that is mainly the most payment-effective factor we are able to add
|
|
|
|
|
|
|
|
I am the employ of a combination of Elixir, Hugo, somewhat Python and GitHub Pages for a non-public web voice online that hosts my poetry. I instruct up a easy hourly job in elixir to verify Evernote for any original poems I’ve tagged with poetry:submit. If a brand original poem is detected, the elixir job downloads the textual voice material, runs it by a Python script to add it to the Hugo repo, regenerates the static html and pushes the updates to GitHub.
Total I am a plentiful fan of Elixir, it’s incredibly loyal and straightforward to comprise interplay up for easy server responsibilities. Plus the scheduler is constructed into Beam, no need for any additional deps. My easiest criticism is desirous to rely on additional python to convert the ENML to HTML, but that’s a extremely arena of interest library so no longer pleasing that it would not exist in Elixir yet.
|
|
|
|
|
|
I am working on two different instruments for building web apps:
https://htmx.org – uses HTML attributes and HTML-over-the-wire for AJAX/Web Socket/SSE interactions
https://hyperscript.org – an experimental front cease programming language derived from HyperTalk that is event-oriented and that removes the excellence between synchronous and asynchronous code.
Both instruments are HTML-oriented and are designed to be embedded straight to your HTML, in preference to along with it. I am seeking to popularize the term “Locality of Behaviour” for this idea:
https://htmx.org/essays/locality-of-behaviour/
There are a couple of instruments which would be inviting of us this route this expose day, significantly AlpineJS and Tailwinds.
|
|
|
|
I’ve conducted with HTMX (and previously intercooler.js). Comely wished to bellow – everything you touch is superior. Thanks to your efforts.
I also love Alpine.js and Stimulus.js initiatives. They’re seeking to simplify the insanity of front-cease construction.
Lag + HTMX is substantial powers. It peels away the piles and lumps of framework layers and straightforward gets you 90% there. For the 10%, genuine employ React/Angular/Vue.
|
|
|
|
|
|
|
|
HyperScript is so cool. I’m significantly going to search for at this after I became as soon as stuck in a pit of addEventListeners the day gone by.
|
|
|
|
I am no longer obvious what came first, but it surely’s unfortunate that hyperscript.org clashes with hyperscript, the pure JavaScript notation to describe HTML.
|
|
|
|
on the an identical show, I am surely taking part in basecamp/hey’s hotwire stuff along with accelerate templates.
will be finding out htmx as well, thank you for the hyperlinks.
|
|
|
|
Fav thread ever!
A factual 5+ years ago I constructed HasGluten [1] with react backed by a google spreadsheet, hosted on github pages. Confirmed technology, it’s easy working.
More honest no longer too lengthy ago I hacked collectively MultiPreview [2] with react + API served by firebase functions. I am also temp the employ of firebase net net hosting as I comprise diminutive web voice visitors, but idea to interchange it with edge computing / CDN caching.
MultiPreview is backed by Saasform [3]. Here’s more love a normal node/explicit (nestjs) utility, but I love how we’re environment apart concerns: the SaaS = MultiPreview handles the biz common sense / Saasform handles touchdown page + auth + funds.
While building the original touchdown page I conducted with and favored loads Bulma [4], I venerable but didn’t love AlpineJS [5] and I am thinking to pass to Hotwire [6].
My deepest trip is that efficiency easiest issues whereas you happen to’re colossal ample, so within the advance future I are looking out to experiment more on usability / nocode side. And I’d desire to verify out more open provide choices to the colossal ones.
[1] https://hasgluten.com
[2] https://multipreview.com
[3] https://github.com/saasform/saasform
[4] https://bulma.io
[5] https://github.com/alpinejs/alpine
[6] https://hotwire.dev
|
|
|
|
|
|
|
|
|
|
Semantic HTML, CSS, Vanilla JS, and JAMStack.
Semantic: embed recordsdata straight in HTML. If I comprise a list of wines with categories, every wine’s “class” attribute has a class for every category.
HTML: would possibly perchance perchance perchance well moreover be generated by anything else and consumed by anyone. Good web voice positioning.
CSS: These net sites were all made with the an identical HTML, easiest CSS altering. http://www.csszengarden.com/
Let’s factor in now we comprise a checkbox, that when checked, would possibly perchance perchance perchance well moreover easy shadowy every wine that’s no longer a white wine. Next to it’s a div of wines, with the “container” class. The div contains wine aspects.
3 lines of CSS:
enter[type="checkbox"].whiteWine:checked + .container > :no longer(.whiteWine) {
opacity: 0.5;
}
It is seemingly you’ll perchance perchance well exchange the checkbox’s look with an picture, a video, genuine about anything else– it would not comprise to search for love a checkbox.
This could have interaction many lines of JavaScript in any various framework.
Rather then attempting to warp HTML precise into a UI library, this uses HTML as an recordsdata format, and CSS as a technique to expose that recordsdata.
|
|
|
|
|
|
|
|
|
|
:checked and :no longer() had been precise for a quantity of years now. Firefox has had ’em since at the least version 1 (2004), Safari bought ’em in 3.1 and 3.2 (2008), and Internet Explorer became as soon as the remaining player to the desk in Internet Explorer 9 (March 2011). The leisure of the selector functions (ticket, attribute, class, adjoining sibling, diminutive one) are older easy (IE7 supported all of it).
|
|
|
|
|
|
– tailwindcss
I moved a React side-venture from CRA to Next.js for server-side rendering advantages, but the latter would not toughen straight importing css styles in jsx to steer obvious of concerns with the realm scope.
The 2 alternatives equipped were CSS modules and CSS-in-JS. I didn’t love either approaches having hashes within the classname when opening the web sites in devtools, and both gave the impression too locked into React/JSX.
Tailwind 1. would not comprise part framework lock-in 2. would not make me judge css classnames 3. atomic classnames are readable in dev instruments 4. provides default colors and field shadows, and so forth.
In addition to to, they’re starting to make a render-less part library (https://headlessui.dev/): that map it’s seemingly you’ll perchance perchance perchance customize how ingredients search for with out having to designate how its javascript internals work, which I’d gain a plentiful plus compared to various libraries love ant comprise or fabric-ui.
– vite + react
More newbie pleasant than webpack in starting a brand original venture, and sooner developer trip: page reloads practically straight whereas you happen to’re bettering a part.
|
|
|
|
SvelteKit, Serverless, Backendless.com
SvelteKit[1] is a framework for SvelteJS (love Next.js is a framework for ReactJS). I’ve tried both Svelte and React. Svelte appears to be more natty and lets me put into effect my options sooner with less code. Svelte is terribly versatile; SvelteKit adds some opinions on learn how to plot things love routing.
SvelteKit also embraces the serverless paradigm[2] (AKA JAMstack[3]). Even supposing a node.js server is easy an option, it’s seemingly you’ll perchance perchance perchance perchance moreover comprise pages rendered in serverless functions or pre-rendered at discover time. Even static pages would possibly perchance perchance perchance well moreover be “hydrated” on the buyer so they effect no longer appear to be entirely static. So this results in magnificent-grained SSR (server-side rendering) at the page stage. The 2 major causes for SSR are efficiency (significantly on cell devices) and web voice positioning.
Backendless[4] is a VADP/MBaaS. This platform offers heaps of products and services, but the major one I am having a search for at is authentication/id. I became as soon as procuring for an authentication provider that helps anonymous visitor login, social login, as well as feeble e mail/password login. The assorted contenders were Google Firebase (slack, and complex be a part of/be a part of circulate[5]) and AWS Cognito (too refined/difficult to make employ of). Auth0 became as soon as a contender, but they effect no longer toughen visitor logins.
[1]: https://package deal.svelte.dev
[2]: https://www.serverless.com
[3]: https://jamstack.org
[4]: https://backendless.com
[5]: https://github.com/firebase/firebaseui-web/concerns/665
|
|
|
|
This complete factor feels love layers upon layers of complexity. Now to not bellow, the brittle ingredients of any javascript venture – immature, lack of robustness and dependability. Your stuff is working on Node v12? Correct success with Node v14 – both LTS variations. It is a shitshow. Let’s defend Javascript contained within the browser IMO.
SveltKit is literally 2 months extinct.
|
|
|
|
|
|
SvelteKit as a venture is literally 4 months extinct (since launched), but Sapper (the predecessor) had been spherical for longer, and SvelteKit has been venerable on NYT’s county-stage COVID tracker. There’ll be some teething concerns but it surely’s positively no longer a truly greenfield venture.
|
|
|
|
Smartly, Svelte itself is a bit older than that. And of your complete novel Javascript frameworks, Svelte has been, for me, essentially the most satisfied to work with.
On the different hand, to your explain, I agree – there is pointless amount of complexity within the stack above. For me, it’s in general Svelte in front, with any server side utility.
|
|
|
|
|
|
No longer obvious if this counts, but for easy stuff (both front and lend a hand-cease!) I’ve been loving novel JS template strings for rendering HTML. Your render common sense ends up having a search for extremely like React purposeful ingredients, and likewise it’s seemingly you’ll perchance perchance perchance discover editor extensions that plot syntax highlighting contained within the string.
There are glaring downsides – on the lend a hand-cease it’s slower than an genuine templating system, and on the front-cease you are rebuilding the DOM tree from scratch each time, collectively with your complete obstacles that entails (efficiency, animations discover interrupted, HTML instruct gets lost, any event listeners would possibly perchance perchance perchance well moreover easy be re-initialized). Nonetheless for easy stuff, I can no longer imply it ample.
Here’s a lend a hand-cease example from my deepest web sites: https://github.com/brundonsmith/web sites/blob/master/src/rend…
And here’s a front-cease example: https://github.com/brundonsmith/blogs/blob/master/medical doctors/web voice online….
|
|
|
|
A whereas ago I created a easy web sites the employ of an XML file as a storage technology and XSLT to render it to HTML. The options stored would possibly perchance perchance perchance perchance be updated infrequently and suited a fixed format, making XML factual for the job. In the starting assign apart the placement index file pointed to the XML file and the XSLT became as soon as rendered by the browser. This labored completely for a truly lengthy time. Regardless that there became as soon as some technology to learn, it became as soon as a zero dependency, browser-native solution.
After a couple of years I determined to make everything entirely static to facilitate some adjustments. It now uses lxml in a Python script to perform the XML transformation. Here’s stir by a makefile and produces static HTML, which is then uploaded.
My blog (https://ajxs.me) is rendered the employ of a static-web voice online-generator I constructed myself in Python. The usage of Python template strings stored in HTML files to make a easy templating engine. The blog entries are written in HTML format and stored in an SQLite database loaded by the discover script. The final output is entirely static HTML, no longer even any Javascript.
I am experimenting with various codecs for writing the entries themselves in, nonetheless I haven’t found anything else yet that offers me more simplicity and control than HTML. The LaTeX to HTML conversions I’ve tried were map too bloated and messy, and markdown would not appear to toughen the stage of control I desire. With HTML I comprise very granular control over the final output within the browser and would possibly perchance perchance perchance well make no topic arbitrary voice material I comprise to.
|
|
|
|
|
|
|
|
I constructed Nodewood: https://nodewood.com
I surely luxuriate in NodeJS/Vue for web apps, but I purchased ill of having to set collectively your complete programs from scratch each time, instruct up ESLint, finding out, database connections, write the particular person auth/administration, all that general stuff. In expose a change, I assign collectively a boilerplate with all my general practices and customary app functions. I pick, it within the slay saves me time on all future web apps, and if various of us are looking out to discover a an identical style of app, spending a couple of hundred on a factual boilerplate is cheaper than hiring a freelancer to plot it for it, and even doing it yourself, whereas you happen to price your time at anything else bigger than minimal wage.
|
|
|
|
|
|
|
|
I am within the period in-between working with the AWS CDK and the more I venerable it, the more I comprise the feeling instruments love that incessantly is the following colossal factor.
Or no longer it’s melting the walls between cloud infrastructure and utility code and the undeniable fact that it does IaC with the an identical language I employ to program web apps (JS/TS) plays a extremely significant role here.
I judge, it isn’t 100% there yet, but it surely’s on a factual map.
|
|
|
|
I spent heaps of time with CDK remaining 300 and sixty five days the employ of Typescript. Very impressed with it and I comprise zero regrets after inviting over our app’s infrastructure to being deployed with it after 9 months in production.
I felt love being forced to make employ of typed IaC helped me designate AWS API’s and products and services themselves better.
|
|
|
|
|
|
|
|
react-three-fiber with the original three-stdlib library. Or no longer it’s an scheme that enables powerful smaller WebGL apps by tree-shaking, and the dev trip is de facto factual (Typescript, like a flash refresh, no bundling step, and so forth).
|
|
|
|
For rapid deepest things I comprise an enormous hack over webpack that makes anything else “.static.” into an output. This implies there are no parallel directories for assets and my code is in general a million times more modular.
Its a hack. There are edge instances. It became as soon as a proof of idea that has carried me over the road. I comprise additional plugins for server side render and assemble time render.
I defend that formula to write it up and strive to port the assessments to weboack itself (so I can argue for lacking functions), but it surely does what I need, I am no longer a front cease dev, im busy in various areas (in life and work).
|
|
|
|
I had been exploring offline-first approaches to building web apps.
In a nutshell, the UI interacts with local instruct, and a background provider syncs local instruct with server-side instruct and vice-versa. This theoretically permits the app to stay fully purposeful even when offline, whereas asserting the advantages of your stuff being accessible from all your devices. There would possibly perchance be also UX gains as well – your UI interactions don’t must be blocked by network calls.
In note, that map the employ of something love IndexedDb to manipulate shopper-side instruct, and modelling recordsdata as CRDTs or an identical in open as much as comprise eventual consistency with the server.
|
|
|
|
I employ janet-lang
The stack no longer too lengthy ago has been
– osprey (sinatra love framework)
– tailwindcss
– sqlite
– alpine.js
– turbo (from hotwire)
Reminiscence usage is de facto low, so I can comprise a quantity of net sites on a single VPS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Can not imply gqless extremely ample for making graphql genuinely enjoyable to make employ of and nearer to something love meteor/firebase syntax[0].
And I’ll self-promote, I’ve been working on what I have interaction into consideration to be a “next period” style system for React that solves my greatest command with it within the period in-between: being in a instruct to performantly write styles in a good syntax that optimize for both web and native. Known as SnackUI, easy in beta[1]. It has an optimizing compiler that surely speeds up React apps a ton, but easy permits them to stir fully on native, even with themes and responsive queries.
I’ve been hacking on a cool venture for the remaining 300 and sixty five days the employ of the 2 of them and surely notify in them both.
[0] https://gqless.com
[1] https://github.com/snackui/snackui
|
|
|
|
|
|
|
|
|
|
> What recent instruments are you the employ of to write net sites/apps?
Every part. Every part is fucking recent. You learn one factor and the following day it’s extinct recordsdata and it’s wanted to begin on a brand original fucking factor.
Javascript? They even stopped calling it javascript!!! That’s how recent it is. And it’s seemingly you’ll perchance perchance perchance no longer employ it with out doing all forms of bullshit with modules and bundlers and working shit to your computer to reveal the javascript you write into javascript that a browser can employ. WTF is that?
As soon as webmasters started calling themselves engineers, that became as soon as the cease. They fucking needed to head and plot engineer things to account for their bullshit job titles.
I pine for the factual ol’ days of sending css and html to a server over Filezilla. I mean coping with IE6 became yet again enjoyable than this… and that is the explanation no longer a lie. Fuck recent!
|
|
|
|