Let’s Learn: Meteor Pt. 1

Initialize

MeteorJS is my unicorn. It lets me mess with data using a language that’s been around for aeons and that everyone can help me with, JavaScript, and mix in the facets of other frameworks that I need without really having to think. It’s the MEAN stack for the stupid person like me who doesn’t know enough about anything to ask any questions. It let’s me worry about the logic behind it all rather than how to get the information. I spend less time getting set up and more time solving actual issues. The thing is, I just don’t know it well enough.

So, to fix that, we’re going to write an app together. If you don’t have MeteorJS installed, go to their website (link again) and install it. Once you have it installed, go ahead and create a new folder to hold all of our goodies. I called mine “medium” because I’m forgetful. You can name yours “My-awesome-future-startup” if ya want. It’ll be a pain to cd into that but I believe in you.

Now, in your terminal (command prompt for you Win users) cd into your newly created folder.

I have my ‘medium’ folder saved inside of an ‘apps’ folder, which is saved inside of my ‘code’ folder. ‘ls’ or ‘dir’ just lists the contents of the current folder you’re in!

And to create our first app, simply type:

meteor create appName

It should give you something like:

I learn by seeing what should have been shown and comparing it to my screen. Get used to the pictures.

And voilà! We just created our very first Meteor app! Don’t believe me? Follow Meteor’s instructions, cd into the new folder, and run meteor.

Two things: 1) I told you I am gonna use alot of pictures and 2) you can see I tried to run meteor in a non-meteor folder and the error it gave me was kind enough to tell me exactly that! Meteor’s error handling comes in handy.

If we check out localhost:3000, we can see our newly made app, clicking a button that counts, right out of the box. You created a web app in, oh, 5 seconds? I think you deserve a coffee break. Go ahead and grab me one, too, then we’ll get down to it.

In the folder Meteor created for us, we have three files: a

appName.html, appName.css, and appName.js

It’s these three fairly empty files that sets us up for success. But before we go any further, I want to ask you the most important question we need to ask before learning a new language or framework: What is the problem you’re trying to solve?

Buy…why?

One of my professors said that a computer can basically only understand 5 instructions: up, down, left, right, and compare. To me, each app or widget isn’t a product to make but a riddle to solve, a problem to find a solution for, using a very limited vocabulary and a pretty stupid employee. How do I tell my employee, the computer, to do what I need him to do in such a way that no matter what anyone else tells him to do he knows how to respond. Then how do I get that employee to delegate tasks to other employees, passing the exact information it needs no matter what else is happening. It’s not a “I want to make a social media app.” It’s “I want to solve this data flow problem.” How you style the data comes only after we find out how to get it. Which brings us nicely to what we’re going to do today. Man, my transitions are on point today guys. You’re welcome.

When you launched your Meteor app, you noticed that you could click a button and it would update the counter on the page. You might have also noticed that when you refreshed the page or the program the counter was reset. Let’s look at how but from the perspective of our workers putting stuff in boxes.

Last one….for now

If you look at appName.js, it should look something like this. For someone who doesn’t know anything of JavaScript other than Google copy/pasting, this looks daunting. So let’s try to fit it into our employees instructions and communication. On my GitHub you can download the source with the following ideas in comment form! Now to us instructing our computer slav- I mean employees in some plain JavaScript.

if (Meteor.isClient) {

I want you to check ‘if’ this box is true or not. The way you find that out is by seeing if when you look in the ‘Meteor’ box, you find that it’s little box called ‘isClient’ is true. ‘If’ it does, here are a list of instructions that start with ‘{‘ and end with ‘}’.

Session.setDefault(‘counter’, 0);

Because that box was true, you are now looking through your instructions and found one. You need to find the box called ‘Session’ and run the instructions labelled ‘setDefault’ with it and to do that you’ll need the values ‘counter’ and 0

Template.hello.helpers({ … });

So find the box named ‘Template’. Inside of that should be a box called ‘hello’. Inside of ‘hello’, you should find another box called ‘helpers’.

counter: function () {

I am giving you a box called ‘counter’ and I am telling you inside of this box is a ‘function’ which is a list of instructions for this box.

return Session.get(‘counter’);

I am telling you to make the value of the box ‘counter’ to equal what you get when you look at the box ‘counter’ that is found inside of the bigger box named ‘Session’

Template.hello.events({ … });

Exact same rules as when we talked about ‘helpers’.

‘click button’: function () {

I am telling you that whenever anyone ever ‘clicks’ on the trigger that is called ‘button’ I want you to do something and those instructions are found between the curly brackets

Session.set(‘counter’, Session.get(‘counter’) + 1);

I am telling you that when I want you to grab the box ‘Session’ and use the instructions labelled ‘set’. You’re going to need the box ‘counter’ along with what happens when you look at the ‘Session’ box and use the instructions ‘get’ and add ‘1’ to results.

Are we done yet?

Thinking in ‘instructions’ and ‘boxes’ helps me keep track of what’s happening and also let’s me visualize what is actually happening in a non-numbers sort of way. I can imagine a minion walking around giving me and other more trusted employees information non-stop, doing all the dirty work for me so I can learn from the data he gives me. I can’t really visualize bits changing.

However.

I am not an expert. In fact there’s a high chance I’m wrong about alot of concepts. If I am, LET ME KNOW! This whole series is about learning through teaching so why not help me learn! You can find me on the social medias of the Face or Tweet variety. You can also fork me on the Gits if you’re hip like that. And if you are, can you give me some pointers on it?

Pt 2 is already up. Feel like digging a little deeper and getting more confused? Me too! See how we interact with our employee to solve an issue.

Till next time, console.log your way to success.