Building Happy Web Applications

Elan Hami

Frontend Framework Team

LivePerson

Elan Hami

Frontend Developer here @ LivePerson

Developing client-side projects for ~4 years

elanh@liveperson.com

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/

Q&A

peoplejobs@liveperson.com

Want to work on cool stuff like this?