jQuery: It's a library, not a framework

jQuery: It's a library, not a framework

• 1.
  jQuery It's alibrary, not a framework.
• 2.
  Speakers Ryan Smith Front-end architectwith Credera. Focused on good user experience through well-crafted client side code. Current interests include HTML5, CSS3, mobile development, and Javascript patterns for responsive web apps. Geeks out on great coffee, cooking, beautiful design, and elegant code. Kenny Rosenberg Senior consultant with Credera. His focus areas include front end development (usually with JQuery) and Java web development (usually with Spring Framework). He graduated from the University of Texas with a BBA in Management Information Systems.
• 3.
  Library vs. Framework •This is a semantic argument • Why make a distinction? • Managing expectations
• 4.
  Library • A collectionof helper methods • Helps us not reinvent the wheel • Enables greater consistency, readability • Abstracts away the tedious stuff
• 5.
  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")
• 6.
  Comparison • Libraries canbe 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
• 7.
  jQuery never claimedto be a framework …which means the framework is up to you to implement
• 8.
  Why do weuse 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);
• 9.
  Why do weuse jQuery? Because this wasn’t much fun. function doAjax() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { // Support older version of IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("theDiv").innerHTML=xmlhttp.response Text; } } xmlhttp.open("GET","shiny.html",true); xmlhttp.send(); } But this is cake. $("#theDiv").load("shiny.html");
• 10.
  Why do weuse 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.
• 11.
  jQuery Patterns • Anonymousfunctions • Method chaining • $(document).ready • Manipulates references to this inside callbacks for convenience (i.e. this == the calling DOM element in event handlers)
• 12.
  jQuery Plugins • Easyto write • Easy to use • Proliferated rapidly as jQuery popularity grew • Attracts new users and JS novices to jQuery
• 13.
  jQuery Plugins A Word of Caution Adopting a plugin is like adopting a puppy. Know its behavior before letting it into your home. Translation: Read the source.
• 14.
  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?
• 15.
  Possible Pitfalls • Tightly-coupledcode leads to copy & paste pattern • Failure to stay DRY • Polluted global namespace • “Pluginitis” • Reliance on DOM to hold transient application state
• 16.
  Recommended Strategies 1. Logicalseparation of JS into loosely-coupled modules 2. Standardized communication between modules 3. Separation of model (application state) from view (DOM)
• 17.
  Module Pattern • DouglasCrockford first publicized in 2007 • We like the “Revealing” variant proposed by Christian Heilmann Sources: 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/
• 18.
  Anatomy of aModule anonymous function name private scope var Presentation.sampleModule = function() { //private vars and functions var secretText = "I can't 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
• 19.
  { demo }
• 20.
  Pub/Sub • Publish andSubscribe • Events replace direct function calls • Publishers notify the system • Subscribers listen and act • Publishers and subscribers don’t need to know about each other
• 21.
  Pub/Sub • Trivial toimplement 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
• 22.
  Pub/Sub • Binding eventsto 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”
• 23.
  { demo }
• 24.
  Templates • Sometimes weneed 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>';
• 25.
  Why templates? • Templatesare 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
• 26.
  When to usetemplates • 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
• 27.
  Current state ofJS 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 }}
• 28.
  jQuery Templates • Stillin 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
• 29.
  { demo }
• 30.
  Thanks for attending! •Questions? { Contact Us } Ryan Smith Kenny Rosenberg rsmith@credera.com krosenberg@credera.com @ryanlsmith @kennyrosenberg http://blogs.credera.com