Using JavaScript from the Future in Your Rails App Today

Ruby

Steve Kinney

1 talk

#frontend-development

Using JavaScript from the Future in Your Rails App Today

by Steve Kinney

In this session titled "Using JavaScript from the Future in Your Rails App Today," Steve Kinney presents the advancements in JavaScript, particularly ECMAScript 6 (ES6), and how these features can greatly enhance the developer experience, especially for those familiar with Ruby. Kinney, an instructor at the Turing School of Software and Design, highlights the evolution of JavaScript from a niche language to the world's most popular programming language, while acknowledging its past complexities that often left developers feeling frustrated.

Key points discussed include:

- JavaScript's Origin and Evolution: Initially, JavaScript was perceived as a sidekick to Java, with many quirks that made it less user-friendly. Its evolution through specifications like ECMAScript illustrates significant changes, particularly with the introduction of ES6.

- Important Features in ES6:

- Variable Declarations: Shift from 'var' to 'let' and 'const' which helps clarify scope and prevent errors. Kinney illustrates how using 'let' significantly improves handling loops and event listeners.

- Template Strings: The introduction of backticks for string concatenation allows for cleaner syntax and string interpolation, simplifying code readability and maintenance.

- Arrow Functions: Provides a more concise syntax and solves common issues related to the 'this' keyword, making function declarations clearer and less prone to scope issues.

- Class Syntax: ES6 introduces an intuitive way to create classes, improving the ability to manage inheritance and object-oriented programming features similarly to Ruby.

- New Operators and Defaults: Features like the spread operator and default parameters streamline function definitions and handling of variable-length arguments, making coding more efficient.

- Integration with Rails: Developers can immediately utilize ES6 features in their Rails applications through tools like Babel, which transpile modern JavaScript into versions compatible with older browsers. Kinney emphasizes the seamless adoption of these features into existing workflow processes within Rails.

Kinney concludes by encouraging the audience to embrace these new features, promising that they will make JavaScript a language that developers can enjoy using, much like Ruby. The session serves to bridge the gap between the frustrations of past JavaScript versions and the promising future with features that enhance usability and development efficiency.

00:00:11.559 Hello, my name is Steve, and I am an instructor at the Turing School of Software and Design out in Denver, Colorado. We are a seven-month developer training program, a not-for-profit that takes people who want to become developers and turns them into the absolute best developers they can be. If you are interested in mentoring some of our students—maybe on their first Rails app, their second, third, or fourth Rails app, or working with some TDD or backend services—please come talk to me after this about mentoring. You do not have to live in Colorado; you should, it’s great, the weather's wonderful, but you do not have to live here.

00:00:36.239 Also, if you are looking to hire really amazing apprentices and junior developers, we can help you with that too. So, come talk to me after this and we’ll discuss it a little more. So, I was a liberal arts major, not a computer science major, and I majored in sociology. I’m really interested in the origin story of programming languages. You’d think with something that’s just ones and zeros there would be a right answer for how you do programming, but it turns out there’s not.

00:01:08.600 There are a bunch of trade-offs. There's only one version of physics, but we have about 9,000 languages. So, I’m really interested in the decisions and priorities that led languages to where they are today. For example, consider Ruby. It’s not the fastest language in the world, but the trade-offs made resulted in a language that is simple and beautiful—a language you enjoy programming in and that makes you happy. Those are Ruby’s priorities as a language, unlike other languages which may have different priorities, like needing to get a job done in 10 days or needing to look like Java.

00:01:36.920 JavaScript started out as the sidekick to Java. We were all going to use Java applets to build rich client-side applications in the browser, but that didn’t work out particularly well. JavaScript began as a niche, some might say ‘toy’ language alongside Java, and it rode on the coattails of a framework to gain popularity. This serves as the cornerstone of this talk: JavaScript is a language that we can all admit was not without its rough edges.

00:02:14.640 It’s filled with oddities, such as the infamous ‘one weird trick’ for iterating over an object's properties. We ask, what is equality, even? What is a ‘number not a number’? Not a number is not equal to not a number! In my experience teaching JavaScript, I’ve found that all students didn’t feel super comfortable with JavaScript, despite feeling comfortable in Ruby. You might think it’s roughly the same since there are conditionals, but one reason they struggled is that you have to memorize a set of tricks and hacks to get anything done in the language.

00:03:22.920 As JavaScript evolved, moving from this kind of accidental world’s most popular language, there was a growing need to address these concerns. The JavaScript language is standardized in a spec called ECMAScript. The first version was released in 1997, with the second in 1998. By 1999, we had exception handling and regular expressions, and work began on ECMAScript 4, which was meant to introduce modules, classes, and a bunch of other cool features to fill out the peculiarities of the language. However, that version never shipped.

00:05:41.199 In the interim, some side work on a spec called 3.1 emerged, which became ECMAScript 5. Between 1999 and 2007-2008 when ES5 started rolling out, the web transformed. It became something that powered Gmail and many other rich client-side applications on the internet. When we arrived at ECMAScript 6, it represented the first major overhaul of the language in a very long time. It introduces classes, modules, and many useful features, in addition to a change of approach in how JavaScript functions as a living standard.

