Replacing jQuery With Vue.js: No Build Step Necessary

I absolutely love this article by Sarah Drasner about replacing jQuery with Vue.js. We need more articles like this. “Here’s how to replace the once-new hotness with the new hotness.”

I’ve been neck-deep in React-land for a while, and I’m trying to think of how this article would look like for React. I’d imagine doing a toggle would look something like:

  1. Burn all of your markup down to the ground and replace what you had with <div id="app" />
  2. Rewrite your markup as JSX. Be sure to replace class with className or the whole thing will blow up.
  3. Inline an onClick attribute attached to your JSX that maps to a function to handle the click.
  4. Write an event handler to handle the click. Be sure to call constructor(props) { super(props); } before you do anything. Add this.handleClick = this.handleClick.bind(this); to the constructor in order to get things to work.

It may just be me, but this feels comparatively way more complicated and inelegant.

Sara’s talking about React’s ubiquity rather than its conventions. Because migrating from something like jQuery to React is not a lateral move. It requires a major overhaul of how the entire thing is built.

If you tear out something like jQuery, you’re going to have to figure out a way to get those accordions to expand and collapse again. If you tear out React, you get a blank page. React is a big commitment. I guess that’s why I’m still struggling to comprehend why so many organizations are so eager to take the sturdy, foundational layer of the frontend stack and rewrite it all in a proprietary format. That’s all necessary to get reactive components? Projects like Vue are showing that’s not necessary.

I’m really just thinking out loud here as I continue to slog my way through React, continue to get my head around what other frameworks provide, and continue to try my damnedest to keep up with this ever-shifting web design landscape.

 

 

View Link