Choosing a UI Framework

[NilsG-S]

The consensus on how to style the app was that Material Design is the best way to go. Since it would be way too much work to build our own Material Design library from scratch, we need to pick one that works for us. Here are several that I've found:

• React Toolbox - http://react-toolbox.com/#/
• Material-UI - http://www.material-ui.com/#/
• Essence - http://getessence.io/
• React-MDL - https://react-mdl.github.io/react-mdl/

Most of the research I've done has been on the first two, which seem to be among the most popular and fully featured. I'm currently leaning towards React Toolbox over Material-UI due to some issues that people have with the latter. The issues are as follows:

• It is slow, particularly on mobile
• Styles are in-line

Here are the resources I used to come to this conclusion:

• https://www.reddit.com/r/reactjs/comments/4fd4ro/materialui_vs_reacttoolbox_and_why/
• consider moving from material-ui to react-toolbox mattkrick/meatier#108
• https://discuss.reactjs.org/t/best-ui-library-for-react/2953/27

Meanwhile, React Toolbox uses Sass, CSS Modules, and Webpack, which the project is already using.

[zachlefevre]

I think react-toolbox would be the easier to rapidly implement not-inline styles.

[NilsG-S]

Thanks for your input! Was there any particular reason you closed the issue? I think there's still discussion to be had.

[zachlefevre]

Ohp apologies. Did not mean to close this issue. I'll get good at github eventually

[NilsG-S]

More evidence that people seem to think Material-UI is clunky:

• https://www.reddit.com/r/reactjs/comments/5ceb45/microsofts_reactcomponents/d9vxua2/

Also, this is the second time I've seen someone mention React-MDL positively. I checked out their list of components and it seems to be decent. However, it isn't as fully featured as either Material-UI or React Toolbox. For instance, it lacks a dedicated app bar component, though it does have things like tabs and menus that could be put together to make an app bar.

[NilsG-S]

A point in favor of Material-UI: it seems as though it is the only library I've mentioned that supports z-depth. The other libraries have the "raised" attribute, which is a Boolean, rather than the integer value that Material Design is supposed to have.

[NilsG-S]

Materialize (http://materializecss.com/) does seem to support z-depth. The main downside I see to using it is that it's still in beta, so it might be unstable. It is also lacking in component variety compared to other frameworks. However, it does have the basics like Navbar, Cards, and Forms. The styling is in SCSS, so if we wanted to mess around with the source it would fit with our technology stack.

[StephanieKeck]

At this time I support going with react toolbox. Although I like the greater variety of components in material-ui (for example, a stepper component which would be very useful for us), I agree that inline-styles are a deal-breaker. I also agree that materialize is probably just too new to be a viable candidate. Out of all the options presented so far, I think react toolbox is the best candidate.

[NilsG-S]

It seems we have a consensus. I'm going to close the issue for now.

[NilsG-S]

I just wanted to let everyone know that react-router and react-toolbox do not interact well with each other. react-router has specialized links that allow for changing the page without reloading it entirely, but react-toolbox only supports the link included in the UI framework. There are ways around it, but they're not elegant.

react-toolbox/react-toolbox#144
react-toolbox/react-toolbox#851
react-toolbox/react-toolbox#984
react-toolbox/react-toolbox#1059

[asclines]

@NilsG-S So are we looking to swap one out for something else, or find a different solution entirely?

[StephanieKeck]

After a little research I think we have three options: use the workarounds described above, don't use react-router at all (https://medium.freecodecamp.com/you-might-not-need-react-router-38673620f3d#.73bag9opl), or don't use react-toolbox (this may mean not using a ui framework at all). I'm still getting back up to speed on React so I'm not sure which is best at this time.

[NilsG-S]

I believe that would serve our best interests to use a UI framework. There's a lot of work that goes into creating a custom UI, which would cause this project to become bogged down.
I'm hesitant to vote for creating our own custom router as suggested in the article you linked to, but if you were to write one for this project I would be happy to try it out.
One thing we might consider is not having a router at all. Since I've never worked on React without react-router I'm unsure as to how this would work in practice, but it's certainly something to think about.

[NilsG-S]

I've managed to get react-mdl working. The difference is that react-mdl doesn't have a custom link component, so react-router's <Link> can be used as normal instead of <a> (this means that other UI libraries that don't mess with links could potentially be used as well). The branch react-mdl-testing showcases how this can be done. If you want to try this out for yourself, you have to copy material.css and material.js from node_modules/react-mdl/extra/css/ to src/client/ because I couldn't figure out how to get index.html to reference the original files (if someone could tell me how to do so that would be awesome).

Now to the bad news. react-mdl doesn't allow for colors to be customized, so we'd be stuck with the default blue Material Design Lite colors.

I'm going to try to get Material Design Lite (the original, not react-mdl) working so we don't have the issue with colors. The only problem is that even if I do get it working, we won't be able to use the MDL Layout component. There is some kind of problem with Layout that prevents it from being used with React. This is originally what react-mdl was intended to fix.

