Introduction to Ember.js

This talk gives an introduction to Ember.js

Transcript

2. http://simplabs.com @simplabs
3. https://github.com/LevelbossMike @LevelbossMike
4. https://github.com/marcoow @marcoow
7. Ember History
9. SproutCore created in 2007 by Sproutit for their Mailroom app
10. Apple, Inc. Apple used SproutCore for the iCloud/ iWork web services and contributed back
11. Strobe, Inc. In 2010 the creator of SproutCore left Apple to found Strobe Inc.
12. SproutCore 2.0 was announced mid 2011 and was meant to split the core from the UI widgets
13. Ember.js and Tilde when Strobe was acquired by Facebook, Yehuda Katz an Tom Dale founded Tilde and continued SproutCore 2.0 as Ember.js
14. What is Ember.js?
15. "A framework for creating ambitious web applications."
16. Ember.js manages the complete application, not just the "V" in "MVC"
17. Ember.js embraces HTML and CSS
18. Ember.js encodes the application state in the route
19. Parts of Ember.js
20. Ember.js the framework itself https://github.com/emberjs/ember.js
21. handlebars the templating language https://github.com/wycats/handlebars.js/
22. Ember Data the data persistence library https://github.com/emberjs/data
23. Ember CLI the command line interface https://github.com/ember-cli/ember-cli
24. Ember Inspector debugging tools for Chrome and Firefox https://github.com/emberjs/ember-inspector
26. BABEL transpiles ES2015 code to ES5 that runs in browsers https://babeljs.io
27. Ember.js Core Concepts
30. Router maps URLs to Ember.js routes
32. Routes load models and render templates
34. Models represent persistent state
36. Templates generate HTML that's then rendered by the browser
38. Controllers implement logic that can be used in templates
40. Components combine a template and associated code as a reusable UI element
42. Ember CLI http://ember-cli.com
43. Ember CLI is Ember.js' command line interface and build tool
44. it provides a standard project/directory structure
45. app !"" app.js !"" controllers # %"" songs.js !"" index.html !"" models # %"" song.js !"" router.js !"" routes # %"" songs.js !"" styles # %"" app.css %"" templates !"" application.hbs !"" components # %"" song-tile.hbs %"" songs.hbs
46. Ember CLI also provides a command line utility for common tasks
47. ember new <my-app> creates a new application
48. ember test runs the application's tests
49. ember serve starts the application
50. Demo https://github.com/simplabs/ember-workshop/tree/master/ tomster-player
51. Ember Users
52. Conventions project structure easy onboarding documentation
53. Framework "A framework for creating ambitious web applications."
54. Framework Solves the HardProblems™
55. Ecosystem Ember Ember-Data Ember-CLI Ember Inspector Ember Addons
56. Ember Addons bundle parts of an ember application possible to extend ember-cli
57. Ember Addons emberaddons.com emberobserver.com
58. QA
59. http://simplabs.com @simplabs