Ember JS - Native Apps Here We Come!

Introduction into Ember JS and with a little detour on how to harness the power touch events.

Transcript

1. A FRAMEWORK FOR MAKING AMBITIOUS WEB APPLICATIONS. NATIVE APPS HERE WE COME! EMBER JS
2. ME - DAVE LAIRD A KIWI NOT AN AUSTRALIAN FRONT END RAILS DEV AT URBANSPOON.COM @kiwiupover kiwiupover@gmail.com kiwiupover.com speakerdeck.com/kiwiupover
3. MY JOURNEY TO EMBER jQuery dom manipulation jQuery ajaxed pages with push state Backbone a dabble Enter Ember Eminess
4. THE EMBER RAILS STACK
5. THE EMBER MVC MVC + ROUTER Model - the same notion as in rails Controller - Not your rails controller Views and Handlebar Templates - Make up the view layer Router State manager URLS power of the web
6. A QUICK INTRO FROM A RAILS VIEW POINT GETTING STARTED IS EASY. CREATES THE RAILS API, EMBER APP WITH EMBER-DATA s o u r c e ' h t t p s : / / r u b y g e m s . o r g ' g e m ' e m b e r - r a i l s ' g e m ' j q u e r y - r a i l s ' r a i l s g e n e r a t e e m b e r : b o o t s t r a p r a i l s g e n e r a t e e m b e r : i n s t a l l - - h e a d r a i l s g r e s o u r c e c a t e g o r y n a m e i m a g e , d a t e : d a t e , n u m b e r : i n t e g e r
7. ACTIVE MODEL SERIALIZER Setups the JSON serializer c l a s s C a t e g o r y S e r i a l i z e r < A c t i v e M o d e l : : S e r i a l i z e r a t t r i b u t e s : i d , : n a m e , : i m a g e , d a t e , n u m b e r h a s _ m a n y : p r o d u c t s e n d c l a s s C a t e g o r y < A c t i v e R e c o r d : : B a s e a t t r _ a c c e s s i b l e : i m a g e , : n a m e h a s _ m a n y : p r o d u c t s e n d
8. RAILS CONTROLLER c l a s s C a t e g o r i e s C o n t r o l l e r < A p p l i c a t i o n C o n t r o l l e r d e f i n d e x c a t e g o r i e s = C a t e g o r y . a l l r e n d e r j s o n : c a t e g o r i e s e n d d e f s h o w c a t e g o r y = C a t e g o r y . f i n d ( p a r a m s [ : i d ] ) r e n d e r j s o n : c a t e g o r y e n d e n d
9. HOW EMBER FITS INTO YOUR PAGE THE OUTLET < h t m l > < h e a d > < t i t l e > O P E N P O S < / t i t l e > < / h e a d > < b o d y > < d i v c l a s s = " c o n t a i n e r " > { { o u t l e t } } < / d i v > < / b o d y > < / h t m l >
10. AN EMBER MODEL P o s . C a t e g o r y = D S . M o d e l . e x t e n d ( { n a m e : D S . a t t r ( ' s t r i n g ' ) , i m a g e : D S . a t t r ( ' s t r i n g ' ) , d a t e : D S . a t t r ( ' d a t e ' ) , n u m b e r : D S . a t t r ( ' n u m b e r ' ) , p r o d u c t s : D S . h a s M a n y ( ' P o s . P r o d u c t ' ) } ) ;
11. AN EMBER HANDLEBARS TEMPLATE < u l c l a s s = " n o - b u l l e t " > { { # e a c h c a t e g o r y i n c o n t e n t } } < l i > { { c a t e g o r y . n a m e } } < / l i > { { / e a c h } } < / u l >
12. AN EMBER HANDLEBARS TEMPLATE < u l c l a s s = " n o - b u l l e t " > { { # e a c h c a t e g o r y i n c o n t e n t } } { { # v i e w P o s . C a t e g o r y I t e m V i e w c o n t e n t B i n d i n g = " c a t e g o r y " } } { { c a t e g o r y . n a m e } } { { / v i e w } } { { / e a c h } } < / u l >
13. AN EMBER VIEW P o s . C a t e g o r y I t e m V i e w = E m b e r . V i e w . e x t e n d ( { t a g N a m e : ' l i ' , c l a s s N a m e s : [ ' c a t e g o r y ' ] , t o u c h S t a r t : f u n c t i o n ( ) { t h i s . t r i g g e r ( ' i t s C l i c k e d ' ) ; } , m o u s e D o w n : f u n c t i o n ( ) { t h i s . t r i g g e r ( ' i t s C l i c k e d ' ) ; } , i t s C l i c k e d : f u n c t i o n ( e ) { v a r c o n t e n t I d = t h i s . c o n t e n t . i d t h i s . g e t ( ' c o n t r o l l e r ' ) . s e n d ( ' c h a n g e V i e w ' , c o n t e n t I d ) } } ) ;
14. AN EMBER CONTROLLER P o s . C a t e g o r i e s C o n t r o l l e r = E m b e r . A r r a y C o n t r o l l e r . e x t e n d ( { n e e d s : ' c a t e g o r y ' , c h a n g e V i e w : f u n c t i o n ( c a t e g o r y ) { t h i s . g e t ( ' c o n t r o l l e r s . c a t e g o r y ' ) . s e t ( ' m o d e l ' , P o s . C a t e g o r y . f i n d ( c } } ) ;
15. LETS HAVE A LOOK. Open POS
16. EMBER IN THE WILD SQUARE ZENDESK LIVING SOCIAL AND GROUPON EMBER DISCOURSE TRAVIS CI
17. THIS IS JUST THE START! THE CODE: THE APP: THE SLIDES: