Tips for Transitioning from Ruby to Javascript
Take the headache out of syntax confusion with these 5 steps…
My journey in coding has not been linear. It has bounced around from language to language. If you’re interested in coding enough to be reading this, you know how important it is to learn, at the very least, some Javascript. I thought it a good idea to start Javascript after learning HTML & CSS. That’s the natural progression for front end development, right?
I was 75% finished with an online module to learn JS and still had no idea what was going on. I tried reading “Eloquent Javascript” by Marijn Haverbeke. Though a helpful book for programmers, I still fell short. I didn’t realize until learning Ruby at a coding bootcamp that what my knowledge was lacking was general programming logic.
After learning programming logic in Ruby, our instructor gave us a series of exercises to practice converting to Javascript. The syntax tripped me up more times than I can count (still does), but I would like to share my tips to help you transition gracefully from Ruby to JS.
1. Make all of your opening and closing curly braces ahead of time.
Here is a good example of a couple of curly braces. You can imagine a linter yelling at you for forgetting one. You get stuck in a vortex of which to delete and end up wasting time trying to match up curly braces. Instead, just write them ahead of time. Then add the code into them.
2. Practice translating simple forEach loops from Ruby (or the language you learn before) to JS. Then get more advanced with the loops.
This is a great example. I first wrote the Ruby logic using an each loop, since its most closely related to the forEach in JS. I then translated it to Javascript. It’s not the only way you can write this logic in JS. But, it is a great way to see both written out and compare the two in a very similar way, so that you can focus less on logic and more on syntax. Especially where all of those pesky braces and parenthesis go!
3. Use a linter! Seriously.
Linters are easy to install on VS code and other editors and are worth their weight in gold. Okay I’m exaggerating but you get the idea. A linter is like a spell checker for syntax errors. The squiggly lines can be overwhelming at first. I found myself trying to ignore mine when I first started coding, thinking maybe if I didn’t look at it, the syntax errors will go away. Javascript makes it impossible to ignore syntax errors, as it is considerably less flexible than Ruby when it comes to syntax. In the example above, you can see my linter pointing out simple things that could cause multiple error messages. I have forgotten spaces, semicolons at the end of lines(which can still run but is annoying to say the least). You can see if i hover my mouse over the underlined syntax, it will tell me exactly what I’ve screwed up. Easy Peasy!
4. Use a cheat sheet. And don’t feel bad about it.
Here’s a snippet of a cheat sheet I received in bootcamp. The beauty of having two screens (do you even code, bro?) is that you can just have this on one screen while you work on converting your Ruby logic to JS syntax. I would even copy, paste and comment out the examples to refer to. After a couple exercises of utilizing similar problems, you’ll find you eventually don’t need this. But, it’s always good to save for when you encounter that one thing you never even practiced. It will happen. That’s a good thing! It means you get to learn more!
5. Last but certainly not least…Don’t be afraid to break things.
Any dev will tell you it takes some getting used to just to be able to work all day getting different error messages. I am going to tell you this now, and it will stick with you forever. Error messages are your friends! We look at the word error through a negative, I have failed kind of lens. You’ll quickly learn in programming that just isn’t true. Learn to embrace the error message, read it carefully and use it to get to the next step. Which will inevitably be another error message. At the end of the project, these all add up to one working app. I promise!
