Bombing JavaScript Fatigue with Minesweeper (Part 1)
Today I’m going to continue our class with a nice break from theory. Let’s use our fancy patterns and tools to make a time old classic: Minesweeper. Our final product will be a client-side Meteor + Redux Minesweeper application.
Ah yes, you in the back, you have your hand up. Do you have a question?
“Abhi, isn’t Meteor a full stack framework? So we’re building a client only app?”
Yes it is and yes we are. Today our goal is to feel comfortable building things with React and Redux.
“Then why use Meteor at all for this tutorial?”
Have you ever seen this picture?
Or this?
Let’s dive deeper. To run React the way production level code should be shipped we would need:
- Build System — Managing external and internal dependencies, preprocess, file-watchers
2. Babel — You want ES6 right?
3. Flux Library — Good thing we’re already talking about Redux :)
4. Express or some abstraction like koa, sails, etc.
So to get a hello world app out as an initial project bootstrap, it could possibly take you hours to do and more hours to understand the tool.
So now that you know all the moving pieces, lets contrast this with Meteor.
- Build System — Meteor Build Tool: handles preprocessing, compiling, babel for new language features
- Meteor Data — Solve the problems of express and koa by handling the server side implementation at the platform level. For more on the future of this checkout docs.apollostack.com
Both supplied by Meteor and handled for you as a Meteor developer. With recently introduced NPM support you can write code like every other JavaScript fatigued developer without the fatigue.
Let’s setup our project
First things first:
Project Structure:
Get something on the page:
Head over to your console.
Type: meteor
Boom.
Now we can get started with our project. Now we can focus on building out the important parts and not dilly-dallying with all the tooling overhead that most React developers have to deal with. Save yourself the fatigue. In the next part we will start diving deeper into the Redux part of a Minesweeper game. This post was meant to shed some love for the Meteor build tool and how easy it is for me to get started with new tutorials/or even new projects.
Part 2 is available here.
Full example:
This post is part of a series called Mastering Meteor and Redux. You can read the course syllabus here. Follow me on Twitter @abhiaiyer and I’ll see you for the next chapter.
