Building Large Scale JS Applications { that not suck } Nico Rehwaldt 

Obvious Things First building large scale JS apps = building large scale apps + minor specials 

{ talking about } Large Scale Applications 

Think about Architecture [...] the high level structures of [your application] — Wikipedia (i.e. styles and patterns) 

Architectural Patterns three-tier presentation, logic, database MV* model-view-controller and friends; model glues view and * 

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 ... 

The Classic monolithic ( ) big ball of mud 

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 

Large Scale JS Applications { the minor differences } 

JS Challenges inheritance weak typing modularization 

Inheritance prototypical vs. class based 40+ implementations for class based inheritance no need for strong hierarchies (c.f. ) angular 

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 " 

Modularization structural + runtime comprises isolation, dependency discovery, loading no build in solutions (until ECMA Script 6) competing approaches function closures, commonJS, AMD, UMD 

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 . _ ) ; 

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 ) ; } ) ; } ; 

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 ) ; } ) ; } } ; } ) ; 

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 } ) ) ; 

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 > 

Build Tools grunt bower browserify 

Extensible Web-Modeler: Building Blocks big ball of mud or component-based inversion of control event-driven plug-ins microkernel 

Modularity event driven event bus decouples components inversion of control components get instantiated, DI micro kernel declarative dependencies, contract = API + emitted events 

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 ' ) ; } } ; } ] ) ; 

THE END