
Modern Front-End Development for Rails
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
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.
What You Need:
This book requires Ruby on Rails 7.0 or later, React 17.0.0 or later. Other dependencies will be added by Rails.
More details
Other editions
Additional editions

Content
- Cover
- Table of Contents
- Acknowledgments
- So You Want to Write Some Client-Side Code
- Basic Assumptions
- The Tools We'll Use
- How This Book Is Organized
- Let's Build an App
- The Sample Code
- Sample Code Troubleshooting
- What's Next
- Part I-Getting Started
- 1. Getting Started with Client-Side Rails
- Managing State and Front-End Development
- Configuring Rails for Front-End Development
- Running the App
- Adding TypeScript
- What's Next
- 2. Hotwire and Turbo
- The Hotwire Way
- Installing Turbo
- What Is Turbo Drive?
- Adding Interactivity with Turbo Frames
- Navigating Outside a Turbo Frame
- Extending Our Page with Turbo Streams
- Turbo Frames vs. Turbo Streams
- Lazy Loading a Turbo Frame
- What's Next
- 3. Stimulus
- What Is Stimulus?
- Installing Stimulus
- Adding Our First Controller
- Creating an Action
- Adding a Target
- Using Values
- Automating Value Changes
- Stimulus Has Class
- Going Generic
- Stimulus Quick Reference
- What's Next
- 4. React
- What Is React?
- Installing React
- Adding Our First Component
- Composing Components
- Connecting to the Page
- Interactivity, State, and Hooks
- Sharing State
- What's Next
- 5. Cascading Style Sheets
- Building CSS in cssbundling-rails
- Using Asset Files
- Animating CSS
- Adding CSS Transitions
- Animating Turbo Streams with Animate.css
- Using CSS and React Components
- What's Next
- Part II-Going Deeper
- 6. TypeScript
- Using TypeScript
- Understanding Basic TypeScript Types
- Static vs. Dynamic Typing
- Adding Type Annotations to Variables
- Adding Type Annotations to Functions
- Adding Type Annotations to Classes
- Defining Interfaces
- Type Checking Classes and Interfaces
- Getting Type Knowledge to TypeScript
- What's Next
- 7. Bundling
- Yarn Holds It All Together
- esbuild and Friends
- CSS Bundling
- Propshaft
- Import Maps
- What's Next
- Part III-Managing Servers and State
- 8. Talking to the Server
- Using Stimulus to Manage Forms
- Stimulus and Ajax
- Using Data in Stimulus
- Acquiring Data in React with useState
- What's Next
- 9. Immediate Communication with ActionCable
- Installing ActionCable
- Turbo Streams and ActionCable
- Stimulus and ActionCable
- React and ActionCable
- What's Next
- 10. Managing State in Stimulus Code
- Using Data Values for Logic
- Observing and Responding to DOM Changes
- Rendering CSS with Data Attributes
- Using Kredis to Store Short-Term State
- What's Next
- 11. Managing State in React
- Using Reducers
- Using Context to Share State
- Adding Asynchronous Events to Contexts
- What's Next
- 12. Using Redux to Manage State
- Installing and Using Redux
- Adding Asynchronous Actions to Redux
- What's Next
- Part IV-Validating Your Code
- 13. Validating Code with Advanced TypeScript
- Creating Union Types
- Specifying Types with Literal Types
- Using Enums and Literal Types
- Building Mapped Types and Utility Types
- TypeScript Configuration Options
- Dealing with Strictness
- What's Next
- 14. Testing with Cypress
- Why Cypress?
- Installing Cypress
- Configuring Cypress and Rails
- Writing the First Test
- Understanding How Cypress Works
- What's Next
- 15. More Testing and Troubleshooting
- Writing More Cypress Tests
- Testing the Schedule Filter
- Cypress and React
- Cypress Utilities and API
- Troubleshooting
- What's Next
- A1. Framework Swap
- Import Maps
- The All-Hotwire App
- The All-React App
- Comparison
- Index
- - SYMBOLS -
- - DIGITS -
- - A -
- - B -
- - C -
- - D -
- - E -
- - F -
- - G -
- - H -
- - I -
- - J -
- - K -
- - L -
- - M -
- - N -
- - O -
- - P -
- - Q -
- - R -
- - S -
- - T -
- - U -
- - V -
- - W -
- - X -
- - Y -
System requirements
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.