Syntactical Overkill in JavaScript
Tags: javascript, syntax
Published: 2017-04-14 13:33:36

---
title: Syntactical Overkill in JavaScript
published: true
description: So many ways to do things now.
tags: javascript, syntax
---

This month I started a new [React-Native](https://facebook.github.io/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) or [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Even a simple example like this would seem completely foreign to a new developer:

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

This would have been written differently a few years ago, before ES2015 and [promises](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise):

```javascript
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](https://facebook.github.io/react/docs/jsx-in-depth.html), 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:

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

Instead of this:

```javascript
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](https://styled-components.com/) 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. 

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

Instead of something like this:

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

Then there is [GraphQL](http://graphql.org/), 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. 

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

And finally, lets get the whole thing statically type checked with the help of [Flow](https://flow.org/). 

```javascript
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.