Saturday, 5 March 2016

JavaScript framworks

Top JavaScript Frameworks, Libraries and Tools and When to Use Them 

(beware that frameworks < flexible than libraries)

Isomorphic JS apps can run both client-side & server side (bankend and front end in the same code). List of all the new isomorphic librarries and frameworks


  • Meteor - isomorphic

  • Underscore &lodash - provides a whole suite of utility functions without monkey patching the built-in JavaScript objects. Both libraries provide over 100 functional helpers and other specialized goodies; including functions like map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone

  • Aurelia

complete framework (built using knockout/backbone)                 

  • can easily use React.js within Aurelia
  • full-stack SPA framework with support for ECMAScript 6 syntax (as well as a Gulpfile with customised build system for transpiling your ES6 down to ES5 compatible code).  supports all forms of alternative abstraction syntax out of the box like TypeScript, AtScript and even CoffeeScript
  • Variable binding is simple. with just similar syntax to Javascript itself.
    • <input type="text" value.bind="firstName"> <a href.bind="url">Aurelia</a>
  • You can explicitly specify the type of binding you are using
    • <markdown-editor value.two-way="markdown"></markdown-editor>
.. you are learning ES6 and not so much the framework itself. This means all future frameworks that use ES6 will leverage your existing ES6 knowledge which means if you choose to learn Aurelia, most aspects of it should apply to another framework. - source
Because Aurelia does not replace your HTML or parse it any differently than your browser does without Aurelia, it allows you to use any third party library or plugin inside of your Aurelia application without worrying about it messing with anything.

Aurellia with firebase example ...  aurellia/firebase plugin

Learning through examples - trello page 
building a treeview
How to add a tab (or other) UI component with Aurelia

Configure Aurelia Project using Visual Studio

  • three.js

render a scene with a camera and a mesh. camera is like the view source. each mesh has a genomeyry aND A MATERIAL.

has examples ... (webgl)

May need to run a local server.

Blender with three.js plugin for editing 3d models

  • Node.Js

When building a website, code willbe developed that will run on the server to read and write to the database, to generate web pages and respond to other client requests (like expanding text box instead of loading a new page etc). Node.js allows use of Javascript to do this, by loading the JS code on a server & executing it. (AKA "server side")

"Client side" javascript (older but still common) is what is delivered to the browser FROM the server, as textual code, and is then executed by the CLIENT'S browser. MAny website have client JS running and its benefit is it allows dynamic web pages.

Client side JS frameworks like EmberJS or AngularJS are being used to run entire applications completely on the client's browser. The is done by using a web server (usually within Node.js) to statically serve the front end application content (i.e. the HTML, JS, etc...) and only using Node as a sort of REST API to be called for external information such as database calls and the like.

An advantage to this can be certain actions will not require a full reload of the page (e.g liking a post on facebook, or expanding a comment section etc) and the application can update it's various components dynamically, only getting what it needs when it needs it. 

This can mean the Node.js Server does not need to preprocess templates into HTML code every time the user wants to do something non trivial. Server/client configuration becomes more flexible since communication between the client/server are only HTTP requests & responses.

Javascript via node.js is rising in popularity as a server side language. Alternatives being PHP, Ruby on Rails, Java, Go and Python.  Node.js allows you to run the same language on both client and server, but this doesn't always equate to a huge advantage as conversion to text/binary data is still required when passing things around.

Note: Anything that be can done in node.js can be done in these other languages and server-side frameworks. Using Python doesn't prevent doing anything that could be done in node.js.

  • Angular 

(1 vs version 2) - front end framework   static and requires some kind of back-end or API. (think: MEAN stack: Mongo, Express, Angular, Node)

 inlining HTML is "ugly" and confusing compared to React - instead, must group controller through an ng template (<script type = "text/ng-template" id ="comment-box.htm">) -

..</head> <body> <h1> Hello<h1> <div>
bn:comment-box url="/comments.json" poll-interval="2000"> </div>
<script type="text/javascript">
                           ---// to manage the comment box // --
