![Code Splitting
https://webpack.js.org/guides/code-splitting/
const routes: Routes = [
{ path: 'customers', loadChildren: './customers/customers.module#CustomersModule' },
{path: 'orders', loadChildren: './orders/orders.module#OrdersModule' } ]
@NgModule({
imports: [RouterModule.forChild(routes)],
...
}); https://angular.io/guide/lazy-loading-ngmodules
const LazyComponent = React.lazy(() => import('./OtherComponent'));
const LazyComponent = Vue.component('my-comp', () => import('./Foo.vue')
Angular:
React:
Vue:
❓parallel development
❌ independent lifecycles / deployments
❌ runtime isolation
What we get: ✅ performance at runtime (incremental loading)](https://image.slidesharecdn.com/20190319voxxed-190320223151/85/Frontend-Monoliths-Run-if-you-can-34-320.jpg)
![MANIFEST of App 1
"intent": {
"type": "view",
"qualifier": {
entity: "person",
id: "*"
}
}
MANIFEST of App 2
"capability": {
"type": "view",
"qualifier": {
entity: "person",
id: "*"
},
"properties": {
"path": "/persons/:id",
}
}
<a [wbRouterLink]="{entity: 'person', id: '5’}”>Open Person</a>](https://image.slidesharecdn.com/20190319voxxed-190320223151/85/Frontend-Monoliths-Run-if-you-can-65-320.jpg)
![50 common web developer interview questions [2020 updated] [www.full stack....](https://cdn.slidesharecdn.com/ss_thumbnails/50commonwebdeveloperinterviewquestions2020updated-www-191031082308-thumbnail.jpg?width=560&fit=bounds)
![[English version] JavaFX and Web Integration](https://cdn.slidesharecdn.com/ss_thumbnails/js1-13endl-120419075151-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Frontend Monoliths: Run if you can! (20)
Ad
Recently uploaded (20)
Ad
Frontend Monoliths: Run if you can!
- 1. Frontend Monoliths: Run if you can!
- 2. Jonas Bandi Freelance Developer &Teacher [email protected] @jbandi Daniel Wiehl Developer mtrail GmbH [email protected]
- 3. Agenda From Frontend Monolith to Micro-Frontends Introducing the SCION Workbench SCION Workbench Demo
- 4. In 2016 the average webpage size passed the size of Doom https://mobiforge.com/research-analysis/the-web-is-doom
- 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.
- 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%.
- 10. ... Enterprise Applications? But ...
- 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 ...)
- 14. Size still might be a problem ...
- 15. History of Enterprise Apps
- 16. The Fat Client Feature 1 Feature 2 Feature 2 Rich Client
- 17. Workbench & Monolith Feature 1 Feature 2 Feature 2 Workbench Monolithic Server Feature 1 Feature 2 Feature 3
- 18. Microservices Feature 1 Feature 2 Feature 3 Frontend API API API Composition & Orchestration happens in the Client
- 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
- 25. ... especially in the enterprise. Size does matter ...
- 26. Break the Monolith! Isolation at development time Isolation at run time
- 27. The first rule of huge enterprise applications is: You do not build huge enterprise applications.
- 28. The second rule of huge enterprise applications is: You do not build huge enterprise applications.
- 29. How?
- 30. Micro Frontends: An architectural style where independently deliverable frontend applications are composed into a greater whole.
- 31. ?
- 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/
- 34. Code Splitting https://webpack.js.org/guides/code-splitting/ const routes: Routes = [ { path: 'customers', loadChildren: './customers/customers.module#CustomersModule' }, {path: 'orders', loadChildren: './orders/orders.module#OrdersModule' } ] @NgModule({ imports: [RouterModule.forChild(routes)], ... }); https://angular.io/guide/lazy-loading-ngmodules const LazyComponent = React.lazy(() => import('./OtherComponent')); const LazyComponent = Vue.component('my-comp', () => import('./Foo.vue') Angular: React: Vue: ❓parallel development ❌ independent lifecycles / deployments ❌ runtime isolation What we get: ✅ performance at runtime (incremental loading)
- 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
- 38. The Link ... <a href="..." > ... the magical integration pattern of the web!
- 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!
- 40. But I need a single SPA!
- 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!
- 45. Optimization: Sharing Dependencies Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell shared dependencies D0M D0M Analogy: shared classloader
- 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
- 51. Promise: Frontend Composition Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell C3 C2 C2 C3
- 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
- 56. WebComponents are not the solution!
- 58. DatabaseBackendFrontend Application 1 Mission 1 Application 3 Mission 3 Application N Mission N Application 2 Mission 2 ?
- 59. DatabaseBackendFrontend Application 1 Mission 1 Application 3 Mission 3 Application N Mission N Application 2 Mission 2 ?
- 61. Provides a lightweight application frame and helps to build multi-view Angular applications. SCION Workbench https://github.com/SchweizerischeBundesbahnen/scion-workbench
- 64. Frontend Backend App 1 Frontend Backend App 2 Intent Router Workbench Application Platform in Host App Manifest capabilities intents Manifest capabilities intents
- 65. MANIFEST of App 1 "intent": { "type": "view", "qualifier": { entity: "person", id: "*" } } MANIFEST of App 2 "capability": { "type": "view", "qualifier": { entity: "person", id: "*" }, "properties": { "path": "/persons/:id", } } <a [wbRouterLink]="{entity: 'person', id: '5’}”>Open Person</a>
- 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
- 67. Contact App Host App Manifest capabilities intents Contact List Contact View Save Contact Create Popup create Manifest capabilities intents Joke App Joke View SCION Workbench Application Platform Live Hacking
- 68. http://geek-and-poke.com § Fast boostrap time § Separate document per app instance § Limited to iframes boundaries
- 71. Questions? Jonas Bandi JavaScript / Angular / React Courses, Consulting, Reviews, Project-Setup, Proof-of-Concept [email protected] https://github.com/jbandi/voxxed-days-zuerich-2019 Daniel Wiehl mtrail GmbH Tech Lead SCION Workbench [email protected]