Osama Asif Image
Osama Asif
September 2020

UI Frameworks And Libraries For React JS


UI Frameworks And Libraries For React JS

Posted on April 8, 2019

As a Frontend Developer while working on a project you often come across a point where you have to choose a design system and framework for your Web Application. Well, you just can’t create a whole new set of design guidelines and UI components every time you get a new project but you can you use the existing framework and libraries to mold them according to your needs and create something new out of it.

React JS has gained a lot of popularity recently and numbers are increasing rapidly. Some people prefer libraries, others make their own components and then there are some which use a Design System. In this article, we will be talking about the design system, frameworks, and libraries which are really amazing to use with React JS. Each of them has their pluses and minuses, we hope to discuss them all.

1. Material-UI

Material Design is a design language that Google developed in 2014. Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. On the same guidelines, MATERIAL-UI created React components that implement Google’s Material Design. There are a lot of other frameworks and libraries which uses Google’s Material Design such as Material Design Lite,  Material Components for the Web,  Material Design for Bootstrap etc.

For someone who is really a fan of Google should really use Material-UI. It has almost every basic component you need for your application. Components are easy to implement with the detailed documentation and examples given. You might have to add and write more functionality for the components because it’s very basic.

2. Ant Design

Ant Design of React is a React UI library that contains a set of high-quality components and demos for building rich, interactive user interfaces. It was developed by the Chinese Developers but the documentation is translated into English as well. It has high-quality out of the box React components which are written in TypeScript and supports browser as well as server-side rendering and are good with Electron environments. The reason why I like Ant Design is that Components APIs are super easy to understand and handles everything for you. You don’t have to write many checks and extra functionalities because they are already there.

3. Atlaskit By Atlassian Design

Atlaskit is a React UI component library, implementing Atlassian’s design guidelines. The library was started 2 years ago as an effort to implement Atlassian Design Guidelines 3 (ADG3) designs for all Atlassian Cloud products, which are built on top of React. Every component is a package in Atlaskit so you only have to download those packages you need not all the components.

Atlaskit has a really good structure of props in components. They are easy to control and data handling, data fetching through APIs take a minimum effort. I might not recommend Atlaskit for smaller applications, it comes handy only for specific applications such as Dashboards, Enterprise level Applications. Otherwise, it’s your choice to use it with your imagination.

4. Semantic UI

Semantic UI is a development framework which helps to create amazing responsive layouts using human-friendly HTML. This framework is more influenced by the semantic style of HTML having meaning for every CSS class. Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural language like noun/modifier relationship, plurality, word order to have a link between concepts intuitively. Semantic also uses simple phrases called behaviors that trigger functionality.

It is jquery free with declarative API, augmentation, shorthand props, and auto-controlled state. Components are super cool with different variants. Functionality is little less so you might have to compromise on something but you can always write your own functionality and checks its no big deal.

(This blog has been copied from old website enou.co)

Osama Asif Image
Osama Asif

Osama Asif is Engineering Lead at ENOU. He talks about software development and often shares his practices and views about emerging technologies.

Continue reading...

Let's build something great together

Would you like to start a new project or work on an idea with us? We’d be happy to collaborate.

Tell us everything