Meteor and Rails Compared

I’ve started playing with Meteor.  I’ve done several tutorials for it in the past, and even went to Meteor SpaceCamp in 2015, but now I am actually building things.

I’ve been contributing to the new CodeBuddies website (original here, kudos to Linda for building the site and the community!) and I’m building a workout log for myself (mainly as a learning experience).

Meteor is something like Rails:  a way to get started fast and have a working web app with minimum code.  It’s more opinionated:  currently it uses Mongo as the database straight out of the box.  It also has less convention than rails:

  • There is no accepted folder structure (although there are some basic rules that can help you organize your own code).
  • ActiveRecord is a great help in setting up associations – Mongo is much more free form
  • Mongo has no set schema – items in the same collection (aka”table” in SQL) can have different fields from each other
  • There are no form helpers – everything is javascript and html, and you have to write all events and helpers yourself

There are also some changes to look forward to, or maybe dread if you’ve done a lot of development with Meteor already.

HAML and Rails View Helpers

I hit another little snag last night with HAML.  Take a look at this page:

formYou can see that the bootstrap formatting on the second form input is wrong and the page is rendering a default html form.  The first form is working right.  Here’s the HAML:

form code

The correct code is on lines 8 and 9.  The incorrect code is on lines 11 and 12. This is something that is obvious once you understand it, but not so obvious at first.  With HAML, you can create a class for a div by typing

.className

So it seems like if you want to create a text box input, you could just type

.form-control

But what this actually does is create a div with the class “form-control”:

incorrect html

The input is created without a class within that div. Thus, a plain html input box.

form_for, .label,  and other rails view helpers are Ruby code that generate HTML. So you have to prefix them like so, with the class declaration within the attributes hash:

=f.text_field :first_name, class: "form-control"

Like I said, obvious once you understand it. But it took me a while to figure out.

Building an Index Page with HAML

HAML is a simple templating language for Ruby. I finally decided to pick it up today.

I started with one of the simplest views in my rails app, an index page that lists all employees. Here’s the original code, in erb:

erb index

And here’s what I came up with in Haml:

haml

The thing to notice here is that I had to create new divs for each bit of Ruby code.

 .row
 .col-md-3= e.full_name link_to "Edit", edit_employee_path(e) link_to "Delete", e, method: :delete

just won’t work in HAML. Which is fine, but it took me a little while to figure it out. Most of the tutorials I found didn’t really explain this, and the reference didn’t have any examples of how to put multiple lines of Ruby into a div either. Turns out it’s because you can’t, apparently.

Overall I’m finding HAML to be really nice.  It’s simple, quick to pick up (20 minutes for the basics, seriously), and cuts down on typing quite a bit.

From Failure at Life to Coding Jedi in One Day

Recently I had one of the rare days where I was able to spend the entire day coding. Since I had such a big chunk of time, I decided to add a big hairy feature to the rails app I’m working on. And I failed.

via GIPHY

After spending the morning on that feature, around noon I tackled another big problem, a different feature that was also hard to implement. And after 3 hours or so of struggling with it, I was getting discouraged. My whole day was almost gone, with nothing to show for it. I began to worry. Maybe I’m not actually cut out for this line of work. Maybe I’m not good enough to get paid to do this. I’m too old to learn how to do this stuff. Before long, my entire life trajectory of the past 2 years began to feel like a waste.

This is actually not an unusual feeling for me. And I’ve been building rails apps now for more than a year. I can build things that do stuff. But I keep running into these walls.

Learning to code is really just about running into the wall, over and over again, until you figure out that there’s a way over it, or around it, or that you’re running the wrong direction entirely. And after you run into that wall enough times, eventually you’ll start to slow down, stop and think before you smack into it again.

When I first started, the wall was figuring out that I had to assign a variable so my for loop would know where to start counting. A year ago, it was trying to understand how rails views and controllers and models all worked together. Today, it was creating custom routes to pass in multiple parameters to a controller.

I kept on working today, trying different things, reading and rereading the documentation. I talked to a buddy on slack. And finally I got it working!

Right now I feel like a true Rails Jedi Ninja Badass. Truly. It’s hard to beat the feeling of working through a problem, and seeing the results in your web app.

