into

WELCOME

Integrating

legacy applications

Dienstag, 08. Oktober 13

Hi! I am Michael!

@LevelbossMike

Runtastic Head of Web Frontend

Dienstag, 08. Oktober 13

Progressive Enhancement

is

PROBLEM?!

Dienstag, 08. Oktober 13

AGREEMENT

Dienstag, 08. Oktober 13

AGREEMENT

Dienstag, 08. Oktober 13

AGREEMENT

Dienstag, 08. Oktober 13

AGREEMENT

Dienstag, 08. Oktober 13

IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?

Dienstag, 08. Oktober 13

IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?

-> inconsistent

Dienstag, 08. Oktober 13

IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?

-> inconsistent

-> bad

Dienstag, 08. Oktober 13

IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?

-> inconsistent

-> bad

-> no

Dienstag, 08. Oktober 13

IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?

-> inconsistent

-> bad

-> no

-> hell no!

Dienstag, 08. Oktober 13

Framework!

SOLUTION

Dienstag, 08. Oktober 13

ALTERNATIVES

Do It

YourselfExisting

Framework(Backbone), Marionette, Knockout, Batman,

React, Flight, Angular, Ember...Twitter & Facebook

yeah, right

Dienstag, 08. Oktober 13

Runtastic <3 <3 <3 Ember.js

Angular.js Ember.js✓ popular (#4 github.com)

✓ easy to learn

␡ convention over configuration

␡ url-support

␡ nested UIs

␡ minimizes DOM-updates

␡ data-store

✓ popular (#22 github.com)

␡ easy to learn

✓ convention over configuration

✓ url-support

✓ nested UIs

✓ minimizes DOM-updates

✓ data-store

Dienstag, 08. Oktober 13

TRUTH

JS-Frontend development is not trivial. Anybody expecting to build a functional app

in 5 minutes is batshit insane and should gtfo and die in a fire.

”“

Dienstag, 08. Oktober 13

FINALLY

Dienstag, 08. Oktober 13

Structure? Maintainability?Testability?Extensibility?

-> yes

-> yes

-> yes

-> yes

CONVENTIONS

Dienstag, 08. Oktober 13

INTEGRATION

1 App = Ember.Application.create({ 2 rootElement: '#ember-app' 3 });

Easy:Use the built in rootElement-property on Ember.Application

Protip:You can have multiple Ember apps on one page.-> Prevent Ember from changing URL by extending the default Router.

1 App.Router = Ember.Router.extend({2 location: 'none'3 });

http://emberjs.jsbin.com/iVUCIRo/1

Dienstag, 08. Oktober 13

ADVANCED INTEGRATION

1 App = Ember.Application.create({ 2 rootElement: '#ember-app', 3 4 ready: function() { 5 if (Ember.$('#ember-app').data('mode') == 'search') { 6 this.set('searchMode', true); 7 } 8 } 9 });10 11 App.IndexRoute = Ember.Route.extend({12 redirect: function() {13 if (App.get('searchMode')) {14 this.transitionTo('searchResults');15 } else {16 this.transitionTo('profile');17 }18 }19 });

http://emberjs.jsbin.com/iVUCIRo/5

Dienstag, 08. Oktober 13

COMPONENTS

Components can be shared across applications.Components can be used to wrap 3rd party libraries (e.g. d3)Components can be used outside of a big Ember application.

Protip:Write now, use now and later in a single page app.

-> Components can be nested! Composition FTW!

1 jsFrameworks = [2 'Backbone', 'Marionette', 'Knockout', 'Batman',3 'React', 'Flight', 'Angular', 'Ember'];4 5 RT.SearchFieldComponent.create({ arrayToSearch: jsFrameworks })6 .appendTo('#component');

http://emberjs.jsbin.com/ezApeGe/6

Dienstag, 08. Oktober 13

QUESTIONS?

Dienstag, 08. Oktober 13