A Modern Front-end Stack for New Consumer

Language

Babel

by the NodeJS community

https://babeljs.io

 

Babel allows us to write ES6/ES7 (future specification) Javascript, taking full advantage of important features like block scoping, destructuring, async/await, classes, and an enhanced modules system. We can opt-in or out of features as needed through the use of babel's modular presets configuration, all done via a single .babelrc file. It transpiles that code to modern-day ES5 Javascript that can run in any browser.

Immutable

by Facebook

https://facebook.github.io/immutable-js

 

Immutable gives us immutable collections for Javascript, including List, Stack, Map, OrderedMap, Set, OrderedSet, and Record. These form a great constraint for our engineers to operate within and will help us reduce our dependency on global application state and mutability in the client app, improving its maintainability and modularity by making bugs less subtle and less frequent.

Framework

React

by Facebook

https://facebook.github.io/react

 

React provides us a way to break our views up into self-contained components and removes the need for DOM manipulation entirely. Because React uses a virtual DOM in conjunction with diffing, it's extremely efficient in comparison to other view-controller libraries and frameworks out there that directly manipulate the DOM. It also abstracts rendering away, which allows us to render using whatever renderer we choose - ReactDOM or React Native, for example - to render for different devices as needed.

Redux

by Dan Abramov, Facebook

https://redux.js.org

 

Redux is "a predictable state container for Javascript apps" and corresponds to the model in other MVC frameworks. It uses a functional-reactive data flow model inspired by Elm together with state management ideas taken from Flux to provide a simple, intuitive state management system that's based on event emitting and data flow instead of mutable state.

React Router

by the React community

https://github.com/reactjs/react-router

 

React Router gives us a way to tie the state of the UI to a URL so that we can change and restore UI state via HTML link navigation. It supports lazy code loading, dynamic route matching, and location transition handling.

Axios

by Matt Zabriskie, Instructure

https://github.com/mzabriskie/axios

 

Axios is a promise-based HTTP client. It provides a uniform API for making AJAX calls from the browser to a REST API and has support for the ES6 Promises API, request/response intercepts and transforms, automatic JSON data transforms and XSRF protection.

Webpack

by Tobias Koppers

http://webpack.github.io

 

Webpack is a module bundler that was designed specifically for large single-page applications. It's extremely sophisticated but straightforward to use, supports both CommonJS and AMD, can handle any static asset transformation via loaders and plugins and encourages the organization of source code into modules.

Testing

AVA

by Sindre Sorhus

https://github.com/sindresorhus/ava

 

AVA allows us to run tests concurrently, with each test being run in its own isolated process. It's extremely fast, enforces writing atomic tests, and supports ES6, promises, generator functions, async functions, and observables.

Enzyme

by AirBnB

https://github.com/airbnb/enzyme

 

Enzyme is a library that makes it easy to test React Components. It works by mimicking jQuery's DOM manipulation and supports shallow and full rendering as well as testing static rendered markup.

ESLint

by Nicholas Zakas

http://eslint.org

 

ESLint is a tool for providing pluggable Javascript linting. It's highly configurable, supports all babel presets via plugins and linting configurations via configs, such as the eslint-config-airbnb. We can create our own eslint-config-cashstar, for example.

NYC

by Benjamin Coe, NPMJS

https://github.com/bcoe/nyc

 

NYC provides coverage reporting and improves on Istanbul by working well with subprocesses. It supports various coverage reporting formats and coverage checking.

React Stack for New Consumer

By Carlo DiCelico

React Stack for New Consumer

This presentation describes the key components of a React-based framework for Cashstar's new consumer project, highlights the specific problems each component is intended to solve and proposes a few ideas on how this stack might be used in the system design of the client application.

  • 685