Web application development - The past, the present, the future

Juho Vepsäläinen
Web application development
The past, the present, the future
v2.0 2023-09-12

What to expect
Early web
Browser wars
Languages of the web
Story of three runtimes
Rise of the SPAs
Full stack JavaScript
Beyond SPAs

Early web
Source: https://www.ll.mit.edu/about/history/sage-semi-automatic-ground-environment-air-defense-system

Prehistory
• 1963 - SAGE, the
fi
rst air defense system of the US was activated [Lincoln]
• 1965 - Two computers at MIT Lincoln Lab communicated with one another
using packet-switching technology [Zimmermann]
• 1969 - ARPANET, the predecessor of Internet was developed
• 1983 - Internet started as ARPANET and Defense Data Network (DDN) moved
to use the TCP/IP protocol

Prehistory cont.
• 1984 - The Finnish Ministry of Education established Finnish University
Network (FUNET) to develop a computer network for universities and
researchers [FinInternet]
• 1988 - Finland gains access to ARPANET through NSFNET. Jarkko Oikarinen
invented the Internet Relay Chat (IRC) [FinInternet]
• 1989 - Some FUNET members can access Internet via Datanet [FinInternet]
• Further reference: How the Internet Happened: From Netscape to the iPhone

Source: A Review on Client-Server based applications and research opportunity - Santosh Kumar

1992
World wide web
• Both hypertext and information
retrieval and access systems
existed before the web was
invented. www combined the
ideas (hyperlinks). [Berners-Lee]
• Websites can consist of data
indices and individual pages that
may either exist in a
fi
le system
or be completely virtual
• Later on search engines emerged
Source: http://info.cern.ch/hypertext/WWW/TheProject.html

1993
cgi-bin
• cgi-bin was an early attempt to
describe web servers coming
from National Center for
Supercomputing Applications
(NCSA) [cgi-bin]

1994
PHP [Lerdorf]
• Started as cgi-bin binaries
authored in C by Rasmus Lerdorf
to cover common tasks (logging,
tracking, server-side includes
etc.)
• PHP 2 morphed the solution to a
language (big university project)
• Starting from PHP 3 (Suraski,
Gutmans), the language took o
f

1998
Document Object Model
• "...a platform- and language-neutral
interface that allows programs and
scripts to dynamically access and
update the content, structure and style
of documents” [Wood]
• "Before DOM, every browser, editor,
and transformation engine handled
things their own way. With DOM, you
can write scripts that will work in of
di
ff
erent browsers and editors” [Phillips]
• Independent of a programming
language [MozillaDOM]
Source: https://pixabay.com/photos/lone-tree-tree-oak-clouds-1934897/

MPAs
Early applications (esp. e-commerce)
Source: https://www.simicart.com/blog/spa-vs-mpa/

Browser wars
Source: https://www.webdesignmuseum.org/gallery/google-1998

Nexus
1990 - Berners-Lee [Routley]

Lynx
1992 - University of Kansas [Lynx]

ViolaWWW
1992 - University of California [Viola]

Erwise
1992 - Helsinki University of Technology [Erwise]

NCSA Mosaic
1993 - NCSA [Mosaic]

1994
Netscape Navigator
• "After his graduation from UIUC in 1993, Marc Andreessen (former Mosaic)
teamed up with Jim Clark, the founder of Silicon Graphics, to produce a
commercial version of the browser” [Routley]
• "The company soon staged a wildly popular IPO, which saw the 16-month-
old startup reach a valuation of nearly $3 billion.” [Routley]
• Bought by America Online (AOL) for $4.2 billion in 1998

