Slide 1
Slide 1 text
Ember.js with Ember-cli
Dev Meetup, Jul 26, 2014 at CloudFactory
By: Sachin Sagar Rai, @millisami
http://nepalonrails.com
Slide 2
Slide 2 text
Goal
What are we building ?
Slide 3
Slide 3 text
Contacts Manager App
Backend api provided by:
https://github.com/rpflorence/addressbook-api
Deployed at:
http://boiling-shore-3684.herokuapp.com
Slide 4
Slide 4 text
Why Ember?
1. Building ambitious web applications
2. Convention over Configuration
3. Follow the convention, trivial choices are the enemy
4. Write less code
5. Built for productivity
6. On n on…
Slide 5
Slide 5 text
Part 1
Ember.js Basic Concepts
Slide 6
Slide 6 text
Router
Architecture
Model
Controller
View
Templates
Slide 7
Slide 7 text
Router
Architecture
Model
Controller
View
Templates
Data flows down from
models via bindings
Slide 8
Slide 8 text
Router
Architecture
Model
Controller
View
Templates
Events flow up from
view layer to router
Data flows down from
models via bindings
Slide 9
Slide 9 text
Router
Architecture
Model
Controller
View
Templates
Events flow up from
view layer to router
Router updates models &
controllers based on events
Data flows down from
models via bindings
Slide 10
Slide 10 text
Part 2
Ember.js app with Ember-Cli
Slide 11
Slide 11 text
http://ember-cli.com
Slide 12
Slide 12 text
What is Ember-Cli
1. Assets Compilation
2. Modules
3. Testing using Cli
4. Dependency Management
The command line interface for building
ambitious web applications.
Slide 13
Slide 13 text
Dependencies
1. Nodejs (http://nodejs.org/)
2. Phantomjs (http://phantomjs.org/)
Slide 14
Slide 14 text
git clone https://github.com/stefanpenner/ember-cli.git
cd ember-cli
npm link
Installation
ember new contacto
cd contacto
npm link ember-cli
ember server
# Generating an emberjs app
# Installing ember-cli
Slide 15
Slide 15 text
Router
1 import Ember from 'ember';
2
3 var Router = Ember.Router.extend({
4 location: ContactoENV.locationType
5 });
6
7 Router.map(function() {
8 this.resource('contacts', { path: '/contacts' }, function() {
9 this.route('show', { path: '/:id' });
10 this.route('edit', { path: '/:id/edit' });
11 this.route('new');
12 });
13 });
14
15 export default Router;
app/router.js
Slide 16
Slide 16 text
Route
1 import Ember from 'ember';
2
3 export default Ember.Route.extend({
4 model: function () {
5 return this.store.find('contact');
6 }
7 });
app/routes/contacts/index.js
Slide 17
Slide 17 text
Models
1 import DS from 'ember-data';
2
3 export default DS.Model.extend({
4 first : DS.attr('string'),
5 last : DS.attr('string'),
6 avatar : DS.attr('string'),
7
8 fullName: function() {
9 return this.get('first') + ' ' + this.get('last');
10 }.property('first', 'last')
11 });
app/models/contact.js
Slide 18
Slide 18 text
Controllers
1 import Ember from 'ember';
2
3 export default Ember.Controller.extend({
4 actions: {
5 submit: function () {
6 var self = this;
7 return this.get('content').save().then(function () {
8 self.transitionToRoute('contacts.index');
9 });
10 }
11 }
12 });
app/controllers/contacts/new.js
Slide 19
Slide 19 text
Views
1 import Ember from 'ember';
2
3 export default Ember.View.extend({
4 click: function() {
5 this.get('controller').send('deleteUser', 10);
6 }
7 });
app/views/clickable.js
Slide 20
Slide 20 text
Templates
1
2
11
12
3 {{#each contact in controller}}
4 {{#link-to "contacts.show" contact class="list-group-item"}}
5 
6 {{contact.fullName}} >
7 {{/link-to}}
8 {{/each}}
9
10
13 {{#link-to 'contacts.new' class="btn btn-default"}}
14 Add New Contact
15 {{/link-to}}
16
app/templates/contacts/index.hbs
Slide 21
Slide 21 text
The Gist/Code at
http://bit.ly/emberjs-with-ember-cli
Demo
http://boiling-hollows-7521.herokuapp.com
Deployed at
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Questions?
Reach me at
Twitter: @millisami
Mail: [email protected]
Blog: http://nepalonrails.com