Ruby Video | ActionCable, Rails API and React

Talks

ActionCable, Rails API and React - Modern Single Page Apps

Vipul A M

#single-page-applications-spa

#real-time-applications

#frontend

#ruby-on-rails

ActionCable, Rails API and React - Modern Single Page Apps

by Vipul A M

In this presentation titled "ActionCable, Rails API and React - Modern Single Page Apps," Vipul A M explores the integration of ActionCable, Rails API, and React for building modern single-page applications. He begins by providing context on the advancements in Rails 5, emphasizing its evolution to support the current web ecosystem. The introduction of ActionCable and the Rails API framework allows developers to create modular applications that handle real-time updates efficiently.

Key points discussed include:

Transition from Monolithic to Modular Architectures: Vipul explains how traditional Rails applications have evolved from monolithic structures to more modular designs, where the frontend and backend can function independently.
API Only Applications: He outlines the benefits of using Rails to create API-only applications, which serve as backends for various types of clients, including web and mobile applications. The API only configuration streamlines the application, removing unnecessary views and focusing on delivering JSON data directly.
ActionCable Functionality: ActionCable is presented as a significant feature of Rails 5, enabling WebSocket-based real-time communication. Vipul describes how ActionCable supports a publisher/subscriber model for effective data sharing between the server and clients, reducing the need for constant polling and enhancing application responsiveness.
Frontend Integration with React: The presentation highlights the synergy between Rails APIs and React, showcasing how React components can handle real-time data updates received via ActionCable. By leveraging React’s component-based structure, developers can create efficient user interfaces that automatically update in response to server-side changes.
Example Application Demo: Vipul demonstrates a simple application that utilizes ActionCable alongside React to showcase real-time updates in action. This included interaction between different users within the same application, showcasing how dynamic user interfaces can be maintained.

The conclusion emphasizes the effectiveness of combining these technologies to create scalable and efficient web applications. The shift towards modular architecture not only enhances the performance of applications but also aligns with modern development practices, enabling developers to build robust client-server interactions efficiently without compromising on user experience.

00:00:23.510 Hello, everyone! Today, I have a super interesting slot given to me just after lunch. So if you're feeling sleepy, don't worry!

00:00:34.050 My name is Vipul, and I go by the handle "piblo" on Twitter and GitHub. I am part of the Rails Issues team, where I triage serious issues and contribute to the Rails community.

00:00:47.730 When I'm not contributing to Rails, I spend most of my time at my company, BigBinary. We are a completely remote team, with most of our members working from different countries, mainly India.

00:01:04.559 This is my second time in Taiwan. I was here last year and spoke about Yaks at RubyConf.

00:01:16.380 Last time I learned that the weather in Taiwan can be quite unpredictable. Everyone kept mentioning that the weather was hot and that there was a chance of rain in the afternoon. Coming in from a summer city, I was not sure what to expect.

00:01:31.770 This trip, I checked the weather ahead of time because when I travel to the United States, checking the weather is my first priority.

00:01:38.369 I saw that the temperature in Taiwan was around 30 degrees Celsius, which puzzled me. Compared to Pune, where I live, it was cooler by about six or seven degrees.

00:01:50.579 The surprising weather comparison continues with a family member who resides in a city near 42 degrees Celsius, so I thought to myself, "Wow, I'm in for a winter vacation!"

00:02:02.850 And that gives me the reason to wear a warm outfit because yesterday I was feeling quite cold.

00:02:12.740 Now, moving on to the topic of today's presentation. I'm going to speak about the architecture involved with ActionCable, Rails API, and React, and the different components involved in this setup.

00:02:27.230 We'll take a closer look at how to achieve isolated components that can interact with each other. Traditionally, when you built a Rails app, everything was kind of a monolith, and there weren’t clear separations.

00:02:38.750 Previously, you would have a single model with your Rails app handling all the representation logic, backing logic, views, etc.

00:02:45.110 As we moved forward, we started adopting different architectures, including microservices. Today, I'm not going to delve into those architectures but instead focus on distributing a Rails application.

00:02:51.610 We will explore how you can separate your main Rails application from your front-end services and how they can consume resources from an API.

00:03:04.070 Traditionally, we used to have a monolithic Rails application. However, towards the end of the last decade, many services began to emerge that primarily serve small pieces of data rather than large HTML pages.

00:03:15.320 This revelation led to the understanding that instead of sending entire views, we could send just the necessary JSON parts over the wire.

00:03:28.400 So, today I'll briefly discuss this in a simplified version—you can nap after five minutes!

00:03:35.210 Our focus will be on Rails API—specifically API-only applications and how they can work with ActionCable and various other services.

00:03:45.110 We'll look into peripheral services, including exporting using JSON, and analyze how to implement ActionCable for real-time updates along with authentication methods.

00:04:03.060 The basic API we use is a slimmed-down version of Rails. It focuses on data manipulation rather than displaying views.

00:04:10.430 The goal here is to structure our Rails applications to consume data efficiently through various services, which can include React, Angular, or any other front-end technology.

00:04:23.300 The shift towards supporting various front-end frameworks is crucial. Rails 5 embraces this change by introducing API-only applications and integrating services like ActionCable.

00:04:38.400 With Rails 5, we can build lean applications, enabling developers to focus solely on APIs without the burden of unnecessary middleware.

00:04:52.060 API-only applications streamline many processes. They remove views and reduce complexity while allowing us to adopt a service-oriented architecture.

00:05:07.100 Now, when creating a new Rails API application, we can simply run a command with a flag.

00:05:12.740 By using the command "rails new app_name --api", we create a streamlined API application that minimizes additional overhead.

