Ember.js - An Introduction

An introduction to the Ember.js JS Framework
http://www.emberjs.com/

Transcript

1. EMBER.JS AN INTRODUCTION
2. WHAT IS EMBER.JS? “ ... a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. ”
3. HISTORY SproutCore + Handlebars.js = SproutCore 2.0 renamed to Amber.js (and later Ember.js)
4. HISTORY Static Web Pages Dynamic Pages (CGI Scripts, PHP, Rails ...) AJAX! Web Applications with Client Side Logic
5. 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 .
6. HOW? 1. Bindings 2. Computed Properties 3. Auto-updating Templates
7. 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 '
8. 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 '
9. 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 ' ) , } ) ;
10. 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 } }
11. 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!
12. LET'S BUILD SOMETHING github: frodsan/emberjs-getting-started
13. 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
14. 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
15. 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
16. THAT'S ALL.