Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Ember.js - An Introduction

kazim59
August 30, 2012

Ember.js - An Introduction

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

kazim59

August 30, 2012
Tweet

Other Decks in Technology

Transcript

  1. WHAT IS EMBER.JS? “ ... a JavaScript framework for creating

    ambitious web applications that eliminates boilerplate and provides a standard application architecture. ”
  2. HISTORY Static Web Pages Dynamic Pages (CGI Scripts, PHP, Rails

    ...) AJAX! Web Applications with Client Side Logic
  3. 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 .
  4. 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 '
  5. 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 '
  6. 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 ' ) , } ) ;
  7. 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 } }
  8. 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!
  9. 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
  10. 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
  11. 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