Meteor
Meteor 1.5 and Code Splitting with React and React Router
Meteor 1.5 is out and we can finally do code splitting! If you are not familiar with code splitting, this allows us to separate our logic in a single page web app (SPA) and only send the client the relevant portions of code. This is useful in a couple immediate ways:
- You have a giant application that is too large to send at once (any script files over 1MB often take too long and the user experience is terrible)
- You want to keep some portions of code hidden until the user is authorized to see it
We are going to cover option 2 since that is a use case I just ran into. Sometimes splitting the code up can make the files larger (or the same size) so Meteor has provided a nice tool that helps visual how large the file sizes are once they are bundled. You can read more about that in this great post: Bundle Visualizer. Use the tool before the split, and after the split to make sure it doesn’t effect your code in the wrong way (compare the two).
Moving To Containers in Meteor (ES6) For React
The current way to connect Meteor into your React App is to use ES6 based components. Meteor has a function called “createContainer” that will send Meteor data into your React component as props instead of “this.data” access. This can make it a bit more complicated if you need to change your subscriptions based on React’s state, but we will talk about the new pattern you will need to use. This is a better pattern long term as you can switch out the top level data injection and re-use all your display logic (say you want to swap out Meteor down the road, or use Redux).
Connect your Meteor App with MailChimp
Does your application have users? I hope so! Keep them around and active.
The best way to get users engaged, and keep them coming back is to use email marketing. You can create a sign-up workflow, move users to different workflows based on what they are doing in your app, and re-engage users that haven’t logged in for X months/weeks. Its very easy, so here is some code that connects to the MailChimp API and lets you add users to Lists. Lists are what trigger the emails for each email address.
Meteor, React and Browserify
I have been chasing down an odd issue with a Meteor/React app I am building. The error showing up in the browser console is:
You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.