search

Robert-W / esri-flux-react

Simple Boilerplate for using React and Esri's JavaScript API together. It supports IE 9+ and the last two versions of all major browsers and can run in https or http. For data management, it's using Alt.js (a flux library).
https://robert-w.github.io/esri-flux-react/
MIT License
22 stars 5 forks source link

Using Material-UI? #5

Closed Nedlinin closed 8 years ago

Nedlinin commented 8 years ago

Any chance you can create an example of how to properly include a library like Material-UI into this build process?

Robert-W commented 8 years ago

Sure. Do you have a preferred Material UI Library you were looking at. I have used http://www.material-ui.com/ in webpack before but not yet with a dojo based app, it is nice but also pretty heavy. I have also used http://materializecss.com/ which is lighter but not built into react components, and since it modifies the DOM it can cause some intermittent issues with React, nothing that cannot be worked around of course.

Another option I have been playing with is building my own components that can imitate the behavior that I need. This way I have React Components without the need for a library. This is the most difficult and tedious since you have to know the Material UI guidelines yourself, but it can be done and is the lightest so you only have components that you need. Check out this Gist and Codepen example, it's a Material UI Click Wrapper that gives a element that Ripple Effect when you click it and it can wrap just about anything.

Gist: https://gist.github.com/Robert-W/522df4f43056c0c03b04d6ca35bf9b6e Codepen: http://codepen.io/Robert-W/pen/WQyaZN

Nedlinin commented 8 years ago

In my case I was shooting for usage cases with http://www.material-ui.com/#/ specifically.

In the end I think showing further integration with any nice UI based lib is a good thing.

I spent a few hours yesterday trying to get Webpack to play nicely with Dojo and couldn't get it to handle what I wanted. Ended up switching over to Rollup and have since gotten a bundle created of all of my apps source which is then loaded by Dojo. This allows Dojo to handle all of the loaded and Rollup simply detects the Esri dependencies as external and allows the Dojo loader to resolve them correctly.

Stripped out a good bit to accomplish it though (no live reload for instance). Still looking into a nice way to accomplish it but haven't quite gotten there yet.

Robert-W commented 8 years ago

Ok cool. I'll try to check it out this weekend if I have some time and get another branch with the Material UI framework. I have finals and group projects next week for school so I may not be able to get to it until mid next week after my exam.

Yea Webpack and Dojo don't seem to like each other, which is a shame because Webpack is a pretty cool tool, even though some people in the Dojo community aren't big fans of it. I looked into that about a year or two ago and had a similar result to what your saying, just wasn't having much luck getting those two to play nicely together.

Rollup was actually one of the next tools I want to integrate into this boilerplate since I have been hearing some good things about it. If you get something up I would love to check it out since that's the direction this repo is going to go soon.

There may also be a jspm branch coming shortly after my semester finishes. I had an initial test that got it working with Dojo and had a simple map up, but I want to make sure I can integrate the rest of the tooling before I post it.

Nedlinin commented 8 years ago

Rollup was fairly straight forward.

https://gist.github.com/Nedlinin/75ace532e6008704d8ce11f2a9a9f7d4

Basically added a gulp task to roll everything into a bundle and edited the index.html file to ask Dojo to load the new file under our package name while using the default packages for everything Esri.

EDIT: Good luck on your project :) Want a job when you graduate? :+1:

Robert-W commented 8 years ago

Nice, that looks like a great start with Rollup. I'll update the ticket here once I get some new stuff added in. Thanks, and possibly, it depends on the job.

Robert-W commented 8 years ago

Looking into this tonight and not having much luck. There is no bower version available so I have to install with npm install material-ui. Loading the cjs modules in dojo won't work so I tried converting them to amd using r.js -convert node_modules/material ui src/vendor. This converted them and got them to load but then threw an undefinedModule error. This error typically stems from race conditions which I was able to get past by loading that modules dependencies first (but you can see how that will quickly spiral out of control). Even if that worked, it then throws errors for missing it's other node dependencies like warning, simple-assign, lodash.merge, and more.

I also tried pulling the raw es6 src down and compiling it with babel. This seems like it may be able to work if you track down all the dependencies, alias them in your dojo config, convert any of the cjs modules to AMD, and then repeat with their dependencies. This also slows babel to a crawl as it has to compile the entire Material-UI project.

Neither approach seems great.

Some other options I have yet to test is to see how rollup or browserify work with bundling this code up, but I imagine that bundle would end up pretty huge. Most examples I have seen with this have been using Webpack or Browserify. I have seen a couple compile to AMD and use requirejs to load the bundle, but nothing with Dojo. My only successful use with this was with Webpack and Leaflet. If we could develop this with something like Webpack and have a bundle generated in AMD, we may be able to load it with Dojo in a similar manner to how they have loaded it with requirejs, but Im not so confident this is possible at the moment.

Robert-W commented 8 years ago

Hey @Nedlinin, I know it's been a while, but I got a version working. It is using a slightly different toolset than this, but does all the same things generally. It uses Webpack, React, Redux, ArcGIS JavaScript 4.0 API, Flow, Sass, and the Material UI Library. I am in the process of upgrading other branches of that repo to use webpack but once I do, there will be versions with material-ui, version with Flow, and a version without Flow. The current master repo uses Rollup but I like Webpack much more, and will soon have the transform runtime in it so it should be just as efficient as rollup. You can check it out here https://github.com/Robert-W/esri-redux/tree/material-ui