ember.js: the new black

30
The New Black by Marat Dyatko

Upload: marat-dyatko

Post on 10-Jul-2015

406 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Ember.js: The New Black

The New Black

by Marat Dyatko

Page 2: Ember.js: The New Black

HISTORY

SproutCore Apple

Ember.js

2

Page 3: Ember.js: The New Black

IDEAS

3

More Productive Out of The Box

Convention Over Configuration

Don’t Break The Web

Page 4: Ember.js: The New Black

WEB BROWSER

TEXT EDITOR

TERMINAL

Page 5: Ember.js: The New Black

TERMINAL

Page 6: Ember.js: The New Black

EMBER CLI

6

Project Creation Blueprint Code Generation Assets Compilation Development Server Watcher & Livereload Server Mock Server

npm install ember-cli -g

Page 7: Ember.js: The New Black

PROJECT CREATION

7

ember new my-project

Page 8: Ember.js: The New Black

PROJECT CREATION

8

ember new my-project

Blueprint NPM Bower

Page 9: Ember.js: The New Black

DEV SERVER

9

ember server

Page 10: Ember.js: The New Black

DEV SERVER

10

ember server

Broccoli ES6 Modules Express Livereload

Page 11: Ember.js: The New Black

DEV SERVER

11

ember server

Broccoli ES6 Modules Express Livereload

Page 12: Ember.js: The New Black

TEXT EDITOR

Page 13: Ember.js: The New Black

ROUTING

13

RESOURCE Big & Absolute

UserRoute

ROUTE Small & Relative

UserCreateRoute UserEditRoute …

Page 14: Ember.js: The New Black

ROUTER

14

Page 15: Ember.js: The New Black

ROUTER

15

URLs /users /users/create /users/:id /users/:id/edit

Page 16: Ember.js: The New Black

ROUTER

16

URLs /users /users/create /users/:id /users/:id/edit

JavaScript users.js users/create.js user.js user/edit.js

Page 17: Ember.js: The New Black

ROUTER

17

JavaScript users.js users/create.js user.js user/edit.js

Handlebars users.hbs users/create.hbs user.hbs user/edit.hbs

URLs /users /users/create /users/:id /users/:id/edit

Page 18: Ember.js: The New Black

CREATE /USERSRoute + Model + Controller + View

Page 19: Ember.js: The New Black

THEORY

19

UsersRoute

Page 20: Ember.js: The New Black

THEORY

20

UsersRoute

model [{}, …]

Page 21: Ember.js: The New Black

THEORY

21

UsersRoute

model [{}, …]

UsersController

Page 22: Ember.js: The New Black

THEORY

22

UsersRoute

model [{}, …]

UsersController

UsersView

Page 23: Ember.js: The New Black

PRACTICE

23

Page 24: Ember.js: The New Black

PRACTICE

24

Page 25: Ember.js: The New Black

PRACTICE

25

Page 26: Ember.js: The New Black

WEB BROWSER

Page 27: Ember.js: The New Black

EMBER INSPECTOR

27

Page 28: Ember.js: The New Black
Page 29: Ember.js: The New Black

EMBERJS.COM

EMBER-CLI.COM

EMBERWEEKLY.COM

Page 30: Ember.js: The New Black

THANKS A LOT FOR YOUR ATTENTION

Questions & Answers

[email protected]

Marat Dyatko