You want to compare frameworks?

Complexity

1. How big is the project?

2. Is all of the functionality clearly defined in advance or are you expected to be flexible?

3. What capabilities do you need?

4. Are the domain model and business logic complex?

5. What platforms are you targeting? Web, mobile, desktop?

6. Do you need server-side rendering? Is SEO important?

7. Will you be handling a lot of real-time event streams?

Team

1. How big is your team?

2. How experienced are your developers and what is their background?

3. How will this change over time?

Longevity

1. How long is it going to be maintained?

2. How will team change over time?

3. How will the framework be maintained/supported over time?

​Community

1. Are there any ready-made component libraries that you would like to use?

So, you want to upgrade from AngularJS?

Rewrite

Dual Framework (ngJS & ng5+)

Upgrade Apps Concurrently

Upgrade Apps Independently

Angular

React

Polymer, Vue, etc

Framework Options

Approach Options

App Upgrade Options

https://medium.freecodecamp.org/a-roadmap-to-becoming-a-web-developer-in-2017-b6ac3dddd0cf

Options
High Level Overview

Front-end Frameworks
Overview comparison based on 200 devs

https://2018.stateofjs.com/introduction

No Upgrade

• Rely on community to find and fix bugs
• Fix any bugs community doesn't do
• Decreasing popularity over time (hard to find devs, etc...)

Upgrade to Angular

• Option to run Angular and AngularJS at same time
• Option to use ngUpgrade (then upgrade incremental versions)
• Maintain Angular patterns
• Component-centric or feature-centric upgrade path options

Upgrade to React

• Requires more rewrite
• Allows for framework-agnostic patterns and learning
• Only one framework in app
  • Performance and maintenance benefits

How much development is planned?

lots

Is the app
big and complex?

 minimal

Don't upgrade

 small &
 simple

Consider
component-centric upgrading

big & complex

Consider
feature-centric upgrading

AngularJS     Angular

AngularJS     Angular7

AngularJS

Angular2

Angular4

Angular5

Angular6

Angular7

AngularJS

Angular5

Angular6

Angular7

ngUpgrade

UpgradeModule

UpgradeModule​

UpgradeModule​

UpgradeModule​

Fresh Rewrite

Incremental Rewrite

https://v2.angular.io/docs/ts/latest/guide/upgrade.html

Appendix

• A major release every 6 months

• 1-3 minor releases for each major release

• A patch release almost every week

All of our major releases are supported for 18 months.

• 6 months of active support, during which regularly-scheduled updates and patches are released.

• 12 months of long-term support (LTS), during which only critical fixes and security patches are released.

https://angular.io/guide/releases

Angular Releases​
Focus on Major Releases

React Releases​
Focus on Minor Releases

• React 15 was released in April 2016

• React 16 was released in September 2017

• React 17 isn’t expected until 2019

Commitment to Stability

As we change React over time, we try to minimize the effort required to take advantage of new features. When possible, we’ll keep an older API working, even if that means putting it in a separate package. For example, mixins have been discouraged for years but they’re supported to this day via create-react-class and many codebases continue to use them in stable, legacy code.

Over a million developers use React, collectively maintaining millions of components. The Facebook codebase alone has over 50,000 React components. That means we need to make it as easy as possible to upgrade to new versions of React; if we make large changes without a migration path, people will be stuck on old versions. We test these upgrade paths on Facebook itself – if our team of less than 10 people can update 50,000+ components alone, we hope the upgrade will be manageable for anyone using React. In many cases, we write automated scripts to upgrade component syntax, which we then include in the open-source release for everyone to use.

https://reactjs.org/docs/faq-versioning.html​

Roadmap milestones:

• React 16.6: Suspense for Code Splitting (already shipped)
• React 16.7: React Hooks (~Q1 2019)
• React 16.8: Concurrent Mode (~Q2 2019)
• React 16.9: Suspense for Data Fetching (~mid 2019)

Angular Version History
Current: v7.1.0

1. AngularJS
   1. Did not follow semantic versioning
   2. Not designed for mobile or enterprise
2. Angular 2
   1. TypeScript default (options for ES6)
   2. Mobile support
3. Skipped Angular 3 for package alignment
4. Angular 4
   1. Compatible with Angular 2 (mostly)
   2. Small footprint and fast compilation
5. Angular 5
   1. Build optimizer and compiler updates
6. Angular 6
   1. Component Dev Kit & Forms features
   2. Router, Renderers, Compilers
   3. TypeScript 2.7.x support
7. Angular 7
   1. CLI Prompts, Virtual Scrolling, Drag&Drop
   2. TypeScript 3.1, RxJS 6.3, Node 10
   3. Ivy

AngularJS The team at google and community took what was once a small internal project and pushed it to new frontiers like mobile and large enterprise applications. However, it was never intended or designed for these situations when Miško first created it. With every pull request we modified AngularJS the best we could to fit our needs.

2016: The Panic Period Developers and managers alike started to freak out. The complete rewrite meant a doomsday scenario for their current AngularJS projects running in production. “How can we support this application in 3, 5, or 6 years from now?!”

Even worse, their was no clear migration strategy to port an AngularJS 1.X application to the new Angular 2.0.

What they found was a lot of frustrating new concepts and breaking changes with every release. It was at this point teams quickly started to turn their back on AngularJS for libraries like React. Developers wrote break-up letters to their once beloved JavaScript project.

https://www.ngdevelop.tech/angular/history/

https://blog.angular.io/version-7  |  https://medium.com/the-startup-lab-blog/the-history-of-angular-3e36f7e828c7

Fun Fact: Called "Angular" because of the <> in HTML

Angular Overview
v7.1.0

CROSS PLATFORM

Progressive Web Apps Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.

Native Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.

Desktop Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

SPEED AND PERFORMANCE

Code Generation Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

Universal Serve the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

Code Splitting Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

https://angular.io/features

PRODUCTIVITY

Templates Quickly create UI views with simple and powerful template syntax.

Angular CLI Command line tools: start building fast, add components and tests, then instantly deploy.

IDEs Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

FULL DEVELOPMENT STORY

Testing With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

Animation Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

Accessibility Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

Angular Quotes
 

"And what’s worse is [Angular] feels like I’m not even using javascript at all. It’s more like a different language altogether." [source]

WebComponents      React
 

WebComponents

• Custom Elements
• Shadow DOM
• HTML Template

USE WebComponents in React

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

CREATE WebComponents in React

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

https://reactjs.org/docs/web-components.html   |   https://hackernoon.com/web-components-the-react-way-8ed5b6f4f942

https://www.sitepen.com/blog/2017/08/08/wrapping-web-components-with-react/