Javascript frameworks/libraries/tools

This is set of notes I have taken down over period of some time. I am just jotting down set of frameworks/libraries which can be possibly used in  js world.

There are sort of two parts of this post
1. Why Framework of anykind for js based development
2. List of Interesting frameworks/libraries/tools in no particular order

So let us see what is the issue we are talking about. Let us say server side is going to be an endpoint (native app listener)
or a controller (whether hosted natively for native app-thick client app  or zend/cakePHP/asp.net mvc/spring/seam etc), or a thrift/wcf endpoint we need

1. Logic to render the view in client browser/container or  at server via view (controller endpoint of either kind)
2. Logic for serializing/deserializing, validation (basic vs domain specific),  routing
3. Clean difference between layout & data

Options we have
1. Use of server-mvc heavy framework with js only used for  ajaxified/json-strigified talking back to ajax endpoint
2. Use of mixed environment where client side mvc is used to organize  various moving parts and use server end points for backend interaction
3. Create thin server with validation and thicker client side mvc

If we go down the path of jquery or similar tool to do client side  interaction, we have potential of large amount of code getting developed
over period of time. Jquery/ExtJS also has lot of “browser” specific code and  this needs to be weaned out.

So one needs to choose a set of helper libraries/best practices to achieve the goal.

Factors
a. Size of the framework/goals of the framework
b. Dependencies required
c. Updates and support
d. Ease of testing – selenium support – at least for the main logic
e. Tools support – perf/testing, profiler
f. Familiarity & comfort with patterns – pure mvc vs mvvm
g. Duplicate code at server/client side

Library/Framework requiring no introduction
1. jquery/prototype/dojo/mootools/ExtJS –
Use base on comfort factor of the team.  No further explanations reqd.
Restrict to specific usage and use dependency management system to load
right modules.

MVC Frameworks
1. SproutCore
Apologies I have tried but not very successful at picking this up in  actual project – my bad – it is on my todo list one of these years.
http://sproutcore.com/

2. javascriptMVC – is a real heavyweight framework in real terms and does a “lot” of things. I am still a journeyman here but looks like in terms of  above 7 points this library comes closest to what can be used. It does take  time to grow on you. One thing which will comes as surprise is its dependency on java for compression, funcunit tests & code generators(I guess).
http://javascriptmvc.com/

3. Spine
Another mvc framework which looks like backbone but is more minimalistic. It is certainly lighter than javascriptMVC but both have different audiences. Key piece is the way inheritence implemented – it uses native prototype  based inheritence. I am at present not comfortable with its model creating/requiring those IDs and its persistence back to real db. Becuase they are mentioned in the main docs – some folks think of them as main actors in spine usage. Another important piece is spine can be much better integrated with backend rest endpoint.  One needs to be careful while using it’s ajax calls – as by default everything is asynchronous. Compared to javascriptMVC I find the idioms it follows to organize/extend very organic. (I could not formulate a better sentence to convey what it means to see x.controller.create {}) . Spine  has advantage in terms of api for html5 localstorage & async operation. Folks well versed in backbone will find it simpler to adopt. One thing I do not like in terms of simplicity – init after every create(partly bec of prototypal inheritence).
http://maccman.github.com/spine/

4. Backbone
Mentioning backbone after spine could be sacriligeous for some. But here is  another beautiful framework bit loaded towards model(eod data is god). It can be used with jquery or zepto.  It’s views are more of view-controllers(my own term). It gives a structure
without tying models to the end dom – this is a big plus as you move away from jquery(trying to do many things there). Backbone uses
underscore for handling collections of models.

http://documentcloud.github.com/backbone/

5. Cappucino – Another framework out of my league, ObjectiveJ is as seductive as ObjectiveC. Serious lack of motivation has prevented me
from doing anything with it. I hear Mac only developers like the familiarity  – but again it is second hand information. Biggest advantage is no need to learn html or use it, css or manipulate  DOM. Cross compilation gets new meaning.

http://cappuccino.org/

6. Google Web toolkit – EOD write code in java and use libraries to  maximize productivity. Has lot of tools – unfortunately I have not
used them personally except bits and pieces.
http://code.google.com/webtoolkit/

Not a MVC framework but a great library to know and work with
1.Node **
Node.js is an evented I/O framework(more of library plus whole ecosystem)  for V8(the default engine).Easily the most happening event oriented server  side library for js. LinkedIn has claimed fantastic performance increase over ror  (but hey they were using ruby – not fair to compare if you are not using 1.9 at least)
http://nodejs.org/

Windows support – Node 0.5.4 supports windows build via VS using GYP http://blog.nodejs.org/2011/08/12/node-v0-5-4/

