Insights from using ember.js in the field
by stefan fochler
(updated version :)
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)
Right?
That's a lie.
But you can manage it.
Because Ember is great!
It makes the right choices so you don't have to.
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(!)
- API Stubs
-
Not as obvious and easy to understand
(custom AMD module resolver for Ember)
Building
EMBER-CLI
- Evolution of Ember App Kit
- Even more features (scaffolding)
- Roadmap including custom Ember Builds
- Should be ready for EmberConf 2014 (soon!)
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*
Example: Dependency Injection
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
Or use services like RollbarEmber.onerror = function(error) { Ember.$.ajax('/report-error', 'POST', { stack: error.stack, otherInformation: 'whatever app state you want to provide' });
}
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')
});
/articles/ember-unicorns-on-fire
/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]);
});
}
});
UPDATING
Testing
- Unit Tests
- Verify that your code works
- Easy with right setup (modules!)
- 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 drawbacks
- 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!
Ember.js Munich Meetup March 2014
By Stefan Fochler
Ember.js Munich Meetup March 2014
- 1,320