DEV Community

Cover image for Changelog: DEV upgraded to Webpacker 4/Babel 7
Nick Taylor for The DEV Team

Posted on • Updated on • Originally published at iamdeveloper.com

Changelog: DEV upgraded to Webpacker 4/Babel 7

This week brought a major upgrade to the frontend infrastructure for DEV. We've been on webpacker 3.x and Babel 6.x for quite a while now. There were several attempts, including a couple of my own prior to working at DEV that were unsuccessful. However, this week during the last week of our cool-down period before we start our next cycle of development, I had time to perform the upgrade successfully. We are now using webpacker 4.22 and Babel 7.x.

If you're not familiar with webpacker, I encourage you to check out the project. The TLDR though is that it's a Ruby gem that makes integrating webpack bundles into a Rails app very easy.

GitHub logo rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails

Webpacker has been retired 🌅

Webpacker has served the Rails community for over five years as a bridge to compiled and bundled JavaScript. This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity.

For applications currently using Webpacker, the first recommendation is to switch to jsbundling-rails with Webpack (or another bundler). You can follow the switching guide, if you choose this option.

Secondly, you may want to try making the jump all the way to import maps. That's the default setup for new Rails 7 applications, but depending on your JavaScript use, it may be a substantial jump.

Finally, you can continue to use Webpacker as-is. We will continue to address security issues…

The upgrade opens up a lot of things that were being held back by the webpacker 4 upgrade. With the upgrade, we can now do the following:

  • Upgrade to the latest Storybook. We're currently on a very old version that is missing a lot of the new awesome features.
  • It moves us one more step closer to upgrading to Rails 6

Another benefit of the upgrade is faster builds in the frontend.

I won't bore you with the details of the upgrade process as they are documented already in the webpacker repository.

The issues that I ran in to during my initial attempts were false negatives. DEV, for those who aren't aware, uses Preact in the frontend, not React. Why do I bring this up? One, for awareness, but also because the issues I ran into were related to running an older version of Preact (we have a blocker for upgrading to Preact X) that was not compatible with the React DevTools.

Because the tooling was not compatible, it was creating weird UI issues when the React Devtools were running. In some cases I saw components twice, in other cases I received errors about root something something. In the end, with a clear head this week, I realized that was the issue and was able to get it all sorted.

For those interested, here is the merged PR.

That's all for now peeps!

Photo by Sebastian Herrmann on Unsplash

Top comments (6)

Collapse
 
kyleboe profile image
Kyle Boe

Nice job! This is so small feat for any project. Way to go!

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Kyle!

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

Sounds like you've got a complex dependency chain, but you're on the road to lifting some of the technical debt. Good work!

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Eric!

Multiple TV and movie characters giving a thumbs up

Collapse
 
mburszley profile image
Maximilian Burszley

Does being on rails hinder your ability to find talent? It always seemed like a niche framework/language in my experience.

Collapse
 
rhymes profile image
rhymes • Edited

Hi @theincorrigible1 , it depends on which lens you look at the industry. There are more programmers in other communities but that doesn't mean there aren't enough in Rails's.

There was a similar argument when Python was way less popular than it is now and what happened was that companies using Python hired good Python programmers and when they couldn't find them they simply hired good programmers and taught them the language. Let's not forget that people can learn multiple languages in their careers and most general purpose languages are not that different.

I personally think that Rails usage (if we look at it from the lens of the share of global devs programming with it) has probably peaked in the past, but that doesn't mean it's not a really good idea investing in it and there are plenty of success stories and companies out there choosing it in 2020 as well. The community is strong and both Ruby (Ruby 3 is getting closer and closer) and Rails are being developed actively and intensely.

DEV recently hired many awesome devs, so I don't think it's hindering the company's ability to find talent.