Silent Disco

This talk introduces Silent Disco, a collaborative, web-based disco.

Transcript

1. Silent Disco A collaborative, web-based disco. By and @adrobisch @nrehwaldt
2. 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
3. The Idea collaborative head nodding everywhere everyone should be a DJ SoundCloud haz teh music responsive HTML5 application, WebSockets for sync
4. Try yourself join at silentdisco.nixis.de room name a p p b e r l i n j s
5. Client Side Based on: AngularJS RequireJS Bootstrap claim: create modular code
6. 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
7. 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 ; } } ] ) ;
8. 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 ; } ; } ) ;
9. Why not marry RequireJS and AngularJS?
10. 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.
11. 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.
12. 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.
13. 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 ) ;
14. 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 ' } ] } ) ;
15. 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 ' ] ) ; } ) ; } ) ;
16. Good Idea? h t t p : / / x k c d . c o m / 9 4 3 / You decide
17. Server Side developed independently, client is pulled in with validated against integration test using might be deployed to different place bower karma
18. Application Protocol WebSocket only (no CORS problems) mixes Request-Response and Push communication Routing + uris become irrelevant (aside from the WS URL)
19. Implementations 1. based on Java / netty / mongodb (included in the ) 2. based on Play 2 for Scala, to base repository deployable cloudbees
20. Problems Websocket browser compatibility (esp. mobile browsers) not proxy friendly not RESTful, feels less "natural" and future proof
21. Test Run
22. 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
23. whereis Nikku/silent-disco Nikku/requirejs-angular-define adrobisch/silent-disco-scala @adrobisch @nrehwaldt
24. Questions ?