Modern Front-End Development for Rails, Second Edition (Pragmatic Bookshelf)

PragmaticBookshelf
Combine Rails 7, TypeScript, Turbo, Stimulus, and React to build rich user interaction into your websites using the best of both server and client-side tools.

Noel Rappin @noelrappin

edited by Katharine Dvorak @katied

Improve the user experience for your Rails app with rich, engaging client-side interactions. Learn to use the Rails 7 tools and simplify the complex JavaScript ecosystem. It’s easier than ever to build user interactions with Hotwire, Turbo, and Stimulus. You can add great front-end flair without much extra complication. Use React to build a more complex set of client-side features. Structure your code for different levels of client-side needs with these powerful options. Add to your toolkit today!

It’s hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for integrating with them, all change continuously. Rails 7 simplifies client-side integration with the Hotwire gem. It’s a great way to build client interaction with server-side HTML and a small amount of JavaScript.

In the latest edition of this book, learn how to use Rails 7 and its front-end bundling tools to build rich front-end logic into your Rails applications. The job is even easier with Stimulus, a library that brings Rails conventions to JavaScript tools. And you can also add in React, a larger framework that automatically updates the browser when your data changes.

Learn the basics of Turbo, Stimulus, and TypeScript, and add pizazz to your application. Structure your web application to best manage your state. Learn how to interact with data on the server while still keeping the user experience interactive. Use the type system in TypeScript to expand on JavaScript and help prevent error conditions. Debug and test your front-end application with tools specific to each framework.

There are a lot of ways to do client-side coding, and Rails is here to help.


Noel Rappin is a Staff Software Engineer at Chime Financial. He is the author of multiple technical books including Rails 5 Test Prescriptions and Take My Money: Accepting Payments on the Web, and was the host of the Tech Done Right Podcast. Follow Noel on Twitter @noelrap, and online at noelrappin.com.


Don’t forget you can get 35% off with your Devtalk discount! Just use the coupon code “devtalk.com" at checkout :+1:

6 1323 2

Latest Threads About This Book Top

albertchae
Title: Modern Front-End Development for Rails, Second Edition P1.0 Hi @noelrappin , I am enjoying the book so far but just saw a few iss...
1 231 1
New
sekmo
@noelrappin Title: Modern Front-End Development for Rails, Second Edition - Chapt 2, “Extending our page with Turbo Streams” - when addi...
0 322 0
New
redross
The page starts with “TypeScripts uses a configuration file at tsconfig.json. Here’s the one we’ll start with” and then it gives the file...
0 391 0
New
bhtabor
Using ActionCable directly fixed the error: # appendix_hotwire/01/app/models/ticket.rb after_update_commit -> do ActionCable.serv...
0 474 0
New
NoobieOnRails
There’s a missing " on page 213. It’s also missing in the code too. It’s the closing " for the id attribute. I expect most people will cl...
0 421 0
New
jackparsons93
The part I have a question about is where in the book it says “Right now we need to update our dev scripts to use tsc-watch” What are ...
0 453 2
New
psantos
On page 52, example code chapter_03/04/app/javascript/controllers/favorite_toggle_controller.ts, which is: import { Controller } from "@...
0 865 7
New
NoobieOnRails
@noelrappin Title: Modern Front-End Development for Rails, Second Edition: Inputs look disabled or have placeholder text Example: Forms ...
0 516 0
New
meg-gutshall
@noelrappin Stimulus uses static class-level variables, which is a newer JavaScript feature that the our JavaScript preprocessor needs ...
0 561 1
New
meg-gutshall
@noelrappin In one paragraph, you write: A feature that makes using Turbo Streams easier from the controller side is that Rails recogn...
0 558 1
New

Most Active This Week Top

Most Active This Month Top

Most Active This Year Top

Most Active Last Three Years Top

PragmaticBookshelf
Combine Rails 7, TypeScript, Turbo, Stimulus, and React to build rich user interaction into your websites using the best of both server a...
6 1323 2
New
psantos
On page 52, example code chapter_03/04/app/javascript/controllers/favorite_toggle_controller.ts, which is: import { Controller } from "@...
0 865 7
New
EdwardCaulfield
Please use the following format for the title of this thread (then simply delete/replace this text with the content for the thread): Tit...
0 677 3
New
meg-gutshall
The last bullet point of the list reads: The simple form config file in config/intializers declares some CSS classes for form purposes...
0 606 1
New
meg-gutshall
Turbo Frames, by default, only captures the part of the response that matches the ID of the Turbo Frame that the request came from. “ca...
0 573 1
New
meg-gutshall
By adding the target attribute, you are changing the behavior or all links within the frame to redraw the target frame rather than the f...
0 593 1
New
bradmajewski
I’m looking at the code for “Debouncing User Input” and the submit function appears to be wrong. submit(): void { this.debounce(this.b...
0 595 1
New
meg-gutshall
@noelrappin Stimulus uses static class-level variables, which is a newer JavaScript feature that the our JavaScript preprocessor needs ...
0 561 1
New
meg-gutshall
@noelrappin In one paragraph, you write: A feature that makes using Turbo Streams easier from the controller side is that Rails recogn...
0 558 1
New
meg-gutshall
The wording for this paragraph is a bit confusing: A feature that makes using Turbo Streams easier from the controller side is that Rai...
0 550 1
New
NoobieOnRails
@noelrappin Title: Modern Front-End Development for Rails, Second Edition: Inputs look disabled or have placeholder text Example: Forms ...
0 516 0
New
bhtabor
Using ActionCable directly fixed the error: # appendix_hotwire/01/app/models/ticket.rb after_update_commit -> do ActionCable.serv...
0 474 0
New
jackparsons93
The part I have a question about is where in the book it says “Right now we need to update our dev scripts to use tsc-watch” What are ...
0 453 2
New
NoobieOnRails
There’s a missing " on page 213. It’s also missing in the code too. It’s the closing " for the id attribute. I expect most people will cl...
0 421 0
New
redross
The page starts with “TypeScripts uses a configuration file at tsconfig.json. Here’s the one we’ll start with” and then it gives the file...
0 391 0
New

Most Active Over Three Years Top

sekmo
@noelrappin Title: Modern Front-End Development for Rails, Second Edition - Chapt 2, “Extending our page with Turbo Streams” - when addi...
0 322 0
New
bjnord
@noelrappin Happy to see the 2nd Edition underway with Rails 7! In section “The Sample Code” it says chapter_01/01 is “probably the best...
0 642 3
New
albertchae
Title: Modern Front-End Development for Rails, Second Edition P1.0 Hi @noelrappin , I am enjoying the book so far but just saw a few iss...
1 231 1
New

Book Info

Publisher: Pragmatic Bookshelf

Are you this book's author? To be notified of all posts made about it, sign up an account then click here, then select 'watching' from the bell icon in the top right corner.

Get money off!

The Pragmatic Bookshelf

35% off any eBook

Simply use coupon code "devtalk.com" at checkout. See full details here.