Code Log 062516 — Meteor.js

meteor create

I need to learn JavaScript. I attend my local NodeSchool meetup. I’m going through Eloquent Javascript, and attend a book club for it. Hell, I’ve read a different textbook on it and am halfway though another. And still the fact remains:

I need to learn JavaScript.

The best way I learn is to get my hands dirty, so I asked a budding JS developer buddy of mine, Dan Minshew, if he has any projects he could use a hand with. Turns out he does:

He’s got an aquaponics system that needs user-friendly monitoring. He’s built a prototype app, but would like to upgrade it. Technologies include: Meteor framework, Hapi/Joi routing, NoSQL databasing (Mongo or Redis), React/Redux frontend, and possibly C and Python for interfacing with the sensors.

Everything bold is a thing I didn’t know at the time of the conversation. I plan to have a manageable grasp on all of the above by 7/2. 5 technologies in 10 days. I hope you guys like code logs.

Code Log

I’m starting with Meteor because it’s the framework upon which everything else is built. I’m working through the class Introduction to Meteor.js Development offered by the University of London on Coursera.

Luckily, Meteor itself is relatively intuitive. Biggest I’ve learned so far… Comment. Comment. Comment.

The issue I have with JS is that everything is a function within an object in an array property, or some other four member combination of the words “array”, “object”, “property”, and “function”. (Add “collection” for Mongo.) When I first started, I found myself coming back to code like

Images.find({}, {sort:{createdOn: -1, rating:-1}})

scratching my head and having to reread docs and tutorials to figure out what is even going on. (So. Many. Curly. Brackets.)

Insert my Comment Revelation. I now comment pretty much every separate piece of functionality in the program because 30 seconds spent now is better than 30 minutes spent tomorrow relearning everything. So, within my code, you’ll see:

// Defines helpers for “images” template
Template.images.helpers({images: ...
// Defines helpers for body tag
Template.body.helpers({username: function(){ ...
// Defines event listeners for “images” template
Template.images.events({
'click .js-image': function(event){ ...

If I find the code to be particularly head spinning, I’ll throw in additional reminders:

// find: {} -> object for specificity
// rating: -1 -> reverse order (high to low)
Images.find({}, {sort:{createdOn: -1, rating:-1}});
// When declared out of if statements,
// information is available for client and server
Images = new Mongo.Collection(“images”);

Comment. For your sake and others’.

If you want to follow the actual app that I’m building, check out the repository:

If you want to build the app yourself, I highly recommend the course taught by Dr. Matthew Yee-King. He gives very thorough explanations on what and why he does what he does. (Personally, I appreciate his sprinkling in of Meteor docs. The piecewise approach helped me figure out how to navigate the docs without the usual Docs Dread™.)

Well, back to Meteor. Happy coding.

Update #1: When JavaScript meets Where’s Waldo

Just spent 15 minutes on figuring out why this wouldn’t work:

if (Meteorr.user()) {
Images.insert({
img_src: img_src,
img_alt: img_alt,
createdOn: new Date(),
createdBy: Meteor.user()._id
});
}

Time for a coffee break.

Update #2: Crash Course Complete

The course is finished, and the app is done-ish. It’s not pretty, but I do believe it’s a firm starting ground for Meteor.

What I’ve learned: Meteor is basically a Renegade Ruby on Rails. The corollaries are there (collection::model, template::partial), but the structuring ideologies are completely opposite.

Next step: I’m going to be making a Meteor app using Hapi instead of iron router. Should be fun to practice unguided Meteoring.

Happy coding.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.