SlideShare une entreprise Scribd logo
1  sur  71
Télécharger pour lire hors ligne
Qual der Wahl bei den Web-
Frameworks
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
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.
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
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)
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/)
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 ...
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
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
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.
https://twitter.com/slightlylate/status/1201990826575814656
The "Big 3" of SPA Frameworks
1995
2006
2010
2011 2013 2016
AngularJS
Bootstrap
React
Angular
The Frontend JavaScript Ecosystem
Vue.js
2014
1997: ECMAScript 1
1998: ECMAScript 2
1999: ECMAScript 3
2009: ECMAScript 5 2015: ECMAScript 2015
2016: ECMAScript 2016
…
2012:TypeScript
2019: ECMAScript 2019
Inferno
Marko
Polymer
AppRun
Ramda
2011
2020: ECMAScript 2020
Alpine.js
Svelte
https://twitter.com/ralex1993/status/1234165541805281280
https://twitter.com/iamdevloper/status/544815596932968448
Which one is The Best ?
TM
It depends ...
It doesn't matter!
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.
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"
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"
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 ...
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
React
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.
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
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
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).
Vue.js
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/
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
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 ...).
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)
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")
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.
Who do you (want to) trust?
Open Source Community


(with many
fi
nancial sponsors)
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.
To SPA or not to SPA?
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
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
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.
http://www.modulecounts.com/
The JavaScript Dependency "Situation"
Maintenance
A "small" Angular project from 2018:
We are breaking up with JavaScript frontends: http://triskweline.de/unpoly-rugb/#/3
Angular, React orVue
?

... it depends ...
It doesn't matter!
O0ther choices
do matter:
TypeScript
The Rise of TypeScript
Top Languages on GitHub
The 2020 State of the Octovers: https://octoverse.github.com/
https://2020.stateofjs.com/en-US/technologies/javascript-
fl
avors/
+
static types
new (future)
language features
enabling tools
modules, classes, …
The initial Goal ofTypeScript (2012)
ES5
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
DEM
O

https://www.typescriptlang.org/play
• … 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
"
TypeScriptToday
static
types
future


JS
features
+
ES2020+
modern


JS features


for old
browsers
non-JS
expressions


(enum, namespace)
Babel is an alternative transpiler that
replacesTS in many "state-of-the-art"
toolchains.
"obsolete"
Killer-Feature!
JS-to-JS


compilation
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)
Myth:


There can be only one ...
https://shrtm.nu/KWLb
https://shrtm.nu/RmGK
https://shrtm.nu/Q0Cx
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
Myth:


Angular is the best choice if I want
to use TypeScript.
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
Beyond the Horizon


of traditional SPAs
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
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/
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 ...
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/
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:
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
"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
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
JavaScript / Angular / React / Vue.js


Schulung / Beratung / Coaching / Review
s

jonas.bandi@ivorycode.com
http://ivorycode.com/#schulung
Thank You!

Contenu connexe

Tendances

Angular Interview Questions & Answers
Angular Interview Questions & AnswersAngular Interview Questions & Answers
Angular Interview Questions & AnswersRatnala Charan kumar
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSDavid Parsons
 
Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript ApplicationAnis Ahmad
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)Alex Ross
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programmingDmitry Buzdin
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
Gdg dev fest hybrid apps your own mini-cordova
Gdg dev fest hybrid apps  your own mini-cordovaGdg dev fest hybrid apps  your own mini-cordova
Gdg dev fest hybrid apps your own mini-cordovaAyman Mahfouz
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS OrisysIndia
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS introdizabl
 
NGRX Apps in Depth
NGRX Apps in DepthNGRX Apps in Depth
NGRX Apps in DepthTrayan Iliev
 
Html5 Interview Questions & Answers
Html5 Interview Questions & AnswersHtml5 Interview Questions & Answers
Html5 Interview Questions & AnswersRatnala Charan kumar
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 

Tendances (20)

Angular Interview Questions & Answers
Angular Interview Questions & AnswersAngular Interview Questions & Answers
Angular Interview Questions & Answers
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript Application
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programming
 
AngularJS
AngularJSAngularJS
AngularJS
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Angular js
Angular jsAngular js
Angular js
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Gdg dev fest hybrid apps your own mini-cordova
Gdg dev fest hybrid apps  your own mini-cordovaGdg dev fest hybrid apps  your own mini-cordova
Gdg dev fest hybrid apps your own mini-cordova
 
Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
Angular from Scratch
Angular from ScratchAngular from Scratch
Angular from Scratch
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
NGRX Apps in Depth
NGRX Apps in DepthNGRX Apps in Depth
NGRX Apps in Depth
 
