jQuery: It's a library, not a framework

jQuery Its a library, not a framework.

SpeakersRyan SmithFront-end architect with Credera. Focused on good user experiencethrough well-crafted client side code. Current interests includeHTML5, CSS3, mobile development, and Javascript patterns forresponsive web apps. Geeks out on great coffee, cooking, beautifuldesign, and elegant code.Kenny RosenbergSenior consultant with Credera. His focus areasinclude front end development (usually with JQuery)and Java web development (usually with SpringFramework). He graduated from the University ofTexas with a BBA in Management InformationSystems.

Library vs. Framework• This is a semantic argument• Why make a distinction?• Managing expectations

Library• A collection of helper methods• Helps us not reinvent the wheel• Enables greater consistency, readability• Abstracts away the tedious stuff

Framework• Implies architecture / structure• Often driven by patterns considered to be "best practice," i.e. MVC• Designed to save you time by employing reasonable defaults ("convention over configuration")

Comparison• Libraries can be more open-ended and expressive• Libraries allow you to learn the API as needed• Frameworks require holistic understanding• Frameworks bring structure to large amounts of code

jQuery never claimed to be aframework…which means the framework is up to you to implement

Why do we use jQuery?Because this was pretty bad.<a href=“/something" id="myLink" onclick="doSomething()">Click Me</a>This was a little better.if (el.addEventListener){ // Mozilla el.addEventListener(click, doSomething, false);} else if (el.attachEvent){ // IE el.attachEvent(onclick, doSomething);}What a relief.$("#myLink").click(doSomething);

Why do we use jQuery?Because this wasn’t much fun.function doAjax() {var xmlhttp;if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();} else { // Support older version of IExmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("theDiv").innerHTML=xmlhttp.responseText; }} xmlhttp.open("GET","shiny.html",true); xmlhttp.send();}But this is cake.$("#theDiv").load("shiny.html");

Why do we use jQuery?Selectors!$("#nav li:first > a")$(":input:not(:checked)")$("#invoice tr:odd")• Most browsers have implemented native querySelector / querySelectorAll, but prior to that, complex node selections were painful.

jQuery Patterns• Anonymous functions• Method chaining• $(document).ready• Manipulates references to this inside callbacks for convenience (i.e. this == the calling DOM element in event handlers)

jQuery Plugins• Easy to write• Easy to use• Proliferated rapidly as jQuery popularity grew• Attracts new users and JS novices to jQuery

jQuery Plugins A Word of CautionAdopting a plugin is like adopting apuppy. Know its behavior beforeletting it into your home.Translation: Read the source.

jQuery and Complexity• jQuery is ideal for most websites because of its simple API and compact but expressive syntax.• But what about really large websites? Complex web apps? Single page web apps?

Possible Pitfalls• Tightly-coupled code leads to copy & paste pattern• Failure to stay DRY• Polluted global namespace• “Pluginitis”• Reliance on DOM to hold transient application state

Recommended Strategies1. Logical separation of JS into loosely-coupled modules2. Standardized communication between modules3. Separation of model (application state) from view (DOM)

Module Pattern• Douglas Crockford first publicized in 2007• We like the “Revealing” variant proposed by Christian HeilmannSources: http://www.yuiblog.com/blog/2007/06/12/module-pattern/http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/

Anatomy of a Module anonymous functionname private scope var Presentation.sampleModule = function() { //private vars and functions var secretText = "I cant be accessed directly"; var moduleDescription = "Revealing module pattern example" var getText = function() { return secretText; } public scope //create a public API by exposing certain members return { revealText: getText, about : moduleDescription } }; }(); self-executing

{ demo }

Pub/Sub• Publish and Subscribe• Events replace direct function calls• Publishers notify the system• Subscribers listen and act• Publishers and subscribers don’t need to know about each other

Pub/Sub• Trivial to implement with jQuery custom events //subscribe $(document).bind(“listChanged”, function(e, data) { $(“#items”).effect("highlight", {}, 5000); }); //publish $(document).trigger(“listChanged”);• Binding events to the DOM is slightly slower than other plugins

Pub/Sub• Binding events to the DOM with bind() and trigger() has a slight performance cost.• For large numbers of events, consider a dedicated pub/sub plugin• Use namespacing for added clarity “/some/topic”

{ demo }

Templates• Sometimes we need to create HTML from Javascript data.• Ever done this? productHTML = <h2> + name + </h2>; + <h4><span> + description + </span></h4 + <p>$ + price + </p><a href="„ + detailsUrl + "><img src=" + thumbnailImgUrl + " alt=" + thumbnailAltTxt + " /></a>;

Why templates?• Templates are more powerful and elegant than string concatenation• Usually, server-side templates do the heavy lifting• Demand for highly responsive UIs has created a need for client-side rendering of data

When to use templates• Useful when calling 3rd party APIs that return JSON• Async calls that return large amounts of repetitive HTML can be refactored as JSON + client side templates• User interactions that require instant feedback

Current state of JS templates• Ideally, we would write a single template that can be rendered both server and client-side• Systems that support this: • Google Closure templates (used for Google +) • {{ mustache }}

jQuery Templates• Still in beta• Developed by Boris Moore, adopted as an “official” jQuery plugin in October 2010• Support for conditional logic, iteration, nested templates• No server-side implementation yet

{ demo }

Thanks for attending!• Questions?{ Contact Us }Ryan Smith Kenny Rosenbergrsmith@credera.com krosenberg@credera.com @ryanlsmith @kennyrosenberghttp://blogs.credera.com

https://twimg0-a.akamaihd.net	8
http://twitter.com	2
http://us-w1.rockmelt.com	2
http://a0.twimg.com	2

jQuery: It's a library, not a framework

by Ryan Smith on Aug 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 14

Statistics

jQuery: It’s a library, not a framework — Presentation Transcript