Rocky Mountain Ruby Ember.js Workshop

rmr-ember.md

Ember.js Workshop (RMR 2014)

---

Schedule

  8:00 AM - 9:00 AM: Part 1 - Lessons 1-3
  9:00 AM - 10:00 PM: Part 1 - Lessons 4-7

  Break

  10:15 PM - 11:00 PM: Part 2 - Lessons 8-10
  11:00 PM - 12:00 PM: Part 2 - Lessons 11-13

---

Part 1: Static Files and JSFiddle

Setup

Download Starter Kit https://github.com/emberjs/starter-kit/archive/v1.5.1.zip

Create a JSfiddle account http://jsfiddle.net/user/signup/

---

Introducing Ember

Ember Docs http://emberjs.com

Core Team http://emberjs.com/team/

Core Team Minutes http://emberjs.com/blog/tags/core-team-meeting-minutes.html

Relevant Videos from EmberConf 2014 (Shown during the breaks)

• Ember Conventions and Developer ergonomics http://www.confreaks.com/videos/3298-emberconf2014-using-ember-to-make-the-seemingly-impossible-easy

• Object Model - Array Computed Properties http://www.confreaks.com/videos/3457-emberconf2014-array-computing-properties

• HTMLBars https://www.youtube.com/watch?v=HY4d-0Kzp68

• Ember Data http://www.confreaks.com/videos/3300-emberconf2014-ember-data-and-the-way-forward

• Router and Controllers http://www.confreaks.com/videos/3309-emberconf2014-mr-router-embraces-the-controller

---

Getting Started with the Starter Kit

Here, we will set up some context by exploring the minimal viable Ember application

Ember Inspector Overview

Examples

• frog Timesheet App
• RockNRollCall

---

Ember Object Model

Application

http://jsfiddle.net/jdcravens/LDQaj/

Object Model, Inheritance, Getter and Setters, init, and .super

http://jsfiddle.net/jdcravens/c8Y2b/

Object Model - Computed Properties

http://jsfiddle.net/jdcravens/9Rvg3/

Object Model - Computed Properties w/ @each

http://jsfiddle.net/jdcravens/Vb7Q4/

Observers

http://jsfiddle.net/jdcravens/ny9La/

Bindings

http://jsfiddle.net/jdcravens/MBjw5/

Re-Opening Classes

http://jsfiddle.net/jdcravens/BTH9X/

Mixins

http://jsfiddle.net/jdcravens/M8VVH/

Enumerables

http://jsfiddle.net/jdcravens/C6BV4/

ASSIGNMENT #1:

Open a separate tab in your browser, and follow along with the lessons. Be creative and create your own paradigms we go. As you will see most of the beginning examples are ‘Minecraft’ related, and centered around the Player object.

Try not to copy and paste. Force yourself to write the code on your own using the examples as a reference.

---

Handlebars

Resources:

Handlebars Templating Engine

• http://www.raymondcamden.com/index.cfm/2012/4/19/Demo-of-Handlebars-and-why-you-should-consider-a-templating-engine
• http://noahjablonski.com/handlebars-js-crash-course/

How it works.

http://jsfiddle.net/jdcravens/X2KLd/

With Data in an Array

http://jsfiddle.net/jdcravens/zx2aR/

Simple #with, #each, #if, #!

http://jsfiddle.net/jdcravens/Jw64Z/