Html5 Interview Questions & Answers
Html5 Interview Questions & AnswersHtml5 Interview Questions & Answers
Html5 Interview Questions & Answers
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 

Similaire à Die Qual der Wahl bei den Single Page Application Frameworks

Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsJonas Bandi
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) Sascha Sambale
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Web Application Security Reloaded for the HTML5 era
Web Application Security Reloaded for the HTML5 eraWeb Application Security Reloaded for the HTML5 era
Web Application Security Reloaded for the HTML5 eraCarlo Bonamico
 
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...Bojan Veljanovski
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_jsMohammed Saqib
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
BEdita, a development platform
BEdita, a development platformBEdita, a development platform
BEdita, a development platformStefano Rosanelli
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanAdam Boczek
 
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar Cheekuru  NET UIChandra Sekhar Cheekuru  NET UI
Chandra Sekhar Cheekuru NET UIChandra Sekhar
 
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application Carlo Bonamico
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraLINAGORA
 
Building Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN StackBuilding Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN StackSuresh Patidar
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworksshank
 

Similaire à Die Qual der Wahl bei den Single Page Application Frameworks (20)

Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.js
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Web Application Security Reloaded for the HTML5 era
Web Application Security Reloaded for the HTML5 eraWeb Application Security Reloaded for the HTML5 era
Web Application Security Reloaded for the HTML5 era
 
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_js
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
BEdita, a development platform
BEdita, a development platformBEdita, a development platform
BEdita, a development platform
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin German
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
 
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar Cheekuru  NET UIChandra Sekhar Cheekuru  NET UI
Chandra Sekhar Cheekuru NET UI
 
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
 
The Java alternative to Javascript
The Java alternative to JavascriptThe Java alternative to Javascript
The Java alternative to Javascript
 
Building Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN StackBuilding Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN Stack
 
Js il.com
Js il.comJs il.com
Js il.com
 
Java script framework
Java script frameworkJava script framework
Java script framework
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworks
 

Dernier

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 

Dernier (20)

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

Die Qual der Wahl bei den Single Page Application Frameworks

  • 1. Qual der Wahl bei den Web- Frameworks
  • 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.
  • 13. The "Big 3" of SPA Frameworks
  • 14. 1995 2006 2010 2011 2013 2016 AngularJS Bootstrap React Angular The Frontend JavaScript Ecosystem Vue.js 2014 1997: ECMAScript 1 1998: ECMAScript 2 1999: ECMAScript 3 2009: ECMAScript 5 2015: ECMAScript 2015 2016: ECMAScript 2016 … 2012:TypeScript 2019: ECMAScript 2019 Inferno Marko Polymer AppRun Ramda 2011 2020: ECMAScript 2020 Alpine.js Svelte
  • 17. Which one is The Best ? TM
  • 18. It depends ... It doesn't matter!
  • 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
  • 24. React
  • 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.
  • 38. To SPA or not to SPA?
  • 39.
  • 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.
  • 45. Maintenance A "small" Angular project from 2018:
  • 46. We are breaking up with JavaScript frontends: http://triskweline.de/unpoly-rugb/#/3
  • 47. Angular, React orVue ? ... it depends ... It doesn't matter! O0ther choices do matter:
  • 49. The Rise of TypeScript Top Languages on GitHub The 2020 State of the Octovers: https://octoverse.github.com/
  • 51. + static types new (future) language features enabling tools modules, classes, … The initial Goal ofTypeScript (2012) ES5
  • 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 "
  • 55. TypeScriptToday static types future JS features + ES2020+ modern JS features for old browsers non-JS expressions (enum, namespace) Babel is an alternative transpiler that replacesTS in many "state-of-the-art" toolchains. "obsolete" Killer-Feature! JS-to-JS 
 compilation
  • 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)
  • 57. Myth: 
 There can be only one ...
  • 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
  • 60. Myth: 
 Angular is the best choice if I want to use TypeScript.
  • 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
  • 62. Beyond the Horizon 
 of traditional SPAs
  • 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
  • 71. JavaScript / Angular / React / Vue.js 
 Schulung / Beratung / Coaching / Review s jonas.bandi@ivorycode.com http://ivorycode.com/#schulung Thank You!