Insights from using ember.js in the field

by stefan fochler

About me

  • Stefan, 19, live in Munich
  • Twitter: /iStefo(_en)?/
  • Studying Computer Science @ TUM
  • Writing JavaScript widgets since 2009
  • Production "rich" Web Apps since 2011
    (first Cappuccino, then Ember.js)
  • Working at  (http://boinx.com)
Building a application with ember.js is easy

That's a lie.


But you can manage it.

Because Ember is great!

(also, there might be cake later)

What's this talk about then?

  • Building
  • Deploying
  • Maintaining
  • Updating

Building

ember-app-kit 

HTTPS://GITHUB.COM/STEFANPENNER/EMBER-APP-KIT

  • Extensive Grunt tasks
  • Local server, automatic rebuilding
  • Basic test setup using Karma and QUnit
  • ES6 Module Transpiler
  • Project Structure(!)
  • Not as obvious and easy to understand
     (custom AMD module resolver for Ember) 

Or use yeoman/generator-ember, ember-tools...

BUILDING

Google Crawler/SEO

a) Render templates server side (Discuss)
b) Render html server side (PhantomJS)
c) Redirect GoogleBot (brombone.com)
d) Render minimalistic version on Server (DIY)

Let's talk about this!

Building

refactor often

Adapt to change.


DON'T TRY BE TOO CLEVER

Keep your code clean and understandable!

BUilding

Don't work against the framework

You are probably doing it wrong*


Work with the framework.

Deploying

Example: Application integrated into webseite

/connect

Router Setup: 

App.Router.reopen({
  location: "history",
  rootURL: "/connect"
)}; 

Apache .htaccess: 

# Application URLs
# Serve index.html except for some urls
RewriteCond %{REQUEST_URI} !css|js|img|static|.html|assets
RewriteRule ^connect/(.*)$ /connect/index.html [NC,L]

DeployING

  • Automated deployment from Git is hard
    (if the app is not alone in the repository)
  • We upload the code manually (which is bad)
  • You really want automated deployment from Git
  • If your app stands alone, this might be easier


Maybe we should just use Angular... (JK)

MaintainING

Track errors

Ember.onerror = function(error) {
    Ember.$.ajax('/report-error', 'POST', {
        stack: error.stack,
        otherInformation: 'whatever app state you want to provide'
    });}
Or use services like Errorception,
ExceptionHub, Debuggify, Airbrake...

EDIT: also http://rollbar.com/

MaintainING

Track visitors (Google analytics)

Don't:
 App.ApplicationController = Ember.Controller.extend({
    routeChanged: function() {
        Ember.run.next(function() {
            _gaq.push(['_trackPage', window.location.pathname]);        });
    ).observes('currentPath')});
Won't fire when transitioning from
/articles/ember-unicorns-on-fire
to
/articles/hadoop-rocks

MaintainING

Track visitors

Do:
 App.Router.reopen({
    didTransition: function(infos) {
        this._super(infos);
        Ember.run.next(function() {
            _gaq.push(['_trackPageview', window.location.pathname]);
        });
    }
});
This will fire after every transition.

UPDATING

Testing

  • Unit Tests
    • Verify that your code works
    • Easy with right setup
  • Integration Tests
    • Verify that your modules work together
    • Hard depending on system complexity
  • Acceptance Tests
    • Verify the "outcome" is right
    • What is "right" anyway?

UpdatING

A/B Testing

  • Roll out new application to 1% of visitors
  • Test for major failures

  • Does your server support this?
  • How can you track success/failure of new code?

We should talk about this, too.

EDIT: e.g. https://www.optimizely.com/

Takeaway

Let's come together

  • Ask for Help (Stackoverflow, IRC)
  • Help others
  • Write Blog Posts!
  • Don't be shy (Questions?)
  • Thanks for your attention!

emberfest

By Stefan Fochler

Made with Slides.com

emberfest

  • 3,182

More from Stefan Fochler