media presence management • SoMeAnalyzer used to track, visualize, and analyze social media data across major social networks • I mainly work on the dashboard and social feeds
frontend • AJAX responses: Combination of ERb rendering, JSON, and plaintext responses • Code becoming increasingly messy, repetitive, difficult to maintain • Ember = most complete solution to help us get code into a more organized state
impractical for now • Existing app to maintain • Limited resources • Meanwhile: new backend data collection • Decide to “phase in” Ember as new backend becomes available
of them) initially rebuilt with Ember / Handlebars • Everything surrounding them remains in ERb • Not a standard single-page app • Multiple apps on the same page? – Possible but not realistic
if(this.isLegacy){ // setup with existing custom JS classes this.feed = new jugnoo.JSocialFeed(this, ...); } else { // setup with Ember var store = JFeeds.__container__.lookup('store:main'); var panel = this; Ember.run(function() { var c = JFeeds.SocialFeedController.create(); var platformFeedId = panel.$div.attr('platform-id'); store.find("socialFeed", platformFeedId).then(function(feed) { c.set("content", feed); }).catch(function(jqXHR) { // some error handling code }); panel._emberView = JFeeds.SocialFeedView.create(); panel._emberView.set('controller', c); var loc = panel.$div.find('.dashboard-panel-content').empty().first(); panel._emberView.appendTo(loc); panel.feed = c; }); } } Getting the store: a bit sketchy Manually create controller + view
templates: Yes • Routes: No • ApplicationRoute / Controller / .hbs: No • <body> still being used as root element • Router: Yes… but doing nothing App.Router.reopen({ location: 'none' });
the tab in Ember • But there are things outside of that we can replace: modal popups • The Ember tutorial for using modals works for our app just like for a “regular” Ember app • But now need to add ApplicationRoute + application.hbs
same (or similar) models, views, etc. • Needed to extract a portion of our Ember codebase to make available in other projects • ES6 modules weren’t really on our radar at the time • Ember’s solution (of sorts) for this: Ember.Namespace
won’t work! MyApp = Ember.Application.createWithMixins(MyNamespace);" # so this won’t work out of the box either MyApp.SomeView.create();" # we could use the namespace class directly in some cases… MyNamespace.SomeView.create(); # but the app resolver won’t pick them up" # or we could add each and every class to the app’s namespace MyApp.SomeView = MyNamespace.SomeView # … MyApp.SomeView.create();
classes to the app namespace • But: Can use lookup / lookupFactory to access classes via resolver • Don’t have to worry about updating references if we move or extend classes • Still need to get the container – sketchy MyApp.__container__.lookupFactory(“view:someNamespace”).create()
handlers) • Rendering: a bit slower sometimes vs ERb • Occasional issues with re-rendering • Styling / Maintenance • New DOM structure + styling for Ember-based feeds
still to convert the entire Dashboard into a “regular” Ember app • Not yet able to process some data sources into a format our Ember app can support, and other parts of backend not yet fully RESTful • After that we can proceed to rewrite panels, tabs etc. in Handlebars and start making full use of router • ES6 modules to replace namespacing?