Integrating Ember.js into legacy applications

4,177 views

Published on

How to integrate Ember.js into legacy applications

Published in: Technology, Education
2 Comments
7 Likes
Statistics
Notes
  • How much overload in terms of size is to use components outside of big Ember applications ? Are all components synchronized to make read/write batched operations through the run loop? Are al components leveraging virtual dom power? We are thinking in make a components library but We want use inside and outside Ember and we are looking for the best way. What do you think of it?Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great slides! I especially like that you show embedding multiple Ember apps in a single page is possible, since it's why I'm looking into Ember.

    I'm not sure I understand slide 14 though. Why do you say Facebook does its own thing and put React on the right side when React comes from Facebook? Same with Twitter and Flight?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,177
On SlideShare
0
From Embeds
0
Number of Embeds
255
Actions
Shares
0
Downloads
23
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Integrating Ember.js into legacy applications

  1. 1. WELCOME Integrating into legacy applications Dienstag, 08. Oktober 13
  2. 2. Hi! I am Michael! @LevelbossMike Runtastic Head of Web Frontend Dienstag, 08. Oktober 13
  3. 3. PROBLEM?! Progressive Enhancement is Dienstag, 08. Oktober 13
  4. 4. AGREEMENT Dienstag, 08. Oktober 13
  5. 5. AGREEMENT Dienstag, 08. Oktober 13
  6. 6. AGREEMENT Dienstag, 08. Oktober 13
  7. 7. AGREEMENT Dienstag, 08. Oktober 13
  8. 8. IT WORKS BUT.. Structure? Maintainability? Testability? Extensibility? Dienstag, 08. Oktober 13
  9. 9. IT WORKS BUT.. -> inconsistent Structure? Maintainability? Testability? Extensibility? Dienstag, 08. Oktober 13
  10. 10. IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad Testability? Extensibility? Dienstag, 08. Oktober 13
  11. 11. IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad -> no Testability? Extensibility? Dienstag, 08. Oktober 13
  12. 12. IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad -> no Testability? Extensibility? -> hell no! Dienstag, 08. Oktober 13
  13. 13. SOLUTION Framework! Dienstag, 08. Oktober 13
  14. 14. ALTERNATIVES Do It Existing Yourself Framework Twitter & Facebook yeah, right Dienstag, 08. Oktober 13 (Backbone), Marionette, Knockout, Batman, React, Flight, Angular, Ember...
  15. 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. 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. 17. FINALLY Dienstag, 08. Oktober 13
  18. 18. CONVENTIONS Structure? -> yes Maintainability? -> yes Testability? -> yes Extensibility? -> yes Dienstag, 08. Oktober 13
  19. 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. 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. 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. 22. QUESTIONS? Dienstag, 08. Oktober 13

×