Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Micro Frameworks

JavaScript Micro Frameworks

Presentation from London JS

Daniel Knell

August 20, 2012
Tweet

More Decks by Daniel Knell

Other Decks in Programming

Transcript

  1. Recap so in 1995 a lone netscape engineer cranked out

    in a little over a week something that would come to be known as javascript... this was all well and good but unfortunately a year later in 1996 Microsoft released MS JScript, and this is where all the problems began.
  2. Stone Age var element; if (document.all) { element = document.all[id];

    else { element = document.getElementById(id); } so the languages looked similar and the syntax was almost the same, but the API’s varied wildly, and initially this resulted in wrapping our code in one big ass if statement with ie code in one half and netscape in the other effectively doubling the effort required
  3. Bronze Age function getElement(id) { if (document.all) { return document.all[id];

    } else { return document.getElementById(id); } } var element = getElement(id); eventually we cleaned up our act a bit and started to abstract away some of the differences and built up a set of snippets, these would be shared on blogs and taken as needed to simplify our jobs making everyone in effect a framework developer building frameworks talored to the task at hand and this pretty much continued until the february of 2005 when the rails team did the only intresting thing in the history of ruby projects and released prototype.js on the world.
  4. Iron Age var element = $(id); and prototype was a

    very different beast to what we had seen before, it was the first real monolithic framework in the javascript space, and provided that “silver bullet” that everyone was looking for, a year and a half later jQuery followed and eventually the snippet approach was confined to the pages of history.
  5. jQuery’s Spare Tire 0 75,000 150,000 225,000 300,000 1.2 1.3

    1.4 1.5 1.6 1.7 jQuery File Size Size (Bytes) so the problem with these monolithic beasts is that people wanted more from it, and they grew, and they grew, and year after year they grew some more, jQuery was already a hefty 75KB in 2006 (about 10 seconds download on a dialup modem) and is now a monstrous 249KB
  6. Size Matters now size matters, and anyone who tells you

    otherwise is just humouring you, something i found out the hard way, the larger the files, the longer they take to download, and everyones seen the conversion research, we should be trying to deliver the tightest package we can.
  7. Problem? but everyone has broadband right? and for a while

    we could sit in our nice first world houses with our fast internet connections and show two fingers to the rest of the world but now we that alienates huge international markets, and theres also this new fangled thing called the mobile web with unpredictable performance and a faster rollout than fixed line internet ever had.
  8. Divide and Conquer so how do we fix things? the

    easiest way is to only ship the code we need, but this isnt something every framework offers, and then we also have overlap of the things different frameworks require, and jquery just doesn’t want to play by the standards either.
  9. Micro Frameworks so what we really need are small decoupled

    libraries that we can assemble together like little lego bricks like the snippets of old into a framework that specifically suites the task ahead of us.
  10. The Eunuch’s Unix Philosophy so according to wikipeida, the unix

    philosophy goes something like this.. “Write programs that do one thing and do it well. Write programs to work together. and Write programs to handle text streams, because that is a universal interface.” - now thats really eloquently put, so stand by for some blatant and unapologetic plagiarism
  11. Write Libraries that do one thing and do it well

    so write libraries that do one thing and do it well, solving a single problem, and providing the best possible solution for that narrow focus is the essence of a micro framework
  12. Write libraries that work together write libraries that work together,

    a micro framework is always going to share scope with other code on the page, so it should do what it can to play nicely with others and minimise its footprint.
  13. Communicate over common interfaces and communicate over common interfaces, this

    were not doing so well at the moment, but were getting there and as the ecosystem grows standards will develop. so lets take a look at some microframeworks
  14. Selector Engines sizzle the selector engine in jquery weighs in

    at 34k, which is ridiculous compared to sly at 22k or qwery spelt q w e r y at 13k
  15. DOM Manipulation the dom manipulation code in jquery weights in

    at around 46k, I have yet to find a case where bonzo was not up to the job and in comparison it weighs in at a puny 24k
  16. Animation jquery spends 26k on animation code, personally i would

    rather dump this all onto CSS3 animations, or maybe control those with a 2kb library like emile
  17. AJAX another bloated area in jquery is the 26k ajax

    code - reqwest weighs in at 11KB and does a fine job of standardising the various ajax implementations
  18. Events binding dom events in jquery is another 32k we

    can shave off a third of that using bean, which has all the standard events and delegation in a 24k package
  19. Templating and now were moving into things jquery cant help

    us with, templating is somewhere we pretty much always need to rely on a microframework, something like mustache or handlebars
  20. Feature Detection so if you must do browser sniffing there

    are libraries like bowser and environ, but otherwise theres modernizer for proper feature detection
  21. MVC and for mvc in the browser there are complete

    setups like like backbone and spine, or things like sammy.js which let you use your build out your own model layer, and there are some coffeescript offerings too like batman.js
  22. Loading for dependency management and loading there are things like

    head.js, or the AMD supporting requirejs, and also things combining feature detection like yepnope
  23. Functional if your looking for a bit of functional sugar

    there is things like underscore or the lesser known valentine both of which are equally good choices, and provide alot of useful utility functions.
  24. microjs.com so this is barely scratching the surface, and there

    are many other good frameworks out there for these and other use cases, i suggest you check microjs.com as a good starting point which has a categorised list of micro frameworks to get you started.
  25. Nice Package so by now everyones probably thinking this is

    all well and good, but they like the unified jquery interface, this is where ender comes in, ender js is a toolkit to combine selected micro frameworks into a single custom framework
  26. 5 Seconds Later... $ ender build domready qwery bean Welcome

    to ENDER - The no-library library ----------------------------------------- installing packages: "ender-js domready qwery bean"... this can take a minute... [email protected] ./node_modules/ender-js [email protected] ./node_modules/domready [email protected] ./node_modules/qwery [email protected] ./node_modules/bean successfully finished installing packages assembling packages... ender.js successfully built! ender.min.js successfully built! so ender is a command line app that piggybacks the existing nodejs package system to let us quickly build our own ender libraries, with one command and in seconds we have a custom built framework tailored to our needs, and a minified version for production.
  27. Oh Jeesh! $('#content a.button') .bind('click', function (e) { $(this).data('clicked', true).unbind();

    e.preventDefault(); }) .css({ opacity: 1 , color: 'red' }) .fadeOut(250); $.map([ 'a', 'b', 'c' ], function (letter) { return letter.toUpperCase(); }) $.ajax('/data', function (response) { $('#content').html(response); }); and ender has a standard build to get your going, weighing in at 72K and providing a selector engine (Qwery), dom manipulation (bonzo), event binding (bean), and handling of the domready event (domReady)
  28. Diving In so a lot of people are taking baby

    steps towards this kind of setup, combining micro frameworks with their larger monolithic frameworks when they fail to deliver, and thats a good way to test the water. but from my personal experience your looking at shaving about a 60% chunk of brochureware and blog/news sites, and web apps will vary massively but all i’ve worked on saw reduced sizes.