Lighting Up with Ember.js

Slide 1

Slide 1 text

LIGHTING UP WITH EMBER.JS Burlington JS - April 10, 2013 Presented by Peter Brown

Slide 2

Slide 2 text

ME. @beerlington github.com/beerlington beerlington.com opinions + cats opinions + code code

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WEB DEVELOPER

Slide 5

Slide 5 text

RAILS DEVELOPER

Slide 6

Slide 6 text

JAVASCRIPT DEVELOPER

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

BACKBONE.JS Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Slide 9

Slide 9 text

COFFEESCRIPT

Slide 10

Slide 10 text

COFFEESCRIPT

Slide 11

Slide 11 text

EMBER.JS A framework for creating ambitious web applications Write dramatically less code Built for productivity Don't waste time making trivial choices

Slide 12

Slide 12 text

RUBY ON RAILS Web development that doesn’t hurt Optimized for programmer happiness and sustainable productivity Convention over conﬁguration

Slide 13

Slide 13 text

RAILS + EMBER.JS = <3

Slide 14

Slide 14 text

CONVENTION OVER CONFIGURATION

Slide 15

Slide 15 text

CONVENTION CONFIGURATION

Slide 16

Slide 16 text

CON + VEN + TION CON + FIGURA + TION

Slide 17

Slide 17 text

VEN FIGURA

Slide 18

Slide 18 text

VENFIGURA = RAVE FUNGI

Slide 19

Slide 19 text

GLOWING MUSHROOMS OMG MAGIC!!!

Slide 20

Slide 20 text

CONVENTIONS IN LIEU OF CODE

Slide 21

Slide 21 text

“It is more important to reduce the effort of maintenance than it is to reduce the effort of implementation” Max Kanat-Alexander, Code Simplicity

Slide 22

Slide 22 text

IT’S NOT ALL FUN AND GAMES

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

LEARNING CURVE Frustration Time

Slide 25

Slide 25 text

PAYOFF OVER TIME Payoff Time

Slide 26

Slide 26 text

DON’T FEAR THE MAGIC

Slide 27

Slide 27 text

GETTING STARTED • Templates • Routing • Controllers • Models • Views

Slide 28

Slide 28 text

TEMPLATES HTML + embedded expressions

Hello, {{name}}!

Slide 29

Slide 29 text

ROUTER Manages the state of the application App.Router.map(function() { this.route("about", { path: "/about" }); this.route("favorites", { path: "/favs" }); }); URL Route

Slide 30

Slide 30 text

ROUTE Customizing the behavior of a route App.IndexRoute = Ember.Route.extend({ setupController: function(controller) { // Set the IndexController's `title` controller.set('title', "My App"); } });

Slide 31

Slide 31 text

CONTROLLER Acts as a proxy to the model App.SongController = Ember.ObjectController.extend({ duration: function() { var duration = this.get('content.duration'), minutes = Math.floor(duration / 60), seconds = duration % 60; return [minutes, seconds].join(':'); }.property('content.duration') });

Slide 32

Slide 32 text

MODEL Persisted objects App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') });

Slide 33

Slide 33 text

VIEW When you need more control var view = Ember.View.create({ templateName: 'say-hello', name: "Bob" });

Slide 34

Slide 34 text

TESTING IN EMBER

Slide 35

Slide 35 text

TESTING IN EMBER

Slide 36

Slide 36 text

JAVASCRIPT DEVELOPER?

Slide 37

Slide 37 text

WRAPPING UP “What kind of application are you building?” Tom Dale - Ember.js Core Team

Slide 38

Slide 38 text

RESOURCES • http://emberjs.com/guides/ • http://emberweekly.com/ • http://railscasts.com • http://eviltrout.com/2013/02/27/adding-to-discourse- part-1.html • https://peepcode.com/products/emberjs

Slide 39

Slide 39 text

LIVE EXAMPLE