Getting started with Material UI

react
1

I’m starting my first large Meteor project with React. I suck at design and have limited front-end experience so I need a simple UI framework.
Material UI seems like an obvious choice because:
Pros:
designed for React
requires less CSS
actively developed on GitHub
working Leaderboard Meteor demo
lots of components
Cons:
no grid system
if I hire a designer down the road they may have a tough time

I’d really appreciate any feedback especially regarding:

  1. Any Meteor specific pitfalls?
  2. Does it work with Flow Router?
  3. Recommendations for handling responsive layout without a grid system?
  4. Other examples besides Leaderboard?
  5. Should I use an Atmosphere package like izzilab:material-ui or should I build the NPM package with meteorhacks:npm and cosmos:browserify?
4 Likes
2
  1. Forms. There’s a package that lets you render autoform to material-ui which I’ll be trying out soon. https://atmospherejs.com/poetic/react-autoform-material-ui
  2. I’m using it with FlowRouter no problem. Just make sure you set the context correctly: https://github.com/kadirahq/meteor-react-layout#using-react-context
  3. I’m using Flexbox Grid.
  4. Would love to see more examples.
  5. I’m building the package with npm/browserify. It works fine so I haven’t tried izzilab:material-ui.

With your designer you can always swap out the material components that they want to replace with whatever they design. They’re good defaults so I wouldn’t worry too much about that. Also, letting designers work with pre-defined components can let them focus on other things like UX and aesthetics.

3 Likes
3

I found this form validation wrapper for formsy-react by @mbrookes that I’m excited to try out!

It’s not connected to SimpleSchema but I’m okay with that.

4

I got this error

npm ERR! peerinvalid The package react@0.13.3 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer formsy-react@0.17.0 wants react@^0.14.0
npm ERR! peerinvalid Peer redbox-react@1.1.1 wants react@>=0.13.2 || ^0.14.0-rc1
5

My take on this:
Use these packages if your going to use Material design…
materialize:materialze

Meteor specific pitfalls for materialize:materialize? Don’t use 0.97.1 for now… there are bugs on that release that breaks the whole Meteor system…

it works well with kadirahq:flow-router, kadirahq:blaze-layout, useraccounts:core, useraccounts:materialize, aldeed:collection2, aldeed:autoform, and aldeed:autoform-materialize

Recommendations on handling responsive layout without the grid system? You’ll really need the grid system if your going to use such frameworks, unless you will use Polymer 1.0

If you want a lighter one, just bower install MDL (httpL//getmdl.io) into your public folder and then load the min.js to your app… or just put the min.js to you and min.css to your client folder.

If you want a better one (imho), bower install webcomponents from Polymer 1.0, which uses Material design when you use paper-webcomponents… You might need differential:vulcanize to load them. And there are hacks that you need to work on. You can see my polymer comeback demo git repo here for more: https://github.com/tjmonsi/meteor-polymer-comeback

I’ll keep updating it (and I’m planning to create a tutorial on how to create a polymer meteor project)

2 Likes
6

If you really want Material UI, you’ll need kadirahq:react-layout to be able to use for flow-router :smile: (Sorry it just crossed my mind that there is a Material UI package built using React, thought it was something else)

Currently my take as well on this is that Material UI package is much slower than Angular-Material, MaterializeCSS and even getMDL… anyone experiencing the same?

7

Hi @none, you need to specify "formsy-react": "0.1.4" in your packages.json. That version supports react 0.13.x.

1 Like
8

Thank you! I have to try…

9

I should also have mentioned - the demo app is a (minimal) Meteor application.

10

Just my 2 cents - I’d avoid Materialize if I were you. I started with it and then recently spent two weeks ripping it out of our production app because it caused so many weird css issues. I’ve started using Semantic UI for most things and it seems to work great. I also think it looks a lot cleaner than the Material look (which I’m not a fan of).

1 Like
11

Does anyone else think that it is very slow compared to the alternatives?

I like the idea of Material UI (not Materialize or MDL) because it is primarily a collection of React components as opposed to a full on framework.

I got Material UI working in Meteor using npm and browserify. It was a little difficult because there are major changes in the latest version that break the Leaderboard example.

I found an excellent example on Github by rkstar that addresses the numerous pitfalls. The only issue I had is that I had to build it first with Material UI version 0.12.3 and then once it was running I updated the packages.json file to version 0.12.4. Not sure why this was necessary.

There is also a Meteor package izzilab:material-ui that worked, but I think it is a few minor versions behind.

12

Demo app - very cool. But select not working on my desctop )-: On tablet everything was OK.
But I have a lot of questions, some about material ui, some about formsy:

  1. isWord validation not working with cyrillic, I have to add new rule, I think
  2. localization: is it possible to change locale for DatePicker?
  3. I know, Material mostly for mobile, but where is multiselect select?!
  4. And how to make Text fields(FormsyText) more compact?
13

Not sure, but I think that may be a Material-Ui bug. I need to dig in to it, but I’m not doing anything unusual with that form element.

Also text field validation should only be happening onBlur, not for every character typed. Haven’t had a chance to dig into that either.

14

I also moved to react… With using Meteor Webpack it is easily to import npm modules. For my front end stuff I use ANTD. Main page is in chinese, but with chrome right click, you can translate to your language.

1 Like
15

nice widgets… I have to try this… again
My Chinese is bad, but where is something about localisation?

16

I fixed the onBlur issue - new version published. I haven’t looked at the selectfield isse yet. Regarding your other questions:

  1. Yes, you can create custom rules per the formsy-react docs.
  2. Yes for the result - there is a callback to customise the date format, but not for the widget itself. There is an open issue regarding localisation.
  3. Ask on the material-ui repo.
  4. Pass style props per the Material-UI docs.
17

I found an example that is 10 days old with flow router, react and Material UI:


It has a demo site too:
http://top-shop.meteor.com/

18

That was because 0.12.4 introduced React 0.14, which was a breaking change. That’s now fixed again with 0.12.5 which uses React 0.13.x. Material-UI 0.13 reintroduces React 0.14, so avoid that version of Material-UI until Meteor supports React 0.14.

19

Thanks, that’s very helpful. Do you think it’s better to build with npm manually or use one of the existing Material UI packages on Atmosphere?

I really like how terse the code is with Material UI compared with other UI frameworks that have such long class definitions. I’ve been testing all day and I haven’t noticed any speed issues.

20

The only speed issue I’ve noticed with Material-UI is usage of the DatePicker component - hovering over dates is very laggy, as is submitting a date (to close the dialog).

Besides that, im very impressed with the overall quality of this framework, its made learning react a lot of fun.