GoRuCo 2017
Front-End Sadness to Happiness: The React on Rails Story
Front-End Sadness to Happiness: The React on Rails Story by Justin Gordon
Standard Rails development made me happy like no other programming paradigm in my career. Simple front-end development with standard Rails and a sprinkling of jQuery was 'OK' Then, in 2014, I had to build a front-end that dynamically updated like a desktop app. I knew there had to be something better, and I went down the rabbit hole of integrating React with Rails using Webpack. Come find out how my obsessive pursuit of “developer happiness” for the Rails front-end eventually drove me to start the React on Rails gem, the most popular integration of Rails with React using Webpack.
GoRuCo 2017
00:00:17.369
Thank you so much for coming to my talk. I'm absolutely beyond thrilled to be here. This has been a three-year journey.
00:00:24.039
I started with a little idea that I could do something useful and write an article.
00:00:30.010
As I walked around here, I must say that more than half of the people I've talked to have not only heard of React on Rails, but they actually use it in their projects.
00:00:36.430
So, how many of you actually use React on Rails in your projects? And how many of you have heard of React on Rails?
00:00:43.989
Okay, so pretty much everybody. I am so stoked! I came here all the way from Hawaii.
00:00:50.199
I am the CEO and founder of Shaka Code. If any of you want to get the slides after the talk, you can find them at ShakaCode.com/talks.
00:00:57.309
You can also reach me easily at [email protected]. A little bit about me: my two favorite things in life that bring me happiness are surfing and a great work environment.
00:01:03.549
They kind of go together in Hawaii, but you also need fast internet.
00:01:10.479
The last talk was great because it discussed happiness. At the beginning, we see the highlight that Ruby is designed to make programmers happy.
00:01:15.880
When I go about designing React on Rails, a big part of it is that I want to promote happiness. I aim to make it like Rails.
00:01:25.450
It's not going to be quite like what we saw with the other languages or frameworks— I want to build something that just works.
00:01:31.900
The Rails doctrine came out in January 2016, which is about maybe a year and a half after I started working on this idea.
00:01:38.650
What I loved about the Rails doctrine is that when I read through it, I thought, 'Oh my god, this is why I love Rails.'
00:01:45.100
This is also exactly how I'm designing React on Rails to be, optimized for programmer happiness.
00:01:51.070
Convention over configuration is key. The menu is omakase, meaning you'll get my chef selections with React on Rails.
00:01:59.110
And though I'm not a dictator, I seek community feedback but ultimately make the final decisions.
00:02:04.990
The idea of 'no one paradigm' is actually beneficial because it also applies to the Rails adoption of React on Rails.
00:02:11.440
Rails has come out with Webpacker, and I'll talk about what you need for React on Rails during the talk.
00:02:16.800
However, 'no one paradigm' means there are different ways to achieve this.
00:02:22.610
React on Rails was initially very different from the standard way of doing things because back then, we were stuck with CoffeeScript and jQuery.
00:02:30.380
I was determined to create beautiful code that looked good, utilizing Webpack.
00:02:35.900
Now, I'm sure all of you know how to use Webpack; it's a pretty sharp tool compared to the earlier JavaScript ecosystem.
00:02:44.959
So, React on Rails operates by making everything just work. You'll see that today.
00:02:50.239
Progress over stability is also crucial.
00:02:56.420
I release updates for React on Rails regularly, and the reason I can do this is due to our fantastic set of integration tests.
00:03:02.750
When I spoke with David about this, we discussed how everyone can contribute while still enjoying the party.
00:03:09.440
David Heinemeier Hansson created Ruby on Rails, and Matsumoto is the creator of Ruby.
00:03:15.800
In addition to the Rails doctrine, a significant part of React on Rails is running with the JavaScript world.
00:03:21.200
A part of Webpack is that they don’t want you to have to configure it too much.
00:03:28.760
In front-end development with JavaScript, just follow the community.
00:03:33.980
Back in 2014, when I remember Rails, CoffeeScript was all the rage.
00:03:41.900
While building web apps, it felt like I had superhuman powers! It was incredible.
00:03:49.760
This example from the Rails tutorial helped me learn Ruby on Rails.
00:03:58.870
It showcased how easy it was to validate file uploads.
00:04:03.970
Now, fast forward to 2017, this is the app we're building at Shaka Code called 'Friends and Guests'.
00:04:10.620
Our consumer app is fairly complicated, resembling a mix of Airbnb and LinkedIn with privacy options.
00:04:17.620
Can you imagine trying to build this using just jQuery?
00:04:24.640
Manipulating all these DOM elements with jQuery would be quite a challenge!
00:04:31.480
I knew I had to find something better than jQuery.
00:04:37.210
React came along, and I explored Ember and Angular as well.
00:04:44.190
A friend stayed at my place in Maui, and after getting to know him well, he inspired me to start 'Friends and Guests.'
00:04:50.209
He encouraged me to use React. So, I tried watching videos to understand it better.
00:04:57.590
I quickly understood why it was so easy to develop applications with React— the flow of data is streamlined.
00:05:04.250
This single flow of data in React gives you superhuman powers. It just works!
00:05:10.890
The community support for React is amazing, and now React Native is part of my consulting company’s work.
00:05:17.150
If you're using any JavaScript framework, chances are you are using React.
00:05:23.540
The Rails doctrine emphasizes individual power and ease of use.
00:05:28.820
I aim to replicate this ease of use in applying React on the front end.
00:05:35.490
I think the reason most of you are here is to see how well we've accomplished this.
00:05:41.170
If you don’t apply the React on Rails way, you might build separate node.js and Express servers— and is that really appealing?
00:05:47.220
My team member even wrote an article about the complexities of managing all those servers.
00:05:53.510
The React on Rails gem was quite popular back in 2014.
00:05:59.550
This system came about around 2012, and it greatly facilitated React's integration with Rails.
00:06:06.760
When I created a tutorial to demonstrate the use of React with Rails, I realized how easy it was.
00:06:13.199
In 2014, using React Bootstrap was seamless and the integration was effortless. Back then, I just copied the JS files for my projects.
00:06:21.719
I hope nobody still copies and pastes JavaScript files from GitHub into their projects. We all did that once.
00:06:32.340
Then you had to deal with Bread crumbs of dependencies and slowing down your workflow.
00:06:39.290
The Ruby world gives us gems and bundler, making it easy. In the JavaScript world, we have npm and GitHub.
00:06:48.090
It’s easy to reference exact versions or GitHub repos.
00:06:55.790
I considered numerous alternatives when developing in 2014, but I realized I needed to create something better.
00:07:01.890
So, I aimed for programmer happiness and to embrace JavaScript.
00:07:08.160
It's better to run with the JavaScript herd and adapt the examples directly to my work.
00:07:14.790
I transitioned from CoffeeScript to JavaScript, seeking cleaner code.
00:07:22.600
Recapping, challenges with React on Rails included lack of ES6 support.
00:07:29.880
Initially, there was no support for modules and everything was global.
00:07:38.160
Luckily, I learned about Webpack while consulting for Instagram.
00:07:44.700
Webpack allowed me to manage my JavaScript files easily and integrate them with Rails.
00:07:50.680
Excited about this discovery, I wrote detailed articles about using React with Rails.
00:07:58.160
After releasing the Rails app, I gathered feedback and applied it in iterations.
00:08:05.390
Building a solid community was essential for supporting the evolving tech landscape.
00:08:15.320
Today, running a React on Rails application can be done in a few easy steps.
00:08:20.640
Simply edit your Gemfile, add React on Rails, set the version, and run bundler.
00:08:27.090
Then, generate the necessary files with just one command.
00:08:33.440
Running this process will give you a simple but functional hello world app.
00:08:40.800
As expected, it just works!
00:08:46.080
In terms of implementation, we're committed to making it straightforward — including server-side rendering.
00:08:55.870
Simply setting one option allows you to pre-render components for greater SEO.
00:09:02.250
The integration of Redux is seamless as well, allowing multiple React components to coexist.
00:09:09.450
These implementations save valuable time while ensuring efficient testing.
00:09:15.460
CI setup becomes much simpler, allowing your command-line tools to help you through development.
00:09:23.800
We support a wide array of gems, enhancing developer experience across the board.
00:09:29.960
Overall, the integration of React on Rails aims to create a balanced workflow.
00:09:36.019
Running with the JavaScript herd promotes creativity and continuous improvement.
00:09:42.570
Working in harmony with the Rails framework gives every project its due comfort.
00:09:48.110
Maximizing productivity while minimizing disruption is a core philosophy.
00:09:53.190
As I continue to measure success, user feedback remains paramount in shaping the future.
00:09:57.910
Today, I'd like to express my gratitude and invite all of you to reach out with any questions.
00:10:01.940
Let's share in this exciting journey together!
00:10:06.390
Thank you once again for your time, and I hope you enjoy the rest of the event.
00:10:12.490
It means a lot to me and to the entire community of developers. Thank you!
