Slide 1

Slide 1 text

a Bronies Paradise

Slide 2

Slide 2 text

I tweet at @cavneb @coderberry I blog at coderberry.me I commit to github.com/cavneb I work for Instructure I run the EmberSLC meetup Eric Berry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

A Tale of Two Ponies Act 1.

Slide 5

Slide 5 text

Rise of the Unicorn • Fork of Sproutcore in 2011 by Yehuda Katz, Tom Dale and others • Core team includes 10 people (none are paid) • Current version is 1.6.1 • New stable release every 6 weeks.

Slide 6

Slide 6 text

Core Team Yehuda Katz Tom Dale Peter Wagenet Erik Bryn Trek Glowacki Kris Seldon Stefan Penner Leah Silber Robert Jackson Alex Matchneer

Slide 7

Slide 7 text

Core Team Apple Star Blade Thunder Strong Gunner Defiant Perfection Veiled Steel Magical Drop Heroic Fire Radiant Aura Charged Sprout Midnight Rainbow

Slide 8

Slide 8 text

Goals of Ember • Create ambitious web applications • Become more productive out of the box • Write less code • Provide conventions and abstractions Photo by Amy Lombard

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Learning to Fly Act 2.

Slide 11

Slide 11 text

Core Concepts • Object • Router • Model • Controller • View • Templates Photo by Amy Lombard

Slide 12

Slide 12 text

Ember.Object http://emberjs.com/guides/object-model/classes-and-instances/ Everything extends Ember.Object

Slide 13

Slide 13 text

Ember.Object http://emberjs.com/guides/object-model/classes-and-instances/ 1! 2! 3! 4! 5! 6! 7! 8! 9! 10! 11! 12! 13! 14! 15! 16! 17! 18 App.Pony = Ember.Object.extend({! say: function(thing) {! var name = this.get('name');! alert(name + " says: " + thing);! }! });! ! App.FlyingPony = App.Pony.extend({! say: function(thing) {! this._super(thing + “ down there!");! }! });! ! var as = App.FlyingPony.create({! name: “Apple Star"! });! ! as.say(“Hello"); // alerts “Apple Star says: Hello down there!”!

Slide 14

Slide 14 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Request A request is sent to the Ember application

Slide 15

Slide 15 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Route Request The router determines which route to send the request to and the route receives the request and params

Slide 16

Slide 16 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Model Route Request The route gathers the data from the models, which wrap the data (api calls, etc)

Slide 17

Slide 17 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Controller Model Route Request The route then places the data on the controller. The controller maintains display-related state.

Slide 18

Slide 18 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Controller Model Route Template Request And the templates are rendered (having access to the models via the controller)

Slide 19

Slide 19 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Controller Model Route Template View Request Views are used as a UI abstraction to handle user events (if needed)

Slide 20

Slide 20 text

Application Flow http://emberjs.com/guides/object-model/classes-and-instances/ Controller Model Route Template View Component Request Components can be used in templates to provide a self-contained view, controller and template

Slide 21

Slide 21 text

Which Way to Fly? Act 3.

Slide 22

Slide 22 text

Getting Started Photo by Amy Lombard or…

Slide 23

Slide 23 text

Ember command line utility for ambitious web applications. Ember CLI • Generators • Tests • Environment support • Asset compilation via broccoli • ES6 • Dependency management • Community support

Slide 24

Slide 24 text

Where’s the ???!!!

Slide 25

Slide 25 text

Live Coding Act 4.

Slide 26

Slide 26 text

I tweet at @coderberry I blog at coderberry.me I commit to github.com/cavneb I work for Instructure I run the EmberSLC meetup