• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Integrating Ember.js into legacy applications
 

Integrating Ember.js into legacy applications

on

  • 653 views

How to integrate Ember.js into legacy applications

How to integrate Ember.js into legacy applications

Statistics

Views

Total Views
653
Views on SlideShare
594
Embed Views
59

Actions

Likes
2
Downloads
2
Comments
0

1 Embed 59

http://discuss.emberjs.com 59

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Integrating Ember.js into legacy applications Integrating Ember.js into legacy applications Presentation Transcript

    • WELCOME Integrating into legacy applications Dienstag, 08. Oktober 13
    • Hi! I am Michael! @LevelbossMike Runtastic Head of Web Frontend Dienstag, 08. Oktober 13
    • PROBLEM?! Progressive Enhancement is 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.. -> inconsistent Structure? Maintainability? Testability? Extensibility? Dienstag, 08. Oktober 13
    • IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad Testability? Extensibility? Dienstag, 08. Oktober 13
    • IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad -> no Testability? Extensibility? Dienstag, 08. Oktober 13
    • IT WORKS BUT.. -> inconsistent Structure? Maintainability? -> bad -> no Testability? Extensibility? -> hell no! Dienstag, 08. Oktober 13
    • SOLUTION Framework! Dienstag, 08. Oktober 13
    • ALTERNATIVES Do It Existing Yourself Framework Twitter & Facebook yeah, right Dienstag, 08. Oktober 13 (Backbone), Marionette, Knockout, Batman, React, Flight, Angular, Ember...
    • 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
    • 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
    • CONVENTIONS Structure? -> yes Maintainability? -> yes Testability? -> yes Extensibility? -> yes Dienstag, 08. Oktober 13
    • 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
    • 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
    • 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
    • QUESTIONS? Dienstag, 08. Oktober 13