Building a JavaScript Library

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

4 comments

Comments 1 - 4 of 4 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

52 Favorites & 6 Groups

Building a JavaScript Library - Presentation Transcript

  1. Building a JavaScript Library John Resig (ejohn.org) jQuery JavaScript Library / Mozilla Corporation August 18th, 2007 - Google Tech Talk
  2. jQuery Released Jan. 2006 ✦ Focus on DOM Traversal ✦ Built in support for Events, Ajax, and ✦ Animations Succinct code, small file size ✦ Extensible via a plugin architecture ✦
  3. jQuery Samples $(“#main div”).addClass(“test”); ✦ $(“#main”).slideDown(“slow”); ✦ $(“ul > li”).click(function(){ ✦ $(this).find(“ul”).toggle(); }); $(“#contents”).load(“doc.html”); ✦
  4. Doing something right? ~25 people on the jQuery Team ✦ 1/4 million visitors per month ✦ Fantastic Growth (via Google Trends) ✦
  5. FUEL To be included in Firefox 3 ✦ A JavaScript library for extension ✦ developers Provides helpers for: Browser tabs, ✦ bookmarks, events, preferences Written in pure JavaScript, extensible ✦
  6. FUEL Samples Application.prefs.all.forEach(function(p){ ✦ if ( p.modified ) // do something }); Application.events.addListener(“quit”, fn); ✦ Application.browser ✦ .open(\"http://google.com/\").active = true; Application.bookmarks.all.forEach(function(cur){ ✦ if ( cur.url.match(/google.com/) ) cur.remove(); });
  7. Need to know: Writing a Solid API ✦ Implementation ✦ Complex Applications ✦ Browser Bugs ✦ Documentation ✦ Testing ✦ Maintenance ✦
  8. Writing A Solid API
  9. Orthogonal Perform Universal Actions ✦ CRUD your methods! ✦ add/remove/delete/modify FUEL has the following on every object: ✦ ✦ .all, .add(...), .remove(...), .get(...) jQuery was missing .removeAttr() for the ✦ first couple months (oops!) Made a grid for FUEL, filled in the blanks ✦
  10. Fear Adding Methods Methods can cause a support nightmare ✦ Avoid adding, if you can ✦ Defer to extensibility ✦ jQuery: ✦ ✦ Added .top(), .left(), .background() ✦ Duplicate of .css() - unnecessary
  11. Embrace Removing Code Remove un-used code ✦ Reduces the size of your API ✦ Reduces your filesize ✦ Make your code more maintainable ✦ jQuery: Ran a poll to remove CSS 3 ✦ selectors. Reduced size of the API by 47% in 1.1 ✦
  12. Provide an Upgrade Path Expect compatibility changes ✦ Provide transitional plugin ✦ Plugin for jQuery 1.1, for jQuery 1.0 users ✦ (+ documented in 3 languages)
  13. Reduce to a common root Look for common patterns ✦ Reduce to its core and build up ✦ jQuery: ✦ ✦ .eq(0), .gt(3), and .lt(2) ✦ why not just implement slice? .slice(0,1) or .slice(1,4)
  14. Consistency Users can “expect” good naming ✦ Pick a naming scheme and stick with it ✦ ✦ .click() vs .onclick() Argument position ✦ ✦ .method( options, arg2, ..., callback ) Callback context ✦ ✦ .method(function(){ // this == DOMElement });
  15. Implementation
  16. Evolution of a JavaScript Coder “Everything is a reference!” ✦ “You can do OO code!” ✦ “Huh, so that’s how Object Prototypes ✦ work!” “Thank God for closures!” ✦
  17. Functional Programming Closures are essential ✦ Understand this snippet: ✦ (function(){ ✦ // your code... })(); Great for ‘local variables’ ✦ Perfect for macros ✦ var event = [‘click’,’focus’,’blur’,...]; ✦ jQuery.each(event,function(i,name){ jQuery.prototype[name] = function(fn){ return this.bind(name,fn); }; });
  18. Quick Tip: Local Vars (function(){ ✦ // your code... var test = false; this.method(function(){ return test; }); }).call(this); Locally-scoped variables ✦ Access to instance ✦
  19. Encapsulation Contain all of your code to a scope ✦ Hide your code and prevent it from ✦ leaking All of your code should be wrapped in a: ✦ (function(){ ✦ // your code... })(); BONUS! Your code compresses really well ✦ with Dojo Compressor, et. al.
  20. Namespacing Use as few global variables as feasible ✦ One namespace is optimal ✦ (see: Dojo, Yahoo UI, jQuery, MochiKit) Questions to ask: ✦ ✦ Can my code coexist with other random code on the site? ✦ Can my code coexist with other copies of my own library? ✦ Can my code be embedded inside another namespace?
  21. Don’t Extend Native Objects Down this path lies great pain and ✦ suffering Impossible to get DOM extensions ✦ working cross-browser Object.prototype kills kittens ✦ JS 1.6 methods cause conflicts: ✦ ✦ elem.getElementsByClassName ✦ array.forEach, .map, .filter
  22. Perform Type Checking Make your API more fault resistant ✦ Coerce values wherever possible ✦ ✦ .css(Number) becomes: .css(Number + “px”) becomes: .map(String) ✦ .map(new Function(String)) Error messages ✦ ✦ Quite useful ✦ Byte-costly ✦ Solution: Move to ‘debugging’ extension
  23. Quick Tip for OO Tweak your Object constructor ✦ function jQuery(str, con){ ✦ if ( window == this ) return new jQuery(str, con); // ... } Make it easier for users: ✦ new jQuery(“#foo”) becomes: jQuery(“#foo”)
  24. Quick Tip for Errors Never gobble errors ✦ Ignore the templation to try{...}catch(e){} ✦ Improves debug-ability for everyone ✦
  25. Complex Applications
  26. Extensibility Your code should be easily extensible ✦ ✦ Methods: jQuery.fn.method = fn; $(...).method(); Selectors: jQuery.expr[‘:’].foo ✦ = “...”; $(“:foo”) Animations: jQuery.easing.easeout ✦ = fn; .animate({height: 100}, “slow”, “easeout”); Write less, defer to others ✦ Makes for cleaner code ✦ Foster community and growth ✦
  27. Pure OO Code Object-Oriented is only one answer ✦ JavaScript != Java ✦ Not a good solution ✦ ✦ At least not until JavaScript 2 ✦ Classes, Packages, etc.
  28. Custom Events The answer lies in custom events ✦ Dojo, jQuery, Yahoo UI - just added to ✦ Prototype Components trigger events and listen for ✦ others ✦ .bind(“drag”,fn) ✦ .trigger(“refresh”)
  29. Browser Bugs
  30. The Quirksmode Problem Fantastic resource ✦ Tells you where problems are ✦ Doesn’t tell you how to fix them ✦ Need to focus on problem sets ✦ ✦ Events ✦ Get Attribute ✦ Get Element Style
  31. Solving a Problem Some issues are solved in depth ✦ ✦ DOM Events ✦ DOM Traversal Many still require hard work: ✦ ✦ getAttribute ✦ getComputedStyle Permute your test cases, look for edge ✦ cases
  32. When to run the fix Typical thought progression: ✦ ✦ “I’ll just look at the useragent” ✦ “I’ll just detect to see if an object exists” ✦ “I’ll just think of an elegant solution to the problem” ✦ “I’ll just look at the useragent”
  33. Documentation
  34. Structured Provide a clear format ✦ Users can build new views with it ✦ ✦ No API view is perfect jQuery users built: ✦ ✦ API browsers ✦ Cheat sheets ✦ Widgets ✦ Translations An API for your API! ✦
  35. Users Want to Help Make barrier to helping very low ✦ Answer: Keep your docs in a wiki ✦ Only do this if you’ve already written all of ✦ your docs ✦ Wiki != Documentation Use templates to maintain structure ✦
  36. Focus on Leverage Write the docs that will get the most ✦ benefit Rough Priority: ✦ ✦ User-centric API ✦ Plugin authoring ✦ Docs on writing docs ✦ Advanced plugin authoring
  37. Write the Docs Yourself It isn’t glamorous, but it’s essential ✦ You must buckle-down and do it yourself ✦ Improves your longevity and uptake ✦
  38. Testing
  39. 1000% Essential Don’t trust any library that doesn’t have a ✦ test suite ✦ Good: Prototype, MochiKit, jQuery, Yahoo UI Write your own suite (they’re pretty easy) ✦ Be sure to handle async tests ✦ ✦ Ajax ✦ Animations Pass in all supported browsers ✦
  40. Test-Driven Development Write test cases before you tackle bugs ✦ Find devs who love to write test cases ✦ Check for failures before commit ✦ Pure JS DOM (running in Rhino) can help ✦ spot obvious errors ✦ pre_commit hook in SVN, if you can *cough* Google Code *cough*
  41. Future of Testing Distributed Multi-Browser Testing ✦ How it works: ✦ ✦ Report results back to central server ✦ Server pushes new tests/code to clients ✦ Repeat jQuery and Prototype are very interested ✦ in this (expect something soon) Test against browser nightlies ✦ ✦ See: JS lib test cases in Mozilla trunk
  42. Maintenance
  43. Tackling New Bugs Create a rapid test environment ✦ ✦ ./gen.sh bugnum (dom|ajax|selector|...) Your test suite must be passing ✦ Have good coverage ✦ Always test in all supported browsers to ✦ avoid regressions Check unsupported browsers before ✦ release ✦ Don’t want them to crash/error out
  44. Use Your Community Use your community as a sounding board ✦ ✦ Gauge the usefulness of features Users are great for finding weird edge cases ✦ Pay attention to repeat questions ✦ ✦ Indicative of problem in API design ✦ or lack of documentation
  45. Maintain Focus Very, very, important ✦ Users generally choose libraries for ✦ ideological reasons Breaking your ideology will alienate your ✦ users jQuery: Small, concise, code. Small ✦ download, light core, easily extensible. Use plugins to divert functionality from ✦ your core
  46. More Details Contact Me: ✦ jeresig@gmail.com More details: ✦ ✦ http://ejohn.org/ ✦ http://jquery.com/ ✦ http://wiki.mozilla.org/FUEL
  47. Fun
  48. Fun With One Liners “I’m not suggesting that one-liners are the heart of all programming. But ✦ they can be the hook to get someone exploring. A single line of code simply shows that a language can be focused. And it lets a beginner get comfortable with the basic atoms.” - _why jQuery allows for fantastic one liners ✦
  49. One-Liners $(\"div.section\") ✦ $(\"div.section\").removeClass(\"section\").hide(); ✦ $(\"div.section\") ✦ .find(\"dt\") .addClass(\"section\") .click(function(){ $(this).next().toggle(); }) .end() .find(\"dd\") .hide() .filter(\":first\") .show() .end() .end();
  50. One-Liners Remove unsightly anonymous functions! ✦ $(\"div.section\") ✦ .find(\"dt\") .addClass(\"section\") .onclick() .next().toggle().end() .end() .end() .find(\"dd\") .hide() .filter(\":first\") .show() .end() .end();
  51. Domain-Specific Language $(\"div.section\") ✦ find(\"dt\") addClass(\"section\") click( next() toggle() ) end() find(\"dd\") hide() filter(\":first\") show() end() end()
  52. Domain-Specific Language $(\"div.section\" ✦ find(\"dt\" addClass(\"section\") click( next( toggle()))) find(\"dd\" hide() filter(\":first\" show())))
  53. Domain-Specific Language Lisp-y! ✦ ($ \"div.section\" ✦ (find \"dt\" (addClass \"section\") (click (next (toggle)))) (find \"dd\" (hide) (filter \":first\" (show)))))
  54. Domain-Specific Language Python-y! ✦ div.section: ✦ dt: addClass \"section\" click next toggle dd: hide :first: show Give it a try: ✦ http://ejohn.org/apps/jquery2/ Secret Sauce: ✦ <script type=”text/jquery”>...</script>

jeresigjeresig, 2 years ago

custom

31831 views, 52 favs, 51 embeds more stats

This is the Google Tech Talk that I gave August 17t more

More Info

© All Rights Reserved

Go to text version
  • Total Views 31831
    • 28464 on SlideShare
    • 3367 from embeds
  • Comments 4
  • Favorites 52
  • Downloads 1207
Most viewed embeds
  • 1858 views on http://ejohn.org
  • 766 views on http://www.juixe.com
  • 236 views on http://www.catonmat.net
  • 130 views on http://www.julien-verkest.fr
  • 61 views on http://www.seek-blog.com

more

All embeds
  • 1858 views on http://ejohn.org
  • 766 views on http://www.juixe.com
  • 236 views on http://www.catonmat.net
  • 130 views on http://www.julien-verkest.fr
  • 61 views on http://www.seek-blog.com
  • 57 views on http://webstandard.kulando.de
  • 37 views on http://www.asiermarques.com
  • 35 views on http://www.mouseoverstudio.com
  • 31 views on http://juixe.com
  • 20 views on http://www.mimul.com
  • 17 views on http://adam.goucher.ca
  • 14 views on http://www.netvibes.com
  • 13 views on http://webprog.yozmn.com
  • 10 views on http://www.blogjava.net
  • 9 views on http://www.nulleando.com.ar
  • 8 views on http://paranoid.dip.jp
  • 6 views on http://s3.amazonaws.com
  • 6 views on http://mouseoverstudio.com
  • 4 views on file://
  • 3 views on http://feeds.feedburner.com
  • 3 views on http://www.zhuaxia.com
  • 3 views on http://www.hanrss.com
  • 3 views on http://asiermarques.com
  • 2 views on http://www.thinkingphp.org
  • 2 views on http://www.wait-till-i.com
  • 2 views on http://developer.yahoo.com
  • 2 views on http://www.filescon.com
  • 2 views on http://buyvideogamesonline.org
  • 2 views on http://aprilliza.com
  • 2 views on http://bookmarkingsites.com
  • 2 views on http://all-for-women.com
  • 2 views on http://localhost
  • 1 views on http://about-insomnia.org
  • 1 views on http://wildfire.gigya.com
  • 1 views on http://avikara.com
  • 1 views on http://getmyfreetrial.com
  • 1 views on http://www.rapidshareabc.com
  • 1 views on http://21stcenturyrobots.com
  • 1 views on http://kesnebug.blogspot.com
  • 1 views on http://www.burcudogan.com
  • 1 views on http://www.xianguo.com
  • 1 views on http://www.protopage.com
  • 1 views on applewebdata://2C60288E-8B10-4CCD-A955-8BA7EB15B5C6
  • 1 views on http://nulleando.com.ar
  • 1 views on http://jqueryworld.tistory.com
  • 1 views on http://risklog.blogspot.com
  • 1 views on http://www.my-forum.org
  • 1 views on http://hateadmin.com
  • 1 views on http://ajaxian.com
  • 1 views on http://64.233.169.104
  • 1 views on http://mgw.hatena.ne.jp

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories