Scalable javascript architectureJavascript developer - @frankbaele

The global blob

Step 1

Study the language

Step 2

Be critical of Frameworks

UseDesign patterns

Step 3

Structural

Creational

Behavioral

5 design patternsFor scalable javascript architecture

Revealing Module pattern

● Module Pattern● Reveal only what you want● Highly testable● Private functions and variables

Main Controls PlayButton

require require

Audio

ProgressBar

Do not do’sAccess globals

Extend globals

Alter input params

Super long modules

Think this is easy

Welcome to the module ecosystem!

Commonjs - amd - es6 modules

Browserify - RequireJs - Webpack

NPM

Nodejs way

Main Controller PlayButton

require require

Lodash.foreach

Virtual dom

require

NPM

Audio

ProgressBar

Dependency Inject All the things!

PlayButton

Audio

ProgressBar

Video

PlayBack Rate

Youtube

Mediator pattern

PlayButton

Audio

ProgressBar

Video

PlayBack Rate

Youtube

Mute

Mediator

Mediator js side effects● Debugging● Regression testing● Refactoring● Unit testing● Measuring

What do I do with my data?

What do I do with my controllers?

Singleton

Factory

Pass by reference

Facade pattern

Facade

{ Closure }● Study 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

Questions?

Resourceshttps://addyosmani.com/resources/essentialjsdesignpatterns/book

https://carldanley.com/javascript-design-patterns/

https://addyosmani.com/scalablejs/

https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented-ebook/dp/B000SEIBB8

https://gist.github.com/frankbaele/1d57dde56b1f90299f9ea05ce6f3b2ee/edit

http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy

MaterialBackground image: motorcycle kids - Michael rogier

Framework graph: http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/