A Discourse with Ember.js

Régis Hanol @ZogStriP

Jeff Atwood @codinghorror Sam Saffron @samsaffron

Jeff Atwood @codinghorror Sam Saffron @samsaffron Robin Ward @eviltrout

A with

February '13

JSON API BROWSER APPLICATION

Ruby Rails JavaScript Ember

Ember.js incorporates common idioms so you can focus on what
makes your app special, not reinventing the wheel.

Convention Conﬁguration

this.route('user');

UserRoute /user this.route('user');

UserRoute User LOADS /user this.route('user');

UserRoute User LOADS UserController SETS MODEL ON /user this.route('user');

UserRoute User LOADS UserController UserView SETS MODEL ON RENDERS /user
this.route('user');

UserRoute User LOADS UserController UserView user.handlebars SETS MODEL ON RENDERS
BASED ON /user this.route('user');

UserRoute User LOADS UserController UserView user.handlebars SETS MODEL ON RENDERS
GETS STATE FROM BASED ON /user this.route('user');

MVC != MVC Ember Data Outdated help

CLIENT SIDE SERVER SIDE MVC

CLIENT SIDE SERVER SIDE LONG-LIVED STATE-FULL

CLIENT SIDE SERVER SIDE LONG-LIVED SHORT-LIVED STATE-FULL STATE-LESS

CLIENT SERVER

CLIENT SERVER GET /posts

CLIENT SERVER GET /posts Router

CLIENT SERVER GET /posts Router PostsController

CLIENT SERVER GET /posts Router PostsController Post

CLIENT SERVER GET /posts Router PostsController Post PostsView

CLIENT SERVER GET /posts Router PostsController Post PostsView <HTML>