But tomorrow, or next week, I’m going to hit another wall. In a perfect world, you’d learn to code and then you’d just code. But the truth is, you never stop learning and you never stop running into problems. You just gain enough confidence to know that you will be able to solve the problem, given enough time. And you gain experience that helps you know where to look for answers, and understanding that helps you narrow down your search for those answers.

If you’re just starting out to learn to code, you’ll hit the wall a lot sooner. As you gain experience, you’ll get better and better at more things, hit fewer walls, and get better at fixing bugs because you’ve seen them so many times. But there will still be wtf moments.

Erik Trautman, who created the Odin Project, published this excellent blog post about the process of learning to code. He’s right, and getting stuck in the desert of despair is one reason why the Odin Project is so great. But his upswing of awesome I think is missing some details. It’s not a straight curve. There’s lots of little downswings in there.

Problem Solving Rails and React

I’ve decided to add React to a Rails app I built.  Right now I am trying to create a select box in a form.  The form creates new Transactions.  Each Transaction belongs_to one Program and one Account.

Currently I have the Transactions showing up, along with a form and delete actions.  But I am having some trouble.

The first bit of trouble is that I’m using CoffeeScript, which is new to me.  React uses JSX and vanilla JavaScript.  So translating to CoffeScript is confusing, although not impossible.

The next layer of trouble is how to create a select box in React.  React has no form_for or options_for_select helpers.   I have figured out how to create a select box, but I need it to be populated by the database table Programs.

The third layer of difficulty is how to deal with associations.  I can’t type Transaction.program.name in the view like I can in Rails, and I can’t use a raw SQL query in the JavaScript.

To help wrap my head around the problem, I decided to follow Justin Weiss’s fabulous advice, and build a mini-app.  This simplified the problem for me, by taking it down to the simplest level that I was having trouble with – how to access associations in a rails app, using React.  Thanks to this excellent tutorial, and with a bit of muddling around, I’ve figured out how to access associations.  Now I have to figure out how to put this into a select box with coffeescript.

React with Rails

I’ve been interested in putting a javascript framework on the front end of a rails app for a while now.  After working through this tutorial, React seemed like the obvious choice.

It’s simple and clean.  With the react-rails gem installed, all you have to do is write some javascript or coffeescript.  No erb, no handlebars, just javascript.  So simple!

I added a view with some basic add, edit and delete actions to the rails app I built for work.  The main problem is that there are none of the rails view helpers, so I am having a problem with figuring out how to implement a select box in coffeescript, and how to deal with associations, so this new view is not ready for production but I hope to get it going soon.

Linter to the Rescue

I’m currently using the Atom text editor.  I’ve been trying to stay text-editor agnostic, figuring that I will have plenty of time to optimize later.  But lately I’ve been hearing that Vim is worth learning.  This thoughtbot post pushed me over the edge, and so this weekend I gave it a shot.  I’m still nowhere near ready to use it all the time but working on it.

So tonight I started working on learning to use React with a Rails app.  I decided to start building in Atom at first, since that’s what I’m used to.  After a while though I figured I’d try Vim.

Of course, I jacked up the spacing on the file I was working on, and gave up (for tonight).  I went back into Atom and started working.   I edited the component I was working on, refreshed the browser, and:

ExecJS::RuntimeError  SyntaxError: [stdin]:5:10: unexpected . (ExecJS::RuntimeError)

The error was coming from layouts/application.html.erb, which was all auto generated code.  Wth?  I looked back over all my code, looking carefully at the indentations of the coffeescript.  Everything, line by line, was correct.

Luckily, Atom has a package manager and so it was easy to install coffee-lint. Sure enough:  I had added a line that somehow got pushed down below the code I was looking at.   Since the whole file was only a few lines long, I didn’t think to scroll down.  But the linter found the error immediately.

So… Atom 1, Vim 0.  I see that Vim has some linters available though so I’ll be giving it another shot.

Angular and Rails

This is a list of resources for building Angular frontends with a Rails Backend.

I’m hoping to do a hangout on codebuddies.org sometime in the next couple weeks to work through one of these tutorials.

I’m also interested in using React with Rails, so I’m bookmarking a few tutorials for that here as well: