Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Marco Otte-Witte @marcoow

Slide 3

Slide 3 text

http://simplabs.com @simplabs

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

http://emberjs.com/images/brand/ember_Ember-Light.png

Slide 6

Slide 6 text

…let's start with some context

Slide 7

Slide 7 text

2

Slide 8

Slide 8 text

https://facebook.github.io/react/ http://red-badger.com/blog/wp-content/uploads/2015/04/react-logo-1000-transparent.png

Slide 9

Slide 9 text

https://angularjs.org https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png

Slide 10

Slide 10 text

https://angular.io https://github.com/angular/angular.io/blob/master/public/resources/images/logos/angular2/angular.svg ? ? ? ? ?

Slide 11

Slide 11 text

https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png

Slide 12

Slide 12 text

…but isn't Ember dead?

Slide 13

Slide 13 text

Ember is alive and well, just doesn't receive as much hype as the other ones

Slide 14

Slide 14 text

So what is Ember.js?

Slide 15

Slide 15 text

Ember is a framework for ambitious web applications

Slide 16

Slide 16 text

…but isn't Ember huge? » ls -lh 514K ember-data.prod.js 1.6M ember.prod.js 1.1K react-dom.js 644K react.js

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

the base Framework with the core functionality http://emberjs.com/images/brand/ember_Ember-Light.png https://github.com/emberjs/ember.js

Slide 19

Slide 19 text

the command line interface http://emberjs.com/images/brand/ember_CLI-Light.png https://github.com/ember-cli/ember-cli

Slide 20

Slide 20 text

Angular CLI is built on Ember CLI https://github.com/angular/angular-cli "dependencies": {
 … "ember-cli": "2.5.0",
 …

Slide 21

Slide 21 text

the data persistence library http://emberjs.com/images/brand/ember_Data-Light.png https://github.com/emberjs/data

Slide 22

Slide 22 text

Liquid Fire for animations https://github.com/ember-animation/liquid-fire

Slide 23

Slide 23 text

Ember Inspector Developer Tools extension for Chrome and Firefox https://github.com/emberjs/ember-inspector

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Ecosystem

Slide 26

Slide 26 text

http://www.ecma-international.org/ecma-262/6.0/

Slide 27

Slide 27 text

https://babeljs.io

Slide 28

Slide 28 text

https://babeljs.io http://handlebarsjs.com

Slide 29

Slide 29 text

http://jsonapi.org

Slide 30

Slide 30 text

JSON API is great for all APIs, not only in combination with Ember

Slide 31

Slide 31 text

“ “ “ “

Slide 32

Slide 32 text

Convention over Configuration

Slide 33

Slide 33 text

https://github.com/rails/weblog/blob/gh-pages/images/rails-logo.svg

Slide 34

Slide 34 text

CoC is based on the idea that all projects have lots of things in common that can all be solved once by the framework

Slide 35

Slide 35 text

CoC allows you to focus on features

Slide 36

Slide 36 text

…and features mean value

Slide 37

Slide 37 text

Conventions also prevent projects from piling up complexity

Slide 38

Slide 38 text

…as there's usually only one right way to do sth.

Slide 39

Slide 39 text

conventions also make switching between projects easy

Slide 40

Slide 40 text

Ember.js' Conventions

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

The Router describes the application's route hierarchy and maps URLs to Ember routes

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Routes in Ember are nested and child routes render into their parent routes

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Routes load models and render templates

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Models represent persistent state

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Templates map data to DOM

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Components combine a template and associated code as a reusable UI element

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

application.hbs {{outlet}}

Slide 57

Slide 57 text

{{outlet}} albums.hbs

Slide 58

Slide 58 text

album.hbs {{star-rating}} {{song-tile}} {{play-icon}}

Slide 59

Slide 59 text

Ember CLI

Slide 60

Slide 60 text

Ember ClI implements a build system and defines a common project structure

Slide 61

Slide 61 text

» tree app/ app "## app.js "## components $ &## album-tile.js "## models $ &## album.js "## router.js "## routes $ &## albums.js &## templates "## application.hbs "## components $ &## album-tile.hbs &## albums.hbs

Slide 62

Slide 62 text

// app/models/album.js import Model from 'ember-data/model'; import attr from 'ember-data/attr'; import { belongsTo } from 'ember-data/relationships'; export default Model.extend({ title: attr('string'), artist: belongsTo() });

Slide 63

Slide 63 text

» ember build Built project successfully. Stored in "dist/".

Slide 64

Slide 64 text

» ember serve Livereload server on http://localhost:49152 Serving on http://localhost:4200/ Build successful - 2569ms. Slowest Trees | Total ----------------------------------------------+--------------------- Babel | 362ms Babel | 355ms SourceMapConcat: Concat: Vendor | 227ms SourceMapConcat: Concat: Addon JS | 141ms Slowest Trees (cumulative) | Total (avg) ----------------------------------------------+--------------------- Babel (13) | 1143ms (87 ms) SourceMapConcat: Concat: Vendor (1) | 227ms SourceMapConcat: Concat: Addon JS (1) | 141ms Funnel: Addon JS (7) | 129ms (18 ms)

Slide 65

Slide 65 text

» ember test Built project successfully. Stored in "/Users/marcoow/Documents/Code/ember-blog/tmp/class- tests_dist-7Ro1V3FR.tmp". ok 1 PhantomJS 1.9 - Acceptance | list posts: visiting / renders all posts … ok 67 PhantomJS 1.9 - Unit | Model | post: belongs to an author ok 68 PhantomJS 1.9 - JSHint - unit/models/post-test.js: should pass jshint 1..68 # tests 68 # pass 68 # skip 0 # fail 0

Slide 66

Slide 66 text

Evolution

Slide 67

Slide 67 text

Ember goes to great lengths to make sure the community moves forward, not leaving a single project behind

Slide 68

Slide 68 text

RFCs Canary Beta Stable LTS

Slide 69

Slide 69 text

RFCs are were new features and changes are discussed in the open before implementation begins

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs

Slide 72

Slide 72 text

Canary builds are where new features land first (behind feature flags)

Slide 73

Slide 73 text

// config/environment.js var ENV = { EmberENV: { FEATURES: { 'ember-routing-routable-components': true } } };

Slide 74

Slide 74 text

Beta releases have new features that proved stable in Canary enabled by default

Slide 75

Slide 75 text

Stable releases contain everything that proved to be stable in the Beta phase

Slide 76

Slide 76 text

There are new beta and stable releases every 6 weeks

Slide 77

Slide 77 text

the release process is inspired by the Chromium Project's Release Channels https://www.chromium.org/getting-involved/dev-channel

Slide 78

Slide 78 text

http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

Slide 79

Slide 79 text

Semantic Versioning gives software versions their meaning back (if used correctly)

Slide 80

Slide 80 text

Major.Minor.Patch

Slide 81

Slide 81 text

Ember's 6 week stable releases are minor releases and thus backwards compatible

Slide 82

Slide 82 text

…might introduce new deprecations though

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Major Releases do not introduce any new functionality but remove previously deprecated cruft only

Slide 85

Slide 85 text

Upgrading from one major release to the next is as easy as clearing all deprecations and switching the release number

Slide 86

Slide 86 text

The whole community is moving forwards constantly in incremental steps that are easy for everyone to make

Slide 87

Slide 87 text

"Stability without Stagnation"

Slide 88

Slide 88 text

Long Term Support releases are less frequently updated stable releases

Slide 89

Slide 89 text

every fourth stable release is an LTS release

Slide 90

Slide 90 text

http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

Slide 91

Slide 91 text

Enabling Code Reuse across the community

Slide 92

Slide 92 text

Addons can extend the build process, add commands, merge code into the app, etc.

Slide 93

Slide 93 text

» ember install ember-cli-sass Installing packages for tooling via npm. Binary downloaded and installed at /Users/marcoow/ Documents/Code/ember-workshop/tomster-player/ node_modules/ember-cli-sass/node_modules/broccoli-sass- source-maps/node_modules/node-sass/vendor/darwin-x64-14/ binding.node "/Users/marcoow/Documents/Code/ember-workshop/tomster- player/node_modules/ember-cli-sass/node_modules/ broccoli-sass-source-maps/node_modules/node-sass/vendor/ darwin-x64-14/binding.node" exists. testing binary. Binary is fine; exiting. Installed packages for tooling via npm. Installed addon package.

Slide 94

Slide 94 text

» ember install ember-cli-deploy Installed packages for tooling via npm. installing ember-cli-deploy create config/deploy.js Installed addon package. » ember help deploy Requested ember-cli commands: ember deploy Deploys an ember-cli app --deploy-config-file (String) (Default: config/deploy.js) --verbose (Boolean) (Default: false) --activate (Boolean) (Default: false) --show-progress (Boolean) (Default: true) aliases: -p, -progress --log-info-color (String) (Default: "blue") --log-error-color (String) (Default: "red")

Slide 95

Slide 95 text

» ember install ember-simple-auth Installed packages for tooling via npm. Installed addon package.

Slide 96

Slide 96 text

This is only possible with Ember CLI that provides a standard build system and a common project structure

Slide 97

Slide 97 text

…and everybody in the community is using it

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Big advancements

Slide 100

Slide 100 text

Ember's conventions, unified build system, common project structure and the release process allow Ember to make big advancements and take the whole community with it

Slide 101

Slide 101 text

Ember's new, super fast rendering engine 2

Slide 102

Slide 102 text

Ember's rendering performance used to be not too great actually

Slide 103

Slide 103 text

2

Slide 104

Slide 104 text

Glimmer 2 is coming with one of the next minor releases, thus is going to be fully backwards compatible

Slide 105

Slide 105 text

Server side rendering for Ember apps https://github.com/ember-fastboot/fastboot-website/blob/master/public/images/logo.svg

Slide 106

Slide 106 text

FastBoot boots Ember apps on the server and rehydrates them in the browser for super fast startup

Slide 107

Slide 107 text

…which solves the problems of slow(ish) initial load while preserving all the benefits that you get with using sth. like Ember

Slide 108

Slide 108 text

FastBoot will be available as an Addon and will not require anyone to rewrite their apps

Slide 109

Slide 109 text

» ember install ember-cli-fastboot Installed packages for tooling via npm. Installed addon package. » ember fastboot Built project successfully. Stored in "fastboot-dist". Installing FastBoot npm dependencies Ember FastBoot running at http://[::]:3000

Slide 110

Slide 110 text

» curl -i localhost:3000 HTTP/1.1 200 OK X-Powered-By: Express Content-Type: text/html; charset=utf-8 Content-Length: 694 ETag: W/"2b6-8EjmJvo+xk/TQB5ieKgfwg" Date: Thu, 05 May 2016 19:35:42 GMT Connection: keep-alive Fastboot

Welcome to Ember

Slide 111

Slide 111 text

There's a bright future ahead for Ember

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

Ember does not depend on the goodwill of a single company but is backed by a great community and core team members with all kinds of backgrounds

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png

Slide 117

Slide 117 text

Thanks

Slide 118

Slide 118 text

http://simplabs.com @simplabs