tempest.js

The brand new framework based on React + Redux and also our best practices.

View

Problem

Build rich user interfaces with a component-based JavaScript library.

Solution

React

Reason

• React is only a view library and we can gradually introduce it to an existing project. Even if you work on a few years old legacy application you can still design a new screen using it. It's not all or nothing
• React works with ES5/ES6/ES7
• React is an innovative place
• JSX - Mix up HTML and JavaScript
• React has a simple API
• Lightweight Components => Best Practices keep them lightweight and small yet reusable, composeable and functional without any side effects
• Unidirectional Data Flow
• Works great witht Redux which could help you structuring and managing your web app state
• Close to JavaScript
• Functional Programming
• Community

Alternatives

AngularJS, Inferno, Preact, Vue.js, ...

Router (URL <-> Component)

Problem

Need to navigate between pages without refresh the whole pages.(SPA)

Solution

react-router@v4

Reason

React Router is a declarative routing for React and it is also a collection of navigational components that compose naturally with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.

Alternatives

director

State Management

Problem

Needs to structure and manage more complex Web App state than ever before. Mutable state is particularly troublesome.

• Where do I keep all the data regarding my application along its lifetime?
• How do I handle modification of such data?
• How do I propagate modifications to all parts of my application?

Solution

Redux

Reason

Redux will solve the problems mentiond and ties these all together for you, to sum up, Redux will provide you:

• a place to put your application state
• a mechanism to dispatch actions to modifiers of your application state, AKA reducers
• a mechanism to subscribe to state updates

Alternatives

Mobx

Notes

You don't always need Redux and it's all depending on your requirements.

Side effects(Async Actions) handle

Problem

Need to handle side effects or asynchronous actions in a redux application.

Solution

Redux Promise Middelware

Reason

Redux Promise Middleware is a lightweight library for resolving and rejecting promises with conditional optimistic updates.

Redux promise middleware enables robust handling of async code in Redux. The middleware enables optimistic updates and dispatches pending, fulfilled and rejected actions. It can be combined with redux-thunk to chain async actions.

Alternatives

redux-thunk, redux-saga, redux-observable, redux-loop, redux-pack, etc.

Web API Utils

Problem

Need to send AJAX request in node & browser env.

Solution

isomorphic-fetch

Reason

isomorphic-fetch is a Fetch lib for node and Browserify. Built on top of GitHub's WHATWG Fetch polyfill.

Alternatives

axios, reqwest, etc.

Service plugins

Loading

Error

Confirmation

...