Nautil: A responsive, efficient, and flexible JavaScript framework based on React for building cross-platform applications.

I worked with React for about 3 years, and found it difficult to determine which proposal to choose when I began a new project. After struggling with redux, react-router, redux-thunk, redux-saga, and even rematch, I found it is really a mess of libraries to pick from.

It is because Facebook left React as just a UI library, not a framework. We should have to find the way to make an application which is not only UI components but also data management, navigation, and even internationalization. There is a repository to collect the roadmap of learning React, after reading, you will feel down. I wrote a Javascript framework called Nautil which is based on React. In this article, I will introduce Nautil for you.

github.com/tangshuang/nautil

Nautil is based on React, so you do not need to learn the syntax. For many developers, it is familiar. You do not need to change your React components, you do just need to learn the api exported by Nautil and change the application level code structure.

Why we need to create a new framework?

Facebook left data and router organization as an exercise for the reader.

This may not be the fault of Facebook, their original intention is to build a UI driver library like what Jquery do. However, developers love React, they use it as the base of their application. So at the end, React team have to publish their grungy proposals such as flux. I do not refuse flux and redux, but I really think they are complicated.

And what is terrible? Developers treat redux as a standard. Many followers think an application should must use redux to organize data. So, at last, redux grow up with an ecology for itself, i.e. redux-thunk, redux-saga, reselect…

Nautil give a new way to organize state, data and navigation. We do not follow redux and we think every thing should be easy enough to use and understand. Now let me show a case:

import { Component, Store, Observer } from 'nautil'

const store = new Store({
  name: 'tomy',
  age: 10,
})

class App extends Component {
  render() {
    return (
      <Observer subscribe={dispatch => store.watch('*', dispatch)} dispatch={this.update}>
        <div>{store.state.name} is {store.state.age} years old.</div>
      </Observer>
    )
  }
}


function grow() {
  store.state.age ++
}

function setState(key, value) {
  store.set(key, value)
}

function update(data) {
  return store.update(data)
}

Previous code show a case of simple store usage. In Nautil, you do not need to create a lot mess of redux reducers and actions, just use Store to create a store instance and pass it into an Observer component which can trigger some function when store data change. A store is an observable data container, so that whenever the data in store changes, you can know and response for the changes.

As you seen, the state management is so simple, without any no-use reducers logic. 

If you could accept the previous store idea, I hope, you will like what Nautil gives inside:

• UI rendering based on react
• router/navigation
• state management with observable store library
• data management and requesting with observable data library
• data type checker
• cross-platform development proposal with react-dom and react-native
• internationalization with i18next, and date/number/currency locale formatters

If you have struggled with asynchronous actions in React, you may fall love with Nautil, because in Nautil, there is no asynchronous actions, all methods are synchronous. This is benefit from Observer pattern. If you notice, you will find store, data depository and navigation of Nautil are all observable. Working with Observer/ObservableProvider component, some times with Prepare component, we do not need to worry about asynchronous actions.

Finally, I want to talk about the corss-platform feature. We embed inside components such as Section, Image, Button and so on. These components can work fine in PC, mobile, even in native development. Dependent on react-native, we can easily build a native app with the same code. Yeah, you do not need to write code again. Just put the code into create-react-native-app, and import nautil/native instead of nautil/dom . 

Nautil is React, Nautil is more than React.

Nautil is React, it did not change anything about React even though it provide some convenient properties. You can use your old react components in Nautil, and you can use Nautil component in your other React application. There is few code to be change. Nautil just provide state management, data management, navigation management and internationalization once in one package, and provide the ability to build cross-platform applications. That's all of Nautil.

I know, I was not doing something subversive. However, I am not fair to do something subversive. Nautil is not completed till this moment. With the power of open-source. I hope, if you are interested in this project, you to join me.