building happy web applications
DESCRIPTION
Describes how to be build a single page application using backbone and still stay 'happy'. Best practices and guidelines.TRANSCRIPT
![Page 1: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/1.jpg)
Building Happy Web Applications
Elan Hami
Frontend Framework Team
LivePerson
![Page 2: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/2.jpg)
Elan Hami
Frontend Developer here @ LivePerson
Developing client-side projects for ~4 years
![Page 3: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/3.jpg)
Most new applications today are:
• Mobile/Tablet apps (i-*, Android, etc.)
• Web apps
• Single-page apps
• With JavaScript
![Page 4: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/4.jpg)
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
![Page 5: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/5.jpg)
![Page 6: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/6.jpg)
But, you CAN be happy
Happy (hap·py, adj., \ˈha-pē\):
• in software design -
1. Makes you happy today
2. Keeps future you happy
![Page 7: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/7.jpg)
How?
![Page 8: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/8.jpg)
Stop treating client as “dumb”
![Page 9: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/9.jpg)
Client can’t do everything
• Some things are solely for server
• Security
• Authentication & authorization
• Actual input validation
• Persistence to (non client) data-storage
But…
![Page 10: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/10.jpg)
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
![Page 11: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/11.jpg)
OK, but how do I solve those issues?
![Page 12: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/12.jpg)
Apply well known design principles
![Page 13: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/13.jpg)
Modularity
![Page 14: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/14.jpg)
Separation of concerns
![Page 15: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/15.jpg)
Composition
![Page 16: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/16.jpg)
I like those concepts, but it’s hard in JavaScript!
![Page 17: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/17.jpg)
Choose an MV* provider
(or build one)
![Page 18: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/18.jpg)
Why?
![Page 19: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/19.jpg)
Modularity
![Page 20: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/20.jpg)
Separation of concerns
![Page 21: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/21.jpg)
Composition
![Page 22: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/22.jpg)
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?!)
![Page 23: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/23.jpg)
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"
}
![Page 24: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/24.jpg)
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
![Page 25: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/25.jpg)
Don’t be afraid to make mistakes
![Page 26: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/26.jpg)
Use the right tools
![Page 27: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/27.jpg)
• 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)
![Page 28: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/28.jpg)
Questions?
![Page 29: Building happy web applications](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559929d41a28ab45298b477a/html5/thumbnails/29.jpg)
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/