I’ve been working on a React version of ViewModel for a while and I’m very close to being done. Most of what’s left is documentation so I figure I’d share it as it is right now. Documentation isn’t very exciting so seeing people use it is an incentive to finish it.
What is this?
ViewModel for React is a thin layer on top of React to work with as little boilerplate and ceremonies as possible.
Who is this for?
If you like the “view model” paradigm (Angular, Knockout, Aurelia, etc.) then you’ll love ViewModel. If you like to do things “the react way” (are you plugged to the Twitter feeds?) then you’ll probably hate ViewModel.
Why React?
React does less than other frameworks so it’s easier to take JSX and build a DSL on top of it (removing all the boilerplate).
Will this pattern (view models) work for larger applications?
I’ll take the lazy route and just say this is the same way of developing applications as with Angular, Knockout, Aurelia, and a plethora of other frameworks. If it’s good enough for Microsoft and Google, I’m pretty sure it’s good enough for you.
Can I use it outside Meteor?
Absolutely, you can use it in any React project, Meteor or not.
Show me the code!
Okay, here’s a hello world component with ViewModel:
Hello({
render(){
<h1>Hello World</h1>
}
});
Aren’t you missing a few things in there?
Nope, that’s all it takes to create a component.
Here’s the classic echo component from Angular:
Echo({
message: '',
render() {
<div>
<input b="value: message" />
<label b="text: message"></label>
</div>
}
});
Save for a few exceptions it behaves pretty much the same as ViewModel for Blaze (but with JSX).
Setting it up.
Short version (if you have a React project):
Add viewmodel-react to your package dependencies
Add viewmodel-react-plugin to devDependencies
Add a .babelrc file with { "plugins": [ "viewmodel-react-plugin" ] }.
Longer version (starting from scratch)
As with any Meteor application you can use React exclusively or mix Blaze and React. You can even use ViewModel for Blaze and ViewModel for React in the same application. To keep things simple I’ll just use React.
meteor create demo
cd demo
npm install --save react react-dom viewmodel-react
npm install --save-dev viewmodel-react-plugin
meteor remove blaze-html-templates
meteor add static-html
Add a .babelrc file with
{ "plugins": [ "viewmodel-react-plugin" ] }
Change client/main.js to:
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker'
import React from 'react';
import { render } from 'react-dom';
import { App } from '../imports/App';
import ViewModel from 'viewmodel-react';
// Use Meteor's dependency management
ViewModel.Tracker = Tracker;
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
});
Change client/main.html to:
<body>
<div id="app"></div>
</body>
Create the folder imports and then the file imports/App.js:
App({
render(){
<h1>Hello World</h1>
}
});
You now have a hello world application with ViewModel. Let’s add a sub component:
Create the file imports/Person/Person.js:
Person({
render() {
<h2>Hi Person</h2>
}
});
And modify imports/App.js to use Person:
App({
render(){
<div>
<h1>Hello World</h1>
<Person />
</div>
}
});
Check out the (still in progress) documentation at: https://viewmodel.org/react
. Just one question: Is it possible to use the class syntax instead of the object syntax, f.e something like