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, 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