00:05:30.070 It is essential to identify how API apps differ from the standard Rails applications. The API applications eliminate unnecessary views, keeping only the necessary data management.

00:05:45.480 Another aspect to consider is ActionCable, which enables real-time features in our applications by using WebSocket-based communication.

00:06:00.320 This allows for efficient handling of updates and interactions. I'll also introduce crucial components of ActionCable, including connections, channels, and subscriptions.

00:06:12.740 Connections are established between clients and server-side WebSocket services, allowing real-time messaging and updates without overwhelming our server.

00:06:27.930 In terms of channels, think of them as specialized pathways that enable structured communication based on context—like chat rooms or notifications.

00:06:40.140 Subscriptions are created when the client asks to listen to specific updates. When an event occurs, clients subscribed to that channel receive the data.

00:06:51.740 By utilizing ActionCable in our applications, we ensure efficiency in how information is transmitted to clients. It streamlines communication while keeping the application responsive.

00:07:05.180 Next, I will explore how ActionCable maintains its connections. A client connects to the server, which subsequently opens communication channels for transmitting updates.

00:07:18.670 On the client side, we build components that can subscribe to those channels for receiving updates. Using JavaScript or CoffeeScript, we can handle interactions efficiently.

00:07:32.610 Now, concerning the server-side logic, there are three vital components—connections, channels, and subscriptions. By using these, we create a seamless experience.

00:07:43.470 Connections to Redis help maintain event messages flowing correctly between clients. Channels guide those updates, while subscriptions indicate who is interested in receiving that information.

00:08:01.390 The end-goal is to have a smooth operational flow throughout our application without any delays. Let’s talk about making an efficient ActionCable service in your application.

00:08:14.339 One key takeaway here is the need for security—configuring your Rails app to allow connections from only trusted origins is vital for protecting your resources.

00:08:27.890 By configuring the Cross-Site Request Forgery (CSRF) correctly, we can ensure our WebSocket service operates safely—disabling CSRF specifically for ActionCable.

00:08:35.940 When it comes to deploying your ActionCable service, Puma is recommended as the server to handle concurrent requests effectively.

00:08:50.900 This setup allows multiple active WebSocket connections to cover diverse client loads efficiently while maintaining optimal performance.

00:09:06.660 Integrating ActionCable with frameworks like React, Angular, or any other modern solution can make the development process seamless and well-structured.

00:09:19.420 In summary, we aim to create isolated, modular applications that exchange data in real-time without unnecessary overhead and complexity.

00:09:29.660 This modular approach is perfect for when clients have existing applications and want to extend them without losing performance.

00:09:38.480 I'll now provide code examples and two demos showcasing the application functionalities and how they integrate together.

00:09:44.340 Before we get into the demos, who's still awake? Can I get a cheer? Let me show you the first demo, which involves a Rails application utilizing ActionCable.

00:09:59.740 In this basic application, we have users logging in to listen and send comments in real-time, utilizing Rails and WebSocket features together.

00:10:09.360 Likewise, we'll see how comments made by one user are reflected in real-time to all other connected users.

00:10:17.770 Through this interaction, every time a comment is made, it reflects instantly on other screens, showcasing ActionCable's capabilities.

00:10:24.710 Following this, we’ll explore a minimal Node.js application that can communicate with our Rails backend over WebSockets.

00:10:34.530 I'm excited to demonstrate this, particularly how efficiently both applications can work together seamlessly.

00:10:42.530 Alright, let’s dive into the demo! For our first demo, we're going to run a basic Rails server and see how easy it is to interact with.

00:10:53.250 With that, I'm going to switch to another screen and showcase how comments propagate across a chat-like interface.

00:11:03.170 Do you see how it's moving? This real-time interaction is crucial for a dynamic user experience. Amazing, isn't it?

00:11:12.610 And now, let’s observe how React.js can seamlessly integrate with this live interaction to provide a consistent experience across the board.

00:11:20.960 Through React, we can create reactive components that can listen and update according to changes made on the Rails server.

00:11:29.950 With this integration, not only do we keep the user interface updated, but we can also rely on less complex logic to manage state changes.

00:11:40.040 I will highlight the lifecycle methods used to manage our Reactive components' states as actions are performed.

00:11:49.990 Remember, in React, lifecycle methods dictate how and when our components will be rendered, perfectly fitting our use case.

00:11:59.680 Now, advancing to the core takeaway of the application, this modular and efficient structure will allow future expansion.

00:12:06.780 By leveraging APIs appropriately, we can create reactive systems that are both maintainable and extendable, meeting today's web demands.

00:12:16.550 Finally, I will now transition into questions and comments, sharing insights on how tailored solutions can facilitate effective application development.

00:12:28.570 Thank you all for your attention, and I look forward to your questions about this dynamic development approach.

00:12:43.060 Before wrapping up, let me discuss some various integrations you might consider, specifically focusing on adapting components for different data sources.

00:12:57.070 Adapting is especially relevant if you’re considering using third-party services or databases like Firebase or MongoDB as additions.

00:13:05.720 Moreover, we can easily expose just the required functionalities/ports where necessary, without creating heavy dependencies or bulky applications.

00:13:19.040 With that, I'm more than happy to answer your thoughts or clarify a specific point on using this modern approach.

00:13:30.109 As you can see, there is a myriad of opportunities depending on your needs, and it's easy to take the next step!

00:13:41.220 So feel free to fire away with any questions you may have regarding the implementation, challenges, or future explorations.

00:13:48.500 Thank you once again for attending this session on ActionCable, Rails API, and React! Let's continue to build great applications together!

Rails Pacific 2016