Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend Monoliths: Run if you can!

741 views

Published on

From the frontend monolith to micro frontends - the presentation from Voxxed Day Zuerich, 2019.

Demonstrated with the SCION Workbench and Angular.

Published in: Software
  • Manifestation Magic� - $27 - By Alexander Wilson - 96% Off ◆◆◆ http://scamcb.com/manifmagic/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Manifestation Magic� - $27 - By Alexander Wilson - 96% Off ♣♣♣ http://t.cn/AiuvUCDd
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Attract Abundance Into Your Life - New musical "Angel tone" calls in your angels to help you manifest abundance and miracles into your life... starting in just minutes per day. Go here to listen now. ♣♣♣ https://bit.ly/30Ju5r6
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Frontend Monoliths: Run if you can!

  1. 1. Frontend Monoliths: 
 Run if you can!
  2. 2. Jonas Bandi Freelance Developer &Teacher jonas.bandi@ivorycode.com @jbandi Daniel Wiehl Developer mtrail GmbH daniel.wiehl@mtrail.ch
  3. 3. Agenda From Frontend Monolith to Micro-Frontends Introducing the SCION Workbench SCION Workbench Demo
  4. 4. In 2016 the average webpage size passed the size of Doom https://mobiforge.com/research-analysis/the-web-is-doom
  5. 5. Size does Matter!
  6. 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. 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. 8. 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%.
  9. 9. ... Enterprise Applications? But ...
  10. 10. https://twitter.com/AdamRackis/status/1071793443175915521
  11. 11. Jake Archibald, Developer Advocate at Google https://twitter.com/jaffathecake/status/1071079244246237184
  12. 12. 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 ...)
  13. 13. Size still might be a problem ...
  14. 14. History of Enterprise Apps
  15. 15. The Fat Client Feature 1 Feature 2 Feature 2 Rich Client
  16. 16. Workbench & Monolith Feature 1 Feature 2 Feature 2 Workbench Monolithic Server Feature 1 Feature 2 Feature 3
  17. 17. Microservices Feature 1 Feature 2 Feature 3 Frontend API API API Composition & Orchestration happens in the Client
  18. 18. 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
  19. 19. 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!
  20. 20. 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
  21. 21. The real Problem of the Frontend Monolith: • Coupling The real problem of 
 the monolith: Coupling
  22. 22. 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
  23. 23. The goal of microservices: enable autonomy • independent & parallel development • independent deployments/lifecycles • autonomus operation / runtime isolation • technology agnostic Frontend Monolith
  24. 24. ... especially in the enterprise. Size does matter ...
  25. 25. Break the Monolith! Isolation at development time
 Isolation at run time
  26. 26. The first rule of huge 
 enterprise applications is: 
 You do not build huge enterprise applications.
  27. 27. The second rule of huge enterprise applications is: You do not build huge enterprise applications.
  28. 28. How?
  29. 29. Micro Frontends: An architectural style where independently deliverable frontend applications are composed into a greater whole.
  30. 30. ?
  31. 31. 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/
  32. 32. Build Time Modularization
  33. 33. 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)
  34. 34. 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
  35. 35. Build Time Modularization does not solve the core problems of the frontend monolith. - lifecycle / releases are coupled
 - no isolation at run time
  36. 36. Runtime Modularization
  37. 37. The Link ... <a href="..." > ... the magical integration pattern of the web!
  38. 38. 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!
  39. 39. But I need a single SPA!
  40. 40. 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.
  41. 41. 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!
  42. 42. DEMO: Single-Spa https://single-spa.surge.sh/
  43. 43. Shared DOM empty empty
  44. 44. 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
  45. 45. 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 ...)
  46. 46. There is no Silver Bullet for 
 Frontend Modularization
  47. 47. WebComponents ... Rescue?
  48. 48. 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
  49. 49. Promise: Frontend Composition Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell C3 C2 C2 C3
  50. 50. 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!
  51. 51. 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
  52. 52. 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 { ... })
  53. 53. 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
  54. 54. WebComponents are not the solution!
  55. 55. https://github.com/SchweizerischeBundesbahnen/scion-workbench
  56. 56. DatabaseBackendFrontend Application 1 Mission 1 Application 3 Mission 3 Application N Mission N Application 2 Mission 2 ?
  57. 57. DatabaseBackendFrontend Application 1 Mission 1 Application 3 Mission 3 Application N Mission N Application 2 Mission 2 ?
  58. 58. Yes No Cancel https://www.app.com/#/(view.1:person/39//view.2:person/38)?viewgrid=WyJ2aWV3cGFydC4xIiw
  59. 59. Provides a lightweight application frame and helps to build multi-view Angular applications. SCION Workbench https://github.com/SchweizerischeBundesbahnen/scion-workbench
  60. 60. Yes No Cancel https://www.app.com/#/(view.1:person/39//view.2:person/38)?viewgrid=WyJ2aWV3cGFydC4xIiw
  61. 61. Frontend Backend App 1 Frontend Backend App 2 Manifest capabilities intents Manifest capabilities intents
  62. 62. Frontend Backend App 1 Frontend Backend App 2 Intent Router Workbench Application Platform in Host App Manifest capabilities intents Manifest capabilities intents
  63. 63. 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>
  64. 64. 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
  65. 65. 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
  66. 66. http://geek-and-poke.com § Fast boostrap time § Separate document per app instance § Limited to iframes boundaries
  67. 67. https://responsivedesign.is/examples/outdated-browsers/
  68. 68. https://github.com/SchweizerischeBundesbahnen/scion-workbench
  69. 69. Questions? Jonas Bandi JavaScript / Angular / React Courses, Consulting, Reviews, Project-Setup, Proof-of-Concept jonas.bandi@ivorycode.com https://github.com/jbandi/voxxed-days-zuerich-2019 Daniel Wiehl mtrail GmbH Tech Lead SCION Workbench daniel.wiehl@mtrail.ch

×