JavaScript frameworks of tomorrow

JavaScript frameworks of tomorrow
Or what to expect in the coming years
Juho Vepsäläinen
JS Fwdays Europe – 10.11.2022

What to expect
1. Current trends
2. Islands architecture
3. Resumability
4. JSON as a building block
5. Conclusion
1

Past, present, future
Source: Miško Hevery: WebApps at Scale
2

Transitional web applications (TWAs) [4]
• In October 2021, Rich Harris proposed the idea of TWAs [4]
5

• By his definition, TWAs mix ideas from SPAs and the traditional
web
5

web
• TWAs utilize SSR for fast initial loading times
5

web
• TWAs are resilient as they work without JavaScript by default
5

web
• TWAs are resilient as they work without JavaScript by default
• TWAs provide consistent experience and accessibility as a
built-in feature
5

Progressive enhancement in a nutshell (2008) [3]
6

Disappearing frameworks [2]
• According to Ryan Carniato [2], disappearing frameworks come
with almost a zero cost and disappear from an application
7

• The starting point forms a contrast to the current breed of
frameworks that load upfront and rely on expensive hydration
for SSR
7

• The starting point forms a contrast to the current breed of
frameworks that load upfront and rely on expensive hydration
for SSR
• Changing the fundamental viewpoint allows for new
architectures to emerge and it’s consistent with the idea of TWAs
7

Upcoming technologies
• SolidJS - React done ”right”
8

• Marko - HTML re-imagined as a language for building dynamic
and reactive user interfaces
8

• Fresh - Web framework with zero runtime overhead, islands, no
build step, no configuration, oriented around (P)React
8

• Remix - React framework mixing frontend and backend designed
with the edge in mind
8

• Remix - React framework mixing frontend and backend designed
with the edge in mind
• Qwik - No hydration, automatic lazy loading, and more
8

Islands architecture implemented by Etsy [1]
10

Islands architecture compared [7]
11

Islands oriented solutions
• 11ty/is-land - a new performance-focused way to add interactive
client-side components to your web site
12

• îles - Powered by Vite, supports many frameworks (Vue, React,
Preact, etc.) for islands
12

• Capri - Powered by Vite, live CMS integration, early release
12

• Capri - Powered by Vite, live CMS integration, early release
• Astro - Lots of integrations, provides a model for mixing
interactivity with content
12

Resumability in Qwik
• Qwik was initiated by Miško Hevery (Angular.js)
13

• It’s a new take on how to build web applications
13

• The big idea is resumability and the avoidance of hydration
13

• In other words, Qwik serializes the application/framework state
into HTML when rendering the application
13

• In other words, Qwik serializes the application/framework state
into HTML when rendering the application
• It leverages JSX but implements state via reactive bindings and
avoids component re-rendering
13

Gustwind - SSG driven by JSON
• Earlier solution of mine (Antwar) started showing its age
14

• I also wanted to learn to use Deno
14

• I also wanted to learn to use Deno
• As a result, I started playing around with ideas and came up with
Gustwind
14

Gustwind - Design principles
• Built entirely around JSON definitions (routes, components) and
distilled to a bare minimum
15

• Went with Twind for styling and Sidewind for state (both are
loosely coupled)
15

loosely coupled)
• Side effect - it’s possible to write editors on top of it
15

loosely coupled)
• Side effect - it’s possible to write editors on top of it
• Also reasonably fast and parallelized
15

Breezewind - Templating
• Breezewind forms the core of the component system
16

• It has been heavily inspired by the semantics of React (context,
props, etc.)
16

props, etc.)
• Think of it as an extensible JSON to HTML/XML transformer
16

props, etc.)
• Think of it as an extensible JSON to HTML/XML transformer
• Designed to run on top of Cloudflare Workers (no eval)
16

What to expect in the coming years
• Exploration of shipping less JavaScript to the client and being
smarter about it
17

smarter about it
• More edge-oriented solutions
17

smarter about it
• Frontend meets backend in unexpected ways
17

smarter about it
• SSGs with more user and designer-focused features (think
editing UIs on the web)
17

smarter about it
• SSGs with more user and designer-focused features (think
editing UIs on the web)
• AI and machine learning-driven tools (variant generation etc.)
17

Thank you! Time for your questions
17

References i
Etsy engineering: Mobius: Adopting jsx while prioritizing user
experience, 2021.
CARNIATO, R.
Understanding transitional javascript apps, Nov 2021.
GUSTAFSON, A., OVERKAMP, L., BROSSET, P., PRATER, S. V., WILLS, M.,
AND PENZEYMOOG, E.
Understanding progressive enhancement, Oct 2008.
HARRIS, R.
Have single-page apps ruined the web?, Oct 2021.
MILLER, J.
Islands architecture, 2020.

References ii
SHI, W., CAO, J., ZHANG, Q., LI, Y., AND XU, L.
Edge computing: Vision and challenges.
IEEE internet of things journal 3, 5 (2016), 637–646.
TEAM, T. P.
Islands architecture, Oct 2021.

JavaScript frameworks of tomorrow

More Related Content

Similar to JavaScript frameworks of tomorrow

More from Juho Vepsäläinen

Recently uploaded

JavaScript frameworks of tomorrow