Scalable JavaScript architecture

on YouTube ↗40m

" summary

Claims a concrete, modular architecture: five favorite patterns (revealing module, mediator, singleton/factory, facade) applied to a split-up HTML5 audio player that replaces one big global blob. Uses npm modules and bundlers (webpack/browserify), shows how a mediator publish/subscribe decouples play button audio and video, and recommends immutability or cloning (mutable.js, icepick, lodash) to avoid shared-state bugs. Adds offline-first with service workers progressive web apps. Results: easier debugging, unit and regression testing, and safer refactoring.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 0:20The global blob
3. 4:41Use Design patterns
4. 5:21Design Patterns Elements of Reusable Object-Oriented Software Erich Gamma Richard Helm Ralph Johnson John Vlissides
5. 7:425 design patterns For scalable javascript architecture
6. 8:23Module Pattern • Reveal only what you want • Highly testable • Private functions and variables
7. 18:55Dependency Inject All the things!
8. 20:55Mediator pattern
9. 28:56Pass by reference
10. 31:26Facade pattern
11. 33:17Study the language Be critical of frameworks Modularize Use mediator to cut deps Use creational patterns Hide innerworkings • Use the right pattern in the right place

" related talks

• 04mDevelopment of JavaScript applicationsDhaval · Meta Refresh 2013
• 38m"Design Patters for Modern JavaScript"Justin Schroeder · Frontrunners 2023
• 01h 13mArchitecting complex JavaScript setups for large scale enterprise projectsNatalia Venditto · HolyJS 2020 Moscow
• 19mModularity MattersAnna Gerber · Web Directions South 2013
• 41mThe future is modules not frameworks. JS modules Architecture demo.Brian Cavalier, John Hann · JSConf US 2011
• 49mDesign Patterns for Modern JavascriptJustin Schroeder · Connect.Tech 2022
• 12mRip your player's face offSteve Heffernan · Demuxed 2021
• 29mDesigning very large JavaScript applicationsMalte Ubl · JSConf AU 2018