JavaScript Micro Frameworks

Presentation from London JS

Transcript

1. JavaScript Micro Frameworks By Daniel Knell
2. 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.
3. 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
4. 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.
5. 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.
6. 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
7. 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.
8. 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.
9. 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.
10. 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.
11. 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
12. 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
13. 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.
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. Feature Detection so if you must do browser sniffing there are libraries like bowser and environ, but otherwise theres modernizer for proper feature detection
22. 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
23. 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
24. 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.
25. 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.
26. 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
27. 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... ender-js@0.4.1-dev ./node_modules/ender-js domready@0.2.11 ./node_modules/domready qwery@3.3.4 ./node_modules/qwery bean@0.4.11-1 ./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.
28. 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)
29. 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.
30. Mandatory Cat Picture
31. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Any Questions / Trolling?