Meteor JS with a hint of React
If you haven’t heard of Meteor JS already, let me give you a brief overview of what it can do and why I think it is so powerful, especially when teamed with React. I will then share some code snippets to provide further insight.
What is it?
Meteor JS is a full-stack real time web application framework. From front-end to back-end you only need to concern yourself with one programming language: Javascript. Its primary purpose is for the user to be able to create applications & websites with less code.
Meteor allows you to build for any device, Web, IOS and Android, while utilising technologies you are already familiar with. This could arguably be a topic all on its own, and is a little outside the scope of what this post is focused on. You can read up on this here.
Why Meteor?
This is the fun part. The stand out consensus is that Meteor is incredibly easy to learn, & while every mammoth like framework likes to boast their ‘simplicity’, Meteor actually delivers on this promise.
Don’t believe me? take just an hour out of your day to complete this tutorial, the result… Not just a UI to-do list, but a functional client-server to-do list with basic authentication (user login).
The Meteor team’s focus on simplicity is refreshing.
Meteor JS comes shipped with Mongo DB as its de-facto Database and three view-engines are currently supported: React and Angular (the two giants) and Meteor’s very capable Blaze.
What about Dev-ops?
Meteor’s mission to keep development as painless as possible throughout extends with their build system.
It’s worth mentioning that Build tools such as Gulp & Grunt are not required, reducing additional overhead & project set up time. Thanks to Meteor’s built in ‘Hot Code Push’ your HTML, CSS & Javascript changes are seamlessly compiled and your site updates without a manual reload.
I hear you already asking “What about SASS/LESS I’m way too cool to use regular CSS”. Worry not, Sass, Less & Stylus are all supported by grabbing them from Meteor’s native package repository ( Meteor’s version of NPM ).
PostCSS and Auto-prefixing? Have at it. In fact whatever you are keen on, build-systems related, they have in depth documentation for you to get your head around. Speaking of NPM, you can totally still use this as you usually would.
Meteor With React JS
So enough of what Meteor JS is, if you need a more in depth evaluation to decide if it can cater to your needs, check their developer guide.
I want to show you a small demo clip using Meteor Js with React JS as the view engine. This example is a demo employee directory see below:
We are using Meteors pub/sub formula here, which stands for publish and subscribe. How does it work? So as you know we are using React JS for our UI / View. React is just in charge of handling the data it is given and rendering it to the page, for example the image, employee name & details.
The data is actually stored in Meteor’s back end. We are using fake data currently, for example purposes. Check out Faker JS great for generating loads of test data.
Back to the topic at hand, we need React JS to talk Meteor’s Database to request the data… this is called a Subscription.
Let’s put this in human terms for the sake of understanding, It is as simple as React saying “Hey meteor I know you are storing all those employees. I would like you to send me the first 21”.
We set up our container which, continuously watches our subscriptions, and if any data changes, it will update and pass this down via props, re-rendering the components. Our ‘per_page’ variable is set to 21 so that’s all Meteor will send back to us.
Meteor will then Respond like so “No problem, here is the first 21 you asked for”. This method is called Publish.
The limit makes sure, it only supplies the client exactly what it needs. Super easy, right? There is only one extra step that needs addressing: Collections. We understand the pub / sub method now, but how do we actually reference the data inside Mongo DB? At its core Collections are a set of related data within Mongo DB.
For example purposes, below is how we set up a collection for our Employee directory with comments.
Part 1: Declaring our collection and making it available to run on the server by exporting
Part 2: Generating some fake data and adding it to the employee collection, which will be stored in our database.
As you can see above, we are generating 5000 Employees with fake data. However, if you remember we are only requesting 21 Employees from our database on initial load.
Collections can be used also on the client side & locally. See more on Collections here.
Now of course I don’t believe any framework should be used for all cases, you should always choose the appropriate tools to get the job done, I touch on this in my previous blog post ‘Front end dev -running before you can walk’. I hope this helped demystify what Meteor JS is and enlightened you to a very small set of its capabilities.
👋
I hope you enjoyed this post, feel free to check out my previous posts on learning React, and for all things creative tech head on over to TMW Interactive.
P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).
Quick Side-note: Check out Stephen Grider’s course on Meteor JS & React from Udemy, his understanding and mini projects are a great entry point into this stack. (Naturally wait till Udemy do a flash sale 😃 )
