Ember is for Everybody

Cory Forsyth @bantic

201 Created

Matthew BealeCory Forsyth

http://201-created.com/

Our Stack• Frontend: Ember.js,

Sass

• Editor: Vim

• Remote collab:tmux / tmate / screenhero

• Backend: Ruby, Node, Python

• Github Issues & PRs

• Test-Driven

• Communication: Slack

• Organization: Trello

• Deployment: Divshot, Heroku, S3, Azure

Our Work• Single Page App Development

• Training

• Tune-Up / Rescue

• 0-100% Development

• Open Source Contributions

Front-End Development in 2014

is growing up

JavaScript in 2014is growing up

ecmascript 6 generators

PromisesBroccoli

TDD single-page apps

classes

import/export

JShintSystemjs

CSS in 2014is growing up

transforms border-radius

CSS performance toolingSass/LESS

[attr$=val]

layout thrashing

web fonts

Browsers in 2014are growing up

transforms developer tools

offline-firstHTML5 APIs

evergreen

Content Security Policy

mobile emulation

JavaScript is eating the world

• Massive deployment base

• “Fast”

• Node

• Node-webkit

• Powerful Browser APIs

Evolution of Front-End JavaScript

• onclick!

• “Sprinkles” of JS!

• “frameworks” (Prototype, MooTools, jQuery)!

• build systems, asset pipelines (multi-file js)!

• frameworks v2 (Backbone)!

• high-level frameworks (Ember, Angular…)

JavaScript is Frontierland• Exciting new developments

• ES6: First new JavaScript version in…?

• Exciting new tools

• Grunt, AMD, require.js, jspm, Broccoli, transpiler

• Changing quickly

• proliferation of libraries

Ember• Feels like

• “Mature” Development

• iOS App Development

• Everything has a place

• Holistic

The Ember Trifecta

Ember + Ember Data

Ember-CLI Ember Inspector

Ember-CLI• Command-line tool (like “rails”)

• 1-step to a new app (ember new my-app)

• Code generators (ember generate model User)

• Built-in Test Harness

• Rich, rapidly-growing plugin ecosystem

Ember Inspector• Chrome Extension

• X-Ray Vision for

• Ember Views

• Ember Routes

• Ember Data

Ember DemoData Binding

<p>!{{input value=name placeholder="Enter your name"}}!{{input type='checkbox' checked=showMany}}!</p>!!{{#if name}}!<p>! Your name is: {{name}}!</p>!{{/if}}!

template

Ember DemoComputed Properties

<h2>Computed Properties</h2>!!<p>!{{input value=firstName}}!{{input value=lastName}}!</p>!!{{#if name}}!<p>! Your full name is: {{name}}!</p>!{{/if}}!

import Ember from 'ember';!!export default Ember.Controller.extend({! name: function(){! var first = this.get('firstName'),! last = this.get('lastName');! if (!first || !last) { return; }!! return first + ' ' + last;! }.property('firstName','lastName')!});!

template controller

Ember DemoComputed Property Setters

controller

fullName: function(key, value){! if (arguments.length > 1) { // setter! var fullName = value,! names = fullName.split(' '),! firstName = names[0],! lastName = names[1];!! this.setProperties({! firstName: firstName,! lastName: lastName! });! }!! if (this.get('firstName') && this.get('lastName')) {! return this.get('firstName') + ' ' +! this.get('lastName');! }! }.property('firstName', 'lastName')!

Ember DemoRoutes

• Manage Asynchrony

• Sub states: Loading, error

• Promises

Ember DemoQuery Params

export default Ember.Controller.extend({! queryParams: ['page', 'count'],!! // defaults! page: 1,! count: 10!});!

Ember DemoTests

test('visiting /', function() {! visit('/');!! andThen(function() {! var h1 = find('h1:contains(Ember Is For Everybody)');! equal(h1.length,! 1,! 'has title');!! equal(find('a[href="/data-binding"]').length,! 1,! 'has link to data-binding demo');!! equal(currentURL(), '/');! });!});!

Ember Is For Everybody

The Front-End Story

• Ember is Mainstream-ready

• Ember + Ember-CLI = 1st Class Dev Environment

• How do apps grow with us? What does a long-lived SPA look like?

Other Ember Niceties

• ember addons

• ember data

• ember components

Thank youCory Forsyth

@bantic

Photo credits ! ! ! Wild West Dragon-orb! ! Evolution Wikimedia! ! Everybody Wikipedia!

Links

Cory Forsyth@bantic

Photo credits ! ! ! Wild West Dragon-orb! ! Evolution Wikimedia! ! Everybody Wikipedia!

Slides: http://bit.ly/ember-everybody

Example app: https://github.com/bantic/ember-is-for-everybody

http://emberjs.com

http://201-created.com/codethroughs

http://ember-cli.com