Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It’s an all-in-one solution for creating modern React apps.
Now it’s been released version 2.0 with many new and nice features:
- A new tool named Rekit Portal for managing app elements like components, actions, routes, which replaces the old Sublime Text plugin.
- Ability to rename elements, like renaming a Redux async action.
- New plugin mechanism to extend Rekit’s capability.
- Support React v15, React router v4, Webpack 3 and React hot loader 3.
Quick look
Here is a video demonstrates how to use Rekit to create the example of Redux async action: fetch Reddit list of topic ‘reactjs’: https://youtu.be/edq5lWsxZMg
To have a quick feeling about Rekit portal, you can view the live demo at: https://rekit-portal.herokuapp.com.
For Redux sync actions, below video shows how quick to create a counter component using Rekit, just in ONE minute!
To learn more and get started, just read the guide at: http://rekit.js.org/docs/get-started.html
Architecture
Rekit create applications with feature oriented architecture, you can read more from this article: https://medium.com/@nate_wang/feature-oriented-architecture-for-web-applications-2b48e358afb0
And here is the overall architecture of a Rekit app.
Motivation
While building a React + Redux + React-router application, there are many trivial but important tasks to do besides the application logic itself. These tasks are necessary to construct good architecture but are not actually related with your application functionality at all. So Rekit is created to do all trival tasks for you so that you can just focus on the business logic.
For example: to create a list page to show recent topics of a forum application, typically you need to finish below tasks before you start writing the real topic list logic:
- Create a React component class named `TopicList`.
- Define a routing path for the `TopicList` component in React-router config.
- Create a style file named `TopicList.less` and import it in the component or somewhere.
- Use `react-redux` to connect the component to the Redux store.
- Create four action types as constants: `FETCH_BEGIN`, `FETCH_PENDING`, `FETCH_SUCCESS`, `FETCH_FAILURE`, typically in `constants.js`.
- Create two actions: `fetchTopicList` and `dismissFetchTopicListError`.
- Import constants in the action file.
- Create a reducer handling the four types of actions and define the initial state.
- Import constants in the reducer file.
- Create the component unit test file with boilerplate code.
- Create the action unit test file with boilerplate code.
- Create the reducer unit test file with boilerplate code.
It’s really awful! You need to write tons of code to setup the code structure just before writing the first line of the application logic. And it’s even more awful if you want to rename or delete the topic list page! Dozens of places need to be found and correctly updated.
How Rekit helps?
To resolve the problem described above with Rekit, you just need only 2 commands:
rekit add component forum/TopicList
rekit add action forum/fetch-topic-list -a
Then all things will be ready for the application logic! Here `forum` is the feature name, TopicList is a component under the feature. `-a` flag indicates it’s an async action.
To rename it from `TopicList` to `Topics`, run below commands:
rekit mv component forum/TopicList forum/Topics
rekit mv action forum/fetch-topic-list forum/fetch-topics
To remove it, run below commands:
rekit rm component forum/TopicList
rekit rm action forum/fetch-topic-list
Actually there is nothing magic behind, Rekit just does what you manually need to do. Every Rekit command will clearly show you what it does behind. For example, below snapshot shows how Rekit renames an async action:
You would never want to do it manually right? :-P
Rekit portal
Rekit command line tools have been very useful, but Rekit portal provides a more intuitive and zero learning-cost way: it’s almost an IDE for Rekit development! It not only provides web UIs for browsing/creating/renaming/moving/deleting elements of a Rekit app, but also provides tools for analyzing/building/testing a Rekit application. See below pictures of how Rekit portal looks like.
And you can view the live demo at: https://rekit-portal.herokuapp.com.
You can find more introduction about Rekit portal at: http://rekit.js.org/docs/portal.html.
Plugins
Plugin mechanism is a new feature of Rekit 2.0. You can use or create plugins to enhance or customize the behavior of Rekit. That is you can either alter the default behavior like how Rekit creates an async action or let Rekit support more element types like `selector` based on reselect.
For example, there have been two plugins available:
1. rekit-plugin-redux-saga: allows Rekit to uses `redux-saga` rather than `redux-thunk` when creating async actions.
2. rekit-plugin-selector: adds a new element type named `selector` based on reselect to Rekit. So that you can manage selectors by Rekit for your project.
There are two types of plugins:
1. Public plugins: plugins published on npm so that all people could use it.
2. Local plugins: plugins only meet the requirements for your own project. They are placed under `<your-prjroot>/tools/plugins` folder.
To create a plugin, use below command:
rekit create-plugin my-plugin
It will create a local plugin if the current directory is in a Rekit project, otherwise create a public plugin.
For more information, please read the document at: http://rekit.js.org/docs/plugin.html.
Summary
Rekit integrates modern practices of React, Redux and React router development. And provides powerful tools to adopt those practices. It allows you to focus on business logic rather than technique details. Just try it and I believe you’ll love it!
