Web Technologies

The following is mostly Trey Roby's research into recent developments into Web technologies.  It is a rough working document to use for reference for future work on Firefly.

DM-1727 - Getting issue details... STATUS

The decision process for SUIT to adopt React/Redux framework is summarized in the SPIE paper published in July 2016.

Firefly: Embracing Future Web Technologies

Web Technologies
FrameWorks
Interest scale 1 to 5
Popularity scale 1 to 5
Recommended Frameworks

• React
  • Interest: 5, Popularity: 2, Facebook produced, about a year old
  • Uses compiled form of javascript called JSX
  • Getting Started:
    • {+}http://facebook.github.io/react/index.html+
    • Good Starting overview: {+}http://blog.andrewray.me/reactjs-for-stupid-people/+
    • Quick Start:
      • {+}http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html+
  • Articles & How tos:
    • {+}http://blog.reverberate.org/2014/02/react-demystified.html+
    • many links: {+}https://github.com/enaqx/awesome-react+
    • {+}http://jaketrent.com/post/send-props-to-children-react/+
    • JSX debate: {+}https://github.com/af/JSnoX+
    • Stack overflow: {+}https://stackoverflow.com/questions/tagged/reactjs+
    • Mixins & building: {_}{+}http://pomax.github.io/#gh-weblog-1420592591221+_
    • Router
      • would compete with backbone, interest: 2
      • {+}https://github.com/rackt/react-router/blob/master/docs/guides/overview.md+
    • Form Validation: Great article, must read:
      • {+}http://christianalfoni.github.io/javascript/2014/10/22/unailing-that-validation-with-reactjs.html+
  • React Conference Video
    • https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
  • Utilities built on React:
    • {+}https://github.com/facebook/react/wiki/Complementary-Tools+
    • css: {+}https://github.com/icodeforlove/react-rcs+
    • Components
      • {+}http://jquense.github.io/react-widgets/docs/+
      • {+}https://github.com/react-bootstrap/react-bootstrap+
      • {+}https://github.com/plaxdan/react-topcoat-demo+
      • http:/g/react-components.com
      • {+}http://react.rocks/#/+
      • Grid Layout: {+}https://github.com/STRML/react-grid-layout+
  • Conferences and training classes:
    • https://reactjs-training.com/ 
    • http://www.reactrally.com/
• Flux
  • Flux is an architecture style for web applications. It is not a library, though there are some example implementations. Flux promotes one way data flow
    • DISPATCHER -> STORES -> COMPONENTS
    • Components pass an "intent" (also called an "action") to the dispatcher
  • Works with React, up and coming technology
  • {+}http://facebook.github.io/flux/+
  • {+}https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e+
  • Fluxor:[ +http://fluxxor.com/+|http://fluxxor.com/]
    • A fairly simple implementation of flux
  • Interest: 4, Popularity: 2
  • Good Overview: {+}http://blog.andrewray.me/flux-for-stupid-people/+
  • Good Overview plus a library: {+}http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html+
  • {+}https://www.npmjs.com/package/flux+
  • {+}http://facebook.github.io/react/blog/2014/10/17/community-roundup-23.htm+l
• Backbone.js
  • Interest: 4, Popularity: 5, one of the first frameworks, maybe most used
  • Getting Started:
    • {+}http://backbonejs.org/+
    • {+}http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started+/http://backbonejs.org/
  • Simpler, Is more a library than a framework
• Ampersand, an alternative to Backbone.js
  • Interest:5, Popularity: 2, improved backbone
  • Getting Started:
    • {+}http://ampersandjs.com+
  • Book by same group:[ +http://read.humanjavascript.com+|http://read.humanjavascript.com]
  • great list of utilities: {+}http://tools.ampersandjs.com+
  • Notes:
    • appears to have more powerful models
    • Can pick and choose which modules to use
    • Very centered on npm and Browserify (Good!)
    • Has some sort of CLI for initializing a new application

Utility Libraries, to find most used libraries: http://libscore.com

• Promises pattern libraries, return a promise object, Popularity: 5, Interest: 5
  • Bluebird
    • {+}https://www.npmjs.com/package/bluebird+
  • Q
    • {+}https://github.com/kriskowal/q+
• Event library
  • They are everywhere, probably should use from backbone or Ampersand
  • a very small one: {+}http://notes.jetienne.com/2011/03/22/microeventjs.html+
• Flow: Type Checker
  • {+}http://flowtype.org+
  • very new, very interesting, we should watch it
• Enumerable
  • http://jsclass.jcoglan.com/enumerable.html
• Validation of input
  • https://www.npmjs.com/package/validator
• ES5 Shims, modifies javascript to work with older versions
  • Necessary for IE8 compatibility
  • {+}https://github.com/es-shims/es5-shim+
• Underscore.js
  • Utility library, Best choice
  • {+}http://underscorejs.org+
  • Popularity: 5, Interest: 5
  • We will most certainly use this.
• LoDash
  • {+}https://lodash.com/+
  • collection manipulation
  • Extension to underscore
• Number Format
  • Numeral.js
    • {+}http://numeraljs.com+
    • has java or c like string formatting capabilities
    • Popularity: ???, Interest: 5http://numeraljs.com/
• Strings
  • https://github.com/epeli/underscore.string
  • This could do number format as well, has a sprints function
• Microjs
  • Bunches of really small utilities
  • http://microjs.com/
• Immutablehttp://numeraljs.com/
  • provides immutable versions of JS data structure
  • Can improve performance with React and others
  • https://github.com/hughfdjackson/immutable
  • Popularity: ???, Interest: 2
  • no longer supported, there are other altrernative that should be looked into

http://numeraljs.com/
Builders

• Grunt
  • http://gruntjs.com
  • Build files are json and javascrip
  • Grunt is built on node.js
  • Has many plugins, eg. Minify, js lint, etc
  • Similar to ant
  • grunt-browserify
  • http://mattbailey.io/a-beginners-guide-to-grunt-redux/?utm_source=javascriptweekly&utm_medium=email
  • Popularity: 4, Interest: 3
• Gulp
  • {+}https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md+
• npm run
  • subset of nmp for building (i think)
  • Learn more about npm run

Package Managers
Browserify & Webpack are both package managers are built on commonJS (from node). We will need to choose one. commonJS is the best way to organize our javascript in modules. It mostly solves the javascript namespace problem. We can maintain a similar packaging style like we do with java.

• Browserify
  • interest: 5, popularity: 5
  • {+}http://browserify.org+
  • Handbook: {+}https://github.com/substack/browserify-handbook+
  • add's the require method that node.js uses
  • Also Provides a library very useful modules taken from node that can be used on the browser (see "buildins" in Handbook)
• Webpack
  • http://webpack.github.io
  • https://github.com/petehunt/webpack-howto
  • {+}http://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html+
  • Webpack boilerplate for react: https://github.com/jarsbe/react-webpack-boilerplate

Node.js & NPM

• Node Required to use npm, browserify, and any other command line javascript tool
• must be installed on all our machines and build servers
• http://nodejs.org
• project basicly defined commonJS
• A javascript server
• Provides a javascript VM outside of the browser
• Node make javascript into a general purpose scripting language such as perl, python, unix shell, etc
• We would not use it a server
• Used for non-browser, command line javascript based tools us node (such as Grunt)
• NPM - Node Package Manager
  • Installed as part of node
  • npm search
  • npm test - used for testing
  • We can use npm and commonJS to layout the whole module scheme

CSS

• Sass?
• LESS?
• http://css-tricks.com/sass-vs-less/
• These process and advance CSS syntax with loops and variables.
• I am concerned about debugging.
• Popularity of CSS proprocessor: ????
• Intertest: ???

Comparison of JS Frameworks

• {+}http://todomvc.com+
• http://www.infoworld.com/article/2612250/application-development/the-10-hottest-javascript-framework-projects.html
• {+}http://blog.liip.ch/archive/2014/09/16/angularjs-vs-reactjs-for-large-web-applications.html+
• book: {+}https://www.funnyant.com/javascript-framework-guide/+
• React and backbone: {+}http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a--view.html+
• How to pick framework: {+}http://www.fse.guru/how-to-pick-a-frontend-web-framework+
• Future:[ |http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/]{+}http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/+
• Very Good: {+}http://blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks+
• He gets to the real issue: {+}http://blog.dantup.com/2014/08/you-have-ruined-html/+
• {+}http://www.quirksmode.org/blog/archives/2015/01/the_problem_wit.html+

http://www.fse.guru/how-to-pick-a-frontend-web-framework

JavaScript Graph comparison

• http://www.jsgraphs.com/

General Performance articles

• {+}http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/+
• {+}http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html+

Patterns & Best Practices

• module pattern: {*}{+}http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html+*
• Read! Great article: {+}http://code.tutsplus.com/tutorials/important-considerations-when-building-single-page-web-apps--net-29356+
• Versioning system: {+}http://semver.org+
• JS tips: {+}http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices+
• Javsscript Patterns: {+}http://shichuan.github.io/javascript-patterns/+
  • Enforcing new: {+}https://github.com/shichuan/javascript-patterns/blob/master/literals-and-constructors/enforcing-new.html+
  • http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
Concepts
Functional vs Declarative
Declarative Renascence
CRUD- create, replace, update, delete
{+}http://lhorie.github.io/mithril/comparison.html+
CommonJS-compatible module system
commonjs - package scheme from node

React w/ backbone Articles

• {+}http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html+
• React/ backbone mixin: {+}https://github.com/clayallsopp/react.backbone+
• React/flux/backbone: {+}http://www.toptal.com/front-end/simple-data-flow-in-react-applications-using-flux-and-backbone+
• All could apply to Ampersand as well

Working Proposal for Firefly migration from GWT

Getting started reading list:
This list should help you get the basic concepts for: React, Ampersand/Backbone, Flux, CommonJS/Browserify

• JavaScript -
  • {+}https://gist.github.com/ericelliott/d576f72441fc1b27dace+
  • Book: JavaScript: The good parts
• React:
  • Good Starting overview: {+}http://blog.andrewray.me/reactjs-for-stupid-people/+
  • Docs: you should look at example on first page: {+}http://facebook.github.io/react/index.html+
• Backbone and Ampersand
  • Ampersand is an improved Backbone
  • Right now we only only use the Models & Routers from these
  • Model core doc, read: {+}http://ampersandjs.com/learn/state+
  • Ampersand docs, look over: {+}http://ampersandjs.com/+
  • optional, if you are not getting the model thing: {+}http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started+/
• Putting view and model together:
  • This blog uses backbone but Ampersand will work the same way, also discusses flux (see next point)
    • {+}http://www.toptal.com/front-end/simple-data-flow-in-react-applications-using-flux-and-backbone+
  • Flux
    • Flux is a way of managing events. We might want to incorporate these concepts
    • {+}http://blog.andrewray.me/flux-for-stupid-people/+
• Forms and Input
  • Very long article, but very good. I learned a lot about javascript and react by reading it. Read and skim, we will keep coming back to it. I like just about everything this guy writes.
  • {+}http://christianalfoni.github.io/javascript/2014/10/22/unailing-that-validation-with-reactjs.html+
• CommonJS
  • For modules and packaging
  • Read at least the first half of the manual, easy to read and very good.
  • Handbook: {+}https://github.com/substack/browserify-handbook+

Appendix I (random notes, java-to-javascript help, interfacing with GWT notes)
React notes

• I think this is the most underdocumented part of React right now. The suggested way to communicate between components is to simply set props when communicating from parent to child and to pass callbacks through props when communicating from child to parent.

Java-to-JavaScript translation experience

• converting str.length() to str.length
• == to ===
• != to !==
• s1.equals(s2) to s1==s2
• no foreach so, "for(a in list)" becomes "for (int i=0; (i<a.list.length); i++)"
  • Update: js v5 does have a foreach function on arrays
• us !isNaN() to check to see if a variable is a number
• no overloaded method in javascript all java overload method need to be combined into one and the the parameters need to be checked to see it they were passed
• if a method or variable name is not recognized you will not see an error to runtime
• learn what a closure is
• learn what prototypal inheritance is

Interfacing GWT java to Javascript

• JS Interop annotations
  • New but beta with GWT 2.7
  • Could be used as an alternative to JSNI, More flexible than JSNI
  • https://docs.google.com/document/d/1tir74SB-ZWrs-gQ8w-lOEV3oMY6u6lF2MmNivDEihZ4/mobilebasic?pli=1

Appendix II (research of non-recommended frameworks or tools, list of non-reasearched frameworks)

Not Recommended Frameworks

• AngularJS - google
  • Interest: 5, Popularity: 5+, Google produced, started 2009
  • {+}https://angularjs.org/+
  • modules: {+}http://ngmodules.org/+
  • training: {+}https://egghead.io/lessons/angularjs-binding+
  • concerns: {+}http://www.fse.guru/2-years-with-angular+
  • Future: {+}https://www.airpair.com/angularjs/posts/preparing-for-the-future-of-angularjs+
  • Concerns about performance and code organization
• Bootstrap
  • Interest: 2, Popularity: 3
  • {+}http://getbootstrap.com+
  • twitter
  • Bootstrap is mostly just utilities and css. We could use parts of it but we need more. Can't depend on it for something as large as firefly.
• Ember
  • Interest: 2, Popularity: 5, born out of SproutCore
  • {+}http://emberjs.com/+
  • Is more prescriptive than others
  • Concerned that we need more flexibility to fit into our existing framework
• JQcomponents
  • {+}http://jqcomponents.com+
  • Interest: 2, Popularity: 1, Framework build on JQuery
  • Small project
• Others, not investigating closely -
  • Mithril
    • {+}http://lhorie.github.io/mithril/getting-started.html+
    • Interest: 1, Popularity: 1, Small project
• Polymer
  • Interest: 3, Popularity: 3
  • everything is an element.
  • Web components
  • Interesting, but I think it is more experimental.
• Knockout
  • ?????
  • {+}http://knockoutjs.com/+
• Meteor
  • Interest: 0, Popularity: 4
  • Uses Node on backend, full stack framework
  • We can't use a full stack framework
• jquery
  • not a framework, might be a necessary library
  • Popularity: 5+, Interest: 1
  • Some tools are built on Jquery so we might end up using it.
  • Using only jQuery will lead to a coding mess, I don't even know if it would be possible to write something as large as firefly in jQuery.

Other Package manager Research that we don't need

• • Gulp
    • gulp-concat
    • a guide for getting started with gulp and browserify {+}https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917+
      • - concat all js files together, used nicely in angular injection
  • requirejs
    • http://requirejs.org/
    • interest: 3
    • popularity: 5
  • CDN (content delivery network)
    • a CDN is a way to get libries from a commone server
    • I don't think we need to use one.
    • {+}https://cdnjs.com/about+
    • {+}https://developers.google.com/speed/libraries/devguide?csw=1+
  • others
    • bower???