Ruby on Rails
Front-End Sadness to Happiness: The React on Rails Story
Front-End Sadness to Happiness: The React on Rails Story
by Justin GordonIn this presentation titled "Front-End Sadness to Happiness: The React on Rails Story," speaker Justin Gordon details his journey of integrating React with Ruby on Rails, driven by his pursuit of developer happiness. Initially content with traditional Rails development, Gordon experienced limitations using jQuery and was motivated to find a more efficient solution. His exploration led him to React and the use of Webpack, culminating in the creation of the React on Rails gem.
Key points discussed include:
- Personal Connection: Justin shares his background, emphasizing his love for programming and the pursuit of a gratifying developer environment.
- Rails Doctrine: He discusses how Rails has been designed to maximize programmer happiness, which inspired the principles behind React on Rails, emphasizing 'convention over configuration.'
- Development Challenges: Gordon reflects on the frustrations of using CoffeeScript and jQuery, noting the streamlined data flow of React that enhances development efficiency.
- Community Feedback: Engaging with the community to refine the React on Rails integration remains a focus, parallel to the iterative nature of Rails updates.
- Integration with Webpack: Justin highlights how Webpack transformed his development process, allowing for manageable JavaScript file integration, and how it enabled the successful adoption of ES6 modules.
- Practical Implementation: He details the straightforward steps to running a React on Rails application, underscored by an efficient setup for server-side rendering and component management using Redux.
- Continuous Improvement: Gordon stresses the importance of user feedback in shaping the evolution of React on Rails, aiming to maintain a balanced and productive development workflow.
- Future Considerations: He invites collaboration and queries from the audience, reinforcing the communal spirit of the developer industry.
In conclusion, Justin emphasizes that by following the React on Rails methodology, developers can achieve a harmonious and productive workflow, efficiently utilizing Rails and modern JavaScript frameworks to enhance their work experience and output.
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!
