React Alicante 2017

WRITTEN BY GARETH DUNNE @JSDIARIES

Last weekend I attended React Alicante. Its the first of its type set in Spain’s southeastern Costa Blanca.

With an attendance of over 250 and a wide range of the latest and greatest from the React world, React Alicante delivered some interesting topics ranging from React Native all the way to GraphQL.

In this post, I want to cover the talks that stood out most to me, bearing in mind that there was a lot more covered throughout the event outside what I mention here.

If any of the following talks perk your interest and your not familiar with the ways of React.js you might find it useful to get started with this learning resource..

Marie-Laure Thuret had an awesome talk regarding React Storybook. She demonstrated how you can use this development environment to document your UI components while testing and toggling various props and actions to see their effects.

Storybook provides a dashboard where you can manipulate various states and props in your application to see the outcome reflected in your desired documented component.

I found it even more intriguing when I saw how Airbnb had implemented it in order to document their own UI components.

While I really do see the value in documenting your React components for large scale projects I can also see its value being diminished somewhat for smaller scale projects as the time spent building a system of UI documentation with Storybook while also having to write tests specifically for that documentation system might be overkill in some instances.

Overall, using Storybook provides a way to create components with more reusability and testability which is always a useful thing for mid to large range projects.

Possibly one the most interesting talks at the conference was by Nikolas Burk, His talk (Building a realtime chat app with GraphQL) was extremely engaging. I was really intrigued at the prospect of using GraphQL as a new query language for my API calls.

It makes sense to me that I should dictate what kind of query I want to send over to my API endpoint. Using GraphQL it seems like I can just define what format my requests and responses should be using a Type face query language which I would describe as hybrid between json and TypeScript.

There are plenty of examples on the site but I’ll give you a brief overview of one here.

You define you request Type like so:

type Project {
  name: String
  tagline: String
  contributors: [User]
}

You then use this Project Type in your GraphQL request;

 {
  project(name: "GraphQL") {
    tagline
  }
}

And the data returned is logical and what you would expect from what you described in your request.

{
  "project": {
    "tagline": "A query language for APIs"
  }
}

Makes sense right? I encourage you to play around with it here.

While I don’t have all that much experience with GraphQL, from what I’ve seen I can attest to it being a great service that can really streamline how you interact with data. Which will make any frontend developers life that much more straightforward.

The response to his presentation was overwhelmingly positive and his company is actively hiring where you will get the opprtunity to work with GraphQL, be sure to have a look at his slides here.

A talk by Glenn Reyes detailing code spitting in react apps was a very topical and interesting take on how our JavaScript bundling systems should be working at the moment using the new import() proposal.

Be sure to check out the slides for his talk here.

His talk made me reflect on how valuable the long term caching capabilities of bundling really is. Perhaps the most valuable thing I took from his talk was the idea of only dynamically loading the components you need for your application.

I previously knew of lazy loading from the point of from Angular but seeing it implemented in this way for a React application was fascinating.

Taking a snippet from his slides like so:

 

state = {
   AsyncComponent: () =>

, }; async componentDidMount(){ const module = await import(‘./AsyncComponent’); const AsyncComponent = module.default; this.setState({AsyncComponent}) }

The dynamic capabilities of the import syntax allows us to specify when we want this Async component loaded. And because the import syntax actually returns a promise we can use ES6 async and await syntax to wait until the import promise has been resolved. From this point we can then set the value of our state to the ready loaded component.

This seems like a very smart way to preload a component when your component needs to mount. The state will refresh and component will display in the render, some really awesome stuff here.

A talk by Erik Rasmussen named, A practical guide to Redux Form was very interesting and made me rethink my current system of form validation using React and Redux.

Erik is the creator of Redux Form and he outlined how this library provides an easier way to manage the various state changes of a dynamic form.

Check out his slides about Redux Form here and the repo for it here.

The library comes with a single Redux reducer that you can use to enable various states of the form field properties. For example, the standardised form attributes used for describing the state of form fields such as pristine or dirty.

This is very handy when you want to apply a very specific style change if the user has not interacted with the form yet (dirty) or if all containing form fields and controls are valid which can sometimes can be tricky to manipulate when not using a library like Redux Form.

Overall, the conference offered a lot in terms of providing the latest and greatest in the React world. While I’m sure there is room to grow it was definitely a successful first edition. I’m sure next year will show signs of expansion, a bigger venue and even more talks.

All talks and slides are available here.

So support the JavaScript community and increase you knowledge at the same time by attending conferences like these. Personally I’ve been looking at React Amsterdam in April. Feel free to suggest others!

Want to brush up on ES6? Check out this awesome resource.