Ember.js Training

Training course for "Building Rich Web Apps in Ember.js" from Chicago Web Conf 2015. Presented with Chris Sprehe.

http://github.com/tonycoco/ember-training-api
http://github.com/tonycoco/ember-training-client

Transcript

1. Ember Training Tony Coconate & Chris Sprehe
2. Intros
3. Survey
4. Ember.js
5. A framework for creating ambitious web applications
6. Resources • http://emberjs.com • http://emberjs.com/guides • http://emberjs.com/api • IRC (Freenode) at #emberjs and #ember-cli
8. Learning Cliff
9. Massive API Surface
10. …So, why Ember.js?
11. • Handlebars (finally… HTMLbars) • Ember-Data • Routing • Ember CLI • More…
12. • Conventions • “This Feels Right” • Desktop Application Inspiration • The framework is not for you
13. Core Concepts
15. Templates
16. • Expressions
 
 {{firstName}} • Outlets
 
 {{outlet}} • Components
 
 {{x-something}}
17. Router
18. • Translates the URL • Automatically updates the browser on transitions, model changes, template changes • Creates a sharable URL
19. Models
20. • Object to stores a persistent state • Templates display the model or its attributes • Loaded in via whatever… though Ember Data likes JSON and RESTful resources
21. Routes
22. • Object that gets the model ready for the controller and later the template • Finder • Before/After Hooks
23. Controllers
24. • Application state storage • Additional properties • Not just the model • Ember’s “presenter” • Going Away in Ember > 2.0 …Maybe.
25. On the <dl> of the <dt>’s and <dd>’s
26. • Implicit vs. Explicit • Nesting • POJO • Rails’ controller vs. Ember’s controller
27. Showcase
28. What Did We See?
29. • URLs being handled and changing nicely • Nesting outlets • Ember Data fetching JSON • Contacts.app
30. Power Up!
31. Homebrew http://brew.sh
33. $ brew install npm
34. Ember CLI http://www.ember-cli.com
35. $ npm install -g ember-cli
36. $ ember serve
37. • Custom build process • Consistency • Portability • Environments • Ember Add-ons • Testing • Deployments
38. Ember Add-ons http://www.emberaddons.com
39. Ember Inspector https://github.com/emberjs/ember-inspector
40. $ ember new ember-training