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!