Angular <\/strong>is a JavaScript framework<\/strong> written in TypeScript. It was developed and is maintained by Google, and is described as a \u201cSuperheroic JavaScript MVWFramework<\/em>\u201d on Angular\u2019s webpage. Angular (version 2 and above), originally released in September 2016, is a complete rewrite of AngularJS (released in October 2010). The newest major release is version 6 at the time of writing. Google AdWords, one of the most important projects at Google, uses Angular \u2013 so Angular is likely to be around for a while.<\/p>\n\n\n\n React <\/strong>is a JavaScript library<\/strong> developed and maintained by Facebook. It was released in March 2013 and is described as \u201ca JavaScript library for building user interfaces<\/em>\u201d. React is used far more at Facebook than Angular is at Google if it\u2019s any indication as to how big Facebook is betting on this technology. By this metric, you can also conclude that React will be around for a very long time.<\/p>\n\n\n\n Both Frameworks are available under the MIT license.<\/strong><\/p>\n\n\n\n Angular and React have many similarities and many differences. One of them is that Angular<\/strong> is a full-fledged MVC framework and React is merely a JavaScript Library (just the view). Let me elaborate. Angular is considered a framework because it offers strong opinions as to how your application should be structured. It also has much more functionality \u201cout-of-the-box\u201d. You don\u2019t need to decide which routing libraries to use or other such considerations \u2013 you can just start coding. However, a drawback is that you have less flexibility \u2013 you must use what Angular provides.<\/p>\n\n\n\n Angular provides the following \u201cout of the box\u201d:<\/p>\n\n\n\n React<\/strong>, on the other hand, gives you much more freedom. It only provides the \u201cview\u201d in MVC \u2013 you need to solve the M and C on your own. Due to this, you can choose any of your own libraries as you see fit. 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.<\/p>\n\n\n\n React provides the following \u201cout of the box\u201d:<\/p>\n\n\n\n Some popular libraries to add functionality are:<\/p>\n\n\n\n React\u2019s<\/strong> use of a virtual DOM <\/strong>is one of its features that makes it so blazingly fast. You\u2019ve probably heard of it. It was React\u2019s \u201ckiller feature\u201d when it was first released. Let me give you an example scenario:<\/p>\n\n\n\n Let\u2019s say that you want to update a user\u2019s age within a block of HTML tags. A virtual DOM<\/strong> only looks at the differences between the previous and current HTML and changes the part that is required to be updated. Git <\/strong>employs a similar method, which distinguishes the changes in a file.<\/p>\n\n\n\n Conversely, Angular opted to use a regular DOM. <\/strong>This will update the entire tree structure of HTML tags until it reaches the user\u2019s age.<\/p>\n\n\n\n So why does this matter? The example above is trivial and probably won\u2019t make any difference in a real app. However, if we\u2019re dealing with hundreds of data requests on the same page (and the HTML block is replaced for every page request) it drastically affects the performance, in addition to the user\u2019s experience.<\/p>\n\n\n\n React decided to combine UI templates and inline JavaScript logic, which no company had ever done before. The result is called \u201cJSX\u201d<\/strong>. Although it may have sounded like a bad idea, Facebook\u2019s gamble paid off big-time. React uses something called a component<\/em>, which contains both<\/em> the markup AND<\/em> 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.<\/p>\n\n\n\n Ex<\/strong>. In this example, we declare a variable name<\/em> and use it inside JSX by wrapping it in curly braces:<\/p>\n\n\n\n Angular uses templates that are enhanced HTML with Angular directives (\u201cng-if\u201d<\/em> or \u201cng-for\u201d<\/em>). React only requires knowledge of JavaScript, but with Angular, you must learn its specific syntax.<\/p>\n\n\n\n I\u2019m not going to go into too much detail, but React Fiber is going to take React from \u201cfast\u201d to \u201cblazingly fast\u201d. Fiber is a backward-compatible, complete rewrite of the React core. It was introduced to React v16 and the upgrade went so smooth that you most likely didn\u2019t even notice it happened. With Fiber, react can pause and resume work as it sees fit to get what matters onto the screen as quickly as possible. I encourage you to do more research into React Fiber \u2013 it is a killer feature.<\/p>\n\n\n\n You\u2019ve heard of components, haven\u2019t you? Unless you\u2019ve been living under a rock, I\u2019m sure that you have. Both React<\/strong> and Angular<\/strong> 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<\/strong> be easy to reuse<\/strong> within other components or even in other projects. For example, you could have a sign-in component consisting of two text inputs (user & password) and a \u201cLogin\u201d button. This component may have various properties and underlying logic, but it should be generalized so that you can reuse the component with different data on another page or in another app.<\/p>\n\n\n\n Components are meant to be self-contained \u201cchunks\u201d of your app that you can reuse in different situations. They are meant to encapsulate logic. The web is slowly becoming component-based, so I recommend you start getting accustomed to them right away.<\/p>\n\n\n\n There are states<\/strong> everywhere in an application. Data morphing over time involves complexity. Do you want to know how it works? The UI is described by the component<\/strong> 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.<\/p>\n\n\n\n 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 \u201cmagic\u201d (things automatically done for you behind the scenes) and I personally prefer it. Although Redux and MobX go beyond the scope of this article, I highly encourage you to do some more research on them.<\/p>\n\n\n\n A large difference between React and Angular is one-way vs. two-way binding<\/strong>. Angular uses two-way binding. <\/strong>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 \u2013 hence, two-way data binding<\/strong>.<\/p>\n\n\n\n However, React only has one-way binding<\/strong>. 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 <\/strong>change. You must figure that out for yourself. Some common ways are through callbacks <\/strong>or state management<\/strong> libraries (see State Management in the previous section).<\/p>\n\n\n\n I must admit that Angular\u2019s method is easier to understand at first. However, as the project becomes larger React\u2019s way results in a better data overview (making debugging much easier). Both concepts have their pros and cons. You need to understand the concepts and determine if this influences your framework decision.<\/p>\n\n\n\n React uses JavaScript, a dynamically-typed language (which means you don\u2019t have to define the variable\u2019s type). Because many developers already know and love JavaScript, this can be seen as a pro.<\/p>\n\n\n\n Conversely, if you want to use Angular you\u2019ll need to get comfortable with TypeScript. TypeScript is a statically typed language, which means you must define the variable\u2019s 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.<\/p>\n\n\n\n TypeScript\u2019s 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.<\/p>\n\n\n\n Since then, JavaScript has grown and garnered lots of great changes. 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).<\/p>\n\n\n\n But, an advantage of TypeScript is that it offers more consistency in examples found online (React examples can be found in either ES5 or ES6).<\/p>\n\n\n\n You should also probably know that you could use Flow to enable type checking within your React project. It\u2019s 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\u2019t natively included).<\/p>\n\n\n\n Ex1. <\/strong>Property comparison between JavaScript and TypeScript<\/p>\n\n\n\n Ex2. <\/strong>Argument comparison between JavaScript and TypeScript<\/p>\n\n\n\n Ex3. <\/strong>Here is a simple class-object comparison between JavaScript and TypeScript<\/p>\n\n\n\n Angular and React both offer solutions to create mobile applications.<\/p>\n\n\n\n Ionic<\/strong> 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.<\/p>\n\n\n\n React Native<\/strong>, 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.<\/p>\n\n\n\n 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).<\/p>\n\n\n\n Jasmine<\/strong> is a testing framework that can be used in Angular. Eric Elliott<\/a> says that Jasmine \u201cresults in millions of ways to write tests and assertions, needing to carefully read each one to understand what it\u2019s doing\u201d. <\/em>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<\/a> and Mocha<\/a>.<\/p>\n\n\n\n An important decision you must make in choosing a new technology is its learning curve. The answer depends on your previous experience and familiarity with the related concepts. However, we can still try to assess the number of new things you\u2019ll need to learn before you get started:<\/p>\n\n\n\n The first thing you\u2019ll learn in React is JSX. It may seem awkward to write at first, but it doesn\u2019t add much complexity. You\u2019ll also need to learn how to write components, manage internal state, and use props for configuration. You don\u2019t need to learn any new logical structures or loops since all of this is plain JavaScript.<\/p>\n\n\n\n Once you\u2019re done learning the basics, you\u2019ll need to learn a routing library (since React doesn\u2019t come with one). I recommend react router v4. Next comes state management with Redux or MobX. I\u2019ve already touched upon this subject, so I\u2019ll skip this. Once you\u2019ve learned the basics, a routing library, and state management library, you\u2019re ready to start building apps!<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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\u2019ve 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.<\/p>\n\n\n\n It may seem like React has a lower barrier for entry, and I would most certainly have to agree. However, that doesn\u2019t mean that React is \u201cbetter\u201d. I encourage you to try both React and Angular to see which one you personally prefer.<\/p>\n\n\n\n Before you choose a framework\/library to work with, it\u2019s important to look at its popularity<\/strong> for the sole purpose of job prospects<\/strong>. The more popular a technology is, in most cases, the more jobs you can find. Let\u2019s take a look at some statistics:<\/p>\n\n\n\n On GitHub<\/strong>, at the time of writing, Angular (version 2 and above) has 40,963 stars<\/strong> and 732 contributors<\/strong>. However, it also 2,162 issues<\/strong> (which are to be expected, since Angular is a full-fledged framework as opposed to just a library). Over the last 12 months, Angular has managed to garner 35 stars\/day<\/strong> (on average).<\/p>\n\n\n\n source: https:\/\/bestofjs.org\/projects\/angular<\/a><\/p>\n\n\n\n Conversely, on GitHub<\/strong>, React has 111,927 stars<\/strong> and 1,242 contributors. <\/strong>As far as issues<\/strong> go, React has far less than Angular, at 287 <\/strong>(which is to be expected since React is merely a view library). As you can clearly see, React has more than double the amount of GitHub stars <\/strong>and almost double<\/strong> the number of contributors. Of course, it could also be argued that React came out sooner than Angular (version 2+), so it\u2019s had a longer amount of time to collect these stars\/contributors. However, React is growing faster, as it is has collected 97 stars\/day<\/strong> over the last 12 months.<\/p>\n\n\n\n source: https:\/\/bestofjs.org\/projects\/react<\/a><\/p>\n\n\n\n Other important metrics you need to look at are downloads<\/strong> and Google Trends <\/strong>search hits. According to npmtrends.com<\/em>, you can see that downloads of both Angular and React are growing at incredible speeds. However, React currently has about 10,000<\/strong> more downloads than Angular. This is significant.<\/p>\n\n\n\n source: https:\/\/www.npmtrends.com\/@angular\/core-vs-react<\/a><\/p>\n\n\n\n On this chart collected from Google Trends over the last 2 years, you can see that React is on a much faster upwards trajectory than Angular, which has lost much of its momentum. This indicates that React is growing faster than Angular. Regardless, both technologies seem to be doing great and their futures look quite bright.<\/p>\n\n\n\n source: https:\/\/trends.google.com\/trends\/explore?cat=31&date=today%205-y&q=React,Angular<\/a><\/p>\n\n\n\n Another important statistic you should look at is the percentage of developers that love, dread, and want to learn a specific technology. A few statistics from Stack Overflow\u2019s 2018 Developer Survey can be found below. React is the 2nd<\/sup> most loved<\/strong> technology. Angular is ranked far lower, in 9th<\/sup> place.<\/p>\n\n\n\n source: https:\/\/insights.stackoverflow.com\/survey\/2018#most-loved-dreaded-and-wanted<\/a><\/p>\n\n\n\n As far as dreaded technologies<\/strong> Angular is the 4th<\/sup> most dreaded, whereas React is the 11th<\/sup> most dreaded. That could mean a number of things: developers may find Angular hard to work with, the speed of development could be slow, or maybe it\u2019s just not flashy enough. Either way, it\u2019s not good for Angular to be so high on this list.<\/p>\n\n\n\nArchitecture of React vs. Angular<\/strong><\/h2>\n\n\n\n
Framework vs. Library<\/strong><\/h3>\n\n\n\n
Regular DOM vs. Virtual Dom<\/strong><\/h3>\n\n\n\n
Templates \u2013 JSX or HTML<\/strong><\/h3>\n\n\n\n
const name = 'Josh Perez';\nconst element = <h1>Hello, {name}<\/h1>;\n<\/code><\/pre>\n\n\n\nReact Fiber<\/strong><\/h3>\n\n\n\n
Components<\/strong><\/h3>\n\n\n\n
State Management<\/strong><\/h3>\n\n\n\n
Data Binding<\/strong><\/h3>\n\n\n\n
TypeScript vs JavaScript\/Flow<\/strong><\/h2>\n\n\n\n
\/\/ JavaScript (ES6)\nconst name;\n\n\/\/ TypeScript\nconst name: string; \/\/ <-- static typed!\n<\/code><\/pre>\n\n\n\n\/\/ JavaScript (ES6)\nfunction getName(name, age){\n return name + age;\n}\n\n\/\/ TypeScript\nfunction getName(name: string, age: number){ \/\/ <-- static typed!\n return name + age;\n}\n<\/code><\/pre>\n\n\n\n\/\/ JavaScript (ES6)\nclass Greeter {\n constructor(message) {\n this.greeting = message;\n }\n\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\n let greeter = new Greeter(\"JavaScript!\");\n greeter.greet()\n\n \/\/ Hello, JavaScript!\n\n\/\/ TypeScript\nclass Greeter { \/\/ <-- static typed!\n\n greeting: string;\n\n constructor(message: string) {\n this.greeting = message;\n }\n\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\n let greeter = new Greeter(\"TypeScript!\");\n greeter.greet()\n\n \/\/ Hello, TypeScript!\n<\/code><\/pre>\n\n\n\nMobile Solutions of React vs. Angular<\/strong><\/h2>\n\n\n\n
Testing in React vs. Angular<\/strong><\/h2>\n\n\n\n
Learning Curve of React vs. Angular<\/strong><\/h2>\n\n\n\n
React:<\/strong><\/h4>\n\n\n\n
Angular:<\/strong><\/h4>\n\n\n\n
Popularity & Growth Trajectory of React vs. Angular<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image011.png?resize=719%2C266&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i2.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image013.png?resize=719%2C266&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image015.png?resize=719%2C332&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i1.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image017.png?resize=719%2C250&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\nMost Loved, Dreaded, and Wanted Frameworks, Libraries, and Tools<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/i2.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image019.png?resize=719%2C529&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i2.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image021.png?resize=720%2C537&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n
![\"\"](\"https:\/\/i1.wp.com\/programmingwithmosh.com\/wp-content\/uploads\/2018\/09\/image023.png?resize=719%2C537&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n