Once you’ve mastered the basics of JavaScript, selecting a front end JavaScript framework can be a difficult, confusing process. You’ve probably heard of React and Angular — now there’s this new thing called Vue?

You don’t have time to learn all three. So, how do you choose?

Whatever you do, don’t overthink it.

You can be successful with any of these frameworks, and learning one framework makes it easier to learn another. Picking a framework is important, but it’s far more important to focus on learning these shared concepts. This will prepare you for whatever you happen encounter in your development.

As you learn everything you need to know about a given framework, you won’t just learn about that specific framework, you’ll also learn about these concepts all three share:

When deciding on which to use, think about your situation or requirements.

If you’re looking to land a job as a developer, what are employers in your area looking for? Do you want to work for a startup or for a more established enterprise? Do a survey of local job openings or talk with a recruiter.

Which framework has the most active local community? Get out and attend a local meetup that’s focused on React, Angular or Vue and meet other developers who are passionate about those frameworks.

If you’re selecting a framework for your team’s next project, what’s the collective skill set for your team? Do you have a lot of general JavaScript knowledge? Would your team benefit from selecting a framework with a gentler learning curve? What features are most important for the application that you’re building?

Ease of Learning

At their core, React and Vue are focused on building user interfaces while Angular is focused on building applications. Because of this, Angular is bigger, more complex and has a steeper learning curve. While they’re initially smaller and less complex, the more that you extend React and Vue the more their size and complexity grows.

Tooling Support

All three frameworks provide CLIs, or Command Line Interfaces. These make it easy to create new projects, support local development and prepare your apps for deployment. All three also have great support within code editors like Visual Studio Code and Atom. To get the best experience and maximize your results, you’ll need to install the appropriate editor extensions.

Performance

While performance benchmarks (i.e. how quickly specific tasks take to complete, such as rendering a list of items) vary for some use cases, each of these frameworks offers similar performance, so this isn’t a significant differentiating factor for most developers or teams.

React is very popular, evidenced by its large supporting community. React’s popularity has helped to drive adoption with startups. The availability of a wide variety of open-source, community-developed extensions for React gives you lots of options for building out complete solutions.

Cons

Adjusting to JSX

Complete solutions require third-party libraries

Availability of options can overwhelm or confuse

Component templates are written using JSX, not native HTML, so you should expect a bit of an adjustment period. Because of its focus on building UIs, you’ll likely need to extend React with third-party libraries. For example, if you need to support client-side routing in your app, you’ll likely use the popular third-party library React Router. Luckily, there are lots of great choices for fulfilling almost any requirement. But having more choices can be overwhelming or confusing—especially for beginners.

Angular

Angular is an all-inclusive framework that provides more “out of the box” than React or Vue. As a result, it provides more guidance on how to build complete solutions. Its focus on application development — evidenced by the inclusion of features like routing and form validation — makes it popular with enterprises.

Angular has the most capable CLI of the three frameworks. It’s used throughout the development of your app to create new components, install packages and run migration and installation scripts. TypeScript — with its static typing and amazing editor enhancements — offers skilled developers who don’t have a lot of JavaScript experience a friendlier transition to client-side development. And while its binding syntax can take a bit to get used to, being able to leverage native HTML and CSS for component templates and styles is a plus.

Cons

Large API

Steep learning curve

Code can feel verbose and complex

Angular’s large API and overall approach to developing apps results in the steepest learning curve of the three frameworks. Angular code — with its use of static types, decorators and configuration-based approach — can feel verbose and complex at times when compared to React and Vue.

Vue

Pros

Easy onramp for developers

Grows with you

More inclusive than React

Support for native HTML and CSS

Well written documentation

Vue’s scaled-down experience offers an easy onramp for developers who are newer to client-side development, while still being capable enough to grow with you as your skills develop. And while it’s not as inclusive as Angular, Vue does offer more “out of the box” than React. This makes it a popular choice for beginners.

Like Angular, Vue also allows you to leverage your native HTML and CSS skills instead of needing to learn a new templating language, as you do with React. And it’s known for its well written documentation.

Cons

Newer than React and Angular

Smaller community (for now)

