Add kireerik/razzle-material-ui-styled-example project

[kireerik]

https://github.com/kireerik/razzle-material-ui-styled-example
I think newcomers can start with this example project really fast and easily and I want to share this experience with other developers.

[michaelrambeau]

Hello Erik @kireerik ,
Thank you for the suggestion.
The project looks nice, if I understand well it's the Razzle example enhanced by extra features:

• styling with MaterialUI and Styled components
• some Express extra middlewares

The problem with the boilerplate projects in general is that they deprecate quickly because you have to maintain dependencies.
This is why I am a bit reluctant to add it, for now.
Also I'm afraid of getting a lot of requests to add examples that combines any UI CSS toolkit with any framework.
But I may miss a killer feature, you may have a good argument, I may change my point of view, I'am open to the discussion ;)

[kireerik]

Hi @michaelrambeau,

You are welcome! Thank you for finding it nice and for your questions and also for sharing your thoughts about it!

Yes, it is. Basically the Material UI Webpack Example's app is added to the Razzle Basic Example. Plus Styled Components is used to handle CSS the right way (in my opinion) and a compression middleware (so just 1 middleware is used) is added to Express and html minification is also included.

I see. I think Styled Componets (version 2 is released and it is used because of SSR support) will be stable from now on. The other dependencies are also not changing that much except Razzle and Material UI.
I am keeping Razzle updated with minor releases. I am planning to update Material UI to version 1 once it is released. It can bring in lots of improvements and maybe I can switch to Preact or similar React alternative bite wisely.
Until then I am researching how to exclude modules from the JavaScript source on the client side and include them from CDN(js) instead. Theoretically Webpack 2 supports this, but it also seems a hard topic and I didn't find an easy solution for this just yet.

Well, there is no real killer feature, except the following ones:

• If someone would like to get started with Material UI, which has the best design including animations in my opinion, than he or she can use my example project and can start developing something great shamelessly.
• I think using and implementing Material UI with SSR is not straight forward at all, because it is not well documented.
  This project includes it. So newcomers doesn't need to wasting ours of figuring out how to do it the right way (as I had to 😄).
• (How to use Styled Componets with SSR is well documented. So it is easy to implement. This is also included.)
• I think the included features are a must haves, if someone would like to develop a nice website with Material UI and planing to host it on a non-static hosting service.
  Note: Having a small JavaScript footprint and or serving dependencies from CDN(js) are also a must have in my opinion. Unfortunately these features are missing right now, but should be added sooner or later.
• My strongest argument is that I am an update maniac, with the pros and cons to it too. So I always aim to use the latest and stablest releases of anything.
  Note: Material UI is currently not updated to version 1.0.0-alpha.x, because it lacks some features, like the nice Checkbox animations, which I really like.

You can read more about why I created this example project here: jaredpalmer/razzle#289 (comment)

Thank you for your feedback in advance!

[michaelrambeau]

@kireerik Thank you for the details.
The project has been added to bestof.js.org, I will let you know when it's online, be patient!

[kireerik]

Thank you!

Is it welcomed if I add it to the relevant projects as a related project as well under the corresponding link tabs?

[michaelrambeau]

Hello @kireerik ,
The project is online, check here for example: http://bestof.js.org/tags/boilerplate

And yes, you can use the "Links" tab if you want to add articles or interesting projects related to projects mentioned in bestof.js.org.

[kireerik]

Hi @michaelrambeau, thank you! All right.