This Friday post is devoted to the translation of an interesting article, published yesterday on the
Medium . I decided to master for myself a new genre of translations, so please do not kick much if there is something wrong somewhere. And whenever possible even notify on errors and typographical errors in a pm.
Thanks and good reading!
A tale about how new web platform features and compiled frameworks define the next era of web development.
Photo:
Stefan BucherFrameworks such as
Angular ,
React, and
Ember , today, are key to developing complex web applications. Over the past decade (
Angular was released in 2010) the use of these frameworks has become the de facto standard for many of us. They help us structure our code, manage application state, and build complex interfaces based on reusable components.
However, as you know, JavaScript is the most expensive web resource that directly affects the interactivity of our pages. And the size of the javascript code of our web applications is larger than ever. The size of the average webpage is greater than 3MB, which is larger than the size of the original Doom game. We, as developers, can have fast internet and low-cost tariff plans, but our users may not have it all.
As
Alex Russell considered , exceeding the size of just 130KB for all of our resources can mean that it is impossible to meet the 5 second download interval on a standard phone and mobile network. However, some of our favorite frameworks may take more on their own.
Can we use the advantages that frameworks give us, but avoid bloating the code? Have the convenience of the developer and at the same time, an excellent user experience? I believe in it. And I believe that we are entering a new era of web development, which will be determined by this ... An era in which our frameworks will start to disappear.
Svelte
An example of this trend is
Svelte , the “magically disappearing UI framework” (article
“Magically disappearing UI framework” on Habré ).
Svelte is a “compile-time” framework that does not have a specific runtime on the client. We are used to sending large JavaScript packages to our users and expect their browsers to analyze and execute scripts. But
Svelte doesn't work that way. Instead, it compiles your application into small, stand-alone, vanilla JavaScript modules. In other words, by the time the app is delivered to your users,
Svelte will disappear!
An example of an application that was developed using
Svelte is
Pinafore , the PWA client for the decentralized social network
Mastodon , created by
Nolan Lawson of Microsoft. Pinafore shows
very fast results in the Web Page Test and scores 98 points in the
Lighthouse .
Svelte , in itself, is very minimalist, but there is also
Sapper (
S velte
App Mak
er - note) - a full-featured framework based on it. Inspired by Next.js,
Sapper includes server-side rendering, code separation, scoped-styles, declarative routing, and hot-reload. In addition, the start-up
Sapper template provides a default PWA, with a web application manifest, and a service worker with automatic caching of resources.
I asked Nolan how he felt about using
Svelte and
Sapper . He told me that it was “a dream to work with”
Svelte .
Sapper is “a little less mature” and he had some problems with him, but he was also pleased. I also started using these two frameworks for a new project, and so far the combination of functionality and high speed work really feels perfect.
Stencil
Svelte inspired an alternative project from Ionic:
Stencil .
Again, the goal is to take over the “best concepts of the most popular frameworks,” but at the same time achieve better performance:
“With…”, the team was struggling to complete the diversity of platforms and devices. ”- stenciljs.com
To understand what
Stencil consists of, I found a helpful
introduction from Rob Bearman . There is also a
video from
Maximilian . The output of
Stencil is a standard Web Component (more on Web Components below), not specific to
Stencil . This means that you can use it in conjunction with another framework if you want (but this article is that the frameworks are disappearing, not multiplying!).
Separately, I want to note that despite the fact that the
Svelte documentation does not pay much attention to this, but the
Svelte component can also be compiled directly into the Web Component (
here’s an example — if you set the
customElement here —
as a result we get ). However,
Rich Harris , the creator of
Svelte (and
Rollup and many other amazing things!), Told me that he did not consider that there are special benefits from using this feature at the moment.
Stencil is also similar to Google's more famous
Polymer , but it completely disappears at the output. However, I did not use Polymer too much to comment in more detail. Perhaps he also deserves more attention. The last,
3rd version began to use
ES Modules (more on this below), instead of
HTML Imports , and
npm instead of
Bower . There is also the
PWA Starter Kit which recommends
Alex Russell as the best tool for creating productive web applications. He gives you a
PRPL pattern (Push, Render, Pre-cache, Lazy-load) right out of the box.
Next generation angular
Thank you Rich Harris for letting me know that Angular is also following this trend!
Angular Elements —Redication to
Angular 6 — allows you to export Angular components as self-customizing Web Components. At the moment, it still requires "a minimal, standalone version of Angular," but they "are working on custom elements (custom elements) that can be used in web applications built on other frameworks."
In addition,
Ivy - renderer of the new generation in Angular, is designed to dramatically reduce the size of the resulting code. (Although still worth a look: in the spirit of friendly competition, Rich made a
comparison of the results of compiling web components from Svelte and Ivy!).
It is very cool that popular frameworks pick up this approach, making their final code more compact. We hope that as more and more web applications switch to a new approach, this will have a big impact on the performance of the Internet as a whole.
In addition, more and more prerequisites for the fact that soon we will not need frameworks at all. Frameworks can, of course, simplify development and continue to provide useful add-ons, but the web platform itself provides more and more functionality than ever ...
Web platform as a framework
In my article
“A Rube Goldberg Machine” and the
following conversation, my colleague
Ada Rose Cannon explained how new CSS and JavaScript functions can be “viewed as frameworks embedded in a web platform.”
For example, CSS Custom Properties (better known as CSS Variables) may mean that you no longer need a CSS precompiler such as
Sass . And CSS Grid can now save you from loading Bootstrap.
“You don't need a framework to use CSS Grid. CSS grid is a framework. ”
- Rachel Andrew
Web Components
Web Components are particularly strong and are key to much of this trend. The following features are included - Custom Elements, Shadow DOM and HTML templates -
not yet available everywhere , but, as
Ada says , they have pretty good support, and
there are polyfiles that give them even better support, so you can use them today!
Ada and
Ruth John recently developed a web-based music visualization application using web components and
shared their lessons .
In addition, you can feel more secure by applying new features, such as Web Components, if you use server-side rendering (SSR) and implement your client side with
Progressive Enhancement .
Single page app.
- Ada Rose Cannon
Isomorphic ES modules
You can also use
ES modules now! Again, browser support is pretty good, and you can support older browsers using
“nomodule” fallback .
In fact, if you agree with the SSR + Progressive Enhancement approach, you can even use ES modules without having to use build tools to
translate them to other browsers, since older browsers can still work without JavaScript. And using the
ESM module loader, we can also
use the ES modules directly in NodeJS .
This is great because we can reuse our frontend and backend scripts (i.e. Isomorphic Rendering) without dancing with a tambourine. We can structure our frontend code without having to glue our scripts together, put many script tags on the page, or use loaders on the client side.
This is exactly what Ada showed in her
first talk on Twitch this month. There is also a
blog entry with explanations.
I hope that I managed to share my thoughts as we begin to enter a new era of web development. An era that is less dependent on traditional UI frameworks, CSS libraries and bandlers. An era in which we send fewer bytes and load our web applications faster. The era of endangered frameworks.
Thanks to Nolan Lawson, Rich Harris and Ada Rose Cannon for their help and inspiration on this article. This article is also posted here in my personal blog.***
From myself I want to note that, unfortunately, at the moment only I am writing on
Habre about
Svelte . Therefore, there is quite a bit of information in Russian about this wonderful framework.
If you met him for the first time, you may be interested to read other articles on this topic:
Who wants to more actively follow its development - welcome to the Russian-language telegram channel
SvelteJS . We will be glad to you!
I congratulate everyone on the summer and the victories of our team! Have a good weekend! Hooray!