Notes from React London, September 2017

In September, Indigo Tree attended React London meetup at Facebook’s offices near King’s Cross to hear Benjie Gillam, Faraz Khan and Robbie McCorkell talk about GraphQL and css-in-js strategies.

React, a JavaScript framework created by Facebook for their app, and since open sourced so that anyone can use it, is a fantasic framework for fast, responsive web apps that update in real time. It’s a technology that’s been on our horizon for a while, and it was great to gain some insights from industry specialists on how they use it in their complex applications.

Here are notes from two talks at the event held in London recently.

Lightweight GraphQL – Benjie Gillam

Benjie’s talk about the query language developed by Facebook was fascinating. Indigo Tree have been watching the developments of this language closely. As Project Manager Eugene put it “We all thought REST was the definitive way to go … and then along came GraphQL!”

GraphQL does allow you to have some amazing powers and much more flexibility over REST.

query NameAndWebsiteQuery {
    user(id:1) { 
        name
        website
    }
}

this is an example of how a query can be limited at source to return only the item/s you want. In this example, we’re only querying for post ID 1, not querying all posts for an ID of 1. This is a subtle difference but means you can do some Very Cool Stuff, like passing in variables:

query NameAndWebsiteQuery($id: Int!) { 
    user(id:$id) { 
        name
        website
    }
}

As you see on line 2, we must specify the type of the variable, in this case Int, or integer, a number. There are quite a few types, includingstring and others. The ! operator indicates the value can’t be NULL.

GraphQL is introspective, which means you can browse through the nodes using something like GraphiQL, shown below. This makes discovery so simple and easy to learn that picking up the basics of this language for new developers is relatively easy. With REST you have to know beforehand what items are there, or query the whole object, output it on your page, and then choose what data you want to return.

IndigoTree have already started to use this method of getting data into a site on a Top Secret Project … more info to be released as we develop it! Follow us on twitter to find out more about this interesting new project.

CSS in React: Spoilt for Choice – Faraz Khan

There’s no hiding the fact that CSS has issues. It’s an amazing tool that we use every day, but it just doesn’t scale very well. We’ve tried going back to inline styles, but that led to performance issues, and we can’t use pseudo selectors like :before, :focus or :nth-child(), which is a must for modern development techniques.

With the advent of React, we have some interesting options for writing modular CSS (css that is bound to our element, meaning that styles for one component don’t pollute another). Faraz ran through three he’s been using.

Modules

CSS Modules use classNames on our props but turn the CSS into strings to be output. But it does have limitations: you can’t have more than 1className per prop. You also can’t have dashes, so BEM is out of the window.

That’s going to rule out a lot of architectural styles right away.

Modules also mean configuring WebPack … ugh, not an enviable position to be in, especially if your team has specialist developers for CSS. Also, have you ever configured your own WebPack setup? If so, you know how much of a pain that can be.

Glamorous

Glamorous approaches this problem by using JavaScript objects and converting them to CSS. It’s an interesting solution but it leads to writing CSS in a very different way than you may be used to:

const LogoContainer = glamorous.div({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: 60,
  width: 60,
  borderRadius: 60,
  backgroundColor: 'white',
  boxShadow: '0 1px 6px rgba(0, 0, 0, 0.1)',
  position: 'absolute',
  top: '1rem',
  left: '1rem',
  zIndex: 2
});

Works, works fine. Just a little wierd to write.

Styled components

Styled Components was, for us, a cleaner approach and our personal winner in this, although at the end of his presentation Faraz displayed an element created in each of these methods, and the worked identically. “Method doesn’t matter, how you implement it does” he said.

const LogoContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  border-radius: 60px;
  background-color: white;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
`;

To be honest, Indigo Tree developers up to this point haven’t been convinced by CSS-in-JS. But now, having worked with them to create a website, I can say that developing in this way does have some very distinct advantages, mainly: You only think about your component. The cognitive load of thinking about the whole of your application or site (php, css, JavaScript, HTML and data) is becoming too great, leading to more error-prone development. When you only need to worry about one component’s data, css, JavaScript and HTML you gain a level of focus that’s hard to attain when you’re working with the global scope.

Now, if there was only a way of doing this with PHP applications like Laravel … but that is a story for another day!

Can We Help?

Thinking about developing a web application that needs to be lightweight, fast and adaptible? Got an project idea that’s like itch you just can’t scratch? Contact us today to see how we can help.