Frontend Monoliths: Run if you can!
- 1. Frontend Monolithen: Rette sich wer kann!
- 2. In 2016 the average webpage size passed the size of Doom https://mobiforge.com/research-analysis/the-web-is-doom
- 3. Web-Page Obesity The first Mac had 128k of RAM in 1984.
- 4. Web: Size does Matter!
- 5. The Cost of JavaScript optional ajax request data http://thedomain:80/app http://thedomain:80/api/data/first http://thedomain:80/app#/first http://thedomain:80/app#/second "navigate" to "first" screen http://thedomain:80/app#/first navigation Browser Serverinitial request html-shell assets load data & render screen with JS "navigate" to "second" screen load data & render screen with JS html-shell is loaded optional ajax request http://thedomain:80/api/data/second data loading... appbootstrapping Network CostCPU Cost
- 6. 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.
- 7. Server Side Rendering http://thedomain:80/app http://thedomain:80/app#/first Browser Serverinitial request html-shell assets html-shell is displayedloading... Angular renders the page run JS http://thedomain:80/app/first http://thedomain:80/app/first Browser Serverinitial request html-shell with content assets rendered page is displayed Angular is bootstrapped on the page run JS Angular renders the page run JS Traditional SPA: Enabling Server Side Rendering: https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles
- 8. Time to Paint vs.Time to Interactive https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
- 10. Speed == Money https://www.thinkwithgoogle.com/feature/mobile/ 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%. https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales https://blog.radware.com/applicationdelivery/wpo/2014/04/web-page-speed-affect-conversions-infographic/
- 12. History of Enterprise Apps • Rich Clients accessing the DB • Server-Side Web with multiple Domains • Moving to SPA -> enables Microservices • Eclipse RCP "Workbenches" -> Moving to Web
- 13. The Fat Client Feature 1 Feature 2 Feature 2 Rich Client
- 14. Workbench & Monolith Feature 1 Feature 2 Feature 2 Workbench Monolithic Server Feature 1 Feature 2 Feature 3
- 15. Traditional Web Monolith Feature 1 Feature 2 Feature 3 Frontend Browser Monolithic Server
- 16. SPA Monolith Feature 1 Feature 2 Feature 3 Frontend Monolithic Server
- 17. SPA Monolith & Microservices Feature 1 Feature 2 Feature 3 Frontend API API API Composition & Orchestration happens in the Client
- 18. Rich Client Migrations: The Rise of the 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 SPA Monolith App
- 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. 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 App1 App2 App3 API 1 API 2 API 3 SPA Monolith
- 21. Problems of the Frontend Monolith • Performance -> size is still relevant for web applications! • Coupling & Dependencies • preventing change / agility / time to market • preventing effective/simple organization (effective end-to-end delivery, self organizing teams ...)
- 22. Coupling / Lock-Step Releases "Think about the granularity of development & deployment artifacts" Application 1 - implemented by team 1 - driven by org-unit 1 Application 2 - implemented by team 2 - driven by org-unit 2 shared lib - inhouse lib - 3rd party lib (ie. Angular, React) team 2 needs to change or update the lib team 1 is immediately affected The consequence is coupling between App1 and App 2: - teams have to coordinate changes to the shared lib. - development & release schedules of applications are coupled Who is responsible for testing/fixing application 1? release release release release release release
- 23. Problems of the Frontend Monolith • The web is traditionally not made for complex applications • global scope / no isolation / no modularization concepts • extremely dynamic (typing, monkey paching ...) • browser differences • Frequent technology changes • core technologies are very backwards compatible • ecosystem moves at break-neck speed
- 24. The Bad Parts
- 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/
- 33. The Link <a href="..." > The magical integration pattern that the web is built upon:
- 34. 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!
- 35. DEMO Mini SPAs
- 36. Challenges • Performance: Starting the Mini-SPAs has to be very quick! • Sharing layout & styles for common UX -> use reusable technologies for styling -> plain CSS, SASS, less ... -> be careful with "framework-specific" styling • Sharing state / context -> query parameters, cookies, http-headers -> server side session / context -> Local Storage / Indexed DB Feature 1 App 1 Page Link App2 Page Feature 1 Context
- 37. Remember: Size does Matter
- 38. Frameworks could matter ... Transfer size (KB) for the same application https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962
- 39. Keep an eye on your bundles! source-map-explorer: https://www.npmjs.com/package/source-map-explorer webpack-bundle-analyzer: https://github.com/webpack-contrib/webpack-bundle-analyzer npm install -g source-map-explorer ng build --prod --source-map source-map-explorer dist/ng-app/main.XYZ.js npm install -g webpack-bundle-analyzer ng build --prod --stats-json webpack-bundle-analyzer dist/ng-app/stats.json www.bundlephobia.com
- 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. You will need a shell • Top-level routing • Lazy loading of apps (child SPAs) • Inter-SPA communication • Sharing a context
- 43. 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
- 44. Option: "Child SPAs" in iframe Advantages: - true isolation - integration of "non-SPA" applications / sites Disadvantage: - No isolation: same global DOM, same scripting context, same global scope - Responsive layout is difficult - Router can't access the URL - Some 3rd party libraries break, since they depend on document events
- 45. Sinlge SPA: Isolated 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. Like "complete classloader isolation", but only if the app & dependencies don't pollute the global scope. Note:Angular comes with Zone.js, which heavily pollutes the global scope!
- 48. Sinlge SPA: Shared Dependencies Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell shared dependencies D0M D0M Analogy: shared classloader
- 52. Frontend Composition Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell
- 53. How?
- 54. Web Components Custom Elements API: customElements.define('element-details', 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> <element-details></element-details> <div> Browser support: native: Chrome, Safari polyfill: Firefox, Edge, IE11
- 56. Angular Elements
- 57. Angular Elements https://angular.io/guide/elements Using Angular components as Web Components. Angular Elements can transform Angular components into classes that can be registers as custom elemements: import { createCustomElement } from '@angular/elements'; import { PopupComponent } from './popup.component'; const PopupElement = createCustomElement(PopupComponent, {injector}); customElements.define('element-details', PopupElement) Available in Angular 6 in any html (also from React JSX andVue templates): <div> <element-details></element-details> <div>
- 58. Vue CLI Compilation Vue CLI 3 can wrap a vue component / app inside a Web Component https://cli.vuejs.org/guide/build-targets.html#web-component https://github.com/vuejs/vue-web-component-wrapper vue-cli-service build --target wc --name my-element ./main.js Build: <script src="path/to/my-element.js"></script> ... <my-element></my-element> any html:
- 61. More than ever: Size does Matter!
- 62. Size Does Matter! Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell 670KB 430KB 932KB
- 63. Size Does Matter! Feature 1 Feature 2 Feature 3 App 1 API API API App 2 App 3 Shell 30KB 35KB 120KB Angular React Vue 300KB 65KB 80KB
- 64. Big & Independent vs. Small & Coupled
- 65. More Challenges Dataflow & sharing state between components: Applications do not just consist of simple components. There is shared state & context (Angular services, React context, Redux stores ...) WebComponents just have primitive string properties! Versioning:There is no versioning of custom elements! "It feels like imperative DOM programming" (remember jQuery?)
- 66. There is no Silver Bullet for Frontend Modularization
- 67. Fragen? JavaScript / Angular / React Schulungen & Coachings, Project-Setup & Proof-of-Concept: http://ivorycode.com/#schulung [email protected] https://github.com/jbandi/sbb-dev-day-2018