Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The New Black 
by Marat Dyatko
HISTORY 
SproutCore Apple 
Ember.js 
2
IDEAS 
More Productive Out of The Box 
Convention Over Configuration 
Don’t Break The Web 
3
WEB BROWSER 
TEXT EDITOR 
TERMINAL
TERMINAL
EMBER CLI 
Project Creation 
Blueprint Code Generation 
Assets Compilation 
Development Server 
Watcher & Livereload Serve...
PROJECT CREATION 
ember new my-project 
7
PROJECT CREATION 
ember new my-project 
8 
Blueprint 
NPM 
Bower
DEV SERVER 
ember server 
9
DEV SERVER 
ember server 
10 
Broccoli 
ES6 Modules 
Express 
Livereload
DEV SERVER 
ember server 
11 
Broccoli 
ES6 Modules 
Express 
Livereload
TEXT EDITOR
ROUTING 
13 
RESOURCE 
Big & Absolute 
UserRoute 
ROUTE 
Small & Relative 
UserCreateRoute 
UserEditRoute 
…
ROUTER 
14
ROUTER 
15 
URLs 
/users 
/users/create 
/users/:id 
/users/:id/edit
ROUTER 
URLs 
/users 
/users/create 
/users/:id 
/users/:id/edit 
16 
JavaScript 
users.js 
users/create.js 
user.js 
user...
ROUTER 
JavaScript 
users.js 
users/create.js 
user.js 
user/edit.js 
17 
Handlebars 
users.hbs 
users/create.hbs 
user.hb...
CREATE /USERS 
Route + Model + Controller + View
THEORY 
UsersRoute 
19
THEORY 
UsersRoute 
model [{}, …] 
20
THEORY 
UsersRoute 
model [{}, …] 
UsersController 
21
THEORY 
UsersRoute 
model [{}, …] 
UsersController 
UsersView 
22
PRACTICE 
23
PRACTICE 
24
PRACTICE 
25
WEB BROWSER
EMBER INSPECTOR 
27
EMBERJS.COM 
EMBER-CLI.COM 
EMBERWEEKLY.COM
THANKS A LOT 
FOR YOUR ATTENTION 
Questions & Answers 
i@marat.by 
Marat Dyatko
Ember.js: The New Black
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Ember.js: The New Black

Download to read offline

The new black means 'the new fad, trend, or style of the moment.'

15 mins presentation on how to start with Ember JavaScript framework including use of Ember CLI tool and Ember Inspector browser extension. Also I tried to clarify difference between routes and resources.

Online Keynote version is available: https://www.icloud.com/keynote/AwBWCAESEI5cIGTlINhyDt1JdL0A2IgaKtmM_aCc2HcPH-mnR48FG2-69fD1jDjUrJOASmRuYj9G2uCYs2CFwY7ipgMCUCAQEEIIEKonouq0IbSzRkAtJqW2CF7kgUjUe0L_sxaCoYvtU2#Ember

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Ember.js: The New Black

  1. 1. The New Black by Marat Dyatko
  2. 2. HISTORY SproutCore Apple Ember.js 2
  3. 3. IDEAS More Productive Out of The Box Convention Over Configuration Don’t Break The Web 3
  4. 4. WEB BROWSER TEXT EDITOR TERMINAL
  5. 5. TERMINAL
  6. 6. EMBER CLI Project Creation Blueprint Code Generation Assets Compilation Development Server Watcher & Livereload Server Mock Server npm install ember-cli -g 6
  7. 7. PROJECT CREATION ember new my-project 7
  8. 8. PROJECT CREATION ember new my-project 8 Blueprint NPM Bower
  9. 9. DEV SERVER ember server 9
  10. 10. DEV SERVER ember server 10 Broccoli ES6 Modules Express Livereload
  11. 11. DEV SERVER ember server 11 Broccoli ES6 Modules Express Livereload
  12. 12. TEXT EDITOR
  13. 13. ROUTING 13 RESOURCE Big & Absolute UserRoute ROUTE Small & Relative UserCreateRoute UserEditRoute …
  14. 14. ROUTER 14
  15. 15. ROUTER 15 URLs /users /users/create /users/:id /users/:id/edit
  16. 16. ROUTER URLs /users /users/create /users/:id /users/:id/edit 16 JavaScript users.js users/create.js user.js user/edit.js
  17. 17. ROUTER JavaScript users.js users/create.js user.js user/edit.js 17 Handlebars users.hbs users/create.hbs user.hbs user/edit.hbs URLs /users /users/create /users/:id /users/:id/edit
  18. 18. CREATE /USERS Route + Model + Controller + View
  19. 19. THEORY UsersRoute 19
  20. 20. THEORY UsersRoute model [{}, …] 20
  21. 21. THEORY UsersRoute model [{}, …] UsersController 21
  22. 22. THEORY UsersRoute model [{}, …] UsersController UsersView 22
  23. 23. PRACTICE 23
  24. 24. PRACTICE 24
  25. 25. PRACTICE 25
  26. 26. WEB BROWSER
  27. 27. EMBER INSPECTOR 27
  28. 28. EMBERJS.COM EMBER-CLI.COM EMBERWEEKLY.COM
  29. 29. THANKS A LOT FOR YOUR ATTENTION Questions & Answers i@marat.by Marat Dyatko
  • bluemner

    May. 1, 2015

The new black means 'the new fad, trend, or style of the moment.' 15 mins presentation on how to start with Ember JavaScript framework including use of Ember CLI tool and Ember Inspector browser extension. Also I tried to clarify difference between routes and resources. Online Keynote version is available: https://www.icloud.com/keynote/AwBWCAESEI5cIGTlINhyDt1JdL0A2IgaKtmM_aCc2HcPH-mnR48FG2-69fD1jDjUrJOASmRuYj9G2uCYs2CFwY7ipgMCUCAQEEIIEKonouq0IbSzRkAtJqW2CF7kgUjUe0L_sxaCoYvtU2#Ember

Views

Total views

771

On Slideshare

0

From embeds

0

Number of embeds

23

Actions

Downloads

5

Shares

0

Comments

0

Likes

1

×