Meteor 1.3 build vs Webpack

Meteor 1.3 was released a few days ago and it comes with a bunch of goodies! NPM support, lazy loading, ES2015, etc.. I have been using Meteor 1.3 since the betas and RCs. The experience was pretty impressive. But, Meteor 1.3 lacked five things (1 = most important, 5 = least important):

1. PostCSS
2. CSS Modules
3. Babel Plugins & Presets
4. React Hot Code Reload
5. Code Splitting

The good news is awesome Meteor developers such Gadi Cohen, Nathan Reid and Julian Ćwirko created a few packages to address some of these problems.

1. gadicc:ecmascript-hot enables Babel Plugins & Presets and React Hot Code Reload. Unfortunately, SSR is not supported now. It will be in the next release or two. See here.
2. juliancwirko:postcss enables PostCSS
3. nathantreid:css-modules enables CSS Modules and PostCSS

On the other hand, I also tried using Webpack with Meteor 1.3. Another great developer, Benoit Tremblay, created webpack:webpack that gives us a very straight forward integration in Meteor without having to learn too much about Webpack. This package is able to do a lot of things like code-splitting, React hot reload, etc.. CSS Modules can be turned on by simply writing a line of code. On top of that, Benoit also wrote a few other packages that allow other integration such as PostCSS, Typescript, etc..

So far, the one thing that Meteor 1.3 cannot perform is code splitting. Other than that, Meteor 1.3 can do more or less the same functions as Webpack. At this point of time, code splitting is not really necessary for me as my apps are not huge in size. Thus, I decided to go with Meteor 1.3 + gadicc:ecmascript-hot.

JSS vs Radium vs PostCSS vs CSS Modules

I first started playing with PostCSS and CSS modules by using webpack:webpack and webpack:postcss and I love it! No more global CSS namespace! No more bourbon! Woohoo!

However, I had a bit of hard time switching from webpack:webpack back to ‘native’ Meteor. I needed to change all

*.import.css

to:

*.mss

because Meteor doesn’t allow build plugins to handle CSS files.

Also, I had some SSR issues with PostCSS and CSS Modules. On each page load, the page is initially served without stylesheet. After about 1 second, the stylesheet is then only served. Until now, I don’t know how to fix this problem. (If any of you know the fix, please let me know!)

Another significant problem is the need to use extra tool chain to get PostCSS and CSS Modules to work. That’s not very ideal for me if I want to switch my build tool. So, I started tinkering with JSS. A simple

npm install jss react-jss

and JSS is ready to be used. As far as I know, JSS partially supports SSR. jss-vendor-prefixer cannot be used on the server side. To solve this problem, I looked at Radium. Again, a simple

npm install radium

and Radium is ready to be used. For all server-side rendered components, I use Radium to style them. For all client-side rendered components, I use JSS. Together with FlowRouter SSR and react-no-ssr, I can now server-side render a page super fast with placeholder for client-side rendered components.

So, my decision is to go with JSS + Radium.

why use both JSS and Radium?

I actually prefer JSS over Radium due to reasons stated here. As far as I know, SSR is not fully supported in JSS. I had no choice but to use Radium for now.

Flow Router vs React Router

Flow Router! That’s it! I chose Flow Router! I’m quite biased on this since I’m already using FR for all of my apps and I’m more familiar with FR. Another thing that I like about FR is the syntax. It feels more Javascript as compared to React Router.

Meteor Guide vs Mantra

Before Mantra came out, my apps were structured slightly similar to what Meteor Guide suggests. Then not long ago, Mantra was introduced by Arunoda Susiripala. I started playing with it and I really enjoy it. I appreciate how everything is separated by modules. Each module has its own actions, components, reducers, etc.. Furthermore and most importantly, I can reuse these modules for my other apps. Once I dive into Mantra, it’s hard to go back to what I used to do.

So, I have no choice. Mantra spoiled me! I had to choose Mantra.

Conclusion

After two weeks of researching and

meteor create test-postcss --release 1.3-beta.12
meteor create test-css-module --release 1.3-beta.16
...

I have finally found my new stack. I hope you enjoyed it! Feedback are welcome!

Here’s a very simple todo:

Thanks to Alicia Lim for editing this post.