Crossing the Bridge: Connecting Rails and Your Front-End Framework

by Daniel Spector

The video titled 'Crossing the Bridge: Connecting Rails and Your Front-End Framework' presented by Daniel Spector at RailsConf 2015, explores best practices for integrating JavaScript front-end frameworks like Ember, React, and Angular with the Ruby on Rails backend. Spector aims to provide insights into the challenges and trade-offs of integrating these frameworks to ensure a fluid user experience.

Key points discussed include:

- Understanding Trade-offs: It's crucial to consider the technical challenges associated with using a client-side MVC framework, including duplicate models and separate code bases.

- Client Needs: Clients prioritize maintainable, sustainable, and performant applications, which must be a core focus when integrating JavaScript with Rails.

- Client-side MVC Frameworks: Examples like Gmail illustrate the advantages of client-side frameworks for complex applications.

- Integrating Different Frameworks: The presentation includes a comparison of implementing a to-do application using Angular, Ember, and React, highlighting each framework's unique characteristics.

- Angular: Noted for its two-way data binding feature and efficient setup with API endpoints, but caution is advised as Angular 2 may render Angular 1 obsolete.

- Ember: Designed for ambitious applications, it balances complexity well and benefits from preloading data, reducing server dependency and improving loading performance.

- React: Utilizes one-way data binding and a virtual DOM for efficient rendering; server-side rendering is discussed as a significant advantage for SEO and performance.

- Best Practices: Spector emphasizes the importance of adopting the right rendering approach to provide the best user experiences possible.

- Conclusion: The presentation concludes by reaffirming the benefits of server-side rendering in enhancing usability, particularly for users on slower connections, and responding to audience queries about frameworks, integration strategies, and the scalability of solutions offered by different technologies.

00:00:12.679 Welcome to 'Crossing the Bridge: Connecting Rails and Your Front-End Framework.' My name is Daniel Spector.

00:00:18.880 My hope for this presentation is that you discover patterns and best practices for integrating Rails with JavaScript.

00:00:24.240 Integration can be challenging, and it's essential to be aware of the trade-offs involved.

00:00:30.439 This is what we want to avoid—poor presentation skills and terrible bridges. Instead, we aim for a seamless connection.

00:00:42.879 When integrating JavaScript with Rails, the goal is to create a fluid experience. We'll start by understanding the trade-offs involved.

00:01:00.960 Choosing to use a client-side MVC framework comes with challenges. It's crucial to understand these hurdles before diving into implementation.

00:01:12.119 Next, we'll explore how to deeply integrate your chosen framework with Rails.

00:01:18.799 We'll look at various patterns and ways to share data consistently and maintainably.

00:01:25.240 As for myself, I'm Daniel Spector, a software engineer at Life Booker in Brooklyn.

00:01:30.880 My experience includes working primarily with Rails and JavaScript, especially with Ember.

00:01:36.079 Additionally, I've worked in mobile development and recently started exploring Clojure.

00:01:41.600 So, what should you expect? JavaScript can often be messy. While it's improved with newer syntax, challenges remain.

00:01:54.079 This quote from Alex Matcher, a core team member of Ember, states that writing an app in Rails can simplify certain tasks, particularly when it comes to serving HTML.

00:02:06.759 It's essential to consider the bigger picture and the technical challenges involved. Before hustling into implementation, understand all trade-offs.

00:02:24.720 Some challenges you might encounter include duplicate models and separate code bases. Any change required on the Rails side will likely require a similar change on the JavaScript side, leading to complexity.

00:02:42.200 When discussing these challenges with others, I often hear objections focusing on client needs and experiences. However, at the core, clients care about maintainable, sustainable, and performant applications.

00:03:06.400 If you're careful, you can avoid the pitfalls associated with client-side MVC frameworks; not doing so may lead to inadequate solutions and poor user experiences.

00:03:29.799 Nevertheless, you can create fantastic applications using client-side MVC Frameworks.

00:03:30.679 For example, think about Gmail, which is a client-side single-page app. Scroll to the bottom to access the basic version, which does a full page refresh—but few people actually do this.

00:04:06.680 Client-side MVCs can enable complex and graphic-heavy applications. If user interactions are intricate, opting for a client-side framework can be advantageous.

00:04:30.479 Always remember your ultimate goal: providing the best possible experience for users. Understanding trade-offs can help steer you towards better application solutions.

00:04:48.560 Let's dive right in and look at creating the simplest version of a to-do MVC application on Rails. This will allow us to compare implementations across different JavaScript frameworks.

00:05:06.280 The reason for this comparison is that frameworks often present unique interfaces. It's a good practice to maintain consistency as we proceed.

00:05:22.360 We'll be looking at Angular, Ember, and finally React. Each of these implementations will be fairly complete, aligning with the slides and available resources.

00:05:39.400 While implementing that, our focus will remain on exploring the patterns used for connecting Rails with JavaScript.

00:05:58.000 So let's get started. Angular, developed by Google, has two-way data binding as a core feature.

00:06:04.120 Angular automatically updates views when models change, eliminating the need for glue code. However, be aware that Angular 2 is coming, and it represents a significant shift from Angular 1.

00:06:31.720 If you start an Angular project now, keep in mind that support for Angular 1 may vanish in a year or two. So it's crucial to weigh this before proceeding.

00:06:54.960 To set up our Rails project to interface with Angular, we'll create basic API endpoints to manage to-dos.

00:07:13.520 We will namespace everything under API todos, allowing GET requests for all to-dos and enabling the creation of new ones.

00:07:32.000 Since Angular does not have an official setup with Rails, we will use Bower to manage our JavaScript frameworks efficiently.

