ember.js: the new black

The New Black

by Marat Dyatko

HISTORY

SproutCore Apple

Ember.js

2

IDEAS

3

More Productive Out of The Box

Convention Over Configuration

Don’t Break The Web

WEB BROWSER

TEXT EDITOR

TERMINAL

TERMINAL

EMBER CLI

6

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

npm install ember-cli -g

PROJECT CREATION

7

ember new my-project

PROJECT CREATION

8

ember new my-project

Blueprint NPM Bower

DEV SERVER

9

ember server

DEV SERVER

10

ember server

Broccoli ES6 Modules Express Livereload

DEV SERVER

11

ember server

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

16

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

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

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

CREATE /USERSRoute + Model + Controller + View

THEORY

19

UsersRoute

THEORY

20

UsersRoute

model [{}, …]

THEORY

21

UsersRoute

model [{}, …]

UsersController

THEORY

22

UsersRoute

model [{}, …]

UsersController

UsersView

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