This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Frameworks and Repositories


Week 5 - Frameworks and Repositories

Developers who frequently interact with JavaScript have to deal with cross-browser compatibility issues continually and, thus, are forced to implement, or use, a JavaScript library/framework in some form.

[[--There is probably a difference between a framework and a library in that a framework might be expected to facilitate more things than a library which might be expected to facilitate only one or a few things, but for writing this, I decided not to make this distinction very carefully and to use the terms interchangeably.--]]

Frameworks make js much easier for developers popular libraries such as Prototype/Scriptaculous, MooTools, YUI, jQuery, are used widely with each library having its own character; jQuery is by far the most widely used with perhaps 50% of the market, followed by Proto/Scrip with perhaps 15%, then YUI and the rest.

Just because a framework doesn't have a large share doesn't meen you shouldn't consider them, a less well known framework may be just the job for your project and knowing js well will help you choose a framework; it is possible that many people simply choose jQuery for ease of use without really understanding (or perhaps not needing to) how it works.

Some interesting alternative frameworks are qooxdoo, sproutcore, backbone and cappuccino.

http://popcornjs.org/


A library for manipulating open video (ie video that doesn’t need a plugin). You may have noticed http://new.p2pu.org/en/groups/interactive-open-video-with-popcornjs/

mark up videos with metadata at each millisecond of video, such as who is in the frame, where that frame takes place, or a definition of what the frame is talking about. This metadata has rich opportunities for new user experiences on the page, and more relevant and specific search engines results. Imagine a search result linking to 30 seconds into a video on a page. And because the meta-data is stored in the browser, it can be modified.


jQuery
You know what an API is, right?  Well, jQuery is an API of an API.  jQuery covers the DOM.
http://jqfundamentals.com/book/index.html#chapter-3
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

http://jsconf.eu/2010/speaker/the_jquery_divide_by_rebecca_m.html


Intro Jsfiddle. Calling libraries from an online file.

One big library/framework or many small ones?  Depends on scale, purpose.....
http://mir.aculo.us/2011/04/11/i-for-one-welcome-our-new-micro-framework-overlords/?
http://tomdale.net/2011/04/imagine-a-beowulf-cluster-of-javascript-frameworks/
http://microjs.com/?

http://javascriptlibraries.com/  everylibrary under the sun, maybe..

You will often see two versions of a library, someLibrary.js and someLibraryMinified.js; the second is a compressed version of the first, has a smaller file size so will load quicker, use on your project; usually very hard to read so use the normal library for inspection/debugging.

js loading libraries
http://blog.jcoglan.com/2011/04/16/on-the-role-of-js-packages/
http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/

http://html5boilerplate.com/
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's a base HTML/CSS/JS template for a fast, robust and future-proof site. Cross-browser normalization, performance optimizations, optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file  with caching rules and preps your site to serve HTML5 video, use @font-face.

Includes eg
http://www.modernizr.com/   Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills   So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support....

github/cloud9ide... development in the cloud, fork/clone eg boilerplate in Github and clone to cloud9ide for development.

Places to find code
http://snipplr.com/all/language/javascript  http://openjsan.org/ https://github.com/languages/JavaScript/created

Task Discussion


  • Anonym   June 3, 2011, 2:21 p.m.
  • Anonym   May 16, 2011, 2:11 p.m.

    Question by Gray Ghost Visuals

    How many participants in this study group use a js library? What library do you like to use and why(briefly)?

  • Andre Dublin   May 16, 2011, 2:14 p.m.
    In Reply To:   Anonym   May 16, 2011, 2:11 p.m.

    jQuery, because of its css based selections, and simple abstraction of ajax.

    Modernizr, because of the great feature detection for cross browser compatibility.

  • Anonym   May 16, 2011, 6:27 p.m.
    In Reply To:   Andre Dublin   May 16, 2011, 2:14 p.m.

    I love jQuery myself with the power it has for allowing easy cross-browser implementations and easy to use syntax. The library is also quite small and is easy to integrate - not to mention the library has some of the best people in the field keeping a close eye on it.

  • Anonym   May 17, 2011, 3:48 a.m.
    In Reply To:   Anonym   May 16, 2011, 2:11 p.m.

    Hi Grey Ghost,

      Well, if by library you mean a general purpose DOM library, like yourself and Andre I primarily use jQuery.  I have also used Prototype, and even after switching to jQuery, I have taken some of Prototype's Array extensions with me - things like Array.prototype.forEach which most versions of IE are lacking.  jQuery has a nice syntax, is easy to use, and has fantastic (and fanatical) supporters, but I find it is only a base DOM library when developing large scale applications.

      There are still other alternatives that I would like to try, I have briefly tried YUI, and have only had a cursory look at Dojo.  If you just want a selector engine, there is Sizzle, which is the engine for both Dojo and jQuery I believe.

      Outside of just DOM manipulation libraries, some others I am using or have used to help with various things - LABjs to do script loading, AFrameJS for an MVC library (I wrote it, so a shameless plug), both Raphael and Highcharts to do data visualization, jQuery template plugin for templating, Modernizr to feature detect HTML5 features, Jasmine, QUnit, and YUI Test to do unit testing, and recently have also used PersistJS to help out with client side storage.

    There are so many good things being written in Javascript right now, it's an exciting time to be a web developer!

    Shane