fooConf Helsinki 2023 version of the slides. Expect to learn a lot about the direction of the frontend.

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

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

3. Current trends

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

5. Client, server, developer
3

6. Content delivery networks [5]
4

7. Edge computing [6]
5

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

9. Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
6

10. Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
• TWAs utilize SSR for fast initial loading times while not relying
on JavaScript
6

11. Transitional web applications (TWAs) (2021) [3]
• In October 2021, Rich Harris proposed the idea of TWAs [3]
• TWA = pickBestIdeas(traditionalWeb, SPA)
• 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

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

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

14. Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
• Strong contrast to the current frameworks that load upfront and
rely on expensive hydration for SSR
8

15. Disappearing frameworks (2021) [1]
• Disappearing frameworks come with almost zero cost and vanish
from the application [1]
• 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

16. Islands architecture

17. Islands architecture (2019) [4]
9

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

19. Islands oriented solutions
• 11ty/is-land - a new performance-focused way to add interactive
client-side components to your web site
• îles - Powered by Vite, supports many frameworks (Vue, React,
Preact, etc.) for islands
10

20. Islands oriented solutions
• 11ty/is-land - a new performance-focused way to add interactive
client-side components to your web site
• îles - Powered by Vite, supports many frameworks (Vue, React,
Preact, etc.) for islands
• Capri - Powered by Vite, live CMS integration, early release
10

21. Islands oriented solutions
• 11ty/is-land - a new performance-focused way to add interactive
client-side components to your web site
• îles - Powered by Vite, supports many frameworks (Vue, React,
Preact, etc.) for islands
• Capri - Powered by Vite, live CMS integration, early release
• Astro - Lots of integrations, provides a model for mixing
interactivity with content
10

22. Demo time (Astro)
10

23. Resumability

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

25. Resumability in Qwik
• Qwik was initiated by Miško Hevery (Angular.js)
• Qwik is a new take on how to build web applications
11

26. Resumability in Qwik
• Qwik was initiated by Miško Hevery (Angular.js)
• Qwik is a new take on how to build web applications
• The big idea is deferring work through resumability and the
avoidance of hydration
11

27. Resumability in Qwik
• Qwik was initiated by Miško Hevery (Angular.js)
• Qwik is a new take on how to build web applications
• The big idea is deferring work through resumability and the
avoidance of hydration
• In other words, Qwik serializes the application/framework state
into HTML when rendering the application
11

28. Resumability in Qwik
• Qwik was initiated by Miško Hevery (Angular.js)
• Qwik is a new take on how to build web applications
• The big idea is deferring work through resumability and the
avoidance of hydration
• 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

29. Demo time (Qwik)
11

30. JSON as the building block

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

32. Why to develop yet another SSG/SSR solution?
• Earlier solution of mine (Antwar) started showing its age
• I also wanted to learn to use Deno
12

33. Why to develop yet another SSG/SSR solution?
• Earlier solution of mine (Antwar) started showing its age
• I also wanted to learn to use Deno
• As a result, I started playing around with ideas and came up with
Gustwind
12

34. Why to develop yet another SSG/SSR solution?
• Earlier solution of mine (Antwar) started showing its age
• I also wanted to learn to use Deno
• 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

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

36. Gustwind - Design principles
• Built entirely around JSON definitions and distilled to a bare
minimum
• Went with Twind for styling, Sidewind for state, and built
Breezewind for templating
13

37. Gustwind - Design principles
• Built entirely around JSON definitions and distilled to a bare
minimum
• Went with Twind for styling, Sidewind for state, and built
Breezewind for templating
• Reasonably fast and parallelized through Web Workers
13

38. Gustwind - Design principles
• Built entirely around JSON definitions and distilled to a bare
minimum
• Went with Twind for styling, Sidewind for state, and built
Breezewind for templating
• 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

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

40. Twind - Styling
• Twind is an implementation of Tailwind 3 syntax
• Avoids PostCSS dependency!
14

41. Twind - Styling
• Twind is an implementation of Tailwind 3 syntax
• Avoids PostCSS dependency!
• Constructs extracted CSS through aggregation, not elimination
14

42. Twind - Styling
• Twind is an implementation of Tailwind 3 syntax
• Avoids PostCSS dependency!
• Constructs extracted CSS through aggregation, not elimination
• Supports both style extraction and runtime usage
14

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

44. Sidewind - State
• Sidewind is my take on state management
• The idea was to do the same for state as what Tailwind did for
styling with a React inspired API
15

45. Sidewind - State
• Sidewind is my take on state management
• The idea was to do the same for state as what Tailwind did for
styling with a React inspired API
• In other words, it allows you to maintain state within HTML
syntax itself
15

46. Sidewind - State
• Sidewind is my take on state management
• The idea was to do the same for state as what Tailwind did for
styling with a React inspired API
• In other words, it allows you to maintain state within HTML
syntax itself
• Internally it is a light wrapper to MutationObserver making it
lean
15

47. Sidewind - State
• Sidewind is my take on state management
• The idea was to do the same for state as what Tailwind did for
styling with a React inspired API
• In other words, it allows you to maintain state within HTML
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

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

49. Breezewind - Templating
• Breezewind forms the core of the component system
• It has been heavily inspired by the semantics of React (context,
props, etc.)
16

50. Breezewind - Templating
• Breezewind forms the core of the component system
• It has been heavily inspired by the semantics of React (context,
props, etc.)
• Think of Breezewind as an extensible JSON to XML transformer
16

51. Breezewind - Templating
• Breezewind forms the core of the component system
• It has been heavily inspired by the semantics of React (context,
props, etc.)
• Think of Breezewind as an extensible JSON to XML transformer
• Designed to run on top of Cloudflare Workers (no eval)
16

52. Demo time (Gustwind)
16

53. Conclusion

54. 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

55. 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)
• More edge-oriented solutions (how much can we push to the
edge?)
17

56. 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)
• More edge-oriented solutions (how much can we push to the
edge?)
• Frontend meets backend in unexpected ways (expect more SSGs
to go hybrid)
17

57. 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)
• More edge-oriented solutions (how much can we push to the
edge?)
• Frontend meets backend in unexpected ways (expect more SSGs
to go hybrid)
• SSGs with more user and designer-focused features (think
editing UIs on the web)
17

58. 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)
• More edge-oriented solutions (how much can we push to the
edge?)
• Frontend meets backend in unexpected ways (expect more SSGs
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

59. Thank you!
Questions please
17

60. 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

61. 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