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.
