React Tiny Mvvm

Introduce

React Tiny Mvvm is a light mvvm framework for React/React-Native.

React Tine Mvvm has future s as follow:

• Message is used to connect different components. You can simply use send/register pattern to complete the communication between two components.
• Peal the bussiness logic off the View (in tranditional react) and provide View/ViewModel for developing in Mvvm pattern.
• Observable Object and Array.
• Unify the usage for Sync / Async operation.
• So on...

Usage

• For npm: npm install react-tiny-mvvm --save
• For yarn: yarn add react-tiny

Create a ViewModel with Observable Properties

// MyViewModel.viewmodel.tsimport{ViewModelBase,NotifyProperty}from'react-tiny-mvvm';exportclassMyViewModelextendsViewModel{constructor(){super()}// Observable Propertyprivate_propName: any= ...
@NotifyProperty()getpropName(): any {returnthis._propName;}setpropName(value: any){this._propName=value;}// Event handleronClick(){this.propName= ...;}}

Connect ViewModel to View:

// MyView.view.tsimport*asReactfrom'react';import{ViewBase,ConnectVVM}from'react-tiny-mvvm';import{MyViewModel}from'./MyViewModel.viewmodel';// Connect the viewmodel to its view.
@ConnectVVM(MyViewModel)exportclassMyViewextendsViewBase<MyViewModel>{constructor(props: {},contex: {}){super(props,contex);}render(){constvm=this.viewmodel;return(<divonClick={()=>vm.onClick()}>{vm.propName}</div>);}}

Register / Send a message

// Place where you want to send message to all listening to it.Messenger.Default.send(DefaultToken.create('todoSometing'),'a message');// Place where you want to accept message.Messenger.Default.register(DefaultToken.create('todoSomething'),(msg: string)=>{console.log(msg);// parameter of msg will be 'a message'});

Create a Observable Array Property

import{ObservableArray}from'react-tiny-mvvm';private_array: ObservableArray<any>=newObservableArray();
@NotifyProperty({isObservableArrayProperty: true})getarray(): ObservableArray<any>{returnthis._array;}setarray(value: ObservableArray<any>){this._array=value;}// To modify array then notify the change.this.array.modifyArray(array=>array.push(1));

Run Demo

cd demo
cd todo-list
yarn install
yarn start

Route Map

• Observable object
• Async operation optimizing
• ...

Distribute

Under construction

Contact

Take issue directly please if you have any question or suggestion.