angular.module ("Tutorial").directive("bnCommentBox", function(){
                           ---// return direcive configuration object// --
return({ controller: Controller, scope:{ url:"@", pollInterval: "@"}. templateURL:    });
                            ---// to manage the comment box view-model // --
funcntion Controller ($scope, $http) {
$scope.comments = [];          ---// collection comments to render// --
setInterval (loadRemoteData, $scope.pollInterval);       ---// poll URL for new content// --

Philosopy to only render when necessary  means state must be managed more implicity;

Very popular, flexible, lot of eatures, 800 3rd party modules, big community (backed by google)

2 way data binding (
The problem with Angular is even though it simply adds a layer over the top of traditional HTML, you have to learn its abstractions; directives, controllers, services, factories and the way it expects things to be done. Then you need to understand how to do things “the Angular way”, how the $digest cycle works, scoping and issues with nested scoping, communicating between components and other various aspects of Angular that add to the learning curve. - source
There are basically five pillars of AngularJS:

  • Directives
    • The idea behind directives is that you're able to create your own HTML elements with custom functionality. Think about how we write HTML pages: we use different tags to represent different behaviors: `<a>` tags for links, `<p>` tags for paragraphs. 

      If we are using HTML5 we might use the new `<audio>` tags for audio or `<video>` tag for a video player.

      But what if we want to write our own custom tag with our own custom functionality. (Say, a `<weather>` tag or a `<map>` tag.) Then we'd use directives! 
    • more about the details of writing directives, see this post about directives by ng-newsletter.
  • Controllers
    • Angular controllers are used to organize functionally across a group of DOM elements. (When I say, "DOM elements", I just mean a group of HTML tags). 

      The idea is that we can organize our functionality into modules of code and it helps contain functionality in one place. This helps keep a project maintainable as it grows. 
    • video on AngularJS controllers.
  • Scopes
    • AngularJS uses scopes to communicate between components - especially between javascript (in controllers) and our HTML (our "view"). Scopes are the glue between our code.
    • Code examples, part 2 of  "AngularJS beginner to expert series"  
  • Services
    • Sometimes we want to share code across different controllers in our code. In Angular we use services to perform this functionality. Services are singleton objects that perform tasks that are common to several areas of the system.
    • AngularJS guide on AngularJS services.
  • Dependency Injection
    • How a particular part of the code gets it's dependencies. Dependency Injection (DI) is analogous to `require` in node.js or ruby or `import` in Java. The idea is we're just declaring what dependencies we need.  AngularJS makes this really easy.
 3 learning sources:
1. ng-newsletter's post on How to Learn AngularJS
2. ng-newsletter's Beginner to expert 7 step series 
3. - Learn AngularJS with Tutorial Videos & Training
4. Building a checklist

  • React

  • Basiaclly just the View in MVC, to work with remote data, will have to look into additional frameworks like Flux to support your app. But react shares a lot of similarities to other framworks, making future switches easier.
  • Would require a router component
  • can easily use React.js within Aurelia
  • good for performance

can inline html through JSX transpiling e.g....  

render: function() {
return (
<div className = "commentBox"> <h1>Comments</h1>
<CommentList comments = {}/>
<CommentForm onCommentSubmit = {this.handleCommentSubmit}/>

React can render views on the server

  • will start with an intitial state to define immutable state of the component... 
var CommentBox = React.createClass({
get initialState:function(){
return({data:[] });       },   
  • Then public methods like handling compnenet life cycle events:
    • componentDidMount: function() {
    • this.loadCommentsFromServer();
    • setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval); }, 
  • Or handling interactions like comment submission:
    • handleCommentSubmit: function (comment){
    • var self = this;
    • this.setState({ data: ( comment)}); 

Philosopy to always parsing markup, always rendering.. but compenent lifecypcle methods can combat this expensive "always" rendering act.

get your data from the view, check to see if it's been filled out - pass it back up to the form and then reset the view.

both can pole for data at set intervals, but web sockets would be less network intensive

How react is "changing the game"
  • - Instead of MVC and data binding, a front-end system should have a one-way data flow. Your views should never change the models directly, they always read from the models though, and for writing, they trigger actions that get eventually dispatched to the models (The models are referred to as Stores in this flow). React fits perfectly in the way it "reacts" to data changes in the stores (since it's always listening to that), and re-render the views efficiently (thanks to the Virtual DOM)
  • - Instead of REST, and having the logic of what data to expose on the server-side, then managing different end-points for different needs (for example, one end-point to expose top posts, one to expose a post, and one to expose a post with comments included), let the client asks exactly what they want (using a graph), have the server parses that, and respond with exactly what the client needs (no over-fetching or under-fetching). GraphQL is a great fit for that graph with which the client can ask the server.
  • - Instead of the standard recommended separation of data and views, and since only the view knows exactly which data elements they need to render, don't separate these 2 at all, and have the data requirement expressed in the view component itself, there are huge benefits to this. RelayJS is written to take care of managing this new idea.

  • d3

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework.

  • Babylon.js

a 3d game engine based on WebGL and JavaScript for building game that run on browsers. High-quality games complete with physics, audio and particle systems among other things.  A more game oriented alternative to three.js

  • Ember

complete framework 
Seems to be declining.
good with complex nested routes and templates within a page

  • Backbone

toolkit framework - may reply on other tools             
Good for building own framework, defininng own template or using jQuery-like event binding.
But has a steep learning curve and is for advanced developers

  • Knockout

toolkit framework - may reply on other tools

has all basic view rendering features needed for  smallscale app. Good iuf you have to develop your own framework
Expert in data-bindings, easy to setup and work on. 
VIEW> 2 way binding > VIEW MODEL < JS Remoting < MODEL

  • Others

Polymer -
Ionic - 

Can - New, so lacks popularity and support. Easy to use and flexible


Mocha& Chai for testing

Mocha is a JavaScript test framework that makes it easy to test the async code in your node module or browser app. Mocha tests can run in series and have the added quality of tracing exceptions to the correct test cases.
Chai is a behavior-driven development/test-driven development assertion library that can be paired with Mocha. It makes it simple to express what you are testing in a readable style.


Having included Mocha and Chai on this list, it would be incomplete not to include a test runner to run these tests or perhaps to setup continuous integration testing. Karma is a tool designed to help automate running your tests against different browsers. It will help you run your Mocha and Chai tests on all the browsers out there.
Not every browser runs on every platform but luckily there are a couple of free tools you can use to test other browsers, take a look at Browser Screenshots. If you are running on OS X and want to test Edge or Internet Explorer, you can use this tool for free.

No comments:

Post a Comment