3. Most new applications today are:
• Mobile/Tablet apps (i-*, Android, etc.)
• Web apps
• Single-page apps
• With JavaScript
4. 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 Crockford
http://oreilly.com/javascript/excerpts/javascript-
good-parts/bad-parts.html
5.
6. But, you CAN be happy
Happy (hap·py, adj., ˈha-pē):
• in software design -
1. Makes you happy today
2. Keeps future you happy
9. Client can’t do everything
• Some things are solely for server
• Security
• Authentication & authorization
• Actual input validation
• Persistence to (non client) data-storage
But…
10. 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
22. 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?!)
23. 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"
}
24. 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
27. •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)
Mix of Suspicion \ Wariness \ “No way I’m getting into that”
It makes me sad tooLet’s face it, we have a lemon
But we can make lemonade
Makes me happy that we have all these challenges!
Approach client side coding as engineering problemTreat it as something that can challenge your intellect
Single responsibility & IndependenceBreaking down problemsEasily interchangeable and maintainable1 class per fileCommunication through eventsMakes me happy!
Each module should deal with a specific problemDifferent module types for different problems – Data VS VisualAllows independent developmentLayersEncapsulationMakes me happy!
Combine simple objects to solve complex issuesReuse componentsSolve problems onceFix problems onceMakes me happy!
You are right, but we won’t let that stop our pursuit!
It doesn’t matter whichJust choose oneOr build one yourself
You are right, but we won’t let that stop our pursuit!
Every object (Model, View, Controller) has a single responsibility and problem setThey are independent (multiple views can be developed over 1 model)Break down problems like API communication and Browser quirks Easy to replace your View without touching the data modelEach object can be written in a separate file – Use dependency management and buildEvent driven architecture – loose couplingMakes me happy!
Models deal with data/APIs, Views deal with Presentation/DOM events, Controllers deal with Business LogicAllows independent developmentLayers – Lasagna codeEncapsulation of complicated data manipulationMakes me happy!
Don’t look at pages as one large thingBreak down to UI components with easy interfaceCombine Components to create a page – fast, consistent developmentReuse componentsSolve problems onceFix problems onceMakes me happy!
Once you chose – learn how to useDon’t lose the excitementYou will see that you start applying the correct design patterns
Don’t look at pages as one large thingBreak down to UI components with easy interfaceCombine Components to create a page – fast, consistent developmentReuse componentsSolve problems onceFix problems onceMakes me happy!
