Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add `kireerik/razzle-material-ui-styled-example` project #91

Closed
kireerik opened this issue Jun 10, 2017 · 6 comments

Comments

@kireerik
Copy link

commented Jun 10, 2017

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

This comment has been minimized.

Copy link
Owner

commented Jun 11, 2017

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

This comment has been minimized.

Copy link
Author

commented Jun 11, 2017

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

This comment has been minimized.

Copy link
Owner

commented Jun 11, 2017

@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

This comment has been minimized.

Copy link
Author

commented Jun 11, 2017

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

This comment has been minimized.

Copy link
Owner

commented Jun 12, 2017

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.

@michaelrambeau michaelrambeau added done and removed coming soon labels Jun 12, 2017

@kireerik

This comment has been minimized.

Copy link
Author

commented Jun 15, 2017

Hi @michaelrambeau, thank you! All right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.