Rails for Front-end Development: Essential Tools

Takeaway Skills

Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS

Learn how Turbolinks makes navigating your web application faster

Learn how Stimulus framework enhance static or server-rendered HTML as compared to other front-end frameworks

Understand how React and ActionCable allow you to change data without reloading the page

Learn how to manage state in Stimulus, React and Redux

Learn code validation and testing using Cypress

Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS

Learn how Turbolinks makes navigating your web application faster

Learn how Stimulus framework enhance static or server-rendered HTML as compared to other front-end frameworks

Understand how React and ActionCable allow you to change data without reloading the page

Learn how to manage state in Stimulus, React and Redux

Learn code validation and testing using Cypress

Course Overview

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript. To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquain... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Getting Started

Introduction to the Course

Understanding the Application

Course Organization and Tools

2. Client-side Rails

Introduction to Using Rails on the Client-side

Managing State and Front-end Development

Designing Around Client Logic & Patterns of Web Applications

Installation and Configuration of Webpacker

Configuration and Code Files

Using Webpacker

Quiz Yourself on Client-side Rails

3. Turbolinks

Introduction to Hotwire and Turbo

Adding Interactivity with Turbo Frames

What is Happening by Adding Interactivity?

Navigating Outside a Turbo Frame

Extending Our Page with Turbo Streams

Turbo Frames vs. Turbo Streams

Lazy Loading in a Turbo Frame

Quiz Yourself on Turbolinks

4. Stimulus

Introduction to Stimulus

Installing Stimulus

Adding Our First Controller

Creating an Action

Adding a Target

Using Values

Automate Value Changes

Stimulus Has Class

Going Generic

Stimulus Quick Reference

Quiz Yourself on Stimulus

5. React

Introduction to Using React with Rails

Installing React

Adding Our First Component

Composing Components

Connecting to the Page

Interactivity, State, and Hooks

Sharing State - Venue Component

Sharing State - Row & Seat Components

Quiz Yourself on Using React With Rails

6. Cascading Style Sheets

Introduction to CSS

CSS and webpack

Adding CSS and Assets to webpack

Animating CSS

CSS Transitions

Animating Turbo Streams with Animate.css

CSS and React Components

Dynamic Styled Components

Quiz Yourself on CSS

7. TypeScript

Introduction to TypesScript

Static versus Dynamic Typing

Variables and Type Annotations

Functions and Type Annotations

Classes and Type Annotations

Type Checking Classes and Interfaces

Quiz Yourself on TypeScript

8. Webpack

Introduction to webpack

Overview of Yarn

Understanding webpack Configuration

Quiz Yourself on webpack

9. Webpacker

Introduction to Webpacker

Webpacker in Development

Webpacker in Production & Customizing Webpacker

Quiz Yourself on Webpacker

10. Talking to the Server

Introduction to Talking to the Server

Improving Search Functionalities

Stimulus and Ajax

Using Data in Stimulus

Acquiring Data in React with useState

Passing Data through our React Code

Quiz Yourself on Talking to the Server

11. Immediate Communication with ActionCable

Introduction to ActionCable

Turbo Streams and ActionCable

Stimulus and ActionCable

React and ActionCable

Quiz Yourself on ActionCable

12. Managing State in Stimulus Code

Introduction to Managing State in Stimulus Code

Implementing a Data Store

Sorting Data and CSS Cascading

Rendering CSS with Data Attributes

Quiz Yourself on State in Stimulus

13. Managing State in React

Introduction to Managing State in React

Creating context in React

Using the Context

Using Props With Context

Context Reducer

Adding Asynchronous Events to Contexts

Quiz Yourself on Managing State in React

14. Using Redux to Manage State

Introduction to Managing State Using Redux

Using a Redux Store

Adding Asynchronous Actions to Redux

Quiz Yourself on Using Redux to Manage State

15. Validating Code with Advanced TypeScript

Introduction to Validating Code with Advanced TypeScript

Union Types and Type Guards

Specifying Types with Literal Types

Using Enums and Literal Types

Building Mapped Types and Utility Types

TypeScript Configuration Options

Dealing with Strictness

Quiz Yourself on Using Advance TypeScript

16. Testing with Cypress

Introduction to Testing with Cypress

Configuring Cypress and Rails

Writing Our First Test

Understanding How Cypress Works

Actions in Cypress

Assertions

TroubleShooting

Quiz Yourself on Testing with Cypress

17. More Testing and Troubleshooting Basics

Introduction to Testing and Troubleshooting Basics

Cypress and React

Cypress Utilities, APIs, and Troubleshooting

Conclusion

18. Appendix

Hotwire and React Comparison

The All-Hotwire App

Using Stimulus to Take Action

Receiving Commands with ActionCable

The All-React App

Responding to Filters

Animating Elements

ActionCable and React

Comparison between Hotwire and React

Congratulations