Source: github.com/meidengtech…

Why MobX

Reference: Introduce Mobx or Mobx introduction (Chinese version)

  • The core concept is simple
  • Powerful MVVM pattern
  • Reusable MVVM methods/classes (a core difference between MobX and many common MVVM frameworks)
  • Very fast: leaf end component level redraw

Reusable MVVM methods/classes

It is important to reuse some common MVVM patterns.

There are a number of reusable MVVM patterns in Mobx-Utils.

You can also implement more common patterns yourself and reuse them, for example:

  • Implement a general pattern of paging requests for data. See example
  • Implement a generic pattern that enables specific targets to be moved by mouse/touch events (based on onMouseDown/onTouchDown events). For example
  • Implement a common pattern for undo/redo functionality.
  • Implementation of a general pattern, can be based on JSON-OT to complete the collaborative editing of any JSON object.

PureMVVM (by @tdzl2003)

  • Pure ModelRepresents the model layer isPlain Observable Object
    • In MOBxobservable(jsonObject)
  • Pure ViewRepresents the view layer:
    • There is no state
    • There is no Action.
  • Pure ViewModelRepresents the viewmodel layer:
    • One-to-one correspondence with the view layer

But why do you do that?

Because:

  • Pure ModelMake it easy to serialize/deserialize data in the model layer, and make it easier to:
    • Storing historical state
    • Use IDL to share model designs with backend/microservices without having to write model definitions directly in JavaScript/TypeScript.
    • Easy to co-edit with JSON-OT
  • Pure ViewAllows the view layer to be defined using templates, which makes the code:
    • Simpler, cleaner
    • Fewer bugs
  • Pure ViewModelMake your logic code:
    • Easier to organize

But will this cause the Viewmodel layer to become huge?

Possibly, because by definition, the Viewmodel layer contains “all the logical code”, but you can:

  • Use the global Store definition for shared state.
  • Use reusable MVVM patterns to drastically reduce code.
  • Break up the large “page” into multiple “widgets,” each with its own view layer and viewmodel layer.
  • use#region/ child object to break up the code, but exposes only one root viewmodel class for a view.

YuriJS

In memory of Yuri Gagarin: First man in space

YuriJS = Vue template + Mobx + React

YuriJS provides a compiler that compiles Vue templates into React components, using mobx-based view-model layers for data binding.

index.template

<div class="root">
  Hello, @yurijs!
  <div>
    <button @click="++counter">+</button>
    {{counter}}
    <button @click="--counter">-</button>
  </div>
</div>
Copy the code

index.vm.ts

import { makeObservable, observable } from 'mobx';

export default class CounterViewModel {
  constructor() {
    makeObservable(this);
  }

  @observable
  counter = 0;
}
Copy the code

index.css

.root {
  display: flex;
  flex-direction: column;
}
Copy the code

Why YuriJS?

  • Vue compatible templates
  • React compatible, React component and eco-friendly
    • Compatible with AntD or any other React component library
  • Listen to attributes, element level updates
    • So you could write a verybigTemplate, but also to ensure a good update efficiency.
  • Less code: No more writinguseCallback/useMemo.
  • Support for template hot loading at development time while keeping state unchanged.
  • Small, only a thin layer, simple, replaceable
    • This is the React implementation Vue template, which can be replaced with the original React implementation at any time.

We’ll even offer a Vue template to the React Native compiler in the future to run YuriJS applications on different platforms. (Similar to what TaroJS does, but much thinner because it’s based on MobX and templates)

Use under Webpack:

Install dependencies:

npm install --save-dev \
    @yuri/template-loader \
    @yuri/hmr-template-loader
npm install --save \
    @yuri/runtime \
    @yuri/html \
    classnames mobx mobx-react-lite
# or with yarn:
yarn add --dev \
    @yuri/template-loader \
    @yuri/hmr-template-loader
yarn add \
    @yuri/runtime \
    @yuri/html \
    classnames mobx mobx-react-lite
If you use your own component library, you don't have to install @yuri/ HTML.
Copy the code

In Webpack module/rules increase under the following rules: (, DEV indicates whether or not the development mode, you may need to consider how to judge. Using argv.mode === ‘development’ is one way.)

  module.exports = {
    module: {
      rules: [
        // Add following lines:
        {
          test: /\.template$/, use: (__DEV__ ? [{loader: '@yurijs/hmr-template-loader',
                },
              ]
            : []
          ).concat([
            {
              loader: '@yurijs/template-loader'.options: {
                cssModules: true},},]),},... ] }}Copy the code

Options:

  • CssModules (Boolean, default=false): Enable CSS Modules.
  • StyleExtension (string, default=.css): The extension of the default matching style file (.less/.scss).
  • DefaultNS (string, default=@yurijs/ HTML): Configures the component library loaded by default (default is all HTML/SVG tags).

Additional imported components

Additional components can be introduced in template files using declaration tags:

<! -- As a namespace reference -->
<import module="antd" />
<antd:Button>Click Me</antd:Button>

<! -- As a namespace reference, rename -->
<import module="antd" as="extra" />
<extra:Button>Click Me</extra:Button>

<! -- Reference component directly -->
<import module="antd" name="Button,Input" />
<button>Click Me</button>

<import module=".. /components" name="Button" />
<button>Click Me</button>
Copy the code

Use with TypeScript

You can declare a separate ‘.d.ts’ file to support YuriJS exported components in TypeScript

import { ComponentType } from 'react';

export interface HomeProps {}

declare const Home: ComponentType<HomeProps>;

export default Home;
Copy the code

VSCode syntax highlighting

  • Install the official Vue extension: Vetur
  • Open a.template file
  • CtrlOrCmd+Shift+P -> Change language mode -> ‘. Template ‘configuration file association -> VUe-html

How to run the example

# install dependencies
yarn

Build runtime and HTML projects
yarn build

Build the example with Webpack
cd examples/simple
yarn start

Copy the code

Current restrictions

  • The component compatibility
    • The V-model does not currently support different onxxxchanges (input/checkbox)
    • Logical computations based on Children (e.g. Tab/Select for some component libraries, etc.)
    • Renderer properties (e.g. Table/VirtualizedList for some component libraries, etc.)
    • The default export import is not supported
    • Export naming is not currently supported
  • Vue-html feature support
    • Event modifier
    • React filters out false/null/undefined values.
    • Different import syntax
  • Developer experience:
    • Component lifecycle errors can cause hot load failures
    • Lack of formatting tools
    • Lack of auto-complete support