Home>Courses>Rails for Front-end Development: Essential Tools

Rails for Front-end Development: Essential Tools

Gain insights into using Rails Webpacker, Webpack, and TypeScript to build applications. Learn about Stimulus and React for rich interactions, state management, testing, and troubleshooting.

Intermediate

120 Lessons

25h

Certificate of Completion

Gain insights into using Rails Webpacker, Webpack, and TypeScript to build applications. Learn about Stimulus and React for rich interactions, state management, testing, and troubleshooting.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

68 Playgrounds

15 Quizzes

Course Overview

What You'll Learn

Course Content

Apply Your Skills

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 acquainted with Stimulus and React which will help with creating richer interactions. In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your...Show More

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript. To kick t...Show More

TAKEAWAY SKILLS

React frontend in Rails

Ruby Gem's Management

Webpacker

What You'll Learn

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

Course Content

Getting Started

3 Lessons

Get familiar with enhancing Rails apps with Hotwire, Turbo, Webpacker, and React.

Introduction to the Course

Understanding the Application

Course Organization and Tools

Client-side Rails

7 Lessons

Get started with Rails client-side tools, state management, client logic, and Webpacker configuration.

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

Turbolinks

8 Lessons

Master the steps to leverage Turbo for enhancing Rails app interactivity and performance.

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

Stimulus

11 Lessons

Grasp the fundamentals of Stimulus for enhancing HTML interactivity with minimal JavaScript.

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

React

9 Lessons

Deepen your knowledge of integrating React components with Rails, emphasizing state management and interactivity.

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

Cascading Style Sheets

9 Lessons

Follow the process of integrating and managing CSS in modern Rails front-end development.

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

TypeScript

7 Lessons

Build on TypeScript's type annotations for enhanced code safety and error reduction.

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

Webpack

4 Lessons

Step through using Webpack, Yarn, and Webpacker to optimize Rails front-end development.

Introduction to webpack

Overview of Yarn

Understanding webpack Configuration

Quiz Yourself on webpack

Webpacker

4 Lessons

Walk through using Webpacker for efficient asset management in Rails development and production.

Introduction to Webpacker

Webpacker in Development

Webpacker in Production & Customizing Webpacker

Quiz Yourself on Webpacker

10.

Talking to the Server

7 Lessons

Master the steps to effective client-server communication using Turbo Frames, Stimulus, and React.

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

5 Lessons

Break down complex ideas related to integrating ActionCable with Turbo, Stimulus, and React for real-time updates.

Introduction to ActionCable

Turbo Streams and ActionCable

Stimulus and ActionCable

React and ActionCable

Quiz Yourself on ActionCable

12.

Managing State in Stimulus Code

5 Lessons

Take a closer look at managing state within Stimulus code using the DOM and data attributes.

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

7 Lessons

See how it works to manage global state in React using context, reducers, and hooks.

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

4 Lessons

Approach managing state in React with Redux for better asynchrony and clarity.

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

8 Lessons

Step through TypeScript's advanced typing for robust code validation and error reduction.

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

8 Lessons

Get started with Cypress for end-to-end testing and integration in Rails applications.

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

4 Lessons

Examine advanced testing and troubleshooting methodologies using Cypress for Hotwire and React applications.

Introduction to Testing and Troubleshooting Basics

Cypress and React

Cypress Utilities, APIs, and Troubleshooting

Conclusion

18.

Appendix

10 Lessons

Grasp the fundamentals of comparing Hotwire and React, and learn app implementation using Rails, Stimulus, and ActionCable.

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

Course Author

The Pragmatic Programmers

Project

Create a Bill Split Application Using Ruby on Rails

intermediate

1 hour

Project

Create a Bill Split Application Using Ruby on Rails

Learn to build a bill-splitting application using Ruby on Rails, focusing on group management and expense tracking.

intermediate

1 hour

Project

Use RSpec to Write Efficient Test Cases in the Rails Application

beginner

1 hour

Project

Use RSpec to Write Efficient Test Cases in the Rails Application

Learn to write efficient test cases using RSpec in the Ruby on Rails application to establish a strong foundation for creating high-quality software solutions.

beginner

1 hour

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath