Dieser Vortrag gibt einen Überblick über die aktuellen Single Page Applikation Frameworks und versucht diese zu vergleichen. Der Fokus liegt dabei auf den aktuellen "Top 3" der SPA Frameworks: Angular, React und Vue.js. Der Vortrag schaut aber auch über den Tellerrand und beleuchtet aktuelle Trends und Entwicklungen. Dabei werden die neueren Ansätze von Balzor, Vaadin und Flutter den traditionellen SPA Frameworks gegenübergestellt.
2. Jonas Bandi
jonas.bandi@ivorycode.co
m
@jbandi
About Me
- Freelancer, in den letzten 6 Jahren vor allem in Projekten im
Spannungsfeld zwischen modernen Webentwicklung und
traditionellen Geschäftsanwendungen
.
- Dozent an der Berner Fachhochschule seit 200
7
- In-House Kurse & Beratungen zu Web-Technologien im Enterprise:
UBS, Post
fi
nance, Mobiliar,AXA, BIT, SBB, Elca,Adnovum, BSI ...
JavaScript / Angular / React /Vue.js
Schulungen & Coachings,
Project-Setup & Proof-of-Concept
:
http://ivorycode.com/#schulung
3. Agenda
Single Page Applications -The Foundatio
n
The "Big 3" of SPA Framework
s
Critique of "standard" SPA development
.
TypeScript:An important choic
e
Looking beyond "traditional" SPAs.
4.
5. A single-page application (SPA) is a web application
that interacts with the user by dynamically rewriting the
current web page with new data, instead of the default
method of the browser loading entire new pages.
https://en.wikipedia.org/wiki/Single-page_application
6. SPA Demo
:
https://spa-demos.herokuapp.com/todo3/
- the document is just "a shell" to deliver the applicatio
n
- the application is mainly delivered as JavaScrip
t
- client-side renderin
g
- the use of HTML is minimal (but the DOM is heavily used)
7. Single Page Application:
A Rich Client running
in the Browser ...
🤔... didn't we have that
before
?
(hint: https://www.microsoft.com/silverlight/new-controls/demo/)
8. Why SPA?
• User Experience
Interactions do not necessary result in a server-roundtrip.
• Architecture: stateful client - stateless server
Makes some scenarios more simple i.e. scaling, fail-over, rolling
deployments ...
• Development: Rich Client Programming
instead of a "page-centric" programming mode
l
• Using the Browser as an Application Platform
Leveraging client-side features: camera, sensors, of
fl
ine, persistence,
multi-threading, noti
fi
cations ...
9. SPA Architecture
Rich client
programming
model in the
browse
r
Clear separation of
concern between
client and server
client-side
rendering:
transforming JS0N
to UI-Elements
View
Model
Components
(Controllers, Presenters,
Services ...)
Client
clear boundary
"JS0N object
model"
Services
Serve
r
Endpoint (REST)
(statele
ss)
Model
(statef
ul)
DTOs
Entities
API
10. Single Page Applications (SPA)
optional ajax request
data
http://thedomain:80/app
http://thedomain:80/api/data/
fi
rst
http://thedomain:80/app#
fi
rst
"navigate" to "
fi
rst"
screen
Start using the applicaton
Browser Server
initial request
html-shell
assets
load data
&
render screen with JS
html-shell is loaded
loading...
app
bootstrapping
Network
Cost
CPU Cost
11. Downsides
• Initial loading of a SPA takes several roundtrips
"Time to
fi
rst meaningful paint" is slower than with a
traditional web application.
• Search EngineVisibility
Content is not visible visible without executing
JavaScript.
(of pure SPAs)
Note:These drawbacks can be mitigated by implementing an initital Server-Side
Rendering (SSR) of SPAs.
19. Choosing the
fl
avor of "state-of-the-art" SPA
frontend framework is not a critical success
factor for your project
.
Architecture, tooling, development process
and organizational factors have an order of
magnitude more in
fl
uence on the success of
your project.
Does it even matter?
Angular, React andVue are very similar.
20. Typical Single Page
Applications
Vue
Angular
React
Angular, React andVue Projects are very similar
:
• based on modern JavaScript (incl.TypeScript support
)
• built on top of the npm ecosyste
m
• require Node.js & npm tooling at build-tim
e
• heavy conceptual separation of frontend and backen
d
• "unopinionated" about backend technologie
s
• embracing the Browser as "application platform"
21. Angular
• Developed by Googl
e
• AngularJS: released 200
9
• very successful in the enterprise
spac
e
• huge ecosystem & communit
y
• Angular: released 201
6
• Version 2 was a complete rewrite
with no backward compatibilit
y
• current version:Angular 11
• Written inTypeScrip
t
• Internally used at Google for "2000+
applications"
22. Angular
• A framework for single page applications (DOM is rendered by Angular
)
• Components as the primary building block
s
• Views are based on template
s
• Aspires to be a "complete framework" for application development
.
• provides some "of
fi
cial" libraries like "Angular Material" component library and the CD
K
• EmbracesTypeScript and RxJ
S
• Popular in many "enterprise"-companies (government, banks,
insurances ...) for inhouse applications
.
• Tendencies to move away from the "mainstream" JavaScript ecosyste
m
• Some unfortunate (legacy) design choices.
i.e. not working with async/await, a "cumbersome" module system makes tree-
shaking, dependency tracking and lazy-loading harder, "pollution" of the DOM with
non-standard elements ...
23. Personal Opinion:Angular
TypeScrip
t
- TypeScript is enforce
d
- APIs are designed withTypeScript
in min
d
- DX & long term maintainabilit
y
Angular did improve a lot from version
2 to version 11 in regard to
performace breaking the API
.
"Complete Framework": addressing all
aspects of SPA development. However
"heavily opinionated".This provides
structure/homogenity but removes
fl
exibility
.
Rich ecosystem. Especially complete &
commercial component libraries
.
Big community with an "enterprise
background".
Strength Weakness
Huge API & lot of accidental complexity
.
In many cases the "Angular way" is more
complex and less elegant than with other
frameworks (i.e. lazy loading, Zone.js, change
detection, component registration,AOT,
router, Dependency Injection ...)
.
Zone.js: Patching the browser
.
Heavily dependent on opinionated tooling
(lock-in)
.
In reality there is still need for 3rd party
libraries (i.e i18n)
.
Missing innovation:Angular seems in
"maintenance mode" and "
fi
ghts with legacy"
and team exodus in 2020
https://dev.to/layzee/angular-struggles-in-2020-1po4
25. React
React is a JavaScript library for building user interfaces
.
Created by Facebook in 2013.
CurrentVersion: 17 (v16 "react
fi
bre" was a complete rewrite)
https://reactjs.org/
https://facebook.github.io/react/
Core Principles:
The DOM is created programmatically.
JSX enables declarative DOM programming.
A virtual DOM abstracts the real DOM.
One-way data
fl
ow instead of two-way data binding.
26. React
• A framework for single page applications (DOM is rendered by
React
)
• Components as the primary building block
s
• Views are based JavaScript (JSX
)
• Leverages the power of JavaScrip
t
• Works perfectly withTypeScrip
t
• Just the "UI-library". Must be combined with other libraries for
building applications
.
• Very popular, many public applications (outlook.com, jira, zalando,
net
fl
ix ...
)
• Very popular among developers
27. React is not a Framework
• React is "only" a view library (however recently the scope is growing).
• React needs to be combined with other libraries/
frameworks to build a full stack for building a
frontend-applicatio
n
• Backend-Access (http, websocket ...
)
• Routin
g
• i18
n
• Styling
…
• State-Management
28. Personal Opinion: React
Very simple yet powerful & elegant core
.
Innovation (Hooks, Concurrent, Server Components ...)
Completely embracing JavaScript (no templating
language).
Works great withTypeScript (even better than Angular
)
Limited scope: "Just a UI library": Flexible and
unopinionaed
.
Can be combined with best-of-breed libraries
.
Very elegant component / composition model
with JSX/JavaScript
.
Enabling many elegant reuse- and composition
patterns
.
(i.e. higher order components, render properties,
compound components ...
)
Amazing "async" features (concurrent mode &
suspense) in future version.
Strength Weakness
Limited scope: "Just a UI library":You have to
build your own stack (router, styling, i18n, ajax
...
)
"Wild-West" in the ecosyste
m
(i.e. Router, Styling, State Management
)
Focus on immutable data & functional
concepts
.
Ecosystem is not fully based onTypeScript
based (but most major 3rd party libraries
are).
30. Vue.js
A progressive, incrementally-adoptable JavaScript framework for building UI on the
web
.
Initially created in 2014 by EvanYou (former Google employee)
CurrentVersion: 3 (v3 was a complete rewrite inTypeScript)
The most popular JS Framework on GitHub.
Very popular in Asia (Alibaba, Baidu ...)
.
HTML-based templating using the real DOM or a virtual DOM.
Programming model on plain JavaScript objects ("Options API")
Alternative "functional" Programming model ("Composition API") (similar to React Hooks)
Unobtrusive reactivity system and 2-way databinding.
Small (23kb) and blazing fast.
Huge ecosystem.
Many "similarities to AngularJS" (Advocates:This is how Angular 2 should have looked like)
https://vuejs.org/
31. Vue.js
https://vuejs.org/
• A "progressive" framewor
k
• Can be used to enhance an existing DO
M
• Can be used to create complete client-side
rendered single page application
s
• Components as the primary building block
s
• Views are based on template
s
• Many "similarities to AngularJS
"
• Very popular in Asia (Alibaba, Baidu ...)
.
• Very popular among developers
32. Personal Opinion:Vue
Focus on simplicity
.
Driven by the community
.
Innovation in v3.
Clean API.
Excellent documentation!
Vue scales better down for smaller/simpler
projects
.
Usable without build-system, just ES5
.
Best performance compared with Angular
and Reac
t
Reactivity system based on mutability
(intuitive OO programming paradigm
)
Of
fi
cial solution for routing and advanced
state management
.
Great CLI (v3)
Strength Weakness
TypeScript integration is not (yet)
default nor "state of the art
"
Weakest support of commercial
components
.
"Magic" with proxied objects can
sometimes be confusing (i.e. this-
binding, props initialization ...).
33. Key Differences
Templating
Framework vs Library
JSX: declaring UI
with code
templates: enhancing html
with dynamic constucts
single
fi
le
components
separate
fi
les or
inlined strings
(Vue also supports render
functions with JSX)
"complete" framework with
opinionated choices
small & unopinionated
library that must be
combined with other
libraries
small & unopinionated library
providing default options for important topics
(router, centralized state management)
34. Key Differences
Reactivity
simulated transparent reactivity based
on mutable state (Zone.js)
optional: explicit reactivity based on
immutable state and streams
transparent reactivity based
JavaScript proxies
explicit change detection
based on immutable state
Component Programming Model
based on classes Vue 3: new functional API (composition API
)
Object based API is still available.
React 16.8: new functional
API ("Hooks")
35. Performance Comparison
JavaScript Frameworks, Performance Comparison 2020:
https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce
Conclusion:
• Angular, React andVue are very close when it
comes to framework performance.
(DOM rendering performance, startup metrics, memory usage)
• Vue is the fastest,Angular the slowest
.
• The differences are not signi
fi
cant for typical "line
of business" applications
.
• There are many modern frameworks that are
faster than Angular, React andVue.
36. Who do you (want to) trust?
Open Source Community
(with many
fi
nancial sponsors)
37. https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3
https://twitter.com/jbandi/status/985632666405031936/
Projects killed by Google
:
https://killedbygoogle.com/
How many frontend frameworks
make sense for Google long-term?
https://medium.com/@oneminutejs/if-a-t-rex-eats-evan-you-will-vue-survive-d496a4b99872
Angular Struggles in 2020
https://dev.to/layzee/angular-struggles-in-2020-1po4
https://twitter.com/ThomasBurleson/status/1283902169226280960
https://medium.com/@jeffbcross/jeffs-letter-to-the-angular-team-and-community-5367934a16c9
"deprecated" end of 2020 in favor of Flutter
Angular is used differently at Google (no Angular CLI, no Webpack) and Google has different needs.
In 2020 many prominent Angular team menbers left the team.
40. SPA Alternatives:
"don't re-implement the rendering engine of browsers"
"unobtrusive JavaScript" / "progressive enhancement"
• ROCA: Resource-Oriented Client Architecture
https://roca-style.org/
• Hotwire: HTML over the Wire
https://hotwire.dev/
• Unpoly:The unobtrusive JavaScript framework for server-side web applications
https://unpoly.com/
• htmx: high power tools for HTML
https://github.com/bigskysoftware/htmx
Why I hate your Single Page App: https://medium.com/free-code-camp/why-i-hate-your-single-page-app-f08bb4ff9134
Escaping the SPA rabbit hole with modern Rails: https://medium.com/@jmanrubia/escaping-the-spa-rabbit-hole-with-turbolinks-903f942bf52c
https://twitter.com/dhh/status/1341420143239450624
"From an architectural
perspective, most single page
apps are the result of making
the wrong choices and missing
important opportunities."
- StefanTilkov,Why I hate your SPA
https://medium.com/free-code-camp/why-i-hate-your-single-page-app-f08bb4ff9134
41. APIs: Essential or Accidental?
There are conceptual APIs and then there are technical APIs.
"Few organizations are in the business of delivering APIs.
"
- StefanTilkov
Wait, what? Our microservices have actual human users?
https://www.youtube.com/watch?v=pU1gXA0rfwc
In many projects,APIs are just built as a technical necessity
resulting from the split between frontend and backend.
But the value comes from the full-stack application only.
Building and maintaining APIs is effort, adds complexity and costs
money! If there is no value in the API itself, this is wasteful!
SoftwareArchitekTOUR-Podcast Episode 82:APIs – was zeichnet sie aus und was sind die Herausforderungen?
https://www.heise.de/developer/artikel/Episode-82-APIs-was-zeichnet-sie-aus-und-was-sind-die-Herausforderungen-5068881.html
42. The Node/npm Ecosystem
Maven Central has 377,808 unique artifacts
.
nuget.org has 242,951 packages.
www.npmjs.org
https://unpm.nodesource.com/
http://www.modulecounts.com/
(9. February 2021)
npm Inc. belongs to GitHub Inc. which is
a subsidiary of Microsoft since 2018.
52. TypeScript is a superset of JavaScript
This is a differentiating factor compared other languages that compile to JavaScript:
https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
54. • … is a compiler that provides modern
(ES2015+) language features for older Browser
s
• … is a compiler that provides some future
ESnext language features (i.e. decorators, class
fi
elds …
)
• … is a compiler that adds an optional static
type system on top of JavaScript
.
• … is aalso compiler that provides a few constructs that are not
available in JavaScript (enums, namespaces) - however today it is "good
practice" not to use these
TypeScriptToday
T
r
a
n
s
p
i
l
e
r
T
y
p
e
C
h
e
c
k
e
r
"
l
e
g
a
c
y
"
56. TheValue ofTypeScript
• for long-lived projects that are maintained and
extended by a changing team, the bene
fi
ts of
TypeScript are typically much bigger than the
drawbacks
.
• TypeScript integrates neatless into the JavScript
Ecosystem
.
• TypeScript has the biggest momentum and
community compared to alternatives
(personal opinion)
59. It isTypeScript with JavaScript ...
We don't see it as our job to add new features in the core languguage.We
closely track ECMA Script.We innovate in the type system, which is a
"development-time-only-thing"
.
- Anders Hejlsberg 2018
https://www.youtube.com/watch?v=ET4kT88JRXs
A bet onTypeScript is a bet on JavaScript
!
TypeScript and JavaScript are allies in trying to make cool things in JavaScript
.
TheTypeScript team doesn't want to be in-front of JavaScript development but to let JS
lead andTS follow
.
- OrtaTherox from theTypeScript team
https://www.youtube.com/watch?v=8qm49TyMUPI
... notTypeScript versus JavaScript
!
... butTypeScript on top of JavaScript
61. TypeScript support is especially strong for React, since
React does not have it's own templating "language".
JSX is directly supported byTypeScript in a typesafe
way.
Angular is written inTypeScript and the whole
Angular ecosystem and its community has fully
embracedTypeScript
.
(ignoring AngularDart for this discussion ... especially since it is in a strange state ...)
Vue 3 was a full rewrite inTypeScript (https://github.com/vuejs/vue-next)
The goal was also to provide better support for
TypeScript projects.
TypeScript sees itself as the Switzerland for JavaScript Framework
s
- Anders Hejlsberg,TypeScript: Static types for JavaScript
https://www.youtube.com/watch?v=ET4kT88JRXs
63. Angular, React orVue
?
... it depends ...
It doesn't matter!
Are there approaches with
significant differences?
WebAssembly WebComponents Blazor Vaadin
React Server
Components
New platform capabilities: Alternative framework approaches:
Flutter
64. WebAssembly
https://webassembly.org/
https://developer.mozilla.org/en-US/docs/WebAssembly
WebAssembly is a new type of code that can be
run in modern web browsers
.
It is optimized for performance (size, speed,
execution ...) and runs in the same sandbox as the
JavaScriptVM
.
WebAssembly is designed to be a compilation
target for other languages.
Supported in all
modern browsers
Currently the use-cases of WebAssembly are limited and it is not a
replacement for JavaScript
.
But WebAssembly will evolve and it might become the foundation for
new frameworks based on other languages than JavaScript.
Example:Yew: https://github.com/yewstack/yew
Examples
:
https://squoosh.app/
https://earth.google.com/
https://ruf
fl
e.rs/demo/
https://www.qt.io/qt-examples-for-webassembly
https://www.scandit.com/products/web-sdk/
https://ffmpegwasm.github.io/
65. Trends
Using W
ebAssembly
O0ther Programming
Languages for SPA Dev
SPA
with Server-
Side Execution
React
Server Components
(only announced)
Blazor Server
(C#)
Vaadin Flow
(Java)
Blazor
WebAssembly
Compiled to
WebAssembly
Cross Plattform Client
Development
embedde
d
WebAssembly
Modules
traditional
SPA Frameworks based
on WebAssembly:
Yew, Percy ...
66. Demos & Examples
WebAssembly Modules in Web
Applications
https://websdk-foodcheck.scandit.com/
https://squoosh.app/
SPA Frameworks based on
WebAssembly
https://yew.rs/
https://github.com/chinedufn/percy
Server-Side Execution:Vaadin https://labs.vaadin.com/business/
Server-Side Execution: Blazor Server https://blazor.syncfusion.com/demos/datagrid/overview?
theme=bootstrap4
WebAssembly: Blazor WebAssembly https://blazor-demo.github.io/
Flutter - WebAssembly https://
fl
utter.github.io/samples/web/charts/#/
Uno Platform - WebAssembly https://ch9.platform.uno/
Qt - WebAssembly https://www.qt.io/qt-examples-for-webassembly
Just for Fun: 🤔... DéjàVu? https://ruf
fl
e.rs/demo/
67. Rich Client vs Client-Side Rendering
1. Rich Client Architecture:
The browser is a runtime platform that offers many
capabilities beyond rendering the UI.
(traditionals SPAs:Angular, React,Vue & Blazor WebAssembly,Vaadin Fusion)
2. Thin Client Architecture:
The UI is dynamically rendered in the browser. But the code
de
fi
ning what should be rendered is executed on the server.
(Vaadin Flow, Blazor Server)
Considerations
:
- stateful client / stateless server vs. stateless client / statefull serve
r
- HTML 5 added a lot of capabilities to the browser:
of
fl
ine, persistence, location, sensors, camera, noti
fi
cations ...
Technically there are two different SPA Architectures:
68. Blazor Architecture
Service
Client
Serve
r
"JS0N
object
model"
Blazor Server Blazor WebAssembly
Service
Blazor
Components
Model
"render
batches"
(incremental)
(statele
ss)
(statef
ul)
View
(DOM)
clear
boundary
Service
Model
network
direct access
Client
Serve
r
(statef
ul)
(statele
ss)
"rendering engine" A Blazor
application
can either be
executed on
the server
or in
WebAssembly
View (DOM)
Blazor
Components
Model
.NET
Runtime
Endpoint
JS interop
potential
re-use if
server is in
.NET
websocket
any
backend
technology
69. "Rendering" of Single Page Applications
A single-page application (SPA) is a web application that interacts with the user by dynamically
rewriting the current web page with new data, instead of the default method of the browser
loading entire new pages.
client consumes
"plain" data
client consumes
"render instructions"
using the D0M as
"canvas" to draw
widgets
using the D0M as
view-layer
Flutter
Flash
Silverlight
Java Applets
Angular, React,
Vue ...
Vaadin Fusion
Blazor
WebAssembly
Blazor
Server
Vaadin Flow
React Server
Components
"state-of-the-art"
SPA development
"new" technology
"new" technology
not yet released
depricated
technology
"new" technology
(rich use of DOM elements)
(typically JSON over REST)
(optionally using
WebAssembly via canvaskit)
(using litElement & lit-html)
many other SPA frameworks, some new
fl
avors
are using WebAssembly:Yew, Percy ...
https://en.wikipedia.org/wiki/Single-page_application
Compiled to
WebAssembly
70. Server-Side Execution of Single Page Applications
https://angular.io/guide/universal
https://vuejs.org/v2/guide/ssr.html
https://reactjs.org/docs/react-dom-
server.html
https://vaadin.com/docs/
fl
ow/
Overview.html
https://docs.microsoft.com/en-us/aspnet/
core/blazor/hosting-models?
view=aspnetcore-5.0#blazor-server
https://reactjs.org/blog/2020/12/21/data-
fetching-with-react-server-
components.html
Initial Server Side Rendering (SSR).
Interactions/Commands are sent to
the server. Components are
executed on the server. Render-
instructions are sent to the client
Interactions/Commands are sent to
the server. Components are
executed on the server. Render-
instructions are sent to the client
Request is sent to the server.
Components are executed on the
server. Render-instructions are sent
to the client.
Rich-client, occationally connected,
stateless backend
-
Performance optimization for "Time
to
fi
rst Paint"
Thin-Client
,
always connected client, stateful
server.
Thin-Client
,
always connected client, stateful
server.
occationally connected client,
backend stateless.
Certain logic can be executed on
the server (data-access, usage of
heavy libs)
Server Side Execution of
Components in Node.js
Server-side execution of Java Server-Side execution of .NET
Server Side Execution of
Components in Node.js
Components are initially executed
on the server and subsequently on
the client
.
Vaadin Flow components are always
executed on the server
.
Can be combined with client-side
components ofVaadin Fusion.
Application can either be executed
on the server or on the client.
All components are eiter executed
on the server or on the client. No
mixed runtime
.
Same code. Same programming
model.
Server Components are typically
mixed with client components
.
React server Components are
always executed on the server.
Reuse of Code.
(Same programming model on client
& server)
No Application Code-Reuse
betweenVaadin Flow (server
components) andVaadin Fusion
(client components)
.
Different Programming Model for
Vaadin Flow andVaadin Fusion.
Reuse ofToolchain and low-level
components.
Reuse of Code.
(Same programming model on client
& server)
No Application Code-Reuse. Same
programming model (with some
restrictions) for servera and client
components.
React Server
Components
Blazor Server
Vaadin Flow