CLIENT SERVER GET /posts Router PostsController Post PostsView <HTML> {

CLIENT SERVER Router

CLIENT SERVER Router Post

CLIENT SERVER Router Post GET /posts.json {…}

CLIENT SERVER Router PostsController Post GET /posts.json {…}

CLIENT SERVER Router PostsController Post PostsView PostsTemplate GET /posts.json {…}

App.Post = Ember.Object.extend({});

var post = App.Post.create(); ! ! ! App.Post = Ember.Object.extend({});

var post = App.Post.create(); ! post.set(‘title’, ‘Hello World’); ! App.Post
= Ember.Object.extend({});

var post = App.Post.create(); ! post.set(‘title’, ‘Hello World’); ! post.get(‘title’);
// Hello World App.Post = Ember.Object.extend({});

var post = App.Post.create({ title: “EmberFest" }); ! App.Post =
Ember.Object.extend({});

var post = App.Post.create({ title: “EmberFest" }); ! post.get(‘title’); //
EmberFest App.Post = Ember.Object.extend({});

$.getJSON(‘http://...', function(posts) { // posts contains the JSON result !
}); });

$.getJSON(‘http://...', function(posts) { return posts.map(function(post){ return App.Post.create(post); }); });

$.getJSON(‘http://...') .then(function(posts){ return posts.map(function(post){ return App.Post.create(post); }); });

App.Post.reopenClass({ ! findAll: function(){ return $.getJSON('http://...') .then(function(posts){ return posts.map(function(post){ return
App.Post.create(post); });  }); } ! });

App.PostRoute = Ember.Route.extend({ ! model: function() {  return App.Post.findAll(); }
! };

RELEASE BETA CANARY

RELEASE BETA CANARY day

RELEASE BETA CANARY week day

RELEASE BETA CANARY 6 weeks week day

DEBUG ALL THE THINGS!

Ember.Application.create({ ! });

Transitioned into 'latest' Transitioned into 'new' Transitioned into 'categories' Ember.Application.create({
LOG_TRANSITIONS: true });

Ember.Application.create({ LOG_TRANSITIONS_INTERNAL: true }); Attempting URL transition to / Transition
#0: application: calling beforeModel hook Transition #0: application: calling deserialize hook Transition #0: application: calling afterModel hook Transition #0: discovery: calling beforeModel hook Transition #0: discovery: calling deserialize hook Transition #0: discovery: calling afterModel hook Transition #0: discovery.latest: calling beforeModel hook Transition #0: discovery.latest: calling deserialize hook Transition #0: discovery.latest: calling afterModel hook Transition #0: Resolved all models on destination route; finalizing transition. Transition #0: TRANSITION COMPLETE.

Ember.Application.create({ LOG_VIEW_LOOKUPS: true }); Rendering application with <Discourse.ApplicationView:ember1278> Object {fullName:
"view:application"} ! Rendering topic with <Discourse.TopicView:ember1330> Object {fullName: "view:topic"} ! Could not find "topic.fromParams" template or view. Nothing will be rendered Object {fullName: "template:topic.fromParams"} ! Rendering discovery with default view <Ember._MetamorphView:ember1981> Object {fullName: "view:discovery"}

Ember.Application.create({ LOG_ACTIVE_GENERATION: true }); generated -> route:adminUsers Object {fullName: "route:adminUsers"}
generated -> route:adminGroups.index Object {fullName: "route:adminGroups.index"} generated -> route:adminEmail Object {fullName: "route:adminEmail"} generated -> route:adminFlags Object {fullName: "route:adminFlags"} generated -> route:adminLogs Object {fullName: "route:adminLogs"} generated -> route:adminCustomize Object {fullName: "route:adminCustomize"}

Ember.Application.create({ LOG_RESOLVER: true }); [✓] view:modal ............................. Discourse.ModalView [✓] controller:modal
....................... Discourse.ModalController [ ] template:modal ......................... template at modal [✓] template:modal/modal ................... template at modal/modal [✓] view:topic-entrance .................... Discourse.TopicEntranceView [✓] controller:topic-entrance .............. Discourse.TopicEntranceController [✓] template:topic-entrance ................ template at topic-entrance [✓] controller:composer .................... Discourse.ComposerController [✓] controller:composer-messages ........... Discourse.ComposerMessagesController [✓] template:composer ...................... template at composer [✓] view:composer-messages ................. Discourse.ComposerMessagesView [ ] template:composer-messages ............. template at composer-messages

var container = App.__container__; ! container.lookup("route:application") container.lookup("controller:post") container.lookup("view:post") container.lookup("template:comment")

Ember.onerror = function(error){ console.log(error); };

Ember.RSVP.on('error', function (error) { console.log(error); } );

INSPECTOR github.com/emberjs/ember-inspector

Y U NO TEST?!!

INTEGRATION UNIT TESTS

App.rootElement = '#ember-testing'; ! ! !

App.rootElement = '#ember-testing'; ! App.setupForTesting(); !

App.rootElement = '#ember-testing'; ! App.setupForTesting(); ! App.injectTestHelpers();

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ember Tests</title> <link rel="stylesheet"
href="qunit.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <div id="ember-testing"></div> <script src="qunit.js"></script> <script src="ember_code.js"></script> <script src="test_code.js"></script> </body> </html>

github.com/airportyh/testem github.com/karma-runner/karma TEST’EM ARMA

visit(url) 1/

visit(url) fillIn(selector, text) click(selector) keyEvent(selector, type, keyCode) triggerEvent(selector, type, options)
1/ 2/

find(selector, context) 1/ 2/ 3/

test(“creating a post", function(){ ! ! ! ! ! !
! ! ! ! ! ! ! ! });

test(“creating a post", function(){ ! // 1 - visit visit(“/posts/new");
! ! ! ! ! ! ! ! ! ! ! });

! // 2 - interact fillIn("input.title", "My new post"); click(“button.submit"); ! ! ! ! ! ! ! });

! // 2 - interact fillIn("input.title", "My new post"); click(“button.submit"); ! ! ! // 3 - check equal(find(“ul.posts li:last").text(), "My new post”); ! ! });

find(selector, context) 1/ 2/ 3/ ASYNCHRONOUS

find(selector, context) 1/ 2/ 3/ ASYNCHRONOUS SYNCHRONOUS

! // 2 - interact fillIn("input.title", "My new post"); click(“button.submit"); ! ! ! // 3 - check equal(find(“ul.posts li:last").text(), "My new post”); ! ! });

! // 2 - interact fillIn("input.title", "My new post"); click(“button.submit"); ! // wait for asynchronous helpers above to complete andThen(function(){ // 3 - check equal(find(“ul.posts li:last").text(), "My new post”); }); ! });

Ember.Test.registerAsyncHelper("addPost", function(app, title, context) { visit("/posts/new"); fillIn("input.title", title); click("button.submit"); }
); ! !

Ember.Test.registerAsyncHelper("addPost", function(app, title, context) { visit("/posts/new"); fillIn("input.title", title); click("button.submit"); }
); ! // addPost(“Hello World"); // addPost(“Hello Emberfest");

module("Integration", { setup: function() { App.reset(); } });

Ember.Object

Ember.Object 1/ instantiate

Ember.Object 1/ 2/ instantiate change state

Ember.Object 1/ 2/ 3/ instantiate change state assert

App.Post = Ember.Object.extend({ status: 'draft', ! isPublished: function() { return
this.get(‘status’) == 'published'; }.property(‘status') ! });

this.get(‘status’) == 'published'; }.property(‘status') ! }); test(‘isPublished is false by default', function() { ! ! ! });

this.get(‘status’) == 'published'; }.property(‘status') ! }); test(‘isPublished is false by default', function() { var post = App.Post.create(); ! ! });

this.get(‘status’) == 'published'; }.property(‘status') ! }); test(‘isPublished is false by default', function() { var post = App.Post.create(); ! equal(post.get(‘isPublished’), false); });

test(‘isPublished is true when published', function() { ! ! !
}); App.Post = Ember.Object.extend({ status: 'draft', ! isPublished: function() { return this.get(‘status’) == 'published'; }.property(‘status') ! });

test(‘isPublished is true when published', function() { var post =
App.Post.create(); ! ! }); App.Post = Ember.Object.extend({ status: 'draft', ! isPublished: function() { return this.get(‘status’) == 'published'; }.property(‘status') ! });

App.Post.create(); post.set('status', ‘published'); ! }); App.Post = Ember.Object.extend({ status: 'draft', ! isPublished: function() { return this.get(‘status’) == 'published'; }.property(‘status') ! });

App.Post.create(); post.set('status', 'published'); equal(post.get(‘isPublished’), true); }); App.Post = Ember.Object.extend({ status: 'draft', ! isPublished: function() { return this.get(‘status’) == 'published'; }.property(‘status') ! });

ACHIEVEMENT UNLOCKED - - Model - Controller - Route -
Component - View

THANKS!

A Discourse with Ember.js

A Discourse with Ember.js

More Decks by Régis Hanol

Other Decks in Programming

Featured

Transcript