Styled Components – Future Reusability

Styled Components
Styled Components

WRITTEN BY GARETH DUNNE @JSDIARIES

The idea of reusable and modular components is often associated as being best practise with the latest and greatest in the JavaScript world. As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that cab exist in isolation. For example, a button or a menu.

In otherwords, this component can be migrated from project to project with little customisation needed to be fully functional. From this idea I would like to demonstrate the use of styled components.

While my personal preference for styling is still using SASS and partials there is no denying that styled components is the evolution of styling modular UI components.

A library called Styled Components is using the idea of module styled React web components.

If Styled Components 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.

Most of the guidelines are already covered in the docs here but to install Styled Components into your project enter the following in your node command line:

CSS in JS

For sure, this topic of conversation in particular has to be one of the most polarising within the dev community. It really comes down to personal preference but in the context of styled components template literal strings from ES6 JavaScript are used to describe the CSS to our component.

This is the basic concept of styled components and how it differs from standard CSS/SCSS styling sheets.

I’m not going to cover this extensively here as this a post specifically about Styled Components but if you wanted to get more in depth on this topic I’d recommend this podcast episode by Wes Bos and Scott Tolenski.

Creating a Styled Component

Using some examples from the docs we can declare the styled properties of a title text h1 element.

And its as simple as that these ES6 back ticks provide the styled data properties to our component. It definitely seems an unusual but creative way to describe style properties. But at its core it really is just like declaring normal CSS, there is no issue converting already defined CSS from one of your components or projects.

I think it is quite important that the string interpolation is still very simliar to normal CSS. It will be key to converting developers over to this way of injecting styles in JS because it already feels familiar and comfortable to use.

But this is just a basic implementation you can go on further to manipulate and interact with your styled components in combination with things like JSX in React.

This is where the ability to customise CSS with JS becomes apparent and I would highly encourage you to explore the docs even further.

Media Queries

Media Queries for specific styling at different dimensions are also not a problem using Styled Components. A great example from the Git demonstrates this:

We have created our utility file that contains our specific dimension size.

We can access this specific handheld dimension size by importing our utilty file that we just created and referencing is in our template literal string using the template variable symbol $.

Interacting with Props

In the context of React and Styled Components, we can manipulate the internal properties of our styled component using props that we send down to it.

This is perhaps the most useful thing about styled components as it can be dynamically styled based on a single prop that you send down to it.

Pretty awesome stuff and it really highlights where CSS in JS might be more useful when you want to manipulate a style based on a property or other data.

Summary

As I hope I just outlined, there are a lot of benefits to creating components in this way. In the future, I wouldn’t be surprised to see mass adoption of this isolated component pattern at enterprise level. It would enable a company to create their own JavaScript UI library that could be used across a wide range of projects.

Each piece of the UI could be customised by passing down new props or injecting new template literal CSS.

But this isn’t limited to large scale projects either. The possibilities are really endless for creating migratable components like this and its really another weapon the arsenal of a frontend JavaScript developer.

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

React-Storybook

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.

GraphQL

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:

You then use this Project Type in your GraphQL request;

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

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.

Code-splitting in React apps

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:

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.

Redux Forms

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.

Conclusion

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.