Card image cap

ULISES
RAMIREZ-ROCHE

  • Software Developer
  • Javascript Specialist

Resentful JS is an anti-pattern that wraps the programmer like a Succubi. Feeling either disdain or trepidation toward Javascript and its community, the coder wields the language as they would treat a lover they didn’t find particularly attractive; burying their head in the pillow while thinking of someone else.

At first, all’s quiet on the western front. But then the language becomes a poltergeist. From birth, JS had to pretend to be someone else to survive.  It may even tolerate a little cosplay. But a crisis will surface like a mushroom cloud. You’ll blame everything on Javascript, every argument, every outrage, even the protection order. The tribe will label you an outcast. You will never meet your lobster. You will wish you were dead.

IRL

The Revenants of Web 2.0

Look for JS that varies from conventions. You’ll find tabs instead of spaces, four spaces instead of two, snake_case variables,  the treatment of functions as second-class citizens.

Be wary of JS that looks like it came from another world; that carries itself with an aristocratic vibe: a penchant for inheritance and disdain for the working man’s functions and prototypes.

import React from 'react';
import Actions from './actions';

class MyComponent extends React.Component {
    componentDidMount(){
        var self = this;
        Actions.fetch_videos().then(function(videos){
            self.setState({videos})
        })
    }
    render(){
        <VideoPlayer videos={this.state.videos} onClick={Actions.likeVideo} />
    }
}

The Anti-JSX Crusade

The first and most prominent sickness is a regression toward using Nude Renders. But this is a Puritan sentiment. JSX is like a mask – a pretty dress – but it’s easier to understand at a glance, and since the code is read more than it’s written, nothing else matters. We must optimize for precision and clarity at all costs.

There are a few people out there who swear it’s ok to use nothing but React.createElement, but that’s just dumb. See the following code samples: Quick, can you tell what’s wrong?

export default React.Component.extends {
  render(){
    return (
      <div class="yet-another-component">
        <button class="btn btn-primary" onClick={()=>{
           alert("Hello World!');
         }} />
      </div>
    );
  }
}
"use strict";

function hello() {
  return React.createElement(
    "div",
    null,
    "Hello world!'
  );
  React.createElement(
    "div",
    { "class": "yet-another-component" },
    React.createElement("button", { class: "btn btn-primary", onClick: function onClick() {
        alert("Hello World!");
      } })
  );
}

No, you can’t. You’re human, like me. The only way you’ll be able to see that there is a quote sign mismatch is if I told you, or you run the code through a linter. Now, imagine it’s 3:00 pm on a Friday and trouble in the nightfall beckons; so sexy it hurts. Or maybe it’s a long nap before bedtime followed by your favorite vice and video games. Also, an engaging way to pass the end of days. What do you do? I choose JSX for the same reasons I choose English over my birth language, Español. Fewer rules to remember.

Look at the following splatter. It’s a mock anti-pattern. Do you remember which one?

 

import React from 'react'

export defaults class extends React.Component {
  render()
    return React.createElement(
      "div",
      null,
      "Hello world!"
    );
    React.createElement(
    "div",
    { "class": "yet-another-component" },
    React.createElement("button", {
      "class": "btn btn-success",
      onClick: function onClick() {
        alert('Hello World!');
      },
      onFocusOut: function onFocusOut() {
        var ok = confirm('Really want to quit?');
        if (!ok) return false;
        return alert("Goodbye cruel world");
      },
      value: this.state.value,
      user: this.props.user,
      onSave: this.props.saveUser(this.props.user)
    })
  );
  }
}

 

Some throw out React altogether, but even Vue admits templates are weak. [1]  First, they concede the high ground. Vue supports JSX. Javascript, for all its flaws, is a full-fledged programming language. You have an arsenal of techniques dealing with variables, flow control, juggling scope – a Veritas cornucopia. This manifests in the tooling, see the many Linters, type-checkers, editor plugins, et al. Advanced to the point of alien technology compared to what Vue has to offer.

Strategy

Shed Your Skin

You must train. No excuses. Leave your prejudice. Stop forcing the language to pretend to be someone else because you don’t feel confident yet. Throw out any code that looks like you’ve written before.

There are legions of quality resources, both free and paid, that can help programmers of all skill levels. Even those over nine thousand. Know when it’s time to hit the books but prefer just-in-time learning: Install a modern Linter with an equally popular style guide to correct as you work.

Keep up with newsletters and try to stay informed with the Javascript community. Start a formal session with your team to discuss what’s going on in JS and how it could help with the project. Find meetups in town or start one if fate requires you to.

 

[1] Vue supports render functions, and even JSX because you may “need the power”. The argument is, of course, the cowards’ way out.  Simplicity is subjective, and somehow, the beginner, not the expert, wins? Worse. the framework itself – the careful deliberations of a thousandfold developers – admits defeat.

[2] You can try out more JS to JSX conversions at babel.io.