What's guaranteed to turn off users? A sluggish UI, inconsistent typefaces, or misplaced buttons. It's hard to pick the 'winner,' but you don't want to have any of them on the web app you're working on.
Thankfully, you can avoid creating bad UI by using the right frontend framework. Read on and find out which is my favorite.
What is Frontend framework?
Frontend typically refers to the interface that users interact with when they are browsing the web. Generally, frontend refers to the browser, but it could also mean the UI of an app. Developers used to write all the codes manually in order to create the elements, behaviors, and exchange data with the backend.
A frontend framework simplifies the task by having pre-written codes for you to build on. It serves as a foundation that contains commonly-used elements such as the grid, pre-defined typography, and website components like buttons, scroll bars, and side panels.
It spares you from reinventing the wheel for every project.
Market share of UI frameworks
There are more than a handful of UI frameworks available, but 3 of them are highly favored amongst the developer community.
Leading the pack is React, which has an average of 7 million weekly downloads. It surpasses Vue.js and Angular by a significant gap as the runner ups chalked up 1.5 million and 500 thousand weekly downloads on average.
In React, components are built to encapsulate the state they are in. This enables the components to pass rich data around and does not require the Document Object Model (DOM) to handle the state.
Facebook released the first version of React in 2013. A couple of years later, React Native was introduced for mobile applications.
With React, the rendering logic is tightly coupled with other UI logic. It allows a seamless performance of events handling, state transition, and preparation of display data. This is a deviation from conventional practice where markup and logic are kept in separate files.
The simplicity of React has seen the framework used by some of the largest companies, including Twitter, Pinterest, Netflix, and Udemy.
Pros of React
- React uses virtual DOM, which is an extraction of the actual DOM for rendering the UI. It is more efficient, as the components take lesser time to show up on the screen.
- As the components in Reacts are encapsulated, they can be used independently without any limitations.
- React is modeled around functional programming defined by immutable data, pure functions, and declarative style. Therefore codes created with React are easy to test, main, and reuse.
- As the most popular framework, React boasts a large global community. It also means you’ll have a great option of open-source packages to work with.
- React is proactive in upgrading and releasing newer versions of the framework. You’ll get timely bug-fixes and improvisations.
- With React you can implement different rendering techniques such as client-side rendering(CSR), server-side rendering(SSR) or even static file generation
Cons of React
- If you’re new to React, the concept of mixing templating with logic (JSX) can be confusing in the beginning.
- There’s too much focus on the core library. Concerns like routing and global state management are delegated to companion libraries. The responsibility of how to develop with the various libraries falls greatly on developers.
- As the project grows, you might lose the “flow and data components”. The fact that React documentation is often incomplete, no thanks to its rapid growth, further aggravates the matter.
When to use React
React is the ideal front-end framework for building a web application that expects high interaction and frequently-changing states. Its unique approach of using the Virtual DOM means the web app could respond to users input quickly and dynamically render the UI.
If you’re building a web application with little time to spare, you’ll also find React the right solution. Its reusable components prove to help cut down the development time.
Vue.js may lack recognizable names in terms of adopters, but it’s still a highly popular framework amongst developers. The framework was created in 2014 by Evan You. It is simple and versatile, allowing developers to tackle dynamic processes without the need for additional libraries.
Like React, Vue.js is based on a virtual DOM. Besides that, it is lightweight and supports two-way data binding. Being a small-size framework also helps in increasing the performance of the frontend.
Pros of Vue.js
- Vue.js has extensive and concise documentation, which helps you learn the framework as a newbie.
- It uses virtual DOM, which improves rendering efficiency.
- Vue.js is highly integrable. Smaller Vue.js components can be integrated seamlessly into existing infrastructure without any adverse effect.
- It offers reactive and composable view components.
- Templates created from Vue.js are in HTML format. It’s a plus point for developers who are familiar with HTML.
- The entire framework's size is only 18 kB, making Vue.js incredibly lightweight and improving UX performance.
Cons of Vue.js
- Vue.js community is relatively small as it lacks in popularity. Therefore, getting peer support is rather difficult.
- Most discussions on Vue.js are conducted in Chinese as the framework is highly popular amongst Chinese companies. The language barrier makes communication difficult for developers elsewhere.
- The lack of experienced developers, community support, and component stability issues makes it risky to use Vue.js in large projects.
When to use Vue.js
Vue.js is great for creating a simple one-page application. It has a shallow learning curve where developers can quickly learn the ropes around the framework. However, it is not meant for complicated projects yet, as getting an expert in Vue.js is not easy.
Angular, which is created based on TypeScript, is a comprehensive frontend framework by Google. It was released in 2016 and is build with the object-oriented programming approach. The framework features two-way data binding, which works well in developing web and mobile apps.
To date, Angular is one of the most comprehensive frameworks ever, as developers can tackle complicated tasks within the framework itself. There’s no need for additional libraries in developing complex UI/UX.
Pros of Angular
- App logic and the UI layer is decoupled with Angular’s Model-View-Controller architecture. It also supports the separation of concerns.
- You can bypass the default DOM-rendering of the template by intercepting the rendering calls. For example, the renderer can be configured to change the UI dynamically.
- Angular has strong support for building and handling dynamic forms. Templates can be used to create new forms based on a dynamically-changing data model.
- The RxJS library is installed along with Angular. It is a library that supports reactive programming with observable streams to handle asynchronous code easily.
- The Services and Dependency Injection in Angular allow components to be easily reused, tested, and maintained. The feature helps larger projects as dependencies can be called from external sources, rather than created within the class.
Cons of Angular
- Some people may have difficulty understanding the multilayer architecture of Angular, and this can affect debugging on the framework. Debugging a sizeable Angular-based app can be an excruciating process.
- Web applications created with Angular have limited SEO options, which can be hard to reach by search engine crawlers.
When to use Angular
Angular is the go-to framework when creating a large enterprise website or a large-scale project with complex infrastructure. It’s also suitable for projects involving progressive web applications (PWA).
Why do we use React
React is undoubtedly our favorite frontend framework. Here are why we love it:
- We’re able to use React across projects of different complexities. It works in creating an MVP, Startup, Enterprise, and E-commerce solution.
- React gives us the pace to build simple and scalable solutions. Working with React has always been a pleasurable experience.
- Our developers no longer need to build components from scratch. React’s vast numbers of libraries and tools drastically reduce development time.
- We get to create awe-inspiring UI for our product by using open-source React components like Ant Design and Material AI.
- React is arguably the most popular front-end framework. We don’t have to worry about maintenance and customization, as it has a vibrant community of developers. It’s a different story if we’re using Vue.js or Angular.
- It’s easier to find a React developer for our team compared with other frameworks.
We’ve successfully developed a few projects with React, and here are two notable ones.
Apprvl is an app created for photographers to simplify client approvals of their images. Photographers can upload their works through the app and get comments by sharing the generated links with their clients.
We start by building the main functional parts on the web app to test the hypotheses with real users. Based on the feedback, we make appropriate changes to the parts.
Then, we proceed with building a scalable backend architecture and kickstart the mobile app development.
We completed the full cycle development of apprvl based on the MVP.
Using React, we’re able to deliver an MPV that meets all the requirements. It’s delivered with minimum bugs throughout the development cycle and scalable for future development.
Plai is a free performance measurement tool that helps to grow, coordinate, and engage a remote team.
We started the project with the discovery stage to identify the actual problems and needs of startup owners.
Based on the feedback, we use React to create the web app. It allows us to develop the MVP very quickly.
Once the MVP was tested and validated, our team proceeds with developing the full app.
The MVP is delivered with the highest quality and satisfy every requirement. Today, the web app continues to grow as we’re adding in more valuable features.
You can’t afford to deliver shoddy UI or waste too much time building components for the web app. Leverage the convenience and efficiency of a frontend framework in bringing your ideas into life.
There isn’t a one-size-fits-all framework. If you’re building a simple app and have very little time to spare, go for React or Vue.js. Choose Angular only if you’re building a complex web solution because the pain in debugging the app is real.
If you’re in doubt, I’ll be happy to guide you with the best option. Drop me an email here.