How to integrate Ember.js into legacy applications

1. WELCOME
Integrating
into
legacy applications
Dienstag, 08. Oktober 13

2. Hi! I am Michael!
@LevelbossMike
Runtastic Head of Web Frontend
Dienstag, 08. Oktober 13

3. PROBLEM?!
Progressive
Enhancement
is
Dienstag, 08. Oktober 13

4. AGREEMENT
Dienstag, 08. Oktober 13

5. AGREEMENT
Dienstag, 08. Oktober 13

6. AGREEMENT
Dienstag, 08. Oktober 13

7. AGREEMENT
Dienstag, 08. Oktober 13

8. IT WORKS BUT..
Structure?
Maintainability?
Testability?
Extensibility?
Dienstag, 08. Oktober 13

9. IT WORKS BUT..
-> inconsistent
Structure?
Maintainability?
Testability?
Extensibility?
Dienstag, 08. Oktober 13

10. IT WORKS BUT..
-> inconsistent
Structure?
Maintainability? -> bad
Testability?
Extensibility?
Dienstag, 08. Oktober 13

11. IT WORKS BUT..
-> inconsistent
Structure?
Maintainability? -> bad
-> no
Testability?
Extensibility?
Dienstag, 08. Oktober 13

12. IT WORKS BUT..
-> inconsistent
Structure?
Maintainability? -> bad
-> no
Testability?
Extensibility? -> hell no!
Dienstag, 08. Oktober 13

13. SOLUTION
Framework!
Dienstag, 08. Oktober 13

14. ALTERNATIVES
Do It
Existing
Yourself Framework
Twitter & Facebook
yeah, right
Dienstag, 08. Oktober 13
(Backbone), Marionette, Knockout, Batman,
React, Flight, Angular, Ember...

15. Runtastic <3 <3 <3 Ember.js
Angular.js Ember.js
✓ popular (#4 github.com)
✓ popular (#22 github.com)
✓ easy to learn
␡ easy to learn
␡ convention over configuration
␡ url-support
␡ nested UIs
␡ minimizes DOM-updates
␡ data-store
✓ convention over configuration
Dienstag, 08. Oktober 13
✓ url-support
✓ nested UIs
✓ minimizes DOM-updates
✓ data-store

16. 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
”

17. FINALLY
Dienstag, 08. Oktober 13

18. CONVENTIONS
Structure?
-> yes
Maintainability?
-> yes
Testability?
-> yes
Extensibility?
-> yes
Dienstag, 08. Oktober 13

19. INTEGRATION
Easy:
Use the built in rootElement-property on Ember.Application
1 App = Ember.Application.create({
2
rootElement: '#ember-app'
3 });
http://emberjs.jsbin.com/iVUCIRo/1
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 });
Dienstag, 08. Oktober 13

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

21. 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.
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
Protip:Write now, use now and later in a single page app.
-> Components can be nested! Composition FTW!
Dienstag, 08. Oktober 13

22. QUESTIONS?
Dienstag, 08. Oktober 13