Skip to content

Instantly share code, notes, and snippets.

@jessecravens

jessecravens/gist:c6106e89e3335d5a657a

Last active August 29, 2015 14:08
Show Gist options
  • Save jessecravens/c6106e89e3335d5a657a to your computer and use it in GitHub Desktop.
Save jessecravens/c6106e89e3335d5a657a to your computer and use it in GitHub Desktop.
Download ZIP
Ember.js Workshop (Future of Web Apps 2014)
Raw
gistfile1.md

Ember.js Workshop (Future of Web Apps 2014)

Jesse Cravens

Jesse is a principal web engineer at frog where he works with the world’s leading companies, helping them to design, engineer, and bring to market meaningful products and services. He possesses a deep background in web application development, and has recently been focusing on single page web application architecture, the mobile web, and HTML5. Jesse’s first book, HTML5 Hacks, has been translated into multiple languages including Chinese and Japanese, and he has spoken internationally at conferences such as SXSW Interactive, Fluent Conf, Future Insights, Code PaLOUsa, and Øredev.

He previously held senior development and technical management positions at USAA, leading a team of mobile application developers in the planning, designing, development, testing, implementation and maintenance of USAA’s industry leading iOS, Android, Blackberry, and mobile web applications for USAA’s 8 million members deployed worldwide.

Jesse holds a B.A. in Art from Rice University and a Master’s degree in Curriculum and Instruction from the University of Texas at San Antonio.

Schedule

9:00 AM -10:30 AM: Part 1 - Lessons 1-3

10:30 AM - 11:00 AM: BREAK

11:00 AM - 12:30 PM: Part 1 - Lessons 4-7

12:30 PM - 1:30 PM: LUNCH

1:30 PM - 3:00 PM: Part 2 - Lessons 8-10

3:00 PM - 3:30 PM: BREAK

3:30 PM - 5: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)

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

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:

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.

Part 2: O’Reilly’s 'Building Web Apps with Ember.js’ Set Up

Setup

README https://github.com/emberjsbook/rocknrollcall-yeoman/blob/master/README.md

Install Git http://git-scm.com/book/en/Getting-Started-Installing-Git

Install Yeoman http://yeoman.io/codelab/setup.html

Github

Create a github account link to access the companion source code https://github.com/emberjsbook

Debugging in Chrome or Firefox

Install Ember Inspector

FF: https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/

Chrome: https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en

O’Reilly’s Building Web Apps with Ember.js Commit Logs

  • Chapters 3-7 O’Reilly’s Building Web Apps with Ember.js

We will following along the commit log of RocknRollCall demo application. https://github.com/emberjsbook/rocknrollcall-yeoman/commits/master

  • Chapter 10 O’Reilly’s Building Web Apps with Ember.js

We will following along the commit log of EAK Testing demo application. https://github.com/emberjsbook/rocknrollcall-eak/commits/master

Chapter 4: Building the RocknRollCall Prototype: Templates

Rock ‘n’ Roll

Starting with HTML

The Basics of Handlebars.js

Variables

Bound attributes

Creating Custom Helpers

Wrapping things up

Chapter 5: Building the RocknRollCall Prototype: The Router, Routes and Models

URLs : The Web :: “Saved Game Passwords” : The Nintendo Entertainment System

Routing

Routes

Models

Wrapping things up

Chapter 6: Building the RocknRollCall Prototype: Controllers, Views, Data-binding and Events

Controllers

Computed Properties

The Power of Promises and The model Method

Views

Chapter 7: Persisting Data

Not Rolling our Own Ajax

There Must Be a Better Way

Ember Client-Side Persistence Libraries

An Ember-Data Deep Dive

Abstraction Layers: Store, Serializers, and Adapters

Chapter 10: Ember Testing

Ember Testing with Ember App Kit, Qunit, and Testem

Testem and QUnit Test Runners

Ember Client Side Integration Testing

Ember Unit Testing

Wrapping things up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment