JavaScript App Development

JavaScript Application Development Rob Tarr Sparkbox

Goals • Clean, reusable code

Goals • Clean, reusable code • Fast execution

Google themselves an a test to see if slowing down
the search process eﬀected users’ behaviour. They essentially made Google slow down vey marginally for a set period of time. They had two groups: a control group, who use Google as normal, and a test group. The test group’s searching habits were monitored over a period of 6 weeks while delays between 100 – 400 milliseconds were applied to their search environment. The test simply showed that the longer the delay was, the fewer searches people were likely to do. http://www.distilled.net/blog/seo/site-speed-for-dummies-pat1/

Goals • Clean, reusable code • Fast execution • Readable

Goals • Clean, reusable code • Fast execution • Readable
• Works

Resources

Resources Twitter twitter.com/ A constant stream of new ideas and
experiments...

Resources Twitter twitter.com/ A constant stream of new ideas and
experiments... @jeresig @paul_irish @commondream @jashkenas @BrendanEich @cowboy @codylindley @rem

Libraries/Frameworks jQuery jquery.com De facto industry standard JavaScript library for
navigating the muddy waters of the DOM.

Libraries/Frameworks http://trends.builtwith.com/javascript

Libraries/Frameworks jQuery

Libraries/Frameworks $(“.container a”).live(“click”, function(e) { // do stuff here });
jQuery

jQuery $(“.container”).delegate(“a”, “click”, function(e) { // do stuff here });

jQuery $(“.container”).delegate(“a”, “click”, function(e) { // do stuff here }); BAD GOOD

Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { // do stuff here
}); jQuery

Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { // do stuff here
}); jQuery $(“.page”).find(“.container”).find(“a”).bind(“click”, function(e) { // do stuff here });

jspef.com

38.26% ↑ 91.30% ↑ 90.53% ↓ 66.90% ↓

Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { $(this).addClass(‘clicked’); $(this).data(‘clickCounter’, $(this).data(‘clickCounter’) +
1); }); jQuery

1); }); jQuery $(“.page .container a”).bind(“click”, function(e) { var $this = $(this); $this.addClass(‘clicked’); $this.data(‘clickCounter’, $this.data(‘clickCounter’) + 1); });

1); }); jQuery $(“.page .container a”).bind(“click”, function(e) { var $this = $(this); $this.addClass(‘clicked’); $this.data(‘clickCounter’, $this.data(‘clickCounter’) + 1); }); BAD GOOD

Libraries/Frameworks Modernizr www.modernizr.com Useful for using newer features when the
browser allows.

Libraries/Frameworks modernizr

Libraries/Frameworks <html lang=”en” class="js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> modernizr

Libraries/Frameworks modernizr

Libraries/Frameworks <script> if (Modernizr.geolocation) { // do awesome stuff here
} </script> modernizr

Libraries/Frameworks RequireJS http://requirejs.org/ For managing dependencies and structuring ﬁles in
a sensible manner.

Libraries/Frameworks LabJS labjs.com/ “The core purpose of LABjs is to
be an all-purpose, on-demand JavaScript loader...”

Libraries/Frameworks <script> $LAB .script("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js") .script("js/lib/underscore-1.1.6.js") .script("js/lib/backbone.js") .script("js/lib/backbone-localstorage.js") .script("js/lib/handlebars.js") .wait() .script("js/lib/pubsub.js")
.wait() .script("js/beer.js") .script("js/favorite.js") .script("js/app.js"); </script> labJS

Libraries/Frameworks Handlebars http://www.handlebarsjs.com/ “Handlebars provides the power necessary to let
you build semantic templateseffectively with no frustration.”

Libraries/Frameworks <script id="beer-list-tpl" type="text/x-template"> <a href="#" class="fav" title="favorite" alt="favorite">★</a> <div
class="beer"> <span class="name">{{name}}</span> {{#if brewery}} <span class="brewery">{{brewery}}</span> {{/if}} </div> <a href="#" class="delete" title="recycle">♺</a> </script> handlebars

Libraries/Frameworks Backbone documentcloud.github.com/backbone Provides models, collections and views to structure
your data and keep things organized.

Separation of Concerns MVC(ish) Data, actions and presentation should be
separated from each other.

Code Organization

Mini Question Break?

Demo Time github.com/robtarr/beer-app

Last Call for Questions Some rights reserved by ☺ Lee
J Haywood

Thanks Rob Tarr Sparkbox tar@heysparkbox.com @robtarr

JavaScript App Development

JavaScript App Development

More Decks by Rob Tarr

Other Decks in Technology

Featured

Transcript