Integrating Ember.js into legacy applications

into

WELCOME

Integrating

legacy applications

Dienstag, 08. Oktober 13

Hi! I am Michael!

@LevelbossMike

Runtastic Head of Web Frontend


Progressive Enhancement

is

PROBLEM?!


AGREEMENT


IT WORKS BUT..

Structure? Maintainability?Testability?Extensibility?


IT WORKS BUT..


-> inconsistent


IT WORKS BUT..


-> inconsistent

-> bad


IT WORKS BUT..


-> inconsistent

-> bad

-> no


IT WORKS BUT..


-> inconsistent

-> bad

-> no

-> hell no!


Framework!

SOLUTION


ALTERNATIVES

Do It

YourselfExisting

Framework(Backbone), Marionette, Knockout, Batman,

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

yeah, right


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


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.

”“


FINALLY



-> yes

-> yes

-> yes

-> yes

CONVENTIONS


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




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 });





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




QUESTIONS?


Integrating Ember.js into legacy applications

Technology

Transcript of Integrating Ember.js into legacy applications