Modern Infrastructure Of Complex SPA

Miox is an SPA management framework.

In classic web development, browser creates and manages a series of lifecycle activities of web page, such as session history, page creation, discard, pageshow, pagehide, on which developers can process their own logic.

In an SPA application, developers have to deal with all these events by themselves, or by a framework that deals with them. Miox is yet another framework deals with them.

What makes Miox special, is that it supports any render core, which means with Miox, developer can simultaneously introduce Miox into their projects and stay with his favorite react or vue.
Miox focuses on being an SPA runtime, with such limited small goal, it developed the ability to easily integrate with most essential technologies, including redux/vuex, SSR and so on.

As of today, almost every web front-end project in 51 credit card is using Miox as there SPA framework, on both PC and mobile sides, which means Miox is already widely used and tested in production.

Demo

On mobile, you can visit here. This is one of the U51 products.
Miox demo for basic using.

Documentation

You can find the Miox documentation on the website. It is divided into several sections:

You can improve it by sending pull requests to this repository.

We provide an article to illustrate Miox.

Examples

You can start your project with the following code:

index.js: The entrance of your project.

import Miox from 'miox';
import Engine from 'miox-react';
import router from './route';

const app = new Miox({...options});
app.install(Engine);
app.use(router.routes());
export default app.listen();

route.js: Routing file.

import Router from 'miox-router';
import Page from './page.jsx';

const route = new Router();
export default route;
route.patch('/', async ctx => {
  await ctx.render(Page);
});

page.jsx: Rendering webview file.

import React from 'react';
import ReactDOM from 'react-dom';
export default class ExamplePage extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

This example will render "Hello World!" into a container on the page.

Installation

Miox is available as the miox package on npm.

We provide a scaffold to facilitate the installation of the project. Once the project is installed, you can start writing business logic.

Install miox-cli to create project:

npm install -g miox-cli

Then run the code of miox create to create a new project:

miox create

More commands, please read here.

Contributing

The main purpose of this repository is to continue to evolve Miox, making it faster and easier to use. Development of Miox happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements.

Change logs

You can read the change logs here.

License

Miox is MIT licensed.

51nb/miox