ViewModel for React Alpha

manuel · August 5, 2016, 2:54pm

I’m looking into it.

manuel · August 5, 2016, 3:12pm

I think it’s a problem with either material-ui or the way you’re using it. I get the same errors and behaviors if I use “regular” React code:


import  AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import React from 'react';

export class Header extends React.Component {
  render() {
	  return <AppBar
	    title="Title"
	    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
	    iconElementRight={
	      <IconMenu
	        iconButtonElement={
	          <IconButton><MoreVertIcon /></IconButton>
	        }
	        targetOrigin={{horizontal: 'right', vertical: 'top'}}
	        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
	      >
	        <MenuItem primaryText="Refresh" />
	        <MenuItem primaryText="Help" />
	        <MenuItem primaryText="Sign out" />
	      </IconMenu>
	    }
	  />
  }  
};

polonski · August 7, 2016, 1:44am

Thanks @manuel, I had to add the touch tap to get around this ‘onTouchTap’ warning.

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

but i’m still getting that Unknown prop 'parent' on <div> tag warning. It doesn’t seem to be breaking anything though. Is this parent property something ViewModel is injecting ?

manuel · August 7, 2016, 3:22am

material-ui hasn’t updated to React 15.1.0+
See https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

You don’t get the warning if you use React 15.0.0

So you can either live with the warning until material-ui updates or you can go back to React 15.0.0

Edit: Needless to say, this isn’t a problem with ViewModel.

polonski · August 8, 2016, 5:48am

Thanks heaps for looking into it!!

So yes React 15 fixes things:

npm install --save react react-dom material-ui classnames react-swipeable-views react-motion

To get the official way of doing things working without any warnings etc. Although I am keeping a ViewModel branch, I really do need to make a pure react version first, then perhaps look at ViewModel as an optimise layer.

avalanche1 · January 4, 2017, 1:05pm

Hey, Manuel!
I’ve two questions:

viewmodel.org for react seems to be using semantic-ui as well; do you use http://react.semantic-ui.com/?
can viewmodel work with next.js?

manuel · January 4, 2017, 4:50pm

No. I use “vanilla” semantic-ui. I’m not a fan of components that wrap basic html elements.
I don’t see why not. So far it has worked with every boilerplate I’ve seen. The last one I tried was Feathers and it worked out of the box, SSR and all. I’ll start a new project in the next few weeks and I’m going to go with dotnet core.

avalanche1 · January 4, 2017, 6:43pm

I haven’t worked with react yet, I must admit, but from what I’ve read, I’ve gathered that react way of doing things strongly opposes direct dom manipulation, i.e.exactly what j query does. And semantic ui is all about jQuery.
Isn’t there a contradiction? Plus you can’t drop jQuery dependency if you use vanilla semantic ui, no?

manuel · January 4, 2017, 8:06pm

TLDR: Either way is fine. You can use vanilla SUI or the React wrapper.

Not any more than any other framework. There’s nothing wrong with doing:

Example({
  rendered() {
    $(this.selectElement).dropdown();
  },
  render() {
    <select b="value: ...">
      <option b="repeat: ..." />
    </select>
  }
});

I’m not as bothered by it. I see it as the price to pay for using some frameworks (Bootstrap depends on it too).

IMHO the React wrapper almost replaces one dependency with another. “Look I don’t have JQuery anymore! I replaced it with SemanticUI-React!”

But if SemanticUI-React “clicks” for you then by all means go for it.

avalanche1 · January 15, 2017, 10:34pm

But it still depends on Tracker, no?
If you’ve used Feathers, means you didn’t use Meteor, right? Then what about Tracker?

manuel · January 15, 2017, 10:50pm

No Meteor required. It ships with its own Tracker.

avalanche1 · January 16, 2017, 10:23am

Whoa!
COOL

gothicmage · January 17, 2017, 4:34am

Is there a plugin for webstorm btw?
Still having to avoid using ViewModel for anything that doesn’t involve user interaction just bcs i couldn’t find it

manuel · January 17, 2017, 4:51am

No plugins for any IDE. VM React piggybacks on the fact that most editors understand JSX. Webstorm is particularly good with the intellisense for VM properties and methods.

nchudnovets · January 18, 2017, 3:43pm

@manuel: Just want to say you thank you for your work
I started a new project with React and ViewModel, and I like it very much
I know it is hard for you to develop the project, support users, explain to people its advantages, promote it, so on…
so, I just want to let you know that you do right cool thing, and there are thankfull coders around the world

janmp · February 17, 2017, 8:41pm

Just been playing around with ViewModel React outside of Meteor (and quite frankly I prefer regular Blaze ViewModel for Meteor) using github.com/ManuelDeLeon/viewmodel-react-starter.

When I came up with a prototype for a fun little app I wanted to test it online on heroku and tried to get it running with some other boilerplate for react setups that are better suited for building for deploy and failed miserably. I npm installed the babel stuff set up the .babelrc file and changed the webpack loader for js, but no luck.

I thought getting used to doing all that superfluous ({})</>,; crap again was painful (I am hooked to Coffee-script, Jade and indented Sass) But webpack is even worse. Who want’s to deal with that mess of configuration files when you could code something fun an creative instead…

But in this case I actually think that Babel is the culprit here (btw, tried ViewModel React on Meteor, wich worked fine untill I did meteor add cultofcoders:grapher, wich caused some Babel related error messages).

So, having vented my frustration a bit: I recently tried Vue, wich is pretty decent (you can even mix coffe, pug and sass in one file) untill you get to the point where you might need VueX (thats the Vue equivalent of everything that ViewModel does not stand for). And I like the coding experience with React ViewModel actually better. But the whole ecology around that tiny cosy place, where you can just code and be happy is a frigging bloated mess.

So, anyway. Any advice? Anyone got a nice setup to actually use ViewModel React outside of localhost:3000?

manuel · February 17, 2017, 10:20pm

For what it’s worth, and I know I’m biased, I do every new web development project with viewmodel-react.

ViewModel for React sits on top of React, which means you can use pretty much any React setup/boilerplate/starter. I’ve tried it with Meteor, Feathers, Express, etc. and it works with all of them. The stack I’m favoring these days is .Net Core + React.

As for the curly braces and semi-colons, VM for Blaze is written in CoffeeScript so believe when I tell you I’m no fan of those. That said, I honestly don’t miss CoffeeScript with ES6.

daveeel · February 20, 2017, 5:45am

Hi @manuel, I read through the viewmodel-react doc yesterday.

Got some questions in my head:
I have an App using regular React Components + Redux, and I’d like to use vm-react to add some more components, how do I fit vm-share state sharing into the picture?

manuel · February 20, 2017, 6:04am

Depends on what you want to do. You could keep the two worlds separate and use redux for the existing components and use VM share for the VM components. Another option is to use redux for everything and just let the state cascade from the top component down the tree.

daveeel · February 20, 2017, 6:55am

Suppose I use vm-react to write 2 components A, B and published them as npm packages. Now I import them in a traditional React + Redux app, will A and B be able to communicate via vm way?