92 lines
4.4 KiB
Markdown
92 lines
4.4 KiB
Markdown
Today I will introduce you to a fairly new javascript framework called Datastar.
|
|
|
|
So it is somewhat star-related, let us start with the following formular:
|
|
|
|
Insert Drake's formular here.
|
|
|
|
Who knows what this is? Follow up with very short discussian
|
|
|
|
Starting with Web-Development many years ago, I came up with the following formular, I call it the Drake Formular for Webdevelopment
|
|
|
|
Insert Drake's formular of web technologies here.
|
|
|
|
It like Drake's but I run it in reverse, it is a big Multiplication of technologies choices. Leading to billions of possible combinations of web applications. With literally billions of combinations it is quite hard to choose one.
|
|
|
|
Now, each living web application out there is a little star, showing a viable combination of web technologies.
|
|
|
|
One can also see this formular as the basis for a large n-dimensional vector space and just like in the real space where we have galaxies and clusters of galaxies, we also have clusters in this space. There is for example the cluster of react and supporting react technologies or there is an angular cluster or vue cluster. I, for example, live in the line-of-business apps with vue neigborhood.
|
|
|
|
And we a basically following our personal journey through this space, gravitating to one cluster at on point in time or gravitating to another cluster later in time.
|
|
|
|
Today I want to visit with you a already quite old cluster, it is called hypermedia, and all web apps were living in this cluster a few decades ago. This cluster developed a new rather large bulge called htmx and very recently a still tiny blob called Datastar and this is where our journey takes us today.
|
|
|
|
----
|
|
|
|
some preparations:
|
|
- to use Datastar you need to control the backend
|
|
- learn your prefered templating system
|
|
- be ready for a major paradigm shift (similar to the one with HTMX)
|
|
|
|
Insert Delaney's quote: Datastar is a backend agnostic backend framework with a 10 Kb shim
|
|
|
|
|
|
----------------------------------
|
|
|
|
Quick Excourse, my motivation: the minimal viable web app:
|
|
- I believe that the Complexity Budget is a real thing
|
|
- I believe that constraints can induce creativity: Creativity Paradox
|
|
- I believe that Simplicity is the ultimate form of perfection
|
|
|
|
My self imposed constraints are:
|
|
- No build step for the frontend part (no npm, no vite.js, no special tooling)
|
|
- Very few 3rd party libraries (sqlite-driver, datastar-sdk, datastar)
|
|
- Write the app with a reasonably minimal number of code lines
|
|
- Reduce the dependancies to a minimum.
|
|
|
|
Minimal is also about everything you need to build a complete web app. In this sense the mvwa establishes a baseline of everything you need to build (a great) web application.
|
|
|
|
part 1: Databases
|
|
part 2: The No-ORM ORM
|
|
part 3: Go-Programming language
|
|
part 4: Datastar
|
|
part 5: Modern CSS
|
|
part 6: Web Components
|
|
part 7: VPS and Deployment
|
|
|
|
To be clear: is true that Datastar is a minimalistic "framework" for web development, but it is by no means limited to minimalistic web apps.
|
|
Delaneys claim to be able to recreate any web app with datastar, faster with less code.
|
|
|
|
The longer you can stay in "declaritive space" and the shorter time you spend in "imparitive space" the faster you can develop you application.
|
|
|
|
|
|
----------------------------------
|
|
|
|
|
|
|
|
The core of Datastar
|
|
|
|
DS stays true to the web specifications, background the web can be a place for long-living apps/sites. A thirty year-old website can still be used.
|
|
|
|
DS uses the custom data-[what-ever] attributes. add info about browsers forgiving behavior of invalid attributes.
|
|
DS uses SSEs part of the HTTP-spec
|
|
DS works well with Web Components another web standard.
|
|
|
|
It uses Signals (based on Alien Signal) - I showed a minimalist implementation of signals in my last talk. Signals may become a web standard too.
|
|
It uses a morphing algorithm derived from ideomorph created by the team around HTMX, but interestingly not used my HTMX.
|
|
It can work with JSON or HTML API responses, but
|
|
it shines when using SSE.
|
|
|
|
In short it is quite simple actually, but a bit paradigm shift in web development
|
|
|
|
JSON responses update or create signals
|
|
HTML responses morph into the DOM based on id attibutes
|
|
SSEs can contain both JSON and HTML responses
|
|
|
|
The team has created an ADR, that show how to develop a backend, there are dozents of backend sdks available already
|
|
|
|
Lets revisit Delaney's quote: Datastar is a backend agnostic backend framework with a 10 Kb shim
|
|
|
|
insert a quick intro to SSEs and a quick compare to websockets
|
|
|
|
|