A Rubyist’s deep dive
December 29, 2023 · Felipe Vogel ·
tl;dr I’m systematically studying JavaScript utilizing these sources.
Why?
As a result of JS is inescapable in net improvement.
Certain, you need to use any variety of JS-avoidance libraries. I’m a fan of Turbo, and there’s additionally htmx, Unpoly, Alpine, hyperscript, swup, barba.js, and doubtless others.
Then there are stack-specific libraries: StimulusReflex for Rails, Phoenix LiveView, Laravel Livewire, Unicorn and Tetra for Django, Blazor for .NET, … and the checklist goes on.
You get the image. Plenty of folks would quite not construct a JS entrance finish.
I personally prevented the JS ecosystem a couple of years in the past when it might have been the default path for me as a starting second-career developer. However I used to be going the self-taught route, so I wanted an ecosystem with sturdy conventions. I didn’t know the way to select from a dozen common JS frameworks. And none of them is an all-in-one, “batteries-included” framework, so it regarded like I’d have to make many choices about the way to put collectively an app, which might imply (for me at the moment, as a newbie who lacked context) numerous frustration and stabbing at midnight.
It was within the Ruby world that I discovered the conventions I wanted. Plus, I discovered (and nonetheless discover) Ruby to be extra fulfilling.
However now I’ve had sufficient net improvement expertise that I can circle again and be taught JS completely, confidently, and with out losing as a lot time on rabbit trails.
Not that I can’t get round in JS. At my final job, I used to be snug constructing full-stack options in Rails and React.
Oh, and talking of my final job—not too long ago I used to be laid off as a part of an enormous discount in drive. (Keep tuned for a future submit on my job search and what I’m studying from it.)
Being unemployed and seeing so many roles involving a JS entrance finish—that’s finally what gave me the push I wanted to get critical about JS.
That’s what I imply once I say JS is “inescapable”: not that we will’t construct something with out it—in actual fact, I fairly take pleasure in making websites with minimal JS and loads of interactivity. I solely imply that JS expertise are obligatory for somebody like me who has just a few years of expertise, and due to this fact fewer job choices. Even when I might discover a backend-only place (which is uncertain), I’m undecided I wish to pigeonhole myself like that.
Plus, I actually do take pleasure in full-stack improvement. And even when in some utopian universe I have been in a position to land a full-stack place utilizing a number of the above-mentioned libraries as an alternative of a heavy JS entrance finish, it might nonetheless be necessary to know what’s happening behind the scenes. In spite of everything, these libraries are JS that’s working on the web page permitting my non-JS code to do cool, interactive issues.
So many causes to be taught JS!
How?
I’m utilizing the sources listed beneath. Nearly all are free. In addition to a complete have a look at JS syntax, I made positive to incorporate a couple of different areas:
- Guided observe and initiatives, to show information into expertise.
- Net APIs, particularly the DOM, types, and net parts.
- Deep dives into how JS works, and the rationale (or a minimum of causes) behind its quirks.
- Useful JS, as a result of I’m keen on purposeful programming. I not too long ago began studying Haskell, however JS will likely be helpful for instance of the way to apply purposeful ideas in a not-really-functional language.
There’s so much within the backside two-thirds of the checklist, solely as a result of I haven’t gone by means of it but and weeded out the less-than-awesome sources.
Additionally, word that this checklist is copied straight from the “JS” part of my studying highway map, and the newest model might have advanced from what you see right here.
- Fundamentals:
- Observe:
- DOM and types:
- Going deeper:
- Useful JS:
- Net parts:
A phrase on JS frameworks
Chances are you’ll be questioning why my studying plan doesn’t embody any JS frameworks. No React deep dives? Not even the extra hip Vue or Svelte??
I do plan on familiarizing myself with common front-end frameworks, together with the components of React that I haven’t used. Studying the patterns which can be widespread throughout frameworks will likely be worthwhile, I feel.
But when there’s something I concentrate on, I need it to be JS itself (together with different net requirements) as a result of they’re a extra sturdy funding, altering extra slowly than JS frameworks.
Studying JS, re-learning Ruby
Readers who aren’t into Ruby can be at liberty to go away now (it’s OK, I gained’t really feel unhealthy), however I wished to conclude by displaying how studying JS has helped me re-learn Ruby options that I hardly ever use. Listed below are two examples.
Object destructuring
In JS:
const obj = { first: "Willard", center: "Wilbur", final: "Wonka" }
const { first, final } = obj
Do you know Ruby can do one thing related with hash destructuring?
obj_hash = { first: "Willard", center: "Wilbur", final: "Wonka" }
# `=>` is the rightward project operator.
obj_hash => { first:, final: }
That is because of Ruby’s sample matching, which is definitely much more versatile than JS destructuring. (For extra complicated examples, see “Every part You Must Know About Destructuring in Ruby 3”.)
Notice, nevertheless, that there’s a proposal so as to add sample matching to JS.
Object literals
In JS:
const obj = {
first: "Willard",
final: "Wonka",
full() {
return `${this.first} ${this.final}`;
},
}
In Ruby, each object has a category, so there’s no concise method to outline a one-off object, proper?
My first try to show this flawed was so as to add a technique to an OpenStruct:
require "ostruct"
obj = OpenStruct.new(first: "Willard", final: "Wonka") do
def full = "#{first} #{final}"
finish
# Uh oh, that did not work as supposed!
# The `#full` methodology is not truly outlined.
obj.full
# => nil
It seems this solely works with a Struct:
Particular person = Struct.new(:first, :final) do
def full = "#{first} #{final}"
finish
obj = Particular person.new(first: "Willard", final: "Wonka")
obj.full
# => "Willard Wonka"
However now we’re practically within the territory of an specific class definition, removed from a JS-style one-off object.
OK, then only for enjoyable, how about we increase OpenStruct in order that it truly does one thing with that block?
require "ostruct"
class OpenStruct
def self.create_with_methods(**kwargs, &strategies)
open_struct = new(**kwargs)
open_struct.instance_eval(&strategies)
open_struct
finish
# Now add a shortcut syntax.
class << self
alias_method :[], :create_with_methods
finish
finish
# Or, OpenStruct.create_with_methods(...)
obj = OpenStruct[first: "Willard", last: "Wonka"] do
def full = "#{first} #{final}"
finish
This nonetheless doesn’t look as uniform as JS object literals, and performance-wise I’m positive Ruby is just not optimized for this kind of object. That’s as a result of it goes in opposition to the grain of Ruby, the place courses play a central function, as distinct from situations of them. In JS, with its prototype-based object mannequin, “courses” are syntactic sugar, and particular person objects are extra central than in Ruby. (On how and why that is so, it’s useful to examine JS’s early historical past.)
However we shouldn’t overstate the distinction: the JS and Ruby object fashions are literally related in how dynamic each of them are. This makes Ruby-to-JS compilers like Opal simpler to implement, in accordance with an Opal maintainer.
Ultimately, studying extra JS has given me a deeper appreciation of each JS and Ruby: JS for the ingeniously easy thought behind its object mannequin, and Ruby… for all the pieces else 😄
