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 - Research Javascript Frameworks: Work toward future proposal DONE

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, produced, about a year old Uses compiled form of 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 and (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. {+}https://lodash.com/+ collection manipulation Extension to underscore Number Format Numeral.js {+}http://numeraljs.com+ has 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 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 & 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 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 , 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 - 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

Function Component Confidence

1 to 5

UI React, docs 4

Data Flow Flux, for application state 2 Using Ampersand?

Models/Collections/Stores Backbone or Ampersand 3 (problem: React better w/ immutable data structures Solution: use force update on change events)

Router Backbone or Ampersand 3

Json Serialization Backbone or Ampersand 3

Modules or packages commonjs using Browserify & NPM 5 npm can provide comple file layout framework Browserify manual

AJAX Http calls Backbone, Ampersand or Browserify built-in's 2

Number Format Numeral.js 4

Build ???? Grunt or Gulp ???? 1

CSS ????

JavaScript Lint 5

React Widgets ?????

XY Plot tool ?????

Utilities many, many utilities that we have written already exist in JS land, use npm to manage 4

Browser Support IE9+, not long support IE8 4 The other browsers are fine

form input We need a tool to assist us here using the concepts from Christian Alfoni's blog entry 4

Testing ????, whatever we choose we could launch with "npm test"

Utility LIbrary Underscore.js 5 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

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 . Web components Interesting, but I think it is more experimental. ????? {+}http://knockoutjs.com/+ Interest: 0, Popularity: 4 Uses Node on backend, full stack framework We can't use a full stack framework 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--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???