6. Single Page Applications (SPA)
optional ajax request
data
http://thedomain:80/app
http://thedomain:80/api/data/first
http://thedomain:80/app#first
"navigate" to "first"
screen
Start using the applicaton
Browser Serverinitial request
html-shell
assets
load data &
render screen with JS
html-shell is loaded
loading...
appbootstrapping
Network
CostCPU Cost
7. The Cost of JavaScript
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
For mobile, aim for a JS budget of < 170KB minified/compressed.
8.
9. Speed == Money
Amazon did tests that showed they would lose
$1.6 BILLION every year if they slowed down by just
one second.
Walmart Study: For every 100 ms of improvement,
they grew incremental revenue by up to 1%.
12. Jake Archibald, Developer Advocate at Google
https://twitter.com/jaffathecake/status/1071079244246237184
13. For typical enterprise-applications, the
performance of big JavaScript bundles is not
the primary problem:
• network and processing power is typically good
enough
• often there are other performances bottlenecks
(data-fetching, back-end performance ...)
19. Rich Client Migrations:
The Rise of the Frontend Monoliths
API
Workbench
Monolithic Server
Feature 1 Feature 2 Feature 3
Feature 1 Feature 2 Feature 3
Feature 1
API
Feature 1
API
Feature 1
Frontend
App
20. API
Workbench
Monolithic Server
Feature 1 Feature 2 Feature 3
Feature 1 Feature 2 Feature 3
Feature 1
API
Feature 1
API
Feature 1
SPA Monolith
App
Improvement!
Much Worse!
21. Beware of the Monolith
Unfortunately, we've seen many teams create front-end
monoliths - a single, large and sprawling browser
application - on top of their back-end services.
-ThoughtWorksTechnology Radar, 2017
App1 App2 App3
API 1 API 2 API 3
SPA Monolith
22. The real Problem of the
Frontend Monolith:
• Coupling
The real problem of
the monolith:
Coupling
23. The frontend is not an implementation
detail. It is a critical part of a microservices
architecture.
StefanTilkov :Wait, what!? Our microservices have actual human users?
https://www.youtube.com/watch?v=pU1gXA0rfwc
https://speakerdeck.com/stilkov/wait-what-our-microservices-have-actual-human-users-1
24. The goal of microservices:
enable autonomy
• independent & parallel development
• independent deployments/lifecycles
• autonomus operation / runtime isolation
• technology agnostic
Frontend Monolith
32. Micro Frontends
App 1 App 2 App 3
App
API 1 API 2 API 3
SPA Monolith
API 1 API 2 API 3
? ?
The million dollar question:
Modularizing frontend applications.
https://micro-frontends.org/
35. Libraries
Libraries can be developed and versioned independently.
Tools like yarn workspaces, lerna, angular cli or Nx nrwl extensions
can help to manage libraries in a mono repo.
✅ parallel development
❌ independent lifecycles / deployments
❌ runtime isolation
What we get:
"dependencies": {
"@angular/material": "^6.0.1",
"@ngrx/store": "^4.1.1",
"my-common-widgets": "^3.1.0",
"my-feature-1": "^2.0.1",
"my-feature-2": "^7.1.0",
...
}
package.json
36. Build Time Modularization does not solve the
core problems of the frontend monolith.
- lifecycle / releases are coupled
- no isolation at run time
39. Microfrontend Flavors: Mini SPAs
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Page Page PageLink Link
You have complete isolation. But jumping between apps is a full page load!
41. Microfrontend Flavors: Sinlge SPA
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell D0M D0M
https://github.com/CanopyTax/single-spa
All applications live
on the same DOM.
App-communication
happens over the
DOM.
42. Sinlge SPA: One Document
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell
dependencies dependencies dependencies
D0M D0M
Browser can leverage
caching, but for each app
all dependencies have to
be parsed, compiled and
executed.
Each application bundles its
own dependencies.
Therefore applications are
isolated as long as
dependencies don't pollute
the global scope.
Note:Angular comes with Zone.js,
which heavily pollutes the global
scope!
46. Sinlge SPA: iframes
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell
dependencies dependencies dependencies
D0M D0M Analogy: complete
classloader isolation.
Browser can leverage
caching, but for each app
all dependencies have to
be parsed, compiled and
executed.
iframeiframeiframe
Apps are constrained to the
iframe, which results in
challenges for layout
(resiszing, dialogs, tooltips ...)
47. There is no Silver Bullet for
Frontend Modularization
50. Web Components
Custom Elements API:
customElements.define('my-component', class extends HTMLElement { ... })
WebComponents is a series of browser standards for
creating reusable custom elements:
https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
Shadow DOM Encapsulation
HTML
templates
markup that is not initially rendered and can be instantiated.
Custom
elements
JavaScript API to define custom elements that can be used in
html and their behavior
JavaScript
html:
<div> <my-component></my-component> <div>
Browser support:
native: Chrome, Safari
polyfill: Firefox, Edge, IE11
Framework integrations:
Angular elements
Vue & React wrappers
52. Size Does Matter!
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell
670KB
430KB
932KB
If a component should be autonomous,
it must bring it's own dependencies!
53. WebComponents do not provide
JavaScript isolation!
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell The Shadow DOM only
provides encapsulation for
styling not for JavaScript!
There is still one single
global scope per document.
-There is no guarantee that
the components do not
have side-effects on each
other.
C2 C3 C3 C2
54. WebComponents are global!
Feature 1 Feature 2 Feature 3
App 1
API API API
App 2 App 3
Shell
All applications must use the
same version of a given
component!
C2 C3 C3 C2
Version 1.2
Version 1.1
https://github.com/w3c/webcomponents/issues/716
WebComponents are
registered on the document
by name.
customElements.define(
'my-component',
class extends HTMLElement { ... })
55. Web Components:The Reality
✅ parallel development (when packaged as a library)
❌ independent lifecycles / deployments
❌ runtime isolation (Shadow DOM only isolates styling)
What we get:
✅ simple consumption/embedding
66. SCION Workbench Application Platform
Enables a micro frontend architecture by
integrating content from multiple web applications in a coherent way.
Micro Frontend
Host App
workbench
workbench-application-platform
Workbench Guest API
window.postMessage
https://github.com/SchweizerischeBundesbahnen/scion-workbench
