Modern Front-End Development for Rails: Hotwire, Stimulus, Turbo, and React
- Length: 350 pages
- Edition: 1
- Language: English
- Publisher: Pragmatic Bookshelf
- Publication Date: 2021-07-20
- ISBN-10: 1680507214
- ISBN-13: 9781680507218
- Sales Rank: #1613769 (See Top 100 Books)
Improve the user experience for your Rails app with rich, engaging client-side interactions. Learn to use the Rails 6 tools and simplify the complex JavaScript ecosystem. It’s easier than ever to build user interactions with the Webpacker gem and Stimulus. You can add great front-end flair without much extra complication. Add React to build an even more extensive 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 6 simplifies client-side integration with the Webpacker gem. It’s the default tool for building client-side assets for use by web browsers. Learn how to use Rails 6 and Webpacker 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. Add in some React, a popular framework that automatically updates the browser when your data changes.
Learn the basics of webpack, Webpacker, 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 6.0+, React 16.8.0+. Other dependencies will be added by Rails.
About the Pragmatic Bookshelf Table of Contents Change History Beta 9—June 9, 2021 Beta 8—April 27, 2021 Beta 7—March 11, 2021 Beta 6—August 11, 2020 Beta 5—June 5, 2020 Beta 4—March 23, 2020 Beta 3—February 9, 2020 Beta 2—December 4, 2019 Beta 1—October 30, 2019 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 Part 1 Getting Started Chapter 1: Getting Started with Client-Side Rails Managing State and Front-End Development Configuring Webpacker Using Webpacker What’s Next Chapter 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 Chapter 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 Chapter 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 Chapter 5: Cascading Style Sheets Building CSS in webpack Adding CSS and Assets to webpack Animating CSS Adding CSS Transitions Animating Turbo Streams with Animate.css Using CSS and React Components What’s Next Part 2: Going Deeper Chapter 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 Chapter 7: webpack Understanding Why webpack Exists Managing Dependencies with Yarn Understanding webpack Configuration What’s Next Chapter 8: Webpacker Webpacker Basics Writing Code Using Webpacker Integrating Webpacker with Frameworks Running webpack Deploying Webpacker in Production Customizing Webpacker What’s Next Part 3: Managing Servers and State Chapter 9: 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 Chapter 10: Immediate Communication with ActionCable Installing ActionCable Turbo Streams and ActionCable Stimulus and ActionCable React and ActionCable What’s Next Chapter 11: Managing State in Stimulus Code Using Data Values for Logic Observing and Responding to DOM Changes Rendering CSS with Data Attributes What’s Next Chapter 12: Managing State in React Using Reducers Using Context to Share State Adding Asynchronous Events to Contexts What’s Next Chapter 13: Using Redux to Manage State Installing and Using Redux Adding Asynchronous Actions to Redux What’s Next Part 4: Validating Your Code Chapter 14: 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 Chapter 15: Testing with Cypress Why Cypress? Installing Cypress Configuring Cypress and Rails Writing Our First Test Understanding How Cypress Works What’s Next Chapter 16: More Testing and Troubleshooting Writing More Cypress Tests Testing the Schedule Filter Cypress and React Cypress Utilities and API Troubleshooting What’s Next Appendix 1: Framework Swap The All-Hotwire App The All-React App Comparison
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.