00:07:44.799 Bower simplifies the inclusion of JavaScript libraries in your Rails application. You can use CDNs or vendor assets, but Bower makes it particularly straightforward.

00:08:00.400 By using Bower, you have all your dependencies in one place. Ensure that you have Bower installed and set it up in your gem file.

00:08:19.039 For managing client-side data in Angular, we can utilize standard jQuery Ajax calls or opt for Angular's built-in services.

00:08:38.199 Rather than using just jQuery, we'll leverage Angular Resource, which maps CRUD actions to specific methods and simplifies our interaction with our server.

00:09:05.360 As we scaffold out a basic application with Angular, you'll see how everything fits together. This is the entry point for our Angular application.

00:09:33.600 We'll inject the resource and route into our application. With a bit of magic regarding CSRF protection, we'll set up our to-do controller.

00:09:58.760 The core of our controller involves data binding. When we instantiate our application, we'll call the get request for our API todos.

00:10:25.960 The addTo function is straightforward as it allows us to save a new model and refresh our data automatically without needing extra glue code.

00:10:58.800 With Angular, everything is relatively compact and simple to set up for smaller applications, showcasing its efficiency.

00:11:26.520 As we iterate over our to-dos in the template, we see Angular's directives come into play, allowing user interactions to be seamless.

00:11:43.760 The challenge comes with complexity—if your application needs to check for user status or filter specific to-dos, multiple API calls can lead to performance issues.

00:12:02.720 As network speed varies by user, encountering loading screens can detract from the overall user experience. An empty loading screen is not ideal.

00:12:28.279 Data binding in Angular is powerful because it minimizes the glue code required. However, multiple API calls can complicate the initial setup.

00:12:56.599 It's time to look into Ember. Ember was created for large ambitious applications and manages complexity effectively.

00:13:05.599 With Ember, you get a high level of compatibility with Rails through Ember CLI, which is the standard for building Ember applications.

00:13:29.640 Introducing the concept of a user allows us to expand our to-do application significantly. We can establish a relation where a user has many to-dos.

00:13:54.800 Using Active Model Serializers in conjunction with Ember makes the interaction smoother, so we'll generate serializers and set up the application.

00:14:21.280 Instead of making a bunch of JSON calls upon loading, we can preload data into Ember for improved performance and fewer server requests.

00:14:47.120 By preloading data, we minimize dependencies on the server, ensuring that users do not encounter annoying loading spinners or delays.

00:15:06.760 We'll handle preloaded data initialization and avoid excessive dependency on the server once Ember is loaded.

00:15:29.440 As this initialized data integrates into Ember, it sets everything up efficiently, making the application feel swift for users.

00:15:58.400 By eliminating the need for initial API calls and reducing complexity, we enhance user experiences significantly.

00:16:34.960 Moving on to React, designed by Facebook, it adopts one-way data binding, which translates to more efficient rendering.

00:17:05.680 The key advantage of React is its virtual DOM, which enables efficient updates. This facility leads us into the realm of isomorphic JavaScript.

00:17:45.760 Isomorphic JavaScript facilitates rendering on either the client or server side, providing advantages such as easing the initial load we face.

00:18:28.800 Rendering HTML on the server diminishes the number of API calls required at startup, which results in lower load times and high SEO performance.

00:19:12.960 We'll set up our controller to pass not just the to-dos, but necessary form elements to function seamlessly with React.

00:19:55.440 Leveraging React-rails, we can leverage a powerful tool that pre-renders our application on the server, making the initial load experience optimal.

00:20:32.640 The use of properties and state makes React efficient. Break your components into small, isolated functions, ensuring simplicity and clarity.

00:21:04.960 Keep components small and modular. This structure allows for easier debugging if issues arise.

00:21:38.000 As we transition to the to-do form, we must maintain simplicity. Prevent dependencies from cluttering our components.

00:22:01.520 The form's submission will be streamlined, interacting with backend services effectively while implementing CSRF protection.

00:22:26.640 This demonstrates that server-rendered applications can deliver optimal user experiences while enhancing overall performance.

00:22:49.840 Embracing server-side rendering enhances usability, making sure applications are quicker and leaner without the overhead API calls introducing bottlenecks.

00:23:14.960 As we wrap up, the key takeaways should emphasize the importance of adopting the right rendering approach for your applications.

00:24:02.560 With clear benefits in terms of SEO, performance, and user experience, server-side rendering is a powerful asset, particularly as the future of JavaScript frameworks continues to evolve.

00:24:56.920 Thank you for your time! If you have any questions, please reach out on Twitter or through my blog. I appreciate your attention.

00:26:01.720 Audience question: What are additional benefits of server-side rendering besides usability and SEO?

00:26:29.920 Daniel Spector: While those are significant points, I believe there are very few drawbacks.

00:26:47.280 Tom Dale highlighted Twitter’s shift to server-side rendering, which enhances the experience—especially for users with slower connections.

00:27:10.640 Audience question: What about using the Gon gem for integration?

00:27:31.200 Daniel Spector: Gon allows you to manage JSON data passage without manual processes. It makes interactions seamless.

00:27:54.080 Audience question: What about services like prerender.io?

00:28:11.840 Daniel Spector: While those services exist, they come with monthly costs that can be avoided.

00:28:47.040 Audience question: Can React components be integrated into Angular or Ember?

00:29:10.840 Daniel Spector: Yes, it's much easier with Angular than with Ember, as Ember tends to take over.

00:29:22.960 Audience question: Which framework would you choose?

00:29:55.120 Daniel Spector: For large applications, I would choose Ember; for smaller projects, React is the better option.

00:30:14.560 Thank you for your time! I appreciate all your engagement.