This month I started a new React-Native project and used some libraries I heard only good things about in the last 12 months or so. While writing my app, I couldn't help to notice all the new syntax that crept into my code.

First, that standard JavaScript stuff. In the last years it accumulated many new things like destructuring or async/await. Even a simple example like this would seem completely foreign to a new developer:

const {token, type} = await callApi();

This would have been written differently a few years ago, before ES2015 and promises:

callApi(function(response) {
  var token = response.token;
  var type = response.type;
})

And as I said, this is just a simple example of an everyday API call.

Then we got JSX, which is the default way to do markup in React and also React-Native. It basically compiles down to React.createElement({...}) calls, but it looks like something is seriously wrong with the JavaScript. I mean, after years of doing React it doesn't seem so bad to me anymore and you find your markup rather fast in the code, but well, you have to learn how it works too. Other frameworks use a templating language like Handlebars, which takes the new concepts to another level, haha.

So you write something like this to create a component:

const MyComponent = props => (
  <View>
    <Text>Hello!</Text>
    <Image src={require(...)} />
  </View>
);

Instead of this:

var MyComponent = function MyComponent(props) {
  return React.createElement(View, null,
    React.createElement(Text, null, "Hello!"),
    React.createElement(Image, { src: require(...) })
  );
};

And this is what you write multiple times a day creating a React application.

Next there is CSS or should I say CSS-in-JS? Using styled-components to style your React components is the way to go now and it uses yet another new feature to get CSS into JS, tagged template literals.

const DangerText = styled.Text`
  backgroundColor: red;
  color: white;
  fontWeight: bold;
`;

Instead of something like this:

const style = {
  backgroundColor: "red",
  color: "white",
  fontWeight: "bold"
};
const DangerText = props => <Text style={style} {...props} />;

Then there is GraphQL, the new fancy way to create HTTP APIs. Don't be fooled by my sarcasm, it really is a nice way to build APIs and I think it is much better than REST, but... whelp... it comes with its own query language, leveraging the tagged template literals too.

const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

And finally, lets get the whole thing statically type checked with the help of Flow.

function doSomething(func: <T>(param: T) => T) {
}

Yes, I know, we had CSS, HTML, JS and SQL back in the days and besides some new JS features and the GQL syntax, there isn't much fundamentally new happening here, but I have to admit, it could be quite an effort to dive into such a codebase when you just learned JavaScript or even if you had a few years pause since your last JavaScript stint.

Is this really the way to go? Should we do things more idiomatically with JavaScript? More object-literals instead of CSS? More HyperScript instead of JSX? I don't know if this would be better, but it would reduce the used concepts quite a bit.

Syntactical Overkill in JavaScript