Building Large Scale JavaScript Applications

Tech talk I gave at camunda on how to build large scale JavaScript applications. Plus a sneak preview on http://bpmn.io

Transcript

1. Building Large Scale JS Applications { that not suck } Nico Rehwaldt
2. Obvious Things First building large scale JS apps = building large scale apps + minor specials
3. { talking about } Large Scale Applications
4. Think about Architecture [...] the high level structures of [your application] — Wikipedia (i.e. styles and patterns)
5. Architectural Patterns three-tier presentation, logic, database MV* model-view-controller and friends; model glues view and *
6. Architectural Styles component-based layered pipes and filters data-centric inversion of control event-driven async messaging plug-ins microkernel client-server data-binding rest ...
7. The Classic monolithic ( ) big ball of mud
8. Apply! choose what best fits your application goals make styles / patterns visible in code alternatively use frameworks and hope they force you into the right styles
9. Large Scale JS Applications { the minor differences }
10. JS Challenges inheritance weak typing modularization
11. Inheritance prototypical vs. class based 40+ implementations for class based inheritance no need for strong hierarchies (c.f. ) angular
12. Weak Typing no interfaces; lots of fun [ ] + 1 " 1 " [ ] + { } " [ o b j e c t O b j e c t ] " { } + { } N a N 1 + " " " 1 " " " + 1 " 1 "
13. Modularization structural + runtime comprises isolation, dependency discovery, loading no build in solutions (until ECMA Script 6) competing approaches function closures, commonJS, AMD, UMD
14. function closure isolation only, no unintended global namespace polution does not solve dependency resolution ( f u n c t i o n ( g l o b a l , _ ) { g l o b a l . m y L i b = { p r i n t E a c h = f u n c t i o n ( l i s t ) { _ . f o r E a c h ( l i s t , f u n c t i o n ( e ) { c o n s o l e . l o g ( e ) ; } ) ; } ; } ; } ) ( w i n d o w , w i n d o w . _ ) ;
15. commonJS Node.js module format (server-side) synchronous loading v a r _ = r e q u i r e ( ' u n d e r s c o r e ' ) ; m o d u l e . e x p o r t s . p r i n t E a c h = f u n c t i o n ( l i s t ) { _ . f o r E a c h ( l i s t , f u n c t i o n ( e ) { c o n s o l e . l o g ( e ) ; } ) ; } ;
16. AMD browser based, "modules for the web" async d e f i n e ( [ ' u n d e r s c o r e ' ] , f u n c t i o n ( _ ) { r e t u r n { p r i n t E a c h : f u n c t i o n ( l i s t ) { _ . f o r E a c h ( l i s t , f u n c t i o n ( e ) { c o n s o l e . l o g ( e ) ; } ) ; } } ; } ) ;
17. UMD The universal kill everyone hammer ( f u n c t i o n ( f a c t o r y ) { i f ( t y p e o f d e f i n e = = = ' f u n c t i o n ' & & d e f i n e . a m d ) { / / A M D . R e g i s t e r a s a n a n o n y m o u s m o d u l e . d e f i n e ( [ ' j q u e r y ' ] , f a c t o r y ) ; } e l s e i f ( t y p e o f e x p o r t s = = = ' o b j e c t ' ) { / / N o d e / C o m m o n J S f a c t o r y ( r e q u i r e ( ' j q u e r y ' ) ) ; } e l s e { / / B r o w s e r g l o b a l s f a c t o r y ( j Q u e r y ) ; } } ( f u n c t i o n ( $ ) { / / a c t u a l c o d e } ) ) ;
18. And more ... use commonJS to write applications transform application to anything via browserify load in browser or load original files in node env < s c r i p t s r c = " b u n d l e . j s " > < / s c r i p t > < s c r i p t > v a r D i a g r a m = r e q u i r e ( ' d i a g r a m ' ) ; v a r d i a g r a m = n e w D i a g r a m ( ) ; / / d o s t u f f w i t h i t ! < / s c r i p t >
19. Build Tools grunt bower browserify
20. Extensible Web-Modeler: Building Blocks big ball of mud or component-based inversion of control event-driven plug-ins microkernel
21. Modularity event driven event bus decouples components inversion of control components get instantiated, DI micro kernel declarative dependencies, contract = API + emitted events
22. Application Module as a Core Concept D i a g r a m . p l u g i n ( ' m y S a m p l e P l u g i n ' , [ ' e v e n t s ' , f u n c t i o n ( e v e n t s ) { e v e n t s . o n ( ' s h a p e . a d d e d ' , f u n c t i o n ( e v e n t ) { c o n s o l e . l o g ( ' s h a p e ' , e v e n t . s h a p e , ' w a s a d d e d t o t h e d i a g r a m ' ) ; } ) ; r e t u r n { s a y F o o : f u n c t i o n ( ) { c o n s o l e . l o g ( ' F O O S A I D ' ) ; } } ; } ] ) ;
23. THE END