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