Key Points

References

Key Concepts

Compare Angular and React

https://programmingwithmosh.com/react/react-vs-angular/

Angular is a JavaScript framework written in TypeScript. It was developed and is maintained by Google, and is described as a “Superheroic JavaScript MVWFramework”

React is a JavaScript library developed and maintained by Facebook.

Angular is a full-fledged MVC framework and React is merely a JavaScript Library (just the view)

Angular provides the following “out of the box”:

• Templates, based on an extended version of HTML
• XSS protection
• Dependency injection
• Ajax requests by @angular/HTTP
• Routing, provided by @angular/router
• Component CSS encapsulation
• Utilities for unit-testing components.
• @angular/forms for building forms

React needs Redux to manage state.  With React You will end up using many independent, fast-moving libraries. Because of this, you will need to take care of the corresponding updates and migrations by yourself. In addition, each React project is different and requires a decision requiring its folder hierarchy and architecture. Things can go wrong much more easily due to this.

React provides the following “out of the box”:

• Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
• XSS protection
• No dependency injection
• Fetch for Ajax requests
• Utilities for unit-testing components

Some popular libraries to add functionality are:

• React-router for routing
• Redux or MobX for state management
• Enzyme for additional testing utilities

DOM vs Virtual DOM

React's virtual DOM has fast updates to the specific items in the DOM

Angular updates the full DOM until all the changed items have been updated - slower

Templates

React decided to combine UI templates and inline JavaScript logic, which no company had ever done before. The result is called “JSX”

React uses something called a component, which contains both the markup AND logic in the same file. It also uses an XML-like language that allows you to write markup directly in your JavaScript code. JSX is a big advantage for development, because you have everything in one place, and code completion and compile-time checks work better.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

Angular uses templates that are enhanced HTML with Angular directives (“ng-if” or “ng-for”). React only requires knowledge of JavaScript, but with Angular, you must learn its specific syntax.

Components

Both React and Angular are both component-based. A component receives an input, and after some internal logic returns a rendered UI template (a sign-in form or a table for example) as output. Components should be easy to reuse within other components or even in other projects

State management

The UI is described by the component at a given point in time. Then, the framework re-renders the entire UI of the component when data changes. This ensures that the data is always up to date.

To handle state in React, Redux is often used as the solution. In Angular, you may not need Redux. But, if your application becomes large enough, chances are that you will. Some developers, including me, opt to use MobX instead of Redux. MobX has more “magic” (things automatically done for you behind the scenes) and I personally prefer it.

Data Binding

A large difference between React and Angular is one-way vs. two-way binding. Angular uses two-way binding. For example, if you change the UI element (a user input) in Angular, then the corresponding model state changes as well. Additionally, if you change the model state, then the UI element changes – hence, two-way data binding.

Angular

