RR 435: Alternatives to Adding React with Graham Conzett

00:00 59:28
Download MP3

Graham Conzett has been a developer for 12 years. He has worked with Ruby and Rails for half of that, and currently works for a company that does large format touchscreens. Graham gave a talk at RailsConf 2018 called "Old School JavaScript and Rails" where he talks about the experience of JavaScript fatigue. The world of JavaScript changes very quickly, and sometimes it feels like there's a new framework every week. Because there is no clear winner among these frameworks, many Rails developers feel compelled to reach for something like React. However, there are many strategies for doing JavaScript in Ruby and in Rails that existed before these frameworks, so you can accomplish what you want to get done without bringing one in. Remember that all of them can coexist side by side, so you don't have to pick one strategy. The panel discusses the effect that adopting a new technology can have on the team, such as the learning curve and hiring people that specialize in it.

To illustrate this, Graham talks about the company he works for. Their app is a 90% is a Rails app, and one component has a lot of React. He talks about how they came up with that strategy and how they have kept React isolated to that page. It's crept into some other little places, but there is a document in the team charter that defines where and why they use certain things, and that has kept it limited.

Graham talks about the tradeoffs between choosing to stay in Rails or introduce React. If you bring in React, you have to bring in a different testing framework. React also has a bigger learning curve than standard HTML or CSS. There are far less conventions around React than Rails, so you have to spend time coming to a consensus as a team. Webpacker helps with this to a degree, but it also pulls in a bunch of third party plugins, so Rails is no longer writing the rules and you may have to debug random plugins.

If you want to avoid adding a framework like React, consider using ujs, or Unobtrusive JavaScript. These are JavaScript 'helpers' included in the Rails bundle that you can add to various buttons that help you decorate and enhance. You don't have to change much of your HTML frontend code but it makes it more interactive. Graham talks about he uses them and why he likes them. The panel compares using ujs to other strategies like using Stimulus or 'sprinkles' of JavaScript. For small JS sprinkles, Graham advises to keep that focused on a single HTML element and bound to a single event handler. Ujs works best when you piggyback off of that Rails/Rest related stuff, and Stimulus is more about manipulating parts on the page that don't have a need for asynchronous request. You can really use ujs everywhere, so the three techniques are not mutually exclusive.

Graham gives advice to developers considering pulling in a frontend framework. He says to start with minimal JS and then talk to your team about when it feels right to do it, because that's a tricky conversation to know what your expectations are and problems you're trying to solve. Sometimes things will force the issue and make you want to explore using frontend frameworks. When it's a time saver, it makes your team scale better, or when you have something you just can't do without it, then that might be the right time to use React.

The show concludes with the panel discussing their experiences with different compiling languages like TypeScript. They talk about what influences the tools people choose. They agree that the most important thing is getting working code out there, it doesn't really matter how it's written, but to only pull things in when you know you need it.

Panelists

  • Charles Max Wood

  • Andrew Mason

  • David Kimura

  • Nate Hopkins

With special guest: Graham Conzett

Sponsors

Links

Follow DevChatTV on Facebook and Twitter

Picks

Charles Max Wood:

David Kimura:

Andrew Mason:

Nate Hopkins:

Graham Conzett:

Follow Graham @gconzett on Twitter and Github

FAQ

What should I consider when making the decision to add a frontend framework like React to my app?

Consider your issue and if there is a way to solve it without bringing in JavaScript. There are many old tools available that may fit your needs, but sometimes the best solution is to bring in something like React. Consider the impact it will have on your team. What is the learning curve with this new technology? Will it require that more people who specialize in this be hired? Remember that multiple technologies can exist side by side, so choosing to use a new one is not mutually exclusive. If you’re considering adding a frontend framework, start with minimal JS and then talk to your team about when it feels right to do it. Sometimes things will force the issue and make you want to explore using frontend frameworks. When it’s a time saver, it makes your team scale better, or when you have something you just can’t do without it, then that might be the right time to use React.


How can I prevent things like React from taking over my app?

Explicitly define where and why you will use things like React and add it to your company documentation. This will keep React limited and prevent it from taking over.


What are the tradeoffs between staying in Ruby and adding React?

If you bring in React, you have to bring in a different testing framework. React also has a bigger learning curve than standard HTML or CSS. There are far less conventions around React than Rails, so you have to spend time coming to a consensus as a team. Webpacker helps with this to a degree, but it also pulls in a bunch of third party plugins, so Rails is no longer writing the rules and you may have to debug random plugins.


What is rails-ujs?

An abbreviation for Unobtrusive JavaScript. These are JavaScript ‘helpers’ included in the Rails bundle that you can add to various buttons that help you decorate and enhance. You don’t have to change much of your HTML frontend code but it makes it more interactive. Ujs can be used anywhere in your app.


Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.