The future is mostly static

The future is mostly static
Or how we are reinventing the web again
Juho Vepsäläinen

What to expect
1. Introduction
2. Content Management Systems (CMSs)
3. Static Site Generation (SSG)
4. Related work
5. Research
1

Key points from the history of the web
• 1985 - First Content Management System (CMS) called FileNet is
invented
2

invented
• 1989 - First HTML browser comes available
2

invented
• 1992 - Tim Berners-Lee invents the World Wide Web (www) [3]
2

invented
• ca. 1995 - First graphical editors (MS Frontpage etc.) emerge for
creation of websites
2

invented
• 1995 - JavaScript is developed by Brendan Eich
2

invented
• 2002 - The first Single Page Applications (SPAs) emerge
2

invented
• 2015 - Jamstack is specified by Matt Biilmann [8]
2

invented
• 2019 - Islands architecture is formalized [16]
2

invented
• 2019 - Islands architecture is formalized [16]
• 2021 - The idea of Transitional Web Applications (TWAs) is
proposed [7]
2

Content Management Systems
(CMSs)

Pros and cons
Pros
• Enables collaboration across
disciplines
Cons
6

Pros and cons
Pros
disciplines
• Allows developers to save
time by using extensions
Cons
6

Pros and cons
Pros
disciplines
• Many major players exist in
the ecosystem
Cons
6

Pros and cons
Pros
disciplines
the ecosystem
Cons
• Often requires a server
(something to maintain)
6

Pros and cons
Pros
disciplines
the ecosystem
Cons
• Not trivial to understand
6

Pros and cons
Pros
disciplines
the ecosystem
Cons
• Not trivial to understand
• Comes sometimes with
unnecessary complexity
6

Architecture of a headless CMS [1, 11]
7

What is SSG? [10]
SSG is a system consisting of the following:
1. A templating language for website layout and theming.
8

What is SSG? [10]
2. A markup language for content creation (e.g., Markdown).
8

What is SSG? [10]
3. A local development server to preview and test the site before
building.
8

What is SSG? [10]
3. A local development server to preview and test the site before
building.
4. A compile process that builds the final site files into HTML, CSS,
and JavaScript [4]
8

Building blocks of a Jamstack website [17]
9

Traditional web compared to Jamstack [12]
10

Pros and cons
Pros
• Fast page load time [13, 4]
Cons
11

Pros and cons
Pros
• Efficient scalability (through
CDNs for example) and
resiliency [13]
Cons
11

Pros and cons
Pros
resiliency [13]
• Availability and security [13, 4]
Cons
11

Pros and cons
Pros
resiliency [13]
• Automatic versioning [4]
Cons
11

Pros and cons
Pros
resiliency [13]
• Ease of hosting [10]
Cons
11

Pros and cons
Pros
resiliency [13]
Cons
• Tooling is highly developer
oriented
11

Pros and cons
Pros
resiliency [13]
Cons
oriented
• Potentially high
recompilation cost
11

Pros and cons
Pros
resiliency [13]
Cons
oriented
• Potentially high
recompilation cost
• Static by definition
(difficulties in dynamic use
cases)
11

Server-side rendering (SSR) vs. Single Page apps (SPA) vs. SSG
[14]
Feature SSR SPA SSG
Pre-rendered HTML Yes No Yes
Updates without refresh No Yes Possible
Supports forms Yes Yes Ext. service
Offline support in modern
browsers
No Yes Possible
13

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

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

web
• TWAs utilize SSR for fast initial loading times
14

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

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

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

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

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

for SSR
• Changing the fundamental viewpoint allows for new
architectures to emerge and it’s consistent with the idea of TWAs
16

for SSR
• Changing the fundamental viewpoint allows for new
architectures to emerge and it’s consistent with the idea of TWAs
• On a related note, my own solution called Sidewind implements
the idea and comes with a novel pattern for hydration
16

Research questions
1. What are the main benefits and limitations of CMSs and SSGs?
18

Research questions
2. Is it possible to address the limitations of SSGs while keeping
the benefits?
18

Research questions
2. Is it possible to address the limitations of SSGs while keeping
the benefits?
3. What are the means in which SSGs could address their
limitations compared to CMSs?
18

Research plan
• By nature, a constructive approach (design science) fits the
problem well
19

Research plan
problem well
• Besides literature review, the idea is to:
19

Research plan
problem well
1. Interview practitioners and tool authors to understand how they
view the field
19

Research plan
problem well
view the field
2. Construct a model of what SSGs with a high amount of dynamism
could look like
19

Research plan
problem well
view the field
2. Construct a model of what SSGs with a high amount of dynamism
could look like
3. Implement a tool to try out the ideas in practice (Gustwind, in
progress)
19

Contribution to web engineering
1. Increased understanding of the current state of the art
20

2. Understanding of what SSG could look like when combined with
ideas and constraints from the CMS world
20

2. Understanding of what SSG could look like when combined with
ideas and constraints from the CMS world
3. Creation of tooling for the next generation of web developers to
bridge the gap between SSGs and CMSs
20

References i
J. Attardi.
Introduction to netlify cms.
In Using Gatsby and Netlify CMS, pages 1–12. Springer, 2020.
C. Benevolo and S. Negri.
Evaluation of content management systems (cms): a supply
analysis.
Electronic Journal of Information Systems Evaluation,
10(1):pp9–22, 2007.
T. Berners-Lee, R. Cailliau, J.-F. Groff, and B. Pollermann.
World-wide web: the information universe.
Internet Research, 1992.

References ii
R. Camden and B. Rinaldi.
Working with Static Sites: Bringing the Power of Simplicity to
Modern Sites.
” O’Reilly Media, Inc.”, 2017.
R. Carniato.
Understanding transitional javascript apps, Nov 2021.
A. Gustafson, L. Overkamp, P. Brosset, S. V. Prater, M. Wills, and
E. PenzeyMoog.
Understanding progressive enhancement, Oct 2008.
R. Harris.
Have single-page apps ruined the web? | transitional apps with
rich harris, nytimes, Oct 2021.

References iii
S. Kumar.
A review on client-server based applications and research
opportunity.
International Journal of Recent Scientific Research,
10(7):33857–3386, 2019.
J. Miller.
Islands architecture, 2020.
K. Newson.
Tools and workflows for collaborating on static website
projects.
Code4Lib Journal, (38), 2017.
E. O. Obaseki et al.
Micro-frontends for Web Content Management Systems.
PhD thesis, Covenant University, 2021.

References iv
S. Peltonen, L. Mezzalira, and D. Taibi.
Motivations, benefits, and issues for adopting micro-frontends:
a multivocal literature review.
Information and Software Technology, 136:106571, 2021.
H. Petersen.
From static and dynamic websites to static site generators.
university of TARTU, Institute of Computer Science, 2016.
T. Pöyry.
Next.js ja muut isomorfiset sovelluskehykset.
2021.
W. Shi, J. Cao, Q. Zhang, Y. Li, and L. Xu.
Edge computing: Vision and challenges.
IEEE internet of things journal, 3(5):637–646, 2016.

References v
T. P. team.
Islands architecture, Oct 2021.
J. Väänänen.
Jamstack–dynaamisesti toimiva staattinen verkkosivusto.
2019.
A. Yermolenko and Y. Golchevskiy.
Developing web content management systems–from the past to
the future.
In SHS Web of Conferences, volume 110. EDP Sciences, 2021.

The future is mostly static

More Related Content

Similar to The future is mostly static (20)

More from Juho Vepsäläinen (12)

Recently uploaded (20)

The future is mostly static