Learn the core concepts, advantages, and drawbacks of all three major web frameworks: Angular, React, and Vue.
Every developer hopes to see their app grow. Developers want to see more users as well as more features to make their app more useful. But that growth comes with challenges like cluttered User Interfaces (UI) or hopelessly large codebases. To combat those issues developers rely on Frameworks to help organize code and take advantage of built-in features to make application deployment easier.
Front-End Frameworks help developers build data-rich and responsive UIs that keep a user’s attention. Seeing an app take in information and reflect changes immediately is now expected from many apps.
Overall, it depends on a variety of factors, including how you want to structure your projects and which features you find easiest to work with. In this article, we’ll cover the core concepts, advantages, and drawbacks of all three major web frameworks: Angular, React, and Vue.
What is Web Development?
Before we jump into the three major web frameworks, let’s define some key web technology terms and concepts.
Hypertext Markup Language (HTML) is used to display and format content on a webpage. This paragraph you’re reading is displayed on this page using HTML, for example.
Cascading Style Sheets (CSS) is used to style web pages. This includes everything from font, colors, imagery, to even animations that make the page interactive and fun to look at.
What do React, Angular, and Vue have in common?
There are a few terms and concepts that are leveraged by all three frameworks.
All three frameworks make use of components, aka the building blocks of a web application. Developers build small, reusable pieces of functionality then combine them into a complete app. They speed up the development process by allowing a developer to make tweaks or fixes in one specific area without worrying about the entire app breaking or affecting another developer’s work in progress.
Think of components like a function. A function in your code should do one thing and return a predictable response every time. Components help you break down problems into smaller, more manageable pieces.
Command Line Interface (CLI)
All three frameworks have a Command Line Interface (CLI) tool that developers use to quickly create, manage, and scale up projects as they work. They also let developers run test servers so they can see changes in the browser in real time or debug errors as soon as they occur. If you are totally unfamiliar with using the command line then take some time to learn it since they are used in all sorts of programming environments - not just web development. Fortunately, all three frameworks’ documentation cover what you need to know extensively.
Now that we’ve seen an overview of various pieces of web dev technology, let's dive deeper into each web framework one by one.
First up is React. React is the big fish in the Front-End pond. The majority of web developers have used React and thousands of companies use the framework to ship mission-critical apps. The most notable is Facebook, which employs thousands of engineers. They created React out of a need to efficiently organize its code and allow for changes to update quickly and at a global scale.
React: Virtual DOM
In response, React uses a “Virtual DOM” concept. The Virtual DOM makes a copy of the page's DOM and changes are only made inside the Virtual DOM. Next, those changes (and only those changes) are applied to the actual DOM. It seems counterintuitive to speed things up by adding an additional step, but it works because the DOM only gets updated with what has changed, instead of replacing the entire DOM all at once.
You can see this yourself by creating an app using the Create-React-App command available via npm or similar package manager (like Yarn). Just type:
create-react-app <the name of your app>
The CLI will compile the files you need in a typical folder structure. Use the CLI to enter the new app’s root folder and you can start a local server that displays the getting started page. The entire app runs from an index.js folder like this:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
As you see above, the ReactDOM uses a render function to write the <App> to the page. All the content, functions, and components of an app are contained within one element.
Components can either be a single function or a class in React. React components take in information known as props (short for properties) and use props to return the result you want. The beauty of React is that your entire UI is built as a collection of components that is created and managed by the Virtual DOM. Combined with JSX (explained below) you can combine your component’s functionality and UI elements into one easily managed file.
Redux is a state management tool for React. It is an external library (not a part of React) but because it makes managing things easier you will find most React projects use Redux as well. Redux is simple to install, you just wrap your <App> component in Redux’s <Provider> Store and every item inside your <App> can be managed by Redux. With the Redux provider in place, you can help ensure that state is updated properly across the entire app and test those assumptions easily.
Taking a cue from the way React uses the Virtual DOM, the information inside the Redux Store is never updated directly. Instead you create Actions that alert the store when changes need to be registered. The key advantage here is that Redux uses these functions to only update what it knows has changed rather than checking the state of everything available. That saves time and improves app performance.
This helps with maintaining clean code and debugging as well since React's "render" function with JSX cuts down on the lines of code needed to display content. Your components only need to be made up of your .jsx and .css files.
In essence, React projects are just a bunch of small components combined to create a cohesive web application. Developers love this approach, as it allows for reuse and modularization. They can just focus on the code and can get up to speed on a new React codebase easily.
React’s popularity is a strength all its own. Many programmers like to use React simply because it has such a large developer community. More developers mean more features and libraries to help accomplish tasks that they otherwise would have to recreate themselves.
There is such a thing as too much freedom. Once you create a React app it is up to you to determine the overall project structure and information architecture. React apps do not come pre-configured with everything you need to create an app - you must pick solutions for state management, routing, and more. That can lead to complexity down the line especially as your codebase grows. You will need strict style considerations if you are working with a large team.
The best part of Ionic React? It’s just React: standard React development patterns, the standard react-dom library, and the huge ecosystem around the web platform. Ionic Framework uses React Router and the Virtual DOM just as regular React apps do, so you can use the same libraries and tools you know and love.
Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:
npm install @ionic/cli
ionic start myApp --type=react
From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.
- Large ecosystem and adoption
- Virtual DOM and one way data flow enable highly performant applications
- JSX makes it easy to make components with the UI and functionality combined
- No “batteries included:” Developers must pick from a wide variety of tools to build a complete app
React is good for developers who:
- Want a lot of resources for support
- Want to create apps/components quickly
Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.