Ember.js - An Introduction

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.