fooConf - JavaScript frameworks of tomorrow

JavaScript frameworks of tomorrow
Juho Vepsäläinen
FooConf Helsinki – 01.02.2023

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

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

Content delivery networks [5]
4

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

• TWA = pickBestIdeas(traditionalWeb, SPA)
6

• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
6

• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
• TWAs provide consistent experience and accessibility as a
built-in feature
6

Progressive enhancement in a nutshell (2008) [2]
7

Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
8

• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
8

• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
• Changing the viewpoint allows new technical solutions to
emerge
8

Islands architecture (2019) [4]
9

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

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

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

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

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

• Qwik is a new take on how to build web applications
11

• The big idea is deferring work through resumability and the
avoidance of hydration
11

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

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

Why to develop yet another SSG/SSR solution?
• Earlier solution of mine (Antwar) started showing its age
12

• I also wanted to learn to use Deno
12

• As a result, I started playing around with ideas and came up with
Gustwind
12

• As a result, I started playing around with ideas and came up with
Gustwind
• Things went out of hand and now I am doing a PhD about the
topic
12

Gustwind - Design principles
• Built entirely around JSON definitions and distilled to a bare
minimum
13

minimum
• Went with Twind for styling, Sidewind for state, and built
Breezewind for templating
13

minimum
• Reasonably fast and parallelized through Web Workers
13

minimum
• Reasonably fast and parallelized through Web Workers
• Comes with a flexible plugin architecture so any part can be
replaced if and when needed making the solution ideal for
research purposes
13

Twind - Styling
• Twind is an implementation of Tailwind 3 syntax
14

Twind - Styling
• Avoids PostCSS dependency!
14

Twind - Styling
• Constructs extracted CSS through aggregation, not elimination
14

Twind - Styling
• Constructs extracted CSS through aggregation, not elimination
• Supports both style extraction and runtime usage
14

Sidewind - State
• Sidewind is my take on state management
15

Sidewind - State
• The idea was to do the same for state as what Tailwind did for
styling with a React inspired API
15

Sidewind - State
• In other words, it allows you to maintain state within HTML
syntax itself
15

Sidewind - State
syntax itself
• Internally it is a light wrapper to MutationObserver making it
lean
15

Sidewind - State
syntax itself
• Internally it is a light wrapper to MutationObserver making it
lean
• There are also special features related to hydration and
recursive state (think tree structures)
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 Breezewind as an extensible JSON to XML transformer
16

props, etc.)
• Think of Breezewind as an extensible JSON to 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 (start from zero and load smart)
17

• More edge-oriented solutions (how much can we push to the
edge?)
17

edge?)
• Frontend meets backend in unexpected ways (expect more SSGs
to go hybrid)
17

edge?)
to go hybrid)
• SSGs with more user and designer-focused features (think
editing UIs on the web)
17

edge?)
to go hybrid)
• 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!
Questions please
17

References i
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.
Pathan, A.-M. K., Buyya, R., et al.
A taxonomy and survey of content delivery networks.
Grid Computing and Distributed Systems Laboratory, University
of Melbourne, Technical Report 4, 2007 (2007), 70.
18

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.
• Island photo by Julius_Silver
• Hare photo by nathalieburblis
• Jenga photo by Zaimful
• Astro demo
• Qwik demo
• Gustwind demo
19

fooConf - JavaScript frameworks of tomorrow

More Related Content

Similar to fooConf - JavaScript frameworks of tomorrow

More from Juho Vepsäläinen

Recently uploaded

In this document

fooConf - JavaScript frameworks of tomorrow