EMBER.JS AN INTRODUCTION 

WHAT IS EMBER.JS? “ ... a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. ” 

HISTORY SproutCore + Handlebars.js = SproutCore 2.0 renamed to Amber.js (and later Ember.js) 

HISTORY Static Web Pages Dynamic Pages (CGI Scripts, PHP, Rails ...) AJAX! Web Applications with Client Side Logic 

APPROACH Eliminate Boilerplate Keeping everything in sync is tricky! H i , Y o u h a v e { { c o u n t } } u n r e a d e m a i l s . 

HOW? 1. Bindings 2. Computed Properties 3. Auto-updating Templates 

BINDINGS A p p . u s e r = E m b e r . O b j e c t . c r e a t e ( { f i r s t N a m e : ' P e t e r ' , l a s t N a m e : ' W a g e n e t ' , } ) ; A p p . u s e r . g e t ( ' f i r s t N a m e ' ) / / r e t u r n s ' P e t e r ' A p p . u s e r . s e t ( ' f i r s t N a m e ' , ' T o m ' ) ; A p p . t o p B a r = E m b e r . O b j e c t . c r e a t e ( { n a m e B i n d i n g : ' A p p . u s e r . f i r s t N a m e ' , } ) ; A p p . t o p B a r . g e t ( ' n a m e ' ) ; / / r e t u r n s ' T o m ' 

COMPUTED PROPERTIES A p p . u s e r = E m b e r . O b j e c t . c r e a t e ( { f i r s t N a m e : ' P e t e r ' , l a s t N a m e : ' W a g e n e t ' , / / f u l l N a m e a s a f u n c t i o n , t h e w a y w e u s e d t o d o i t g e t F u l l N a m e : f u n c t i o n ( ) { v a r f i r s t N a m e = t h i s . g e t ( ' f i r s t N a m e ' ) ; v a r l a s t N a m e = t h i s . g e t ( ' l a s t N a m e ' ) ; r e t u r n f i r s t N a m e + ' ' + l a s t N a m e ; } , / / f u l l N a m e a s a c o m p u t e d p r o p e r t y , b e h a v e s l i k e a p r o p e r t y f u l l N a m e : f u n c t i o n ( ) { v a r f i r s t N a m e = t h i s . g e t ( ' f i r s t N a m e ' ) ; v a r l a s t N a m e = t h i s . g e t ( ' l a s t N a m e ' ) ; r e t u r n f i r s t N a m e + ' ' + l a s t N a m e ; } . p r o p e r t y ( ' f i r s t N a m e ' , ' l a s t N a m e ' ) , } ) ; A p p . u s e r . g e t F u l l N a m e ( ) ; / / r e t u r n s ' P e t e r W a g e n e t ' A p p . u s e r . g e t ( ' f u l l N a m e ' ) ; / / r e t u r n s ' P e t e r W a g e n e t ' 

COMPUTED PROPERTIES - 2 A p p . s e t ( ' f u l l N a m e ' , ' T o m D a l e ' ) ; A p p . g e t ( ' f i r s t N a m e ' ) ; / / ? A p p . u s e r = E m b e r . O b j e c t . c r e a t e ( { f i r s t N a m e : ' P e t e r ' , l a s t N a m e : ' W a g e n e t ' , f u l l N a m e : f u n c t i o n ( k e y , v a l u e ) { i f ( a r g u m e n t s . l e n g t h = = = 1 ) { v a r f i r s t N a m e = t h i s . g e t ( ' f i r s t N a m e ' ) ; v a r l a s t N a m e = t h i s . g e t ( ' l a s t N a m e ' ) ; r e t u r n f i r s t N a m e + ' ' + l a s t N a m e ; } e l s e { v a r n a m e = v a l u e . s p l i t ( " " ) ; t h i s . s e t ( ' f i r s t N a m e ' , n a m e [ 0 ] ) ; t h i s . s e t ( ' l a s t N a m e ' , n a m e [ 1 ] ) ; r e t u r n v a l u e ; } } . p r o p e r t y ( ' f i r s t N a m e ' , ' l a s t N a m e ' ) , } ) ; 

AUTO-UPDATING TEMPLATES H i , { { A p p . u s e r . f u l l N a m e } } . W e l c o m e b a c k ! { { # e a c h p e o p l e } } < l i > { { t h i s . n a m e } } < / l i > { { / e a c h } } { { # i f l o g g e d I n } } H i { { u s e r . n a m e } } ­ < a h r e f = " # " > M a n a g e Y o u r A c c o u n t < / a > { { e l s e } } < a h r e f = " # " > S i g n u p < / a > | < a h r e f = " # " > L o g i n < / a > { { / i f } } { { # v i e w A p p . M a i l V i e w c l a s s B i n d i n g = " m a i l . p r i o r i t y " } } . . . m a i l s u b j e c t . . . { { / v i e w } } 

THE POWER start with primitive properties start building up more sophisticated ones write templates telling how it gets displayed once let ember handle the rest! 

LET'S BUILD SOMETHING github: frodsan/emberjs-getting-started 

EMBER.JS ON RAILS # i n y o u r G e m f i l e g e m ' e m b e r ­ r a i l s ' $ r a i l s g e m b e r : b o o t s t r a p i n s e r t a p p / a s s e t s / j a v a s c r i p t s / a p p l i c a t i o n . j s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / m o d e l s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / m o d e l s / . g i t k e e p c r e a t e a p p / a s s e t s / j a v a s c r i p t s / c o n t r o l l e r s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / c o n t r o l l e r s / . g i t k e e p c r e a t e a p p / a s s e t s / j a v a s c r i p t s / v i e w s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / v i e w s / . g i t k e e p c r e a t e a p p / a s s e t s / j a v a s c r i p t s / h e l p e r s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / h e l p e r s / . g i t k e e p c r e a t e a p p / a s s e t s / j a v a s c r i p t s / t e m p l a t e s c r e a t e a p p / a s s e t s / j a v a s c r i p t s / t e m p l a t e s / . g i t k e e p c r e a t e a p p / a s s e t s / j a v a s c r i p t s / a p p . j s 

EMBER.JS ON RAILS / / i n y o u r a p p l i c a t i o n . j s / / = r e q u i r e e m b e r / / = r e q u i r e e m b e r / a p p < ! ­ ­ i n y o u r l a y o u t ­ ­ > < % = j a v a s c r i p t _ i n c l u d e _ t a g ' a p p l i c a t i o n ' % > A p p . P e r s o n V i e w = E m b e r . V i e w . e x t e n d ( { / / r e f e r s t o a p p / a s s e t s / j a v a s c r i p t s / t e m p l a t e s / p e r s o n . h a n d l e b a r s t e m p l a t e N a m e : ' t e m p l a t e s / p e r s o n ' } ) ; . j s , . j s . e r b , . j s . c o f f e e , . j s . c o f f e e . e r b . h a n d l e b a r s , . h a n d l e b a r s . e r b 

GOTCHAS! steep learning curve - refactor often not mature - yet! Rails' MVC !== Ember.js MVC keep looking for best practices metamorph can break CSS debugging might not be easy 

THAT'S ALL.