Introduced in 2014, Vue is newer than both React (2013) and Angular (v.1 2010, v.2 2014). So, while its community is growing, it’s not currently as established or as big as the others.

Basic Component Development

What Are Front End Frameworks?

Front-end frameworks enable the development of client-side user interfaces or apps as a collection of components. Components combine data, logic and presentation code into a single container. You can think about your app as a collection of discrete, self-contained pieces.

Let’s take a closer look at basic component development using each of the three frameworks.

Basic Component Development in React

A stateless functional component is just an ordinary JavaScript function that accepts a single `props` parameter — a properties object — and returns a React element.

function Product(props) {
return (

{props.name}

);
}

A stateful class component is an ES2015 class that extends React’s base `Component` class. It contains a `render()` method that returns a React element. Like stateless functional components, stateful class components have properties via the `props` property and, as the name suggests, they also have state via the `state` property.

JSX

React components are made of React elements written using JSX. JSX looks like HTML but it’s not markup, it’s a special JavaScript syntax that gives you the full power of JS when writing the rendering logic for your components.

JSX elements can represent DOM elements like <div> and <h1>, or they can represent user-defined React components:

Pet Rock

<Product name="Pet Rock"></Product>

Dynamic values can be rendered as element inner content using a JavaScript expression:

{props.name}

Element attributes can be set using string literals—or a JavaScript expression:

Basic Component Development in Angular

While it’s possible to develop Angular apps using vanilla JavaScript, most developers use TypeScript. TypeScript provides static typing that helps catch coding errors earlier in the development process. It also supercharges your development experience with true statement completion, in-editor API documentation and symbol-based navigation and renaming.

Components in Angular are ES2015 classes that are decorated with a `Component` decorator:

Decorators are an extension to JavaScript provided by TypeScript. They offer a declarative approach to development that allows you to add metadata to classes, methods, properties and parameters. In the above example, we’ve used a decorator to declare to Angular that this class is a component, and to set the `selector`, `templateUrl`, and `styleUrls` configuration properties.

Properties in the data object are “reactive” — as their values change, Vue updated the DOM.

The element where your app is mounted defines the template for your app. Like Angular, a Vue template is defined using native HTML so any valid HTML is a valid template:

Pet Rock

Dynamic values can be rendered to a template using interpolation:

{{ name }}

Vue provides directives that can used to bind element attributes and events to properties and methods defined in your Vue instance. An attribute binding is created using the `v-bind` directive:

<img v-bind:src="imageUrl" />

An event binding is created using the `v-on` directive:

Vue’s scaled-up experience leverages a front-end build process in order to support a feature called “single file components.” This gives developers an alternative approach for handling larger, more complex applications while still leveraging the skills that they’ve already mastered.

Single file components combine the options object, template, and scoped CSS into a single “.vue” file:

The Conclusion

Trying to decide which of these front end frameworks is the “best” is a little like trying to decide which ice-cream flavor is the “best” — it’s a subjective decision that will vary for each person and situation, and your favorite will likely change over time. Make no mistake — front end web development, like all programming specialities, will continue to change and evolve over time.

Interested in a guided JavaScript curriculum that leads you from beginner to job-ready developer? Check out our Techdegree in Full Stack JavaScript.Free 7-day Techdegree Trial

Each is designed by our faculty of tech professionals to guide even a coding beginner to becoming a job-ready software developer armed with a professional portfolio of real-world projects. Try one out today with our free seven-day trial, and see if software development is for you.

Social

With an average starting salary of $59k a year, Full Stack JavaScript development isn’t just a job, it’s a career.

JavaScript is the most in-demand programming language in today’s employment market, where half a million developer positions are open, waiting to be filled by qualified JS coders — and the tech industry’s need for this talent will rise dramatically in the coming years.

Our Techdegree in Full Stack JavaScript guides our students — even absolute code beginners — on the path to becoming professional junior JS developers, armed with portfolios of real-world projects and the skills to be job-ready on their first day of work.

This is no bootcamp, costing thousands of dollars and dragging you away from your life to complete — you progress at your own pace through our program, strengthened with real-time community support, project reviews and feedback from your teachers and peers.

Try it out with a free seven-day trial today, and see if Full Stack JavaScript development is for you.