2 Approaches for Developing Your Front-End
Should you take a modular approach or DIY?
When it comes to building memorable omnichannel experiences, your front-end touchpoints are particularly important, as they establish the relationship between your brand and your customers. With headless or composable commerce, the modularity of your platform’s architecture gives rise to a high degree of flexibility and customizability—which, by default, extends to your web and mobile apps.
What’s the best way to approach your front-end design and development when you’ve got options? How do you make the most of the flexibility and customizability of your composable architecture? Do you leverage pre-existing, modular technologies to assemble your front-end or do you build everything from scratch?
Let’s explore two approaches and some options within each.
Option 1: UI/UX Libraries
Web frameworks like React allow you to take a modular approach to building sites, where individual components represent reusable pieces of HTML, from navbars and footers to banners and buttons. While React comes out of the box with native components, such as text inputs and images, the majority of the components will likely have to be custom-built. However, you don’t necessarily need to reinvent the wheel to make your app function and look exactly how you want it to. Instead, you can make efficient use of your valuable time by leveraging pre-existing libraries to accelerate your UI/UX development.
UI/UX libraries provide a way to create a default theme that can be used across your website. Using this universal theme eliminates the need to add the same properties and configurations to each codebase, thereby reducing the amount of code written and making the style of the website consistent. What’s more, the components offered by each library allow your development team to focus purely on your site implementation rather than the base components, while also exposing a powerful theming and styling system.
Here are three popular component libraries.
Chakra UI
Chakra UI is a component library for React apps that gives you the necessary building blocks to build your front-end. Apart from React, it also supports frameworks like Next.js, Gatsby, and Blitz.js. With 1.7M downloads per month and 19.7k stars on Github, Chakra has a proven track record and supports big-name companies like Lattice, Trustpage, and Shogun.
Chakra allows you to build your front end using any of its over 50 out-of-the-box components—discrete website elements, such as tables, menus, and buttons—rather than building everything from scratch. There are, however, ways to change the style of any component by passing props to it. In other words, you can include CSS styling (e.g. margins, colors, typography, etc.) directly in each component. And for designers and developers, Chakra also comes with a Figma kit, so you can design great user interfaces before you build.
MUI
Material UI—or MUI—is a suite of UI tools that includes MUI Core, MUI X, Templates, and Design Kits. It has 16M downloads per month, 83k stars on Github, earning it a well-deserved spot as the solution for companies like Spotify, Amazon, and NASA.
Similar to Chakra UI, MUI Core contains over 40 building block components for React, as well as the styles as props mentioned earlier. In addition to these foundational components, MUI X also provides advanced components for complex use cases, including data grids, date range pickers, and tree views. When it comes to integrations with designer tools, MUI supports Figma, Sketch, and Adobe XD. Another area where MUI differs is in their collection of templates for dashboards, landing pages, e-commerce, and more. So rather than having to still build web pages and apps by assembling components, the templates provide you with the look and feel of your website.
Tailwind CSS
While MUI and Chakra UI are both component libraries, Tailwind CSS is primarily a CSS framework that helps people build and style their websites within HTML. By using classes like flex, text-center, and rotate-90, it’s easy to style your website or app. With 65k stars on Github, Tailwind has supported companies like Shopify, NASA, and The New York Times.
While Tailwind does have a library of over 500 components that are compatible with HTML, React, and Vue, its atomic CSS classes allow you to focus on things like accessibility, overrides, and your own component composition. Similar to MUI, Tailwind also recently launched Tailwind UI, which provides website templates built with React and Next.js.
Option 2: Pure CSS
If option 1 is using the out-of-the box components and templates of a UI/UX library, option 2 is to build your own from scratch. A benefit of this approach is that you have complete control over the styling of your website or app, and you don’t have to worry about overriding any library components—which can sometimes prove difficult and time-consuming. Another reason to consider a pure css approach over a library is that libraries often install additional code or dependencies that aren’t always needed. With a pure CSS approach, your developers will be delivering only the amount of code that there needs to be, allowing for a more performant app or website.
At the end of the day, your choice of approach will dictate where your designers and developers concentrate their efforts. By opting to use a UI/UX library, you gain the ability to focus more on your site’s function and experience, at the expense of design freedom. On the other hand, pursuing a pure CSS approach means that you will have complete control over the look and feel of your website, but your developers will be concentrating more of their efforts there.
If the idea of modularity in commerce appeals to you, check out our e-book series Foundations of Composable Commerce at Scale.
Adam Craveiro
Content Writer, Orium
As a former teacher and writer for a multimedia agency, I blend my passion for cutting-edge technology to create content that helps retailers navigate the composable commerce space. I leverage my background in adult education and personal experience with web development to cover the latest industry news and provide insight on the technologies shaping the commerce world at large.