This document discusses how Ember.js can help alleviate JavaScript fatigue by providing an integrated framework and development environment. It notes that Ember is convention-based and handles configuration of the build process and tools automatically. The document then provides an overview of key Ember concepts like ember-cli, routes, models, controllers, templates, and Ember-data.

1. @leojh
Developing Single Page
Applications with Ember.js
(or, How to Treat JavaScript
Fatigue)

2. Leo Hernandez
Developer @ NinjaMSP
South Florida
JavaScript through Ember & React
@leojh

3. 2015 … the year of JavaScript fatigue
@leojh

4. “mfw when I see everyone complaining
about JavaScript tooling and micro
libraries”
-- @trek on Dec 29th, 2015
@leojh

5. Just some of the contributors of JavaScript fatigue
Angular, React
… new frameworks every
week
ES6/ES2015
… new standards coming out
all the time
Babel
WebPack, Browserfy
Bower, NPM
Node
Gulp and Grunt
… AND more
@leojh

6. It’s seemingly impossible to keep up
@leojh

7. Add to that, configuring all these things
together
@leojh

8. 1. Open your editor
2. Make a folder
3. Create a Git repo
4. Configure Node
5. Chose a Package Manager
6. Configure your build
7. Tie in Babel for ES6+
8. Keep configuring
9. …
10. Hopefully run your app sometime @leojh

9. Ember Offers an Alternative
@leojh

10. Ember is convention based
The Community picks the conventions
@leojh

11. Ember is provides an integrated
application framework plus a build, and
development environment
@leojh

12. 1. npm install -g ember-cli
2. ember new my-app
3. cd my-app
4. npm install && bower install
5. ember s
@leojh

13. That’s it… you’re coding
@leojh

14. All the build and configuration is done for
you …
Integrated build, minification, source
maps, environment variables …
@leojh

15. Ember has a few major concepts to know
about ...
@leojh

16. ember-cli
Used to run commands on ember used for
development
Run the server
Run your tests
Generate artifacts
@leojh

17. Router
Defines your URLs
@leojh

18. Routes
Fetches and serves data
Place for View Logic
@leojh

19. Models
Specify your Data
Place for Data Logic
Mutates Data
@leojh

20. Controllers
Use is discouraged
Place for additional View Logic
@leojh

21. Web Components
A big deal in the framework
They function with the premise of Data-
Down-Actions-Up
@leojh

22. Templates
Your Components, Routes, and Application
are marked up using HTMLBars
@leojh

23. Ember-Data
Like an ORM but for REST Apis
Fetches data to hydrate Models
Syncs local Models with API
@leojh

24. So a typical dev lifecycle is like this:
Using ember-cli
Create a Route and a Model
Create a Component and Templates
Render Data
Handle User Actions
Mutate Data
Sync your Data with your backend @leojh

25. Workshop
Go over most important Ember concepts
Create a sample Contacts application
@leojh

26. Thank you!
Questions
@leojh