Miscellaneous libraries

1. Store.js – Resolve cross browser localstorage issues. Uses localStorage, globalStorage, and userData behavior.
https://github.com/marcuswestin/store.js

2. underscore – It gives you useful functions you might normally have in your own utililties js file like each, map, isEmpty, isElement and more. Also  described as “It’s the tie to go along with jQuery’s tux”. Everything is available through _ – no really🙂. Functional programming grokkers will like this tool.

http://documentcloud.github.com/underscore/docs/underscore.html

3. requirejs – Handle dependencies in clean manner.  Use it to minimize loading time, organize dependencies in clear fashion. LabJs too have something similar.

http://requirejs.org/

4. socket.io –  When you need to do “realtime” communication while websockets support  evolves. Really wished present browsers could be reused rather than  large re-install with new browser. It is not fun to test for regression  for all apps in large organization. This is where socket.io comes in good. It has support for realtime goes from sophisticated(shiny-new-browser) to legacy(IE5.5/safari3). It uses range of technologies to provide graceful degradation for experience across available browsers and devices.
http://socket.io/#how-to-use

Code to browse – https://github.com/LearnBoost/socket.io/blob/master/support/node-websocket-client/lib/websocket.js
Line 442 onwards is where one should concentrate for understanding key stuff.

Various transports supported
https://github.com/LearnBoost/socket.io/tree/master/lib/transports

Silverlight support-http://groups.google.com/group/socket_io/browse_thread/thread/6f6d8575ae887829
Great thing for SL team to implement as plugin.

5. coffeescript
Another code generator for javascript – love child of python/ruby. I  personally stay away from more abstractions.Good stuff – all variables
are in local lexical scope, no pollution of global scope http://jashkenas.github.com/coffee-script/

6. LabJS – Another asynchronous script loader, allows as much parallel  load limited by browser settings. One can easily specify which
scripts have execution order dependencies and LABjs will ensure proper  load order. Small size comes in handy.

http://labjs.com/

7. Zepto – Mobile/jquery friendly framework for webkit browsers. Main reason  to suggest this would be that other frameworks have lot of code for browsers not available on client devices (IE on iOS/Android as of today). In spirit  of doing the right thing – suggested doing custom work or use Zepto kind of framework. It uses mobile webkit features and is very small – 2k, has support for major gestures.

http://github.com/madrobby/zepto

8. CacheProvider – from twitter’s Dustin Diaz – allows you to cache  data both in memory and using localStorage if it’s available.
http://www.dustindiaz.com/javascript-cache-provider

9. NowJS – One more node goodness to keep track of. Node has become the tsunami of  all good things. Aim of NowJS is to make real-time applications easier to develop by synchronising functions and variables in a namespace  between clients and a server.
http://nowjs.com/

10. jsFiddle – Docs http://doc.jsfiddle.net/

http://jsfiddle.net/MNGpr/

Templates
This is a topic which ignites passion as people cling to them like their shadow. Do you notice no mention of server side templates🙂 – it all
depends on the choice of infra you want to make.

1. Moustache -http://mustache.github.com/,http://icanhazjs.com/
2. Jquery Templates – http://api.jquery.com/category/plugins/templates/
Inspired by John resig’s template plugin
3a. jqote – http://aefxx.com/jquery-plugins/jqote/ ( No like <![CDATA[… absolutely not)
3b. render – https://github.com/atduskgreg/srender/
4. closure template – http://code.google.com/closure/templates/

Engines

1. Rhino
Reminds of script# effort and is basically java for javascript  (compiler & interpreter). Allows javascript to interact on server side
with java objects (pojo/bean…). I am not a big fan of mixing these  two worlds. Let them talk to each other at an end point and use common
serialization mechanism. Much touted DynamicInvoke feature is here  in Java 7 but it’s usage in future for Rhino -last I checked – months
before this writeup was written is not yet there.

2. SpiderMonkey – Compiler and Interpreter with mark and sweep gc  written in c. Used at Mozilla. The famous piece is the
Tracing JIT  -https://developer.mozilla.org/En/SpiderMonkey/Internals/Tracing_JIT

3. V8 – Complete VM/runtime. Since it has become part of Node it has  spread its goodness allaround.

http://code.google.com/apis/v8

I have no direct experience in usage of V8/SpiderMonkey.

Rhino I have evaluated for usage and that is how I know miniscule piece of it.

I am not making a particular OS as the requirement as I think any
programmer worth his salt can pick up and decide on usage based on his constraints.

** Node.js will be available from joyent on Windows pretty soon

Javascript frameworks/libraries/tools

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s