When we bind values in HTML with our model, AngularJS creates a watcher for each binding to track changes in the DOM. Once the View updates (becomes “dirty"), AngularJS compares the new value with the initial (bound) value and runs the $digest loop. The $digest loop then checks not only values that have actually changed, but also all others values that are tracked through watchers. This is why performance will decrease a lot if your application has too many watchers.

This drawback is even more painful when several values (Views) are dependent on each other

React

React does not update the model when the UI changes - 1 way data binding

React only has one-way binding. First, the model state is updated, and then it renders the change in the UI element. However, if you change the UI element, the model state DOES NOT change. You must figure that out for yourself. Some common ways are through callbacks or state management libraries

to implement a unidirectional data flow in React, Facebook created its own application architecture called Flux. Flux controls the flow of data to React components through one control point – the dispatcher. Flux's dispatcher receives an object (they call it an action) and transfers it to an appropriate store, which then updates itself. Once the update is finished, the View changes accordingly and sends a new action to the dispatcher. It's only possible to transfer an action to the store when it’s fully updated. With this concept, Flux improves the effectiveness of the code base. Based on our own experience we can say that Flux is great when you work with dynamically updated data.

Typescript vs Javascript Flow

React uses JavaScript, a dynamically-typed language (which means you don’t have to define the variable’s type). Because many developers already know and love JavaScript, this can be seen as a pro. With ES6, you have modules, classes, spread operators, arrow functions, template literals and more. It allows developers to write declarative code while having the characteristics of a true OOP language (that is, including class-based structure).

Conversely, if you want to use Angular you’ll need to get comfortable with TypeScript. TypeScript is a statically typed language, which means you must define the variable’s type (string, number, array, etc). It is simply a transpiler that compiles TypeScript to JavaScript code, which also means you can write ES5 code in a TypeScript file.

TypeScript’s purpose is to ensure a smooth transition for programmers with an Object Oriented Programming (OOP) background. TypeScript was also released in the period of ES5, and during that time, ES5 was not a class-based OOP language.

Flow adds type checking to Javascript

You should also probably know that you could use Flow to enable type checking within your React project. It’s a static type-checker developed by Facebook for JavaScript. If you so choose, you can also use TypeScript in your React project (although it isn’t natively included).

// JavaScript (ES6)
function getName(name, age){
return name + age;
}

// TypeScript
function getName(name: string, age: number){ // <-- static typed!
return name + age;
}

================================
Classes in Javascript vs Typescript 

// JavaScript (ES6)
class Greeter {
constructor(message) {
this.greeting = message;
}

greet() {
return "Hello, " + this.greeting;
}
}

let greeter = new Greeter("JavaScript!");
greeter.greet()

// Hello, JavaScript!

================================
// TypeScript
class Greeter { // <-- static typed!

greeting: string;

constructor(message: string) {
this.greeting = message;
}

greet() {
return "Hello, " + this.greeting;
}
}

let greeter = new Greeter("TypeScript!");
greeter.greet()

// Hello, TypeScript!

Mobile Apps

Angular and React both offer solutions to create mobile applications.

Ionic is a framework for developing hybrid mobile applications. It uses a Cordova container that is incorporated with Angular. Ionic provides a robust UI component library that is easy to set up and develop hybrid mobile applications with. However, the resulting app on a device is simply a web app inside of a native web view container. Because of this, the apps can be slow and laggy.

React Native, on the other hand, is a platform developed by Facebook for creating truly native mobile applications using React. The syntax is slightly different, but there are much more similarities than differences. Unlike Ionic, which is simply a glorified web app, React Native produces a truly native UI. It also allows you to create your own components and bind them to native code written in Objective-C, Java, or Swift.

Testing frameworks

Jest is used by Facebook to tests its React code. It is included in every React project and requires zero configuration to use. It also includes a powerful mocking library. Many times Jest is used in combination with Enzyme (a JavaScript testing utility used at Airbnb).

Jasmine is a testing framework that can be used in Angular. Eric Elliott says that Jasmine “results in millions of ways to write tests and assertions, needing to carefully read each one to understand what it’s doing”. The output, in my opinion, is also very bloated and difficult to read. Here are some educational articles on the integration of Angular with Karma and Mocha.

Dependency Management

Angular

Angular has built-in management

AngularJS uses a basic Object Oriented Programming (OOP) pattern called dependency injection, meaning we write dependencies in a separate file. It’s inconvenient to create a dependency directly in an object. In AngularJS, dependency injection is inherent to any standard functions that we declare for an AngularJS factory or service. We only pass dependencies as parameters in any order in our functions.

React

React needs 3rd party tool like renovate

The difference between React and AngularJS with regards to dependency injection is that React doesn’t offer any concept of a built-in container for dependency injection. But this doesn't mean we have to think of a method to inject dependencies in our React project. You can use several instruments to inject dependencies automatically in a React application. Such instruments include Browserify, RequireJS, EcmaScript 6 modules which we can use via Babel, ReactJS-di, and so on. The only challenge is to pick a tool to use.

Learning process

React

The first thing you’ll learn in React is JSX. It may seem awkward to write at first, but it doesn’t add much complexity. You’ll also need to learn how to write components, manage internal state, and use props for configuration. You don’t need to learn any new logical structures or loops since all of this is plain JavaScript.

Once you’re done learning the basics, you’ll need to learn a routing library (since React doesn’t come with one). I recommend react router v4. Next comes state management with Redux or MobX. I’ve already touched upon this subject, so I’ll skip this. Once you’ve learned the basics, a routing library, and state management library, you’re ready to start building apps!

Angular

Angular has many topics to learn, starting from basic ones such as directives, modules, decorators, components, services, dependency injection, pipes, and templates. After that, there are more advanced topics such as change detection, zones, AoT compilation, and Rx.js.

The entry barrier for Angular is clearly higher than for React. The sheer number of new concepts is confusing to newcomers. And even after you’ve started, the experience might be a bit rough since you need to keep in mind things like Rx.js subscription management and change detection performance.

It may seem like React has a lower barrier for entry, and I would most certainly have to agree. However, that doesn’t mean that React is “better”. I encourage you to try both React and Angular to see which one you personally prefer.

what frameworks are developers interested in? 2018

Summary

Angular:

1. Is a full framework
2. Has a Regular DOM, which renders updates slower than React’s Virtual DOM
3. The rendered JavaScript and HTML maintains a physical separation
4. Utilizes Components: emerging web components standard
5. Data Binding: two-way
6. You must use TypeScript
7. Mobile: Ionic and Cordova are slower than React Native
8. Testing:  Jasmine & Mocha
9. Learning Curve is higher, but once you understand it you have an entire MVC framework
10. Scalability: easy to scale
11. Popularity: dropped since AngularJS (Angular 1)
12. Open source: GitHub stars: 40,963 / Contributors: 732 / Issue: 2,162
13. Size: larger, resulting in longer load times and performance on mobile
14. Used on: Google, Nike, Forbes, Upwork, General Motors, HBO, Sony

React:

1. Just a small view library
2. Has a Virtual DOM, which renders updates faster than Angular’s Regular DOM
3. Uses JSX, which combines markup and logic in the same file (making components easier to read)
4. Components: emerging web components standard
5. Data Binding: one-way
6. You Can use ES6/7 JavaScript, although you can use Typescript or Flow if you so choose
7. Mobile: React Native is faster than Angular’s solutions
8. Testing: Jest & Enzyme
9. Learning Curve is lower, but you only get the view. Because of this, you’re going to have to learn a slew of 3^rd party libraries. Ex. State management (Redux or MobX), Asynchronous calls (react-promise, react-thunk, or react-saga), etc.
10. Scalability: is more testable, so also easy to scale
11. Popularity: has increased exponentially
12. Open source: GitHub stars: 111,927 / Contributors: 1,242 / Issues: 287
13. Size: smaller than Angular, so a bit faster
14. Used on: Facebook, Airbnb, Uber, Netflix, Instagram, Whatsapp, Dropbox
15. React Fiber will increase the speed of React dramatically

Mosh's React Course

https://codewithmosh.com/p/mastering-react

$29 one time payment for course

Angular 

Angular Universal Course

We will continue to publish new video lessons weekly until the course is completed. In this weeks sample video lesson we will start at the beginning and give you a detailed answer to the question:

Click Here to Watch: What is Angular Universal?

What is Angular Universal?

In a nutshell, Angular Universal is a node-based rendering engine for Angular.

It can be used in two different ways:

• we can use it for on the fly server-side rendering, by integrating it with a Node server, for example, an Express engine. Angular Universal can be used to create the HTML of a given Angular application page on the client-side, before sending it over the wire to the client, instead of a blank page like a standard single page application
• A much more interesting use case though is to use it for build-time pre-rendering. We can pre-render a series of application routes (both static and dynamic), and serve those files statically from a plain HTTP web server, without needing a Node process running on the backend

This is the gist of it, but you will find a much more detailed explanation in the video above.

Another question that you probably have is, when to use Angular Universal and why?

We will be covering that and more in the next few sample video lessons, that you will be receiving in the next coming weeks.

Please enjoy this week's video, I want to thank you for reading and wish you an awesome weekend!

Kind Regards,

Vasco

Angular University

angular-university.io

React

Potential Value Opportunities

Potential Challenges

Candidate Solutions

Step-by-step guide for Example

sample code block

Recommended Next Steps

Related articles