NOTE: There will be more on Ember Built in Handlebars helpers (#outlet, #partial, #render) with the Router, and #yield with View layouts later.

---

ASSIGNMENT #2:

Alter the dataset, and work with the Handlebars API to get comfortable with templating in Handlebars: http://handlebarsjs.com/

Try to work with as many of the helpers as you can:

• {{#with}}
• {{#each}}
• {{#if}}
• {{#unless}}

---

Handlebars Helpers

Resources:

Handlebars Helpers API: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html

Simple

http://jsfiddle.net/jdcravens/y7uSC/

Dependencies

http://jsfiddle.net/jdcravens/J99Gj/

Handlebars Helper to Get Bound Data

http://jsfiddle.net/jdcravens/y8pKk/

NOTE: Custom View Helpers (later in the Views lessons)

---

ASSIGNMENT #3:

Create your own Handlebars Helper. It can be a simple Helper or a View Helper. Use the GetBound Data helper to log the data.

---

The Run Loop / Backburner

Resources:

• http://alexmatchneer.com/blog/2013/01/12/everything-you-never-wanted-to-know-about-the-ember-run-loop/
• http://emberjs.com/guides/understanding-ember/run-loop/
• http://aaron.haurwitz.com/#!/posts/fun-with-backburnerjs

How the Browser Works

http://emberjs.com.s3.amazonaws.com/run-loop-guide/index.html

Backbone Example

http://talks.erikbryn.com/backburner.js-and-the-ember-run-loop/#/10

Simple example

http://jsfiddle.net/jdcravens/Sk9hS/

Flushing Router Transitions Queue

http://emberjs.com.s3.amazonaws.com/run-loop-guide/index.html

Backburner and computed properties

http://jsfiddle.net/ahaurw01/E7NfE/6/light/

---

ASSIGNMENT #4:

THe Ember Run Loop is a foundational component of Ember Core; Understanding how it works can help uncover some of the magic under the hood.

Fork simple example http://jsfiddle.net/jdcravens/Sk9hS/

Or, fork http://jsfiddle.net/ahaurw01/E7NfE/6/light/ and create your own example with computed properties

---

HTMLBars

Handlebars Metamorph

http://emberjs.com/guides/understanding-ember/keeping-templates-up-to-date/

• See metamorphs in the inspector
• demo Issues i.e nth-child

Ember, Backbone Benchmarks

http://jsfiddle.net/jashkenas/CGSd5/

HTMLBars/Backburner, Backbone, React Benchmarks

http://jsfiddle.net/Ut2X6/light/

HTMLBars Basics: no bind-attr

http://jsfiddle.net/jdcravens/LhxLG/

HTMLBars Basics: no metamorphs

student-led

HTMLBars Basics: logic

student-led

---

ASSIGNMENT #5:

HTMLBars is a major improvement to Ember templating.

• Performance
• Bind-attr dependency removed
• Metamorphs is now gone, fixing issues with using CSS selectors like 'nth-child'
• Can use logic in the templates

You may notice that there are not examples of 'no metamorphs' and 'logic in templates'. Be the first to construct a fiddle of one of these and win a free copy of 'Building Web Apps with Ember.js'

To obtain the correct dependencies, fork http://jsfiddle.net/jdcravens/LhxLG/

For more advanced challenge dealing with performance and animation, for this fiddle to have the necessary dependencies: http://jsfiddle.net/jdcravens/62dcz/

---

RSVP

Simple

http://jsfiddle.net/jdcravens/Yqeec/

RSVP Chai-as-promised

http://jsfiddle.net/jdcravens/fv9xm/

RSVP and the Router - (more later)

RSVP.hash, RSVP.all - (more later in Views)

---

ASSIGNMENT #6:

Promises make development and flow management alot easier and clean, but they are a bit much to grok at first.

So, let's spend some time getting to know them better.

Fork either of the the 2 examples and expand it, or make it into something of your own. Be creative.

---

Router

Simple .map

http://jsfiddle.net/jdcravens/9ECFy/

Router and Handlebars Helpers

http://jsfiddle.net/jdcravens/py5YB/

outlet http://jsfiddle.net/jdcravens/czArC/

render http://jsfiddle.net/jdcravens/er2GH/

partial http://jsfiddle.net/jdcravens/t8yyp/

Routes vs Resources

http://jsfiddle.net/jdcravens/LfPe2/

Async Router

part 1 http://jsfiddle.net/jdcravens/4TQEN/ / understand Promises

part 2 http://jsfiddle.net/jdcravens/5Dyuz/ / understand hooks / active generation

Simple RSVP hash from IndexRoute

http://jsfiddle.net/jdcravens/8XYCa/

Nested Routes, Async Router, before/after model hooks, named outlets

http://jsfiddle.net/jdcravens/XVz53/

---

ASSIGNMENT #7:

Start to build out a Navigation and Information Architecture for a simple web site. Do your best to exercise everything you have learned in the last section.

---

Controllers

ObjectController and ArrayController

http://jsfiddle.net/jdcravens/VfmV9/

Controllers and Object Model

http://jsfiddle.net/jdcravens/qK5QP/

Hierarchy

part 1: http://jsfiddle.net/jdcravens/eW6Q9/

part 2: http://jsfiddle.net/jdcravens/T6jWL/

Needs

part 3: http://jsfiddle.net/jdcravens/m9vAb/

Sorting

http://jsfiddle.net/jdcravens/38uTS/

---

ASSIGNMENT #8:

Controllers are Objects so they inherit from Ember.Object. Decorate a model by using your undersrtanding of the Object Model you learned earlier in the day. If you use data, you many also need to be sure you understand the difference between Array and Object Controllers.

---

Views

Simple Views

http://jsfiddle.net/jdcravens/Zjs7N/

Custom View Helpers

http://jsfiddle.net/jdcravens/FcB58/

Layouts (simple handlebars compile)

http://jsfiddle.net/jdcravens/xeTaW/

Built In Views

Select

http://jsfiddle.net/jdcravens/4dD4M/

---

ASSIGNMENT #9:

Choose 1-3 Built-In Views and build a UI that uses them.

---

Components

Custom Elements

http://jsfiddle.net/jdcravens/7j6tg/

---

ASSIGNMENT #10:

Create your own component using custom elements.

---

Actions

Resources:

http://alexspeller.com/simple-forms-with-ember/

Simple

http://jsfiddle.net/jdcravens/K7pBB/

Bringing things together with Actions and Components

http://jsfiddle.net/jdcravens/DpKj5/

---

ASSIGNMENT #11:

Explore Actions in your own implementation. Recall the Controller heirarchies you learned in the Controllers section.

---

Ember-Data and the FixtureAdapter

Basic

http://jsfiddle.net/jdcravens/jZB24/

---

ASSIGNMENT #12:

Another Fixture that can be used for client-side data is the LocalStorageAdapter. Fork http://jsfiddle.net/jdcravens/jZB24/ and use the Local Storage Adapter to persist data locally.

---

Wrapping It All Together

RSVP.hash, Components, FixtureAdapter

http://jsfiddle.net/jdcravens/cZJLH/

---

ASSIGNMENT #13:

Be Creative. Tie everything you have learned into one super fiddle. Consider this your final assignement of Part 1.

---