Status 14 01 10
Computer-Programmer-006.jpg

Status Jan 10, 2014

Basically this is where I plan to keep my written notes of what I have learned and hope to share with the team. Where most of this wiki is more like a barf of related links, ideas and examples, this will at least help keep it to a stream. :)

Main wiki is here


Client side technologies

First of, as far as a client goes, a trade of that we should require for not having a thick client is an HTML5 compatible browser.
There are some things out there that will really come in handy, however there is not full compatibly with all features.

Some of the new HTML5 features that we might want to leverage are:

  • Websockets - 2 way communication without HTTP/REST overhead. Initial handshake is HTTP then connection established from that point on. Not truely a HTML5 spec, but gets lumped into it.
  • Web workers (concurrent JS execution for computational expensive tasks)
  • IndexDB - client side database storage

These would probably come more into play for DM and RV.

Javascript

First off, let me mention that my javascript knowledge has always been a little shaky at best. It still seems a bit wonky at times, but a few of these resources have helped.

http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/ - Great website with many
http://nodeschool.io/ - Node based learning. There is an elective on functional programming that is pretty tough. I'm still kinda working on it.

Javascript playgrounds

There are several javascript playgrounds on the web. These are amazing and perfect for learning the language.
I prefer jsbin

http://www.sitepoint.com/7-code-playgrounds/

Node JS

Server side Javascript. Its tough to find anything modern that does not use it in some form or another. At a minimum, its an excellent solution for JS testing. It makes for tight web servers and has quite a community around it. Is it useful as a full blown part of our enterprise. Not sure, but you need to have this installed and running to really investigate the MVC side of things.

It is also required for many toolsets such as Yeoman. Really, all you need to do is install node and learn the NPM (Node Packaged Module ) tool. Its easier than a maven build. The stuff practically builds itself.

https://www.udemy.com/blog/learn-node-js/

A fun way to learn Node also is through NodeSchool. With several "choose your adventure" style tests, you can learn little steps incrementally. All the challenges are like 10 lines of js or less really.

MVC

Of of the first terms you see here is SPA (Single Page App) to describe the JS based client that loads up most of what it needs to start off, and asynchronously gets what it needs later as the clicks come up.

A really good book to describe this is http://www.manning.com/mikowski/
In it, the foundations for what we need an app like this to do is explained. He starts out with a good explanation of javascript and the functional aspects that are important to grasp. Then he goes and builds a SPA from the ground up. No major frameworks are used, so the code gets kinda built up pretty quick, but the basic concepts that are needed are explained. I stopped about halfway through the book, but plan to continue on it. A great part of this book is a pattern to modularize your code.

So what are the main features of a Javascript MVC Framework?

  • Two-way Binding between HTML and a client-side JavaScript object model
  • View Templates
  • Data Storage (local or through a web server to a database)
  • URL Routing (keeping the back button working and search engines happy)

Most of my time has been digging around reading up on MVC frameworks and which ones are the most in favor.
The short list is
AngularJS
BackboneJS
EmberJS
KnockoujtJs

Apple to Apple comparisons are hard as some of these are more like opinionated frameworks (Angular) and others more like libraries (Backbone) where you need to tie in other things such as templating engines.

A good list of pros and cons are here
http://www.funnyant.com/choosing-javascript-mvc-framework/

  • Backbone (most mature)
    • apps in production for 3 years now including GroupOn, FourSquare, USAToday, DocumentCloud, etc…
    • good documentation
    • good examples but many now out-dated
    • API very stable
    • lots of watchers on GitHub
    • good testing support
  • AngularJS (mature)
    • in production now at Google but does not have as long a track record as other projects
    • good documentation, getting better
    • lots of examples
    • lots of watchers on GitHub
  • Knockout (mature)
    • in production for 2 years now
    • great documentation including jsfiddle like examples
    • API stable
    • lots of examples
    • lots of watchers on GitHub
  • Ember.js
    • first production release 1.0 on August 30th, 2013 after 2 years of development
    • documentation improving but
    • API had intentionally not been stable until 1.0 release
    • good number of examples some outdated due to API changes prior to 1.0
    • lots of watchers on GitHub
  • Meteor
    • still early in development used mostly in example apps
    • documentation good but a work in progress
    • API still evolving
    • some examples
    • lots of watchers on GitHub

http://www.infoq.com/articles/backbone-vs-angular

Bootstrap

Angular seems to work hand in hand with Bootstrap. A CSS formating library put out by twitter. There are also several 3rd party groups that sell/license other themes.
Angular ui is the best collection of them. Tabs, tables, pickers and the like. These are all tied into the directives from the JS, so you dont even have to plug em in with much effort.

Note, the speed of the net is pretty fast, so you really have to use the JS comments as the means to get things to work. Past examples use old libraries.

other UI libraries are Flat-ui

Glyphs

There seems to be a trend to use common vector icon libraries. Might be better than trying to build icons from scratch. Im not sure if its a css3 thing entirely. But the two things you see most often are the bootstrap glyphs and fontawesome.
Fontawesome is a great library of vector icons that can be fully customized in CSS.

Testing and Builds

There is quite a push for testable javascript.
One package is called Karma. Still seems a bit sketchy, but folks seem gung ho for it.
Of course, its painful to have these tests around with a build/packaging tools to run it.

A popular build and packaging tools is Yeoman. Wiki link
Its still a node based technology. There is:

  • Yo, that does the packaging.
  • Grunt, that does the builds and
  • bower that handles packaging.

Note that NPM already does a pretty good maven like packaging environment with package.json. I think it builds on that.

Other interesting technologies

DocumentCloud
Leyth found this http://johnkeefe.net/a-customized-viewer-for-documentcloud
Could be useful as a document viewer.

NYTimes actually built this. It appears to be a backbone js shop. This is also where Mike Bostock works and does his d3 magic.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License