Silent Disco A collaborative, web-based disco. By and @adrobisch @nrehwaldt 

You know ? Silent Disco h t t p : / / s i l e n t d i s c o . c o m / v 2 / Real-life dancing, music listening, headphone events 

The Idea collaborative head nodding everywhere everyone should be a DJ SoundCloud haz teh music responsive HTML5 application, WebSockets for sync 

Try yourself join at silentdisco.nixis.de room name a p p b e r l i n j s 

Client Side Based on: AngularJS RequireJS Bootstrap claim: create modular code 

Two Aspects of Modular JS component / module instantiation, configuration and dependency injection at runtime solved by AngularJS modules scripts of all dependent components need to be loaded, for big code bases only on demand solved by RequireJS + AMD 

ng-modules a n g u l a r . m o d u l e ( ' f o o ' , [ ] ) . v a l u e ( ' o n e ' , 1 ) ; a n g u l a r . m o d u l e ( ' b a r ' , [ ' f o o ' ] ) . s e r v i c e ( ' B a r S e r v i c e ' , [ ' o n e ' , f u n c t i o n ( o n e ) { r e t u r n f u n c t i o n ( i ) { r e t u r n i + o n e ; } } ] ) ; 

RequireJS/AMD modules d e f i n e ( [ ' f o o ' ] , f u n c t i o n ( f o o ) { r e t u r n f u n c t i o n ( s ) { r e t u r n s + f o o . o n e ; } ; } ) ; 

Why not marry RequireJS and AngularJS? 

Opinions briantford.com/blog: I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice. 

Misko Hevery (AngularJS): ... What we are trying to do is to merge the syntax of requireJS into implicit angular modules. ... requireJS and ng-modules solve two very different things and only have the word module in common. 

Solution: ngDefine nano library (around 100 LOC) MIT licensed allows to declare both plain RequireJS dependencies and AngularJS modules that get resolved using RequireJS before the module definition callback is called. 

Module Definition n g D e f i n e ( ' d i s c o ' , [ ' j q u e r y ' , ' m o d u l e : n g ' , ' m o d u l e : n g S a n i t i z e : a n g u l a r - s a n i t i z e ' , ' m o d u l e : n g R o u t e : a n g u l a r - r o u t e ' , ' m o d u l e : n g T o u c h : a n g u l a r - t o u c h ' , ' m o d u l e : n g A n i m a t e : a n g u l a r - a n i m a t e ' , ' m o d u l e : d i s c o . p a g e s : . / p a g e s / m a i n ' , ' m o d u l e : u i . s o r t a b l e : a n g u l a r - u i / s o r t a b l e ' , ' m o d u l e : u i . b o o t s t r a p : u i - b o o t s t r a p ' ] , f u n c t i o n ( m o d u l e , $ ) { . . . m o d u l e . c o n f i g ( M o d u l e C o n f i g ) . c o n t r o l l e r ( ' D e f a u l t C o n t r o l l e r ' , D e f a u l t C o n t r o l l e r ) . c o n t r o l l e r ( ' N a v i g a t i o n C o n t r o l l e r ' , N a v i g a t i o n C o n t r o l l e r ) ; 

RequireJS Configuration r e q u i r e ( { p a t h s : { / / i n c l u d e n g D e f i n e s c r i p t i n p a t h ' n g D e f i n e ' : ' l i b / n g D e f i n e ' , ' a n g u l a r ' : ' l i b / a n g u l a r / a n g u l a r ' , / / o p t i o n a l d e p e n d e n c i e s ' j q u e r y ' : ' l i b / j q u e r y / j q u e r y ' } , s h i m : { ' a n g u l a r ' : { d e p s : [ ' j q u e r y ' ] , e x p o r t s : ' a n g u l a r ' } } , p a c k a g e s : [ / / a p p l i c a t i o n p a c k a g e { n a m e : ' a p p ' , l o c a t i o n : ' a p p ' } , / / o t h e r m o d u l e s { n a m e : ' m y - m o d u l e ' , l o c a t i o n : ' l i b / m y - m o d u l e ' } , { n a m e : ' m y - o t h e r - m o d u l e ' , l o c a t i o n : ' l i b / m y - o t h e r - m o d u l e ' } ] } ) ; 

Bootstrap / / r e q u i r e n g D e f i n e a n d a l l a n g u l a r m o d u l e s y o u r a p p r e q u i r e s r e q u i r e ( [ ' n g D e f i n e ' , ' a n g u l a r ' ] , f u n c t i o n ( n g D e f i n e , a n g u l a r ) { / / r e q u i r e t h e a p p l i c a t i o n r e q u i r e ( ' a p p ' , f u n c t i o n ( ) { / / b o o t s t r a p t h e a p p l i c a t i o n a n g u l a r . b o o t s t r a p ( d o c u m e n t . b o d y , [ ' a p p ' ] ) ; } ) ; } ) ; 

Good Idea? h t t p : / / x k c d . c o m / 9 4 3 / You decide 

Server Side developed independently, client is pulled in with validated against integration test using might be deployed to different place bower karma 

Application Protocol WebSocket only (no CORS problems) mixes Request-Response and Push communication Routing + uris become irrelevant (aside from the WS URL) 

Implementations 1. based on Java / netty / mongodb (included in the ) 2. based on Play 2 for Scala, to base repository deployable cloudbees 

Problems Websocket browser compatibility (esp. mobile browsers) not proxy friendly not RESTful, feels less "natural" and future proof 

Test Run 

tl;dr; silentdisco is awesome ;) ngDefine makes using AngularJS with RequireJS easy Websocket only protocol makes client / server separation easy integration test ensures compatibility of servers 

whereis Nikku/silent-disco Nikku/requirejs-angular-define adrobisch/silent-disco-scala @adrobisch @nrehwaldt 

Questions ?