00:00:00.000
Oh hello! Hey everybody, how's it going? That was rhetorical. Alright, so welcome to 'Six Degrees of JavaScript on Rails'. I'll introduce myself in a second, but while people keep filing in, I'm going to tell a short joke for you guys.
00:00:18.170
The other day, I was going to a museum and I was really excited; I was looking forward to it. It was an Etch-a-Sketch museum, you see, with all this fabulous Etch-a-Sketch art. But there was an earthquake that day, so by the time I got there, it was way too abstract for me to understand any of it. Anyway, that has nothing to do with any of this, but you can try to read into it super hard if you want. Anyway, let's get started.
00:00:57.690
So, who am I? My name is Michael Crismali. I work at a company called Duh Mine Software. I started there as an apprentice after finishing a code boot camp at Starter League, now in Chicago. I'm currently a senior developer there and I've had lots of good times with lots of good people. You can find me on GitHub under my last name, Crismali. I would have put my Twitter handle up here, but I don't tweet or go on Twitter, so don't waste your time.
00:01:32.549
Cool! So, there are six degrees of JavaScript on Rails. Let's get into it! I went super hard on the page flip animation too, so get used to it!
00:01:47.310
So why should you care about this? Well, there are a few reasons for that. The first one is that JavaScript isn't escapable; it's coming for everything and can run natively, it's everywhere. Learning to get along with it will make your life a lot easier. Especially for us as Rails developers primarily working in web applications, there are certain things only JavaScript can do for us.
00:02:14.270
A big problem I've found across the industry and among different teams is that because everyone has to use JavaScript, but everyone has a preferred back-end framework—like Ruby on Rails or whatever—JavaScript often tends to end up being a second-class citizen in your application, something you use just to fulfill a requirement, like adding a little animation or a flash message that fades away. You get in, you get out, and it doesn’t look very pretty, but you don’t have to see it again.
00:02:46.340
Most of us are on teams with people of varying skill levels and comfort with JavaScript. For example, someone more experienced might be pushing the team toward one of those sleek new single-page applications or a progressive web application, or whatever the latest acronym is that everyone wants to build. Meanwhile, other team members might be used to jQuery or may not know anything about JavaScript, and all these different skill levels have to work together.
00:03:05.600
This creates a false choice between two extremes; you either stay as vanilla Rails as possible and avoid the asset pipeline as much as you can, or you go all-in and build a Rails API, setting up a second JavaScript-only single-page app and all the deployment that entails. It’s a difficult choice to make when you have team members who may not know the same things.
00:03:41.240
A single-page app has some amazing user interaction capabilities, but if only one person on the team knows how to implement them, things aren’t going to go well! Luckily, you don’t have to choose just between vanilla Rails and a single-page web application. Instead, you can mix it up.
00:04:00.210
As a side note, there’s actually a possibility of a secret seventh degree, but my talk is about six degrees because it makes a lot more sense than 'seven circles' for naming reasons. Also, there will be no Kevin Bacon references in this talk, so if you're waiting for that, it's not going to happen.
00:04:27.930
The first degree is unobtrusive JavaScript. This is JavaScript that works out of the box in basically every Rails application. You'll see, as you pass some fun command-line arguments to `rails new`, that it's pretty simple to get started. You can get away with not knowing any JavaScript to create basic user interactions. In fact, a lot of the time you don’t even recognize that you’re using it. For example, one time I forgot about unobtrusive JavaScript when I couldn't just set a method on an `a` tag to get a delete action. The classic example of unobtrusive JavaScript is getting a nice confirm box to ensure that people really want to delete something.
00:05:56.080
People often create multiple instances of an object by just clicking a button repeatedly, so features like disabling buttons on sign-in can help prevent this kind of bug. Generally, anyone proficient in Rails can work with unobtrusive JavaScript and be fine. The next step up requires jQuery or some widgets spread across your page—this is classic JavaScript development in Rails applications.
00:06:36.900
Usually, you end up mixing a few script tags without much organization, which can lead to a mess of JavaScript that becomes hard to manage. If you're clever, you may have a naming heuristic for organizing your classes, making certain elements behave automatically. Common examples include type-ahead searches or custom dropdowns. If this expands greatly, it leads to a point where scripts collide, and you're essentially operating in a congested global namespace.
00:07:03.800
To escape this 'jQuery soup', which is often referred to, you need to start adding some structure. One library that helps resolve this problem is Stimulus, a framework by Rails that enables you to add structure to your JavaScript. Before, you likely weren’t testing your JavaScript, maybe only running system tests; but at this point, things become more organized, allowing you to begin adding unit tests.
00:08:04.920
When organizing JavaScript, you’ll generally be adding a lot of data attributes into the DOM, as most solutions involve numerous data attributes. While you don't need a web hacker for this, care must be taken to ensure you do not overwrite global variables in the asset pipeline, as that can result in potential conflicts. This is also the stage where you might start integrating Webpacker into your application to utilize modern JavaScript features. For instance, when adding a Stimulus controller, you can define data attributes that connect elements in the DOM to your JavaScript functionality.
00:09:12.390
Here’s a simple example of a Stimulus controller. At the top, notice we have a div with a data attribute indicating this controller is called 'clipboard'. Stimulus takes care of connecting the HTML element to the JavaScript. We specify the source input tag and its functionality within this controller. This controller allows interaction and invocation of functions based on events, hence elegantly managing any actions triggered by user interactions.
00:10:37.780
As teams become more advanced with JavaScript, it’s common to dabble with frameworks for more complicated interactions. You may have interactions where you don’t want to rely purely on jQuery for custom dropdowns but rather implement your own. For the rest of this talk, most of my examples involve React, as that is my area of expertise.
00:11:26.570
The sprinkling of a framework typically involves controlling parts of the page, not driving all user interactions. Most interactions still happen on the Rails side, enabling teams to ease into JavaScript frameworks over time. A good example is a comment bubble where you keep track of state within your component and render dynamically using JavaScript.
00:12:20.200
Moving on, framework pages are a higher evolution where JavaScript takes greater control of the application. Here, you will manage more complex interactions, and JavaScript will heavily influence how information is displayed and manipulated. The usage of frameworks can lead to sparse Rails templates as there’s less reliance on the server for rendering.
00:13:16.580
This brings us to the sixth degree, which is essentially having a single-page application running inside your Rails app. In this setup, you would handle the majority of client-side routing and gain the full benefits of a single-page app while minimizing complications in your deployment process. This means you can keep your app organized without having to worry about extensive deployment complications, like managing separate hosting for your JS app.
00:14:09.020
Your Rails app may not have any data manipulation, but it can handle complex client-side interactions seamlessly. As a recap, the six degrees, in order, include unobtrusive JavaScript, jQuery and widgets, structured JavaScript with Stimulus, adding a little bit more framework controls, and finally going all in on a framework. You can combine these degrees rather than being locked into one path, ensuring each member of your team can work in a manner that aligns with their skills and comfort level.
00:15:41.730
Make sure to be cautious when forwarding routes; you can accidentally end up with unnecessary complexities. I’ve put together a list of resources for further learning: deadline.com, blog posts related to JavaScript and frameworks, and resources for learning about jQuery, Stimulus, and Webpacker. As always, there are tons of resources for React and Angular as well.
00:16:24.036
After the talk, I’ll be available for any questions or comments, so feel free to come up and say hi. And that’s the end.