Chris Manson
Creator of Authmaker. Programmer, Entrepreneur, Mentor and EmberJS advocate. Member of the Ember Core Learning team. DublinJS meetup organiser.
Introduction to EmberJS
The times are changing: you better be ready
Presented by Chris Manson (@real_ate)
August 28, 2014 - Sheffield JS
About me
CTO Blooie
<3 Ember
Times are a changing
... by "times" i mean dashboards
http://builtwithember.io/
Core Concepts
Templates & Router
{{demo}}Models, Routes & Controllers
Ember.Demo.extend({}) Components
<demo></demo>Echosystem
"keywords": ["ember-addon", "demo"]Templates & Router
Router
Router.map(function() {
this.resource('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.resource('comments', function() {
this.route('new');
});
});
});| URL | Route Name | Template |
|---|---|---|
/
|
index
|
index
|
| N/A |
post
|
post
|
2
|
post.index
|
post/index
|
/post/:post_id/edit
|
post.edit
|
post/edit
|
| N/A |
comments
|
comments
|
/post/:post_id/comments
|
comments.index
|
comments/index
|
/post/:post_id/comments/new
|
comments.new
|
comments/new
|
| URL | Route Name | Controller | Route | Template |
|---|---|---|---|---|
/
|
index
|
IndexController
|
IndexRoute
|
index
|
| N/A |
post
|
PostController
|
PostRoute
|
post
|
2
|
post.index
|
PostIndexController
|
PostIndexRoute
|
post/index
|
/post/:id/edit
|
post.edit
|
PostEditController
|
PostEditRoute
|
post/edit
|
| N/A |
comments
|
CommentsController
|
CommentsRoute
|
comments
|
/post/:id/comments
|
comments.index
|
CommentsIndexController
|
CommentsIndexRoute
|
comments/index
|
/post/:id/comments/new
|
comments.new
|
CommentsNewController
|
CommentsNewRoute
|
comments/new
|
... not really
Handlebars Templates
//application.hbs
I swear i'm in an application
{{outlet}}//post.hbs
Post anyone?
{{outlet}}//comments.hbs
comments
{{outlet}}//comments/index.hbs
<h1> Hello Sheffield! </h1>Demo 1.0.0
Models, Routes & Controllers
... or really just routes & controllers
// routes/posts.js route
export default Ember.Route.extend({
model: function(){
return Ember.$.getJSON("/api/posts");
}
});
CORS opens the internet !
... or does it
Controller
... yes that's it!
// controllers/posts.js
export default Ember.ArrayController.extend({}); // templates/posts.hbs
{{#each}}
<h1> Meetup: {{#link-to 'post' id}}{{name}}{{/link-to}} </h1>
{{{description}}}
{{/each}}demo 2.0.0
Components
Comments - they're everywhere!!
... and that's it! ... again
// templates/components/meetup-comment.hbs
<h1>Author: {{data.member_name}}</h1>
{{data.comment}}// templates/post.hbs
{{#each}}
{{meetup-comment data=this}}
{{meetup-comment data=this}}
{{/each}}demo 3.0.0
Ember-cli : your best friend
... and thats it!
npm install --save ember-cli-foundationYes there is a pattern emerging here.
My day-to-day in Development
Leave me alone designers
I just want to write server code
I want to add an isolated feature to the frontend
Leave me alone copy people
The Future
... with a caveat
Questions?
EmberJS - The times are changing: you better be ready
By Chris Manson
EmberJS - The times are changing: you better be ready
An introduction to EmberJS, presented to SheffieldJS on 2014-08-28
