Tag: react

I’ve been using React for a while and now that I have got over my disgust for coding with angle brackets, I think it is wonderful.

I’ve built two big sites on Rails over the last few years and the ”sprinkles of Javascript” pattern that Rails wants me to use has grown, both times, into a big ball of javascript mud where it’s hard to figure out where anything is or belongs.

For my last two or three sites I have used React and I don’t want to go back to sprinkles of Javascript. I like the logical flow of react and I love the idea that all of the UI flows out of the current state.

It’s not all roses in React Land though.

The people who set the trends in Javascript have a great tolerance for ugliness and it bothers me that all of the tutorials have you copy-pasting reams of boilerplate code and you have to write a thousand lines of code before you have anything to show for it.

Here’s an example from https://www.robinwieruch.de/react-fetching-data (nothing against this particular example. This is a typical React tutorial.)

import React, { Component } from 'react';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }
 
  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

render() {
    const { hits } = this.state;
    return (
      <ul>
        {hits.map(hit =>
          <li key={hit.objectID}>
            <a href={hit.url}>{hit.title}</a>
          </li>
        )}
      </ul>
    );
  }
}

It’s easy to understand why the folks at Basecamp prefer their sprinkles of Javascript.

Here’s the (kind of) equivalent code in Rails/haml.

class HitsController < ApplicationController
  def index
    @hits = Hit.all
  end
end

# index.html.haml
%ul
  - @hits.each do |hit|
    %li= link_to hit.title, hit.url

Why does Javascript need so many lines of code? Is it intrinsic to the language or is it that the folks who write it aren’t interested in readability? And who thought it was a good idea to write code in angle brackets?

And that was just the view.

I haven’t figured out state management in React yet and that’s my mission in this series of posts — to find a better to way to hook the view up to a Rails back end. I have no idea whether I will arrive at my destination but I intend to travel well.

In my first React app, I tried to build an object model like I might in an iOS app and I passed a controller down through the view components to handle events. Disaster.

Then I discovered Redux and I used it for the next couple of apps. I felt like I had joined a south sea cargo cult. If React revels in a surfeit of syntax, Redux positively wallows in it. The tutorials never seem to end and I found I had to constantly go back three pages to remind myself of the difference between an action and an action creator.

On page 7 of the tutorial, if your actions and your action creators and your reducers and your selectors and your dumb components and your connected components are all aligned correctly you’ll get a bit of data to appear in a view but I can’t stop thinking the whole time how much easier it would be to just write 5 lines of haml.

When I am learning, I like to have something working with a few lines of code and then to build from there.

The people who invented Redux have mounded Byzantine complexity on top of the ugliness of Javascript. I often wonder what Redux would look like if @dhh had invented it. Could Javascript and React be beautiful like Ruby and Rails?

And finally, a bonus, and no doubt unwarranted, rant about functional programming.

After 30 years of OOP, I struggle a lot with functional programming. It bugs me no end that, in Redux, the things that look a lot like methods are on the other side of the island from where the data lives. It’s as though the cargo cult people discovered that you could throw a message in a bottle into the outgoing tide and it would be received in the next cove on the following Tuesday.

Why not put the methods next to the data that they manipulate? I’m imagining an object-oriented Redux that feels a bit like Active Record. 

So that’s what I’m going to do. Like the final round of Whose Line Is It Anyway?, I’m going to try to sing Redux in the style of @dhh. 

Wish me luck.