Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Emberjs with Ember-Cli
Search
millisami
July 26, 2014
Programming
6
3.9k
Emberjs with Ember-Cli
Using Ember-Cli to build an Emberjs app
millisami
July 26, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
950
CSC305 Lecture 04
javiergs
PRO
0
230
実践AIチャットボットUI実装入門
syumai
7
2.3k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
130
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
280
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
210
Reactをクライアントで使わない
yusukebe
7
6.3k
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
360
Build your own WebP codec in Swift
kishikawakatsumi
2
840
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Cult of Friendly URLs
andyhume
79
6.6k
The Language of Interfaces
destraynor
162
25k
Building Applications with DynamoDB
mza
96
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Six Lessons from altMBA
skipperchong
28
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
600
Transcript
Ember.js with Ember-cli Dev Meetup, Jul 26, 2014 at CloudFactory
By: Sachin Sagar Rai, @millisami http://nepalonrails.com
Goal What are we building ?
Contacts Manager App Backend api provided by: https://github.com/rpflorence/addressbook-api Deployed at:
http://boiling-shore-3684.herokuapp.com
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…
Part 1 Ember.js Basic Concepts
Router Architecture Model Controller View Templates
Router Architecture Model Controller View Templates Data flows down from
models via bindings
Router Architecture Model Controller View Templates Events flow up from
view layer to router Data flows down from models via bindings
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
Part 2 Ember.js app with Ember-Cli
http://ember-cli.com
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.
Dependencies 1. Nodejs (http://nodejs.org/) 2. Phantomjs (http://phantomjs.org/)
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
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
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
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
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
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
Templates 1 <div class="col-md-4"> 2 <div class="list-group"> 3 {{#each contact
in controller}} 4 {{#link-to "contacts.show" contact class="list-group-item"}} 5 <img class="img-circle" {{ bind-attr src=contact.avatar}}> 6 {{contact.fullName}} <span class="badge">></span> 7 {{/link-to}} 8 {{/each}} 9 </div> 10 </div> 11 12 <div class="col-md-8"> 13 {{#link-to 'contacts.new' class="btn btn-default"}} 14 <span class="glyphicon glyphicon-plus"></span> Add New Contact 15 {{/link-to}} 16 </div> app/templates/contacts/index.hbs
The Gist/Code at http://bit.ly/emberjs-with-ember-cli Demo http://boiling-hollows-7521.herokuapp.com Deployed at
None
Questions? Reach me at Twitter: @millisami Mail:
[email protected]
Blog: http://nepalonrails.com