Use Polaris to rapidly build a ReactJs application

There are a wide range of reactjs tutorials available online but not many of them are optimised for a bootstrapper wanting to hack together a product as soon as possible while not compromising too much on quality. This was the exact problem we faced while building our product.

As many web developers will tell you, the core business logic is never the bottleneck. What consumes the most amount of time is styling the UI and polishing it to adhere to the UI/UX expectations of 2020 while also being responsive on devices of all shapes and sizes.

So what if there was a library that takes care of all of these things and allows you to focus solely on your business logic? This is exactly what Polaris does.  It is a library of react components built by Shopify and they use it for their own UI as well. 

Using Polaris is as simple of piecing a bunch of lego blocks together to build something. Each of these lego blocks are react components which can be customised by simply changing the properties provided to that component. To use Polaris you would need to know the basic concepts of reactjs.

Once this is done, the app is automatically responsive on devices of all shapes and sizes. So what lego blocks do we need to build a web application? Lets go over all the lego blocks that worked really well for us.

​

Building blocks of an application

Top bar

A great place to display your product logo on the left and account information on the right. You can customise this further with your own brand colour like we did instead of the default Polaris colour. 

How it works

​

Side navigation bar

Use this to display all your features/pages which the user can use to navigate your product. The component gives you a way to add your own icon to each of the navigation items. You can also choose from a whole range of existing icons that polaris already offers using the Polaris icon explorer.

How it works

​

Contextual save bar

Ever find yourself with a UX problem where you have a bunch of settings in a page that the user can configure, but there needs to be a way for the user to save their progress in between? 

The dilemma here is that if you have a save button at the bottom, one would have to scroll till the bottom to discover the button and save and if the button is at the top one would have to scroll back up to save if they are at the bottom of the page.

Contextual save bar solves this problem by turning the top bar into an interface where you can either save your progress or discard it. This is super neat because the top bar will always be visible no matter where you scroll.

How it works

​

Annotated section

Oftentimes when you use forms to collect information from a user, it is a challenge to educate them about what that form is for. You would either have to give this description before displaying the form or after.

Annotated section solves this problem by giving you a super simple and elegant way to put the description on the left while displaying the form on the right.

How it works

​

Banner

Displaying banners are a great way to communicate to users about stuff like new features, outages, nudging them to subscribe to paid plans, etc. Polaris provides a wide range of banners which can be customised simply by changing certain properties of the component. 

How it works

​

Card

Every interface needs a way to display a certain unit of information. This can be achieved using a card. You can also easily add headers and actionable buttons to the card with just a few tweaks in the properties. 

How it works

​

Pages

The Page component serves as a container to hold all the other components, all the while providing a title, subtitle and some actionable items that can be taken on that page. 

How it works

Conclusion

All the above components are the basic building blocks of an application, however Polaris offers a whole range of other components that are super handy in creating all kinds of flows. You can find all of them here. 

They also have a bunch of design guidelines around the usage of these components. One does not have to adhere to these guidelines but they definitely help because they are something that Shopify uses and it works great for them.

What is the catch?

Polaris was primarily designed for solving various UI/UX problems that occur in the Shopify systems. This does not mean that they are not useful for things that are built outside of Shopify, it just means that there needs to be an overlap between the product you are trying to build and every use case that Shopify encounters.

It is a great way to bootstrap a product at lightning speed, but the catch is that the components are not very customisable. They are meant to be picked up and used as is with tweaks made only to the properties passed as arguments to the component.

You might find yourself in a tricky position if you have to implement a component with custom CSS alongside polaris components. But for the most part polaris has default components to cover most cases and there are workarounds for achieving custom CSS.

An example of the work around is that we wanted to change the default colour of a Polaris primary button to our own brand colour and we did this by overriding that particular css property globally and changing the colour with a  !important at the end.

Closing note

For someone that is just getting started with reactjs, using a library like this is a great way to focus on core business logic while at the same time learning the concepts of react without spending time on styling your components. 

Link to original blog post