tempest.js
基于 React + Redux 的全新框架，也是我们的最佳实践。
View
Problem
使用基于组件的 JavaScript 库构建丰富的用户界面。
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
需要在页面之间导航而不刷新整个页面。（SPA）
Solution
react-router@v4
Reason
React Router 是 React 的声明式路由，它也是组成导航组件的集合自然与您的应用程序。 无论您是想为 Web 应用程序添加可添加书签的 URL，还是想在 React Native 中以可组合的方式进行导航，React Router 都可以在 React 渲染的任何地方运行。
Alternatives
director
State Management
Problem
需要构建和管理比以往更复杂的 Web App 状态。 可变状态特别麻烦。
- 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 会解决上面提到的问题，并将这些问题联系在一起，总而言之，Redux 会为你提供：
- 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
你不需要并不总是需要 Redux，这完全取决于您的要求。
Side effects(Async Actions) handle
Problem
需要在 redux 应用程序中处理副作用或异步操作。
Solution
Redux Promise Middelware
Reason
Redux Promise Middleware 是一个轻量级库，用于通过条件乐观更新解决和拒绝承诺。
Redux promise 中间件支持在 Redux 中可靠地处理异步代码。 中间件支持乐观更新和分派待处理、已完成和已拒绝的操作。 它可以与 redux-thunk 结合使用以链接异步操作。
Alternatives
redux-thunk, redux-saga, redux-observable, redux-loop, redux-pack等
Web API Utils
Problem
需要在node&中发送AJAX请求 浏览器环境
Solution
isomorphic-fetch
Reason
isomorphic-fetch 是用于节点和 Browserify 的 Fetch 库。 建立在 GitHub 的 WHATWG Fetch polyfill 之上。
Alternatives
axios、reqwest 等。
Service plugins
Loading
Error
Confirmation
…
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
…