00:06:53.360 JavaScript now evolves continuously with a set of features that we can work on and release into browsers at an annual pace. One of the foundations that I think is important is that Ruby got its syntactic sugar right. Doing the thing you expect it to do can significantly change your experience with a language. There are a multitude of features that enhance the language and introduce functionalities that aren’t present in other languages. Today, I want to focus on the foundational changes that make JavaScript a more reliable and enjoyable experience.

00:08:07.520 I want to start with some changes to the semantics of the language, which may not be the most exciting part, but it's really important and will come up frequently. In JavaScript, we have the keyword 'var'. In Ruby, you simply say 'x equals 2' to declare a variable and assign it, which is straightforward. But in JavaScript, we use 'var,' partially due to the influence of Java’s syntax. Java is a statically typed language, so you might say ‘int’ or ‘char,’ whereas in JavaScript, 'var' behaves differently.

00:08:41.560 When writing code, the interpreter goes through the lines and hoists variable declarations to the top, meaning that ‘x’ is defined implicitly before the code execution even starts. This can lead to confusion as code grows in complexity. In ES6, we introduced a new keyword called 'let,' which does what you'd expect—if you don't declare 'x,' it will throw an error. This change improves clarity and helps prevent unexpected behavior. It's a subtle yet significant improvement for developers.

00:09:30.919 Let’s take an example where we have multiple buttons and want to add an event listener. If we were to use 'var,' all buttons would log the same value repeatedly. However, if we use 'let' instead, each button will log its intended value, which is a major improvement. This fundamentally changes how we reason about scope in JavaScript. The tagline for 'let' could be, 'It’s like 'var,' except it actually does what you think it's going to do.' This functionality also brings 'const,' which is similar to 'let,' except you cannot reassign it.

00:10:48.560 As a JavaScript teacher, one of my least favorite aspects is string concatenation. It often leads to bugs, especially when we work with jQuery. If I forget to add a plus sign in concatenation, it can become very frustrating. ECMAScript 6 introduced template strings, which use backticks instead of quotes and allow for easier string construction—and, more importantly, they support string interpolation. You can embed variables and expressions in string literals in a clean and clear way.

00:12:32.920 This makes code more readable and easier to maintain. With template strings, we can write HTML-like structures directly in our JavaScript, which makes our intentions much clearer. Template strings aren't just for interpolation; we can create tagged template functions. This allows us to manipulate inputs and sanitize user-generated content—a significant enhancement in terms of safety and functionality.

00:14:41.360 Now, let’s play a game called 'Guess What This JavaScript Does.' We will use an array and iterate over it. You would expect it to log 1, 2, and 3, but it actually returns undefined because JavaScript does not implicitly return values in anonymous functions. Adding an explicit return statement will give you the expected output.

00:15:17.760 With Arrow functions introduced in ES6, we can write more concise and cleaner syntax. With just one argument, we can omit parentheses, and the functions implicitly return values just like Ruby blocks. Arrow functions also lexically bind the current scope, eliminating issues of the ‘this’ keyword that often confuse developers. They make our code clearer and mitigate scope-related issues that were present in earlier iterations of JavaScript.

00:17:03.440 In addition to these improvements, ES6 also introduced a cleaner way to define methods on objects. Classes in JavaScript now provide syntactical sugar over prototypal inheritance. This means that creating objects, constructors, and attached methods is simpler and more intuitive.

00:18:34.679 With ES6, we can define a class, use a constructor similar to Ruby's initialize, and manage inheritance more naturally. This addresses many issues of the past where using constructors without the ‘new’ keyword would lead to global variables and undefined states. The class definition is more explicit, ensuring that we adhere to the expected behavior.

00:19:43.760 For inheritance, you can easily extend classes and use superclass constructors to initialize your objects. You also have the option to override methods and call the superclass's methods conveniently. This leads to cleaner code and better organization.

00:21:39.200 In terms of getting properties and avoiding confusion, ES6 provides getters and setters, which lets us interact with object properties without worrying about making method calls. This approach, similar to Ruby’s design, greatly enhances usability.

00:22:37.560 ES6 offers even more syntactic sugar for everyday coding. We now have features like the spread operator to create actual arrays from arguments, making it simpler to work with variable-length parameters. This addresses a common headache for developers transitioning to JavaScript.

00:23:29.520 With the enhancement of default parameters, working with functions becomes smoother. Now you can easily define defaults right in your function signature. The good news is you don’t have to memorize all these intricate tricks; you can write cleaner and more efficient code right away.

00:25:38.240 All these features are ready to use now! There's no need to wait for support from Chrome Canary or Firefox Nightly. Frameworks like Ember already integrate these benefits. Even in an average Rails application, you can leverage these ES6 features immediately through transpilation—thanks to tools like Babel that compile ES6 into compatible JavaScript for older browsers.

00:27:19.720 As JavaScript evolves, it's essential to integrate these features into everyday coding. The process with Rails is straightforward; by installing the necessary gems, you can start utilizing ES6 features almost instantly within your projects. This exciting transition allows developers to take part in shaping the future language standards as well.

00:29:41.640 So, thank you for your attention, and I hope you will embrace these new features and enhancements in your Rails applications, making JavaScript a language you enjoy using just as much as Ruby.