[StephanieKeck]

I'd like to try to see if I can get react toolbox to work using the workarounds described above on the events page. Maybe we'd only end up needing a few wrapper components. Unless others have found other reasons react toolbox is not a viable option? (I admit I have not completely explored the documentation yet.)

[StephanieKeck]

Hey, I found this: https://github.com/borela/react-toolbox-plus-router. It requires react router v4, but otherwise supposedly provides full react toolbox functionality and has been updated recently. It's available via npm as well as github.

[NilsG-S]

I looked at the repository and I have a few concerns. The most pressing one is that this isn't a mainstream project. There are only two contributors, and we have no reason to believe that they will consistently maintain the code. This could force us to change significant portions of our code sometime in the future. Additionally, since relatively few people have contributed to the project it would be easier for malicious code to be inserted without notice. We could go through it ourselves to be sure, but I don't have full confidence that I would be able to spot such code. Finally, since the documentation is nearly non-existent, any issues that do arise would be much more difficult to resolve.

[StephanieKeck]

What do you think of the viability of replicating what they did and maintaining our own version of react-toolbox-plus-router? We'd have much more control over the code though it doesn't remove the problem of creating more work by not going with a standard solution. However, it seems we have that problem with every other option as well.

[NilsG-S]

If you're willing to try such a solution, you're welcome to do so. The more avenues we pursue the better. I'm going to continue to try other UI frameworks until I find one that works.

[NilsG-S]

I solved the issue with react-toolbox. If you're interested in seeing what I did, I pushed my code to the branch react-toolbox-testing. The pertinent changes are in src/app/components/NavBar.js. Basically I used lambda functions tied to the onClick attribute that pushed changes to hashHistory. This avoids the problem of react-toolbox's links interfering with react-router's links.

[StephanieKeck]

I'm attempting to run the react-toolbox-testing branch but am getting the following errors:

ERROR in ./src/app/components/NavBar.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/app_bar' in /Users/stephaniehkeck/Documents/Projects and Tutorials/Coding/Web/Websites:Projects/TTUSDC CPCEED/CPCEEDWebApp/src/app/components
 @ ./src/app/components/NavBar.js 15:15-51

ERROR in ./src/app/components/NavBar.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/navigation' in /Users/stephaniehkeck/Documents/Projects and Tutorials/Coding/Web/Websites:Projects/TTUSDC CPCEED/CPCEEDWebApp/src/app/components
 @ ./src/app/components/NavBar.js 19:18-57

ERROR in ./src/app/components/NavBar.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/button' in /Users/stephaniehkeck/Documents/Projects and Tutorials/Coding/Web/Websites:Projects/TTUSDC CPCEED/CPCEEDWebApp/src/app/components
 @ ./src/app/components/NavBar.js 23:14-49

Is the branch possibly missing some directories?

EDIT: Figured it out. 'react-toolbox' was missing from the package.json. I also had to install the 'peer dependencies' 'immutability-helper' and 'react-addons-css-transition-group.'

[NilsG-S]

Ah, glad to hear it. I just pushed the change to the branch.

[NilsG-S]

Closing since the issues have been resolved.

[javivelasco]

Let me know if I can help you guys with this!

[NilsG-S]

@javivelasco
Thanks for taking the time to comment! We worked out a solution to the problem we were having with react-toolbox, but we'd love to ask you for advice in the future.

[asclines]

@javivelasco
Thank you so much for commenting on this issue, we would love to be able to ask you questions in the future as we learn react-toolbox!

[javivelasco]

@NilsG-S @asclines Always happy to help! :)

[jonathanparrish]

@NilsG-S We have an issue with React, Redux, React-Router, React-Toolbox. Same issue with the Link. I was trying to find the React-Toolbox-Test branch that you mentioned above and didn't see it. Looking at the package.json, it looks like you ditched React-toolbox for Grommet. Did this work better for you? Any direction you could offer would be great. Bests, JP

[NilsG-S]

@jonathanparrish
There are a couple different ways I can see for you to solve this problem.

• Switching to Grommet. Grommet has an Anchor component that basically fulfills the purpose of a link, but it has integration with React Router. If you're not set on using a Material Design based UI framework, Grommet has a lot advantages. It has been by far the most usable of any React UI framework I've tried. Plus it looks great.
• Passing an onClick handler to the Link component. I haven't tested this approach, so I can't guarantee its effectiveness, but it should work. I looked at the code for React Toolbox's Link and it seems to essentially be a styled html link. That means you can pass a function to the onClick prop for Link which activates when the link is clicked. In that function you can navigate programmatically via React Router. Here is a link on how to do so for version 3 and below. React Router V4 is slightly different. Here is a link to the documentation for the history object. Note that you might have to prevent the default action associated with a link in the onClick handler.

[jonathanparrish]

Thanks for the response, we will look into the recommendations. Cheers!