Cover image for Modern Front-End Development for Rails

Modern Front-End Development for Rails

Release Date: 2021/06/01
ISBN: 9781680508758
Topic:
0%
141
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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.

Table of Contents

  1.  Acknowledgments
  2.  So You Want to Write Some Client-Side Code
    1. Basic Assumptions
    2. The Tools We’ll Use
    3. How This Book Is Organized
    4. Let’s Build an App
    5. The Sample Code
  3. Part I. Getting Started
    1. 1. Getting Started with Client-Side Rails
    2. Managing State and Front-End Development
    3. Configuring Webpacker
    4. Using Webpacker
    5. What’s Next
    6. 2. Hotwire and Turbo
    7. The Hotwire Way
    8. Installing Turbo
    9. What Is Turbo Drive?
    10. Adding Interactivity with Turbo Frames
    11. Navigating Outside a Turbo Frame
    12. Extending Our Page with Turbo Streams
    13. Turbo Frames vs. Turbo Streams
    14. Lazy Loading a Turbo Frame
    15. What’s Next
    16. 3. Stimulus
    17. What Is Stimulus?
    18. Installing Stimulus
    19. Adding Our First Controller
    20. Creating an Action
    21. Adding a Target
    22. Using Values
    23. Automating Value Changes
    24. Stimulus Has Class
    25. Going Generic
    26. Stimulus Quick Reference
    27. What’s Next
    28. 4. React
    29. What Is React?
    30. Installing React
    31. Adding Our First Component
    32. Composing Components
    33. Connecting to the Page
    34. Interactivity, State, and Hooks
    35. Sharing State
    36. What’s Next
    37. 5. Cascading Style Sheets
    38. Building CSS in webpack
    39. Adding CSS and Assets to webpack
    40. Animating CSS
    41. Adding CSS Transitions
    42. Animating Turbo Streams with Animate.css
    43. Using CSS and React Components
    44. What’s Next
  4. Part II. Going Deeper
    1. 6. TypeScript
    2. Using TypeScript
    3. Understanding Basic TypeScript Types
    4. Static vs. Dynamic Typing
    5. Adding Type Annotations to Variables
    6. Adding Type Annotations to Functions
    7. Adding Type Annotations to Classes
    8. Defining Interfaces
    9. Type Checking Classes and Interfaces
    10. Getting Type Knowledge to TypeScript
    11. What’s Next
    12. 7. webpack
    13. Understanding Why webpack Exists
    14. Managing Dependencies with Yarn
    15. Understanding webpack Configuration
    16. What’s Next
    17. 8. Webpacker
    18. Webpacker Basics
    19. Writing Code Using Webpacker
    20. Integrating Webpacker with Frameworks
    21. Running webpack
    22. Deploying Webpacker in Production
    23. Customizing Webpacker
    24. What’s Next
  5. Part III. Managing Servers and State
    1. 9. Talking to the Server
    2. Using Stimulus to Manage Forms
    3. Stimulus and Ajax
    4. Using Data in Stimulus
    5. Acquiring Data in React with useState
    6. What’s Next
    7. 10. Immediate Communication with ActionCable
    8. Installing ActionCable
    9. Turbo Streams and ActionCable
    10. Stimulus and ActionCable
    11. React and ActionCable
    12. What’s Next
    13. 11. Managing State in Stimulus Code
    14. Using Data Values for Logic
    15. Observing and Responding to DOM Changes
    16. Rendering CSS with Data Attributes
    17. What’s Next
    18. 12. Managing State in React
    19. Using Reducers
    20. Using Context to Share State
    21. Adding Asynchronous Events to Contexts
    22. What’s Next
    23. 13. Using Redux to Manage State
    24. Installing and Using Redux
    25. Adding Asynchronous Actions to Redux
    26. What’s Next
  6. Part IV. Validating Your Code
    1. 14. Validating Code with Advanced TypeScript
    2. Creating Union Types
    3. Specifying Types with Literal Types
    4. Using Enums and Literal Types
    5. Building Mapped Types and Utility Types
    6. TypeScript Configuration Options
    7. Dealing with Strictness
    8. What’s Next
    9. 15. Testing with Cypress
    10. Why Cypress?
    11. Installing Cypress
    12. Configuring Cypress and Rails
    13. Writing Our First Test
    14. Understanding How Cypress Works
    15. What’s Next
    16. 16. More Testing and Troubleshooting
    17. Writing More Cypress Tests
    18. Testing the Schedule Filter
    19. Cypress and React
    20. Cypress Utilities and API
    21. Troubleshooting
    22. What’s Next
    23. A1. Framework Swap
    24. The All-Hotwire App
    25. The All-React App
    26. Comparison
3.141.24.134