Intro To Ember.Js

Nodevember 2014 Introduction to the Ember.Js framework.

Transcript

1. Intro To Ember.Js Created by Rian Rainey @rianrainey on and Github Twitter
2. What is Ember? Javascript Web Application Framework based on MVC 2007 Favors Convention Over Configuration
3. Why Should I Care?
5. ToDoMVC.com
6. Ember Terms Router Template View Model Controller Components
7. Router A p p = E m b e r . A p p l i c a t i o n . c r e a t e ( ) ; A p p . R o u t e r . m a p ( f u n c t i o n ( ) { t h i s . r e s o u r c e ( ' p o s t ' , { p a t h : ' / p o s t / : p o s t _ i d ' } ) ; } )
8. Template < h 2 > { { t i t l e } } < / h 2 > { { b o d y } }
9. Views A p p . P o s t V i e w = E m b e r . V i e w . e x t e n d ( { c l a s s N a m e s : [ ' p o s t - v i e w ' ] } ) ; / / C o u l d h a v e o m i t t e d a n d E m b e r w o u l d h a v e a u t o m a g i c a l l y c r e a t e d i t .
10. Model A p p . P o s t = D S . M o d e l . e x t e n d ( { t i t l e : D S . a t t r ( ' s t r i n g ' ) , b o d y : D S . a t t r ( ' s t r i n g ' ) } ) ;
11. Controller A p p . P o s t C o n t r o l l e r = E m b e r . O b j e c t C o n t r o l l e r . e x t e n d ( { l e n g t h : f u n c t i o n ( ) { r e t u r n t h i s . g e t ( ' m o d e l . b o d y . l e n g t h ' ) ; } . p r o p e r t y ( ' m o d e l . b o d y ' ) a c t i o n s : { r e m o v e P o s t : f u n c t i o n ( ) { v a r p o s t = t h i s . g e t ( ' m o d e l ' ) ; p o s t . d e l e t e R e c o r d ( ) ; p o s t . s a v e ( ) ; } } } ) ; / / I f w e n e v e r u s e l e n g t h o r r e m o v e P o s t , w e c o u l d d r o p t h i s c o n t r o l l e r
12. Components { { b l o g - i n t r o } } / / g o o d { { i n t r o } } / / b a d / / T e m p l a t e < s c r i p t t y p e = " t e x t / x - h a n d l e b a r s " > { { b l o g - i n t r o } } < / s c r i p t > / / C o m p o n e n t < s c r i p t t y p e = " t e x t / x - h a n d l e b a r s " i d = " c o m p o n e n t s / b l o g - i n t r o " > T h i s i s m y i n t r o d u c t i o n < / s c r i p t > / / O u t p u t T h i s i s m y i n t r o d u c t i o n
13. github.com/rianrainey/simple-ember-posts Demo
14. Ember CLI Ember command line utility that provides spin-up, testing, asset-compilation and more for Ember. n p m i n s t a l l - g e m b e r - c l i e m b e r n e w m y - n e w - a p p c d m y - n e w - a p p e m b e r s e r v e r
15. Firefox and Chrome extension. Ember Inspector
16. Ember Testing Ember uses QUnit as it's default testing framework. e m b e r t e s t # w i l l r u n y o u r t e s t - s u i t e i n y o u r c u r r e n t s h e l l o n c e e m b e r t e s t - - s e r v e r # w i l l r u n y o u r t e s t s o n e v e r y f i l e - c h a n g e t e s t ( " P a g e c o n t e n t s " , f u n c t i o n ( ) { e x p e c t ( 2 ) ; v i s i t ( ' / f o o s ' ) . t h e n ( f u n c t i o n ( ) { e q u a l ( f i n d ( ' . f o o s - l i s t ' ) . l e n g t h , 1 , " P a g e c o n t a i n s l i s t o f m o d e l s " ) ; e q u a l ( f i n d ( ' . f o o s - l i s t . f o o - i t e m ' ) . l e n g t h , 5 , " L i s t c o n t a i n s e x p e c t e d n u m b e r o f } ) ; } ) ;
17. Final Thoughts
18. Rian Rainey | @rianrainey Thank You Rian Rainey | @rianrainey