Download - Building happy web applications
Building Happy Web Applications
Elan Hami
Frontend Framework Team
LivePerson
Elan Hami
Frontend Developer here @ LivePerson
Developing client-side projects for ~4 years
Most new applications today are:
• Mobile/Tablet apps (i-*, Android, etc.)
• Web apps
• Single-page apps
• With JavaScript
JavaScript can make you sad
• No compiler – hard to trace basic “errors”
• Multiple runtime environments
• Hard to make sense of
• Hard to maintain – very lenient, easy to abuse
• No isolation – everything runs together
• OO aspects can be misleading or missing
• The Bad Parts by Douglas Crockfordhttp://oreilly.com/javascript/excerpts/javascript-good-parts/bad-parts.html
But, you CAN be happy
Happy (hap·py, adj., \ˈha-pē\):
• in software design -
1. Makes you happy today
2. Keeps future you happy
How?
Stop treating client as “dumb”
Client can’t do everything
• Some things are solely for server
• Security
• Authentication & authorization
• Actual input validation
• Persistence to (non client) data-storage
But…
Doesn’t mean they’re simple• Clients should be smart in their domain:
• Handle navigation flows (single page)
• Manipulate data models
• UI logic and presentation
• i18n
• Sync data from multiple APIs
• Allow to work offline
Client side challenges are major and need a serious attitude
OK, but how do I solve those issues?
Apply well known design principles
Modularity
Separation of concerns
Composition
I like those concepts, but it’s hard in JavaScript!
Choose an MV* provider
(or build one)
Why?
Modularity
Separation of concerns
Composition
Using Your Library
• Learn it
• Understand what it provides
• Keep learning it – not just the basics
• Evolve your code patterns with it
• Remember moving from Vanilla JS to jQuery? (What’s that $ doing everywhere?!)
Some examples
With jQuery
var that = this;
$(".name").change(function(e){
var newVal = $(this).val();
that.changeName(newVal);
});
$(".saveBtn").click(function(e){
that.save();
});
With Backbone
events: {
"click .saveBtn":"save",
"change .name":"changeName"
}
Some examples
With jQuery
var that = this;
this.vent.on("myEvent", function(data){
//do something with that
});
With Underscore
this.vent.on("myEvent",
_.bind(this.handler, this));
//in handler this is this
Don’t be afraid to make mistakes
Use the right tools
• Dependency management – allows separation of resources (we use require.js)
–Don’t worry about too many requests
–In dev we load ~500 files, in prod ~3
• JSHint/JSLint – a must (really)
• Testing - QUnit, Jasmine, whatever
• Build tools – use build tools for client code (r.js, grunt, yeoman)
Questions?
Further reading:http://addyosmani.com/resources/essentialjsdesignpatterns/book/http://addyosmani.com/writing-modular-js/http://lostechies.com/derickbailey/http://addyosmani.com/largescalejavascript/http://stackoverflow.com/questions/10847852/what-are-the-real-world-strengths-and-weaknesses-of-the-many-frameworks-based-onhttp://net.tutsplus.com/tutorials/javascript-ajax/3-reasons-to-choose-angularjs-for-your-next-project/