1994
Internet Explorer
• "A new competitor “born” on the Internet is Netscape. We have to match and beat
their o
ff
erings…” - Bill Gates [Routley]
• "...captured Microsoft’s attention. Immediately after Netscape IPO, the
fi
rst version of
Internet Explorer (building o
ff
a licensed version of Spyglass' Mosaic) was released.
The browser wars had begun.” [Routley]
• "Released in August 1995, the new browser was a dud. Although it was free to
consumers and was bundled with Windows, it was also technically buggy and had
only a 3% to 4% share of the market in January 1996.” [Sebenius]
• "While trying to establish Internet Explorer in the browser market, Microsoft was also
investing hundreds of millions of dollars in its own online service, Microsoft Network
(MSN)” and went against America Online (AOL) [Sebenius]

1996
Netscape vs. Internet Explorer
Source: https://commons.wikimedia.org/w/index.php?curid=1128061

1996
Why did Microsoft win?
• "First, on March 11, 1995, Netscape and AOL announced a deal in which
Netscape appeared to have triumphed over Microsoft. ... Yet on March 12, the
very next day, AOL and Microsoft announced a stunning deal that supplanted
the Netscape-AOL agreement.” [Sebenius]
• Bill Gates sacri
fi
ced short and medium term position to win the browser wars
with the deal [Sebenius]

1998
Mozilla
• "The Mozilla project ... was intended to harness the creative power of
thousands of programmers on the internet and fuel unprecedented levels of
innovation in the browser market” [MozillaHistory]
• "After several years of development, Mozilla 1.0, the
fi
rst major version, was
released in 2002” [MozillaHistory]
• "In 2003, the Mozilla project created the Mozilla Foundation” [MozillaHistory]
• "Firefox 1.0 was released in 2004 and became a big success — in less than a
year, it was downloaded over 100 million times.” [MozillaHistory]

2008
Google Chrome
• "After developing a range of rich and complex Web apps, the company saw
that it was time to build a browser from scratch that could better handle
today's web” [Gray]
• "...innovated in four key areas, namely speed, simplicity, security and
stability” [Gray]
• Google wanted to bridge the gap between desktop and web applications
(later on PWAs and so on)
• One of the side e
ff
ects of the work was the birth of the highly performant V8
JavaScript runtime

2009
Internet Explorer vs. Google Chrome
Source: https://www.statista.com/chart/1438/browser-market-share-since-2008/

Languages of the web
Source: https://pixabay.com/photos/technology-computer-code-javascript-1283624/

1994
Cascading Style Sheets (CSS)
• In 1994 as the web was starting to
gain popularity, there was no way to
style documents
• Initial thinking of Tim Berners-Lee
was that styling is a browser level
concern
• Demand from content authors led to
the birth of
fi
rst draft of CSS in 1994
• To ensure browser compliance, so
called ACID tests were developed
starting from 1998

1995
HyperText Markup Language (HTML)
• A simple markup language used
to create hypertext documents
that are platform independent
[Berners-Lee]
• In use since 1990 but formalized
as a standard in 1995

1995
JavaScript
• Developed by Brendan Eich in ten
days at Netscape [Eich]
• "I am not proud, but I am happy that
I chose Scheme-ish
fi
rst-class
functions and Self-ish (albeit
singular) prototypes as the main
ingredients. The Java in
fl
uences,
especially y2k Date bugs but also
the primitive vs. object distinction
(e.g., string vs. String), were
unfortunate.” [Eich]
• Read: JavaScript: The First 20 Years

2012
TypeScript
• Microsoft’s TypeScript was a
successful attempt to bring
typing on top of JavaScript
• It came with features such as a
class syntax and di
ff
erent ways
to compose types
• It performs only a compile-time
check and it does not perform
runtime checks by design
Source: https://www.typescriptlang.org/

2015
ES2015
• ES2015, or ES6, was the
fi
rst major
version of the ECMAScript since
2009
• It included several major features
such as class syntax, o
ffi
cial module
syntax, arrow expressions to
mention a few
• Since ES2015, the standard has
been updated on a yearly basis to
avoid the addition of so many
features at once while keeping the
release cycle predictable
Source: https://babeljs.io/docs/learn/

2019
Web Assembly
• “…a safe, portable, low-level code
format designed for e
ffi
cient
execution and compact
representation” [WebAssembly]
• In other words, it's a good target for
higher level code
• Depending on the use case, it can be
at least as fast or even considerably
faster than plain JavaScript while
providing strong typing and a light
binary format [wasm]
Source: https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format

Task for later: Look up Flash, Java (applets),
and Silverlight and consider what the web
might look like if the open web hadn’t won

Story of three runtimes
Source: https://pixabay.com/photos/macro-cogwheel-gear-engine-vintage-1452987/

First JavaScript runtimes
• 1996 - SpiderMonkey by Brendan Eich was the
fi
rst JavaScript runtime and it
was developed. It's still in use by Mozilla Firefox
• 1997 - Rhino was one of the
fi
rst major JavaScript engines published open
source (Java, still active)
• 2008 - V8 by Google is an open source JavaScript engine famous for its high
performance
• 2009/2020 - Chakra by Microsoft was initially proprietary but became open
source in 2020

2009
Jack, Narwhal, and Node.js
• Jack was an early port of Rack (Ruby) for the JavaScript JSGI web server
interface. The idea was to reach a standard implementation similar to what's
available for Ruby, Python (WSGI), or Perl (PSGI) [JSGI]
• Narwhal, built on top of Jack, went one step further to "a platform for creating
server-side JavaScript web applications and frameworks such as Nitro”
• Node.js went its own path and won the race (maybe due to faster innovation
and arguably due to leveraging V8)

2009
Node.js
• Ryan Dahl developed Node.js on Google's performant V8 runtime to allow
development of JavaScript based servers and tools
• From early on, Node.js leveraged the CommonJS module de
fi
nition. Later on
this became a problem but it served well in the beginning.
• Starting from early versions, Node.js captured the imagination of the
community and it took o
ff
fast as a technology in its
fi
rst years
• These days Node.js is used in a large variety of contexts (web servers,
electronics, Finnair planes)

2018
Deno
• Deno is Ryan Dahl's (Node.js) new JavaScript runtime
• Deno supports both JavaScript and TypeScript
• It comes with stronger emphasis on security than Node.js
• It supports an url based way to consume modules (npm is also supported)
• It's best to consider Deno as an opinionated toolkit as it comes with many
necessary tools out of the box
• Deno Deploy o
ff
ers an edge platform built around Deno runtime

2022
Bun
• Bun is a high performance JavaScript/TypeScript runtime developed using the
Zig low-level language by Jarred Sumner
• Since its introduction, it has raised brows across the JavaScript community
• In 2022, Bun raised $7m of funding for its development company called Oven
• In September 2023, the project reached 1.0

Node.js vs. Deno vs. Bun
• Node.js is the incumbent solution but does it have a long term future?
• Deno is more like a toolkit and it's approaching similar problems from a
di
ff
erent angle with more opinions
• Deno’s development seems to have sped up Node.js as well (new features
appear faster)
• For now, Bun seems like the same thing but faster although as a new solution
it comes with relative instability (bugs in APIs, no full compatibility always,
new quirks). Deno feels stable in comparison

Rise of the SPAs
Source: https://pixabay.com/photos/macbook-laptop-ipad-apple-computer-624707/

1999
Asynchronous JavaScript (AJAX)
• Before AJAX, any interaction on a page required navigation
• After Microsoft implemented XMLHttpRequest in Internet Explorer, performing
computation in the background without reloading became possible
[Woychowsky]
• It was only a few years later that the idea made it to the mainstream as Single
Page Applications (SPAs) became trendy. Essentially AJAX enabled SPA style
development in additional to key technologies like the History API

SPAs
Esp. social media platforms
Source: https://www.simicart.com/blog/spa-vs-mpa/

2002
Single-page applications (SPAs)
• Instead of refreshing pages like in classic Multi-Page Applications (MPAs),
SPAs rely on JavaScript and update the view dynamically based on user
interaction [Flanagan]
• The shift in mindset was enabled by AJAX and new DOM APIs (mainly the
History API)
• The adoption of the idea led to an explosion of frontend frameworks
• SPAs have challenges in the domains of Search Engine Optimization (SEO),
accessibility, and performance due to framework requirement and reliance on
JavaScript

SPAs vs. SSR vs. SSG [Pöyry]
Feature SSR (MPA) SPA SSG
Pre-rendered HTML ✓ ✓
Updates without
refresh
✓ Possible
Supports forms ✓ ✓
Through an external
service
O
ffl
ine support in
modern browsers
✓ Possible

2006
jQuery
• Provides abstractions over
common operations
• Became extremely successful
due to simple yet powerful
chaining API. Today 78.5% of
websites use jQuery
(w3techs.com)

Progressive enhancement
2008 - Aaron Gustafson - https://alistapart.com/article/understandingprogressiveenhancement/

2010
Angular.js
• Miško Hevery developed Angular.js for his
startup but as the startup failed, the SPA
framework ended up being open sourced
• If HTML would have been designed for
applications, it could have looked like
Angular.js [Sutar]
• Angular.js relied on custom directives
(HTML attributes) and provided two-way
data binding as one of its main selling
points
• The big innovation was so called digest
cycle during which data bindings would
be evaluated [Pashec]
Source: https://angularjs.org/

2010
Backbone.js
• Backbone.js lets you capture data
models that exposed events through
a data bus from which the views can
render on event. At the same time
views can trigger changes in the
data model. (MV*) [Osmani]
• It provided enough abstraction for
implementation of SPAs
• It's best to think Backbone.js as a
light helper for the implementation of
applications
Source: https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/

2010
Knockout.js
• Knockout.js implemented MVVM
architecture for the web and
relied on observable
implementation of its own for
dependency tracking [Papa]

2013
React.js
• Facebook's (Meta) React.js received its inspiration
from PHP
• React came with JSX, a HTMLish syntax of its own,
that let developers write JavaScript within HTML
• Unlike solutions before, it implemented idea known
as the Virtual DOM (VDOM)
• In other words, React maintains structure of its own
within memory for change tracking and then it
manipulates the real DOM in the background
• In addition, React put strong emphasis on the
concept of components
• React provides a function based API for
components in which logic can be implemented
using hooks
Source: https://react.dev/learn

2014
Vue.js
• Vue.js is a AngularJS inspired
web framework. Compared to
React, it comes with more
opinions out of the box and it
leverages directives
• There's also a lifecycle model
that's comparable to earlier
versions of React (changed with
hooks)
Source: https://vuejs.org/guide/introduction.html

2014
Marko
• Marko by eBay re-imagines
HTML as a language suitable for
reactive UIs. It provides a
declarative, progressive way to
develop
• Marko uses a compiler-based
approach to generate code
that's optimized both for the
server and the browser
Source: https://markojs.com/

Progressive Web Applications
2015 - PWAs are an attempt by Google to bridge the web with native mobile characteristics (persistency,
installation) [Lee]

2016
Svelte
• Svelte by Rich Harris is a
compiler-based approach for
developing web sites and
applications
• Svelte comes with a light syntax
of its own and it's reactive by
design
Source: https://svelte.dev/examples/hello-world

2016
Angular
• Angular is Google's successor to
earlier Angular.js
• To quote documentation, it is "A
component-based framework for
building scalable web
applications”
• It's a complete rewrite and it relies
heavily on TypeScript and RxJS
• Scope-wise Angular is
comparable to Vue.js
Source: https://angular.io/guide/what-is-angular

2016
Storybook
• Storybook is a tool designed for
developing style guides and design
systems
• Storybook started as a solution built on top
of webpack for React.js speci
fi
cally but it
has since then branched out to support
other bundlers and frameworks
• It is particularly useful for component
driven development as it helps you to
visualize your components and their
possible states
• It's possible to implement visual regression
testing and test automation with Storybook
Source: https://storybook.js.org/

Full stack JavaScript
Source: https://pixabay.com/photos/books-stack-book-store-1163695/

2013
Electron
• Electron was an early attempt to allow
development of desktop applications
using JavaScript
• Electron achieved the target by
wrapping Chromium, the open source
version of Chrome, and by providing
desktop speci
fi
c APIs for
fi
le access and
similar desktop speci
fi
c tasks
• The approach became highly successful
and these days many desktop
applications use Electron underneath.
As an example, VS Code, a popular
code editor, is built on top of it.
Source: https://www.electronjs.org/docs/latest/

2016
Next.js
• Next.js is a full stack React.js framework by
Vercel
• In other words, it covers all aspects starting
from the frontend and spanning to the backend
APIs
• Next.js integrates well with Vercel's hosting
solution and it can be deployed on their edge
network for improved performance
• Technically Next.js has been built on top of
webpack, Babel, swc, and other popular tools
so you could consider it as a distribution as well
• The scope of Next.js grows each year and these
days it includes speci
fi
c solutions for analytics,
e-commerce, and other domains
Source: https://nextjs.org/docs/getting-started/installation

2020
Remix
• Remix is a full stack framework built for
React.js
• To quote the site, it's "Focused on web
standards and modern web app UX,
you’re simply going to build better
websites”
• The key point about Remix is that it puts
heavy emphasis on how to connect data
to views
• Remix ships with a custom Form
component that's progressively enhanced.
In other words it works without JavaScript
enabled.
Source: https://remix.run/

Beyond SPAs
Source: https://pixabay.com/photos/fantasy-light-mood-heaven-lovely-2861107/

JavaScript size trend
Source: https://httparchive.org/reports/state-of-javascript?start=2013_04_01&end=latest&view=list

2019
SolidJS
• SolidJS is a reactive JavaScript
framework
• It was inspired by React but it
doesn't use VDOM. If React was
invented today, it would look
something like SolidJS
Source: https://www.solidjs.com/

2021
Astro
• Astro is a full stack framework
built with the islands architecture
in mind
• Astro does not ship JavaScript
by default
• Astro uses a custom format that
allows you to mix content and
JavaScript
Source: https://docs.astro.build/en/concepts/islands/

Islands architecture
Source: https://www.patterns.dev/posts/islands-architecture

2021
Fresh
• Designed to run speci
fi
cally on
Deno edge infrastructure
• Zero client-side cost by default
• Implements islands architecture
• Leverages Preact
Source: https://fresh.deno.dev/docs/getting-started/create-a-route

2021
Qwik
• Qwik is a new JavaScript
framework developed by Hevery
et al.
• Qwik leverages resumability over
hydration and has been
optimized to load light
(automatic code splitting)
• Qwik leverages JSX and adds
reactivity on top
Source: https://qwik.builder.io/docs/getting-started/

Key trends to note
• There is a clear shift towards edge computing on the web
• The latest generation of frameworks can be considered to be disappearing
(so-called disappearing frameworks)
• The shift from a content platform to an application platform is still ongoing
(friction in APIs)
• Consideration: Which technologies/techniques to use and when/where? How
much of these choices can be encoded to frameworks?

Read my booklet
“Disappearing frameworks explained”
(arXiv) to learn more

Thank you
Time for your questions

References
• [Lincoln] - History of Lincoln Laboratories - https://www.ll.mit.edu/about/history
• [Zimmermann] - Internet history timeline: ARPANET to the world wide web -
https://www.livescience.com/20727-internet-history.html
• [FinInternet] - History of the Finnish internet - https://siy.
fi
/history-of-the-
fi
nnish-
internet/
• [Berners-Lee] - World-Wide Web: the information universe - Tim Berners-Lee et
al.
• [cgi-bin] - https://en.wikipedia.org/w/index.php?
title=Common_Gateway_Interface&oldid=1102228140

References cont.
• [Lerdorf] - Programming Php - Rasmus Lerdorf et al.
• [Wood] - Document object model (dom) level 1 speci
fi
cation - Lauren Wood et
al.
• [Phillips] - Designers: the browser war casualties - Barry Phillips
• [MozillaDOM] - https://developer.mozilla.org/en-US/docs/Web/API/
Document_Object_Model/Introduction
• [Routley] - https://www.visualcapitalist.com/internet-browser-market-share/
• [Lynx] - https://en.wikipedia.org/wiki/Lynx_(web_browser)

References cont.
• [Viola] - https://en.wikipedia.org/wiki/ViolaWWW
• [Erwise] - https://en.wikipedia.org/wiki/Erwise
• [Mosaic] - https://en.wikipedia.org/wiki/Mosaic_(web_browser)
• [Sebenius] - Negotiating lessons from the browser wars - James Sebenius
• [MozillaHistory] - https://www.mozilla.org/en-US/about/history/
• [Gray] - Google chrome: The making of a cross-platform browser - James Gray
• [Eich] - https://brendaneich.com/2008/04/popularity/

References cont.
• [WebAssembly] - https://www.w3.org/TR/wasm-core-1/
• [wasm] - https://adservio.fr/post/how-fast-and-e
ffi
cient-is-wasm
• [jsgi] - https://en.wikipedia.org/w/index.php?title=JSGI&oldid=1037280622
• [Woychowsky] - AJAX: Creating web pages with asynchronous JavaScript and
XML - Edmond Woychowsky et al.
• [Flanagan] - JavaScript: The De
fi
nitive Guide - David Flanagan et al.
• [Pöyry] - Next.js ja muut isomor
fi
set sovelluskehykset - Tuomas Pöyry

References cont.
• [Sutar] - Angular JS and Its Important Component - Bibhishan Sutar
• [Pashec] - https://stackover
fl
ow.com/q/9682092
• [Lee] - Pride and prejudice in progressive web apps: Abusing native app-like
features in web applications - Jiyeon Lee et al.
• [Osmani] - Developing Backbone. js Applications: Building Better JavaScript
Applications - Addy Osmani
• [Papa] - https://docs.microsoft.com/en-us/archive/msdn-magazine/2012/
february/client-insight-getting-started-with-knockout

Web application development - The past, the present, the future

Web application development - The past, the present, the future

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Similar a Web application development - The past, the present, the future

Similar a Web application development - The past, the present, the future(20)

Más de Juho Vepsäläinen

Más de Juho Vepsäläinen(11)

Último

Último(20)

Web application development - The past, the present, the future