Demo Links

This is based on a lunch and learn presentation that I created, comparing Angular and React. First, I will be going through legacy vs future applications as the purpose of the presentation was to talk about the existing issues of the current application (written in AngularJS) and to provide knowledge around the newer frameworks/libraries.

Legacy Front End

Hard to Reuse Across Projects and Teams

A big issue with having a legacy front end is that it is hard to reuse across projects and teams. As with many legacy applications, there are files that no developer wants to touch. In our case, it is large view-model controllers with lots of mixed logic inside.

Coupled Architecture

Along with a tightly coupled architecture. All of the logic is inside these controllers and we depend on large controllers to work. It makes it harder to makes changes without affecting other parts.

State Issues and Difficult to debug

You also run into state issues which makes debugging really hard. Multiple controllers using multiple services, no single source of truth, and two-way binding makes it hard to follow a bug trail and find out where the underlying problem is.

Eventually Outdated

Older technology will eventually become outdated. Local communities and meetups have also moved on to topics and presentations on the newer frameworks and libraries which makes it harder to learn and improve.

Present Front End

Re-use of components (DRY, SRP)

Everything is built in components and self-contained, allowing for re-use. Small components over big controllers (legacy apps). These things are on target with Don’t Repeat Yourself, Single Responsibility Principle.

Decoupled Architecture

Loosely coupled architecture – each component has its own HTML, CSS, JS. Easy to change, maintain, grow.

Faster Development

Faster development with new tools, an example is hot module replacement (HMR) which allows developers to save and maintain state while seeing their code changes.

Uni-directional flow

Two-way binding caused problems in scalable apps. There is no two-way binding which makes debugging easier because it is easier to follow the flow of a function.

Why Angular and React?

Previous frameworks

http://stateofjs.com/2016/frontend/

The reason for the comparison between Angular and React lies in this chart where they are leading in the columns heard of it, interested and used before, would use again.

Overview

http://www.monkeyuser.com/2017/angular-vs-react/

Angular

JavaScript Framework
TypeScript
Final release in 2016
Google

Angular is a completely new framework from the first framework (AngularJS). Angular was released in beta mode in 2015 and fully released in 2016. It is backed by Google and used in the Google AdWords platform.

React

JavaScript library
JavaScript w/ JSX
Released in 2013
Facebook

React is a JavaScript library for building user interfaces (the view in MVC) using pure JavaScript with JSX which is a templating engine. React was released in 2013, created by Facebook, and used in the Facebook platform and also Instagram.

Main Differences

Angular

Framework
Steeper learning curve
Opionated
Growing community

React

Library
Easy to learn, difficult ecosystem
More autonomy
Active/strong community

One of the large differences is that one is a framework and the other is a library. Angular is a large framework, everything comes in the box. Whereas React itself is just a view library. Angular has a steeper learning curve because it comes with everything (router, forms, xhr tools, tests) and React is easier to learn, but the ecosystem is hard. For React you will have to find and evaluate separate modules for use with React (Redux, thunk middleware, react-router, xhr tool).

Angular is more opinionated, similar to Angular 1, Angular wants you to do things a certain way. This gives you less freedom, but a more consistent codebase. React gives you more choice on modules and libraries you choose to use with it.

React has a stronger community because it has been around a bit longer. Referring to the chart before, React also has a lot more people who have used it, and would use it again compared to Angular (meaning it might have a better developer experience). Angular has a growing community, more people have been starting to use it.