@leojh

Developing Single Page Applications with Ember.js

(or, How to Treat JavaScript Fatigue)

Leo HernandezDeveloper @ NinjaMSP

South FloridaJavaScript through Ember & React

@leojh

2015 … the year of JavaScript fatigue

@leojh

“mfw when I see everyone complaining about JavaScript tooling and micro

libraries”-- @trek on Dec 29th, 2015

@leojh

Just some of the contributors of JavaScript fatigueAngular, 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

It’s seemingly impossible to keep up

@leojh

Add to that, configuring all these things together

@leojh

1. Open your editor2. Make a folder3. Create a Git repo4. Configure Node5. Chose a Package Manager6. Configure your build7. Tie in Babel for ES6+8. Keep configuring9. …

10. Hopefully run your app sometime @leojh

Ember Offers an Alternative

@leojh

Ember is convention based

The Community picks the conventions

@leojh

Ember is provides an integrated application framework plus a build, and

development environment

@leojh

1. npm install -g ember-cli2. ember new my-app3. cd my-app4. npm install && bower install5. ember s

@leojh

That’s it… you’re coding

@leojh

All the build and configuration is done for you …

Integrated build, minification, source maps, environment variables …

@leojh

Ember has a few major concepts to know about ...

@leojh

ember-cli

Used to run commands on ember used for development

Run the serverRun your tests

Generate artifacts@leojh

Router

Defines your URLs

@leojh

Routes

Fetches and serves dataPlace for View Logic

@leojh

Models

Specify your DataPlace for Data Logic

Mutates Data

@leojh

Controllers

Use is discouragedPlace for additional View Logic

@leojh

Web Components

A big deal in the framework

They function with the premise of Data-Down-Actions-Up

@leojh

Templates

Your Components, Routes, and Application are marked up using HTMLBars

@leojh

Ember-Data

Like an ORM but for REST ApisFetches data to hydrate Models

Syncs local Models with API

@leojh

So a typical dev lifecycle is like this:

Using ember-cliCreate a Route and a ModelCreate a Component and TemplatesRender DataHandle User ActionsMutate DataSync your Data with your backend @leojh

Workshop

Go over most important Ember conceptsCreate a sample Contacts application

@leojh

Thank you!

Questions

@leojh