SlideShare a Scribd company logo
Angular 2 ReactVS
What do Google Trends tell us?
Angular 2 and React js trends
Angular 2 ReactVS
Version
Year of creation
Company
Size prod.
Size dev.
Language
15.4.0
2013
Facebook
117 KiB
559 KiB
JSX
2.0
2016 (1 version - 2010)
Google
144 KB
1 MB
TypeScript
Angular 2 ReactVS
Github Stars
Github Contributors
Churn
Tooling
Code Design
JavaScript “Fatigue”
DOM
60k
944
High
High
JavaScript Centric
More
Virtual DOM
55k
1569
Reduced
High
JS into HTML
Less
Regular DOM
Angular 2 ReactVS
Learning Curve
Packaging
Abstraction
Debugging General
Debug Line NO
Unclosed Tag
Mentioned?
Fails When?
Low
Strong
Strong
Good JS / Bad HTML
Yes
Yes
Compile-Time
Medium
Medium
Strong
Good JS/Good HTML
No
No
Runtime
Angular 2 ReactVS
Binding
Templating
Component Model
MVC
Rendering
Uni-Directional
In JSX Files
Medium
View Layer Only
Server Side
2 way
In TypeScript Files
Strong
Yes
Server Side
Angular 2 Pros
• Support for web components. Rather than having a closed
system for modularising AngularJS applications, Angular 2’s
foundations lie on the emerging Web Components standard. What
this means is that AngularJS will be able to use directly, without any
wrapper coding, any component written as a Web Component.
• Usage of Typescript. The biggest selling point of TypeScript is
tooling. It provides advanced autocompletion, navigation, and
refactoring. Having such tools is almost a requirement for large
projects.
Angular 2 Pros
• Great performance. Angular2 - doesn't do deep object
comparison. If items are added/removed to/from an array, change
detection won't detect it. The same for object properties as long as
they are not directly bound from the view.
• Angular2 CLI. The Angular2 CLI makes it easy to create an
application that already works, right out of the box. It already
follows our best practices!
Angular 2 Cons
• Difficulty in learning. If you haven't used typescript before, you'll
need to learn it and spend time for it.
• Regular DOM. Angular manipulates actual DOM directly, which
makes it quite slower and un-efficient in comparison with React.
• Difficulties in the server templating. Angular 2 still maintains
physical separation between the JavaScript driving your
application, and the HTML being rendered.
React Pros
• Total separation of data and presentation. React provides little
more than a presentation layer. Although React components do
have a concept of 'state', this is best used for ephemeral storage.
• Easy to start writing. Writing in React is almost similar to writing in
HTML, therefore you can easily start coding, skipping all the
syntaxis.
React Pros
• DOM binding isn't our concern. If you've written any front-end
component, with or without a framework, in the past five years then
you know the pain of binding DOM elements to functionality.
Although React would handle this in much the same way, it would
be split across multiple areas of the code with single
responsibilities.
• React isn't a framework. React is a library which provides a
declarative method of defining UI components. ReactDOM is an
associated library which provides rendering and DOM diffing.
Redux is a library which provides a data store, and React-Redux
provides the glue between React and Redux.
React Cons
• React isn't a framework.Again. Philosophy is great, but when you need to get
something done quickly, the React Way can be frustrating. If you have clients and
projects and pressing deadlines and the first page of your React handbook no
longer works (I've actually seen this), you can get frustrated.
• Build tools are necessary. Using build tools isn't too much of a pain, we
generally use them when we work in other languages anyway. The only real issue
with using them in JavaScript is there aren't standard, reusable solutions for all of
your projects. This can unfortunately seriously increase the amount of time it
takes to get the idea in your head into code.
• Community conventions are still developing. There are so many problems to
solve and React community isn't big enough to provide all solutions.
Companies that use Angular.JS
• PayPal
• Upwork
• The Guardian
• Nike
• Google
• HBO
• Sony
• General Motors
• The entire list of companies
you can find here - https://
www.madewithangular.com
Companies that use React
• Alipay
• Airbnb
• Dropbox
• Facebook
• Netflix
• Reddit
• The entire list of companies
you can find here -
• https://github.com/facebook/
react/wiki/sites-using-react
Conclusion
• React and Angular both are great technologies that give miscellaneous
opportunities in development.
• Angular 2 is on the market from 2014 comparing React in 2013, but it
obvious that the first one has a bigger community. Angular launched
first Angular in 2010 and in 2017 announced plans of 4th version, so we
can expect future improvement of the product.
• Angular is really good at declarative solutions, but it lacks the freedom
and simplicity of React.
• Finally, there is no "silver bullet", you need to choose the right solution
that will suit your challenges, goals, and long-term strategy.
Have a Mobile or MEAN stack project?
Contact us and we will build your own dedicated ninjas
team
Contact Us

More Related Content

What's hot (20)

An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
MaximeRainville1
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
MarkupBox
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
Ahmed rebai
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Deepu S Nath
 
Intro to vue.js
Intro to vue.jsIntro to vue.js
Intro to vue.js
TechMagic
 
Angular vs React vs Vue
Angular vs React vs VueAngular vs React vs Vue
Angular vs React vs Vue
Hosein Mansouri
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ..."The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...
Fwdays
 
React Native
React NativeReact Native
React Native
Artyom Trityak
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
Ali Sa'o
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performance
Nick Dreckshage
 
Building Massive AngularJS Apps
Building Massive AngularJS AppsBuilding Massive AngularJS Apps
Building Massive AngularJS Apps
Gordon Bockus
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
Dani Akash
 
Say Hello to React day2 presentation
Say Hello to React   day2 presentationSay Hello to React   day2 presentation
Say Hello to React day2 presentation
Smile Gupta
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Polidea
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
dvcrn
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
MarkupBox
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
Ahmed rebai
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Deepu S Nath
 
Intro to vue.js
Intro to vue.jsIntro to vue.js
Intro to vue.js
TechMagic
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ..."The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...
Fwdays
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
Ali Sa'o
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performance
Nick Dreckshage
 
Building Massive AngularJS Apps
Building Massive AngularJS AppsBuilding Massive AngularJS Apps
Building Massive AngularJS Apps
Gordon Bockus
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
Dani Akash
 
Say Hello to React day2 presentation
Say Hello to React   day2 presentationSay Hello to React   day2 presentation
Say Hello to React day2 presentation
Smile Gupta
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Polidea
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
dvcrn
 

Viewers also liked (20)

Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
Keyup
 
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
Binary Studio
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
Troy Miles
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
React Vs AnagularJS
React Vs AnagularJSReact Vs AnagularJS
React Vs AnagularJS
deepakpatil84
 
Toolkit of modern web development (DevFest Košice 7.5.2016)
Toolkit of modern web development (DevFest Košice 7.5.2016)Toolkit of modern web development (DevFest Košice 7.5.2016)
Toolkit of modern web development (DevFest Košice 7.5.2016)
jskvara
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applications
Luciano Colosio
 
React vs Angular2
React vs Angular2React vs Angular2
React vs Angular2
Corley S.r.l.
 
Using ReactJS in AngularJS
Using ReactJS in AngularJSUsing ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
Jesse Warden
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
Vladimir Georgiev
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
Kenichi Kanai
 
Angular 2 Crash Course
Angular  2 Crash CourseAngular  2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
NAVER D2
 
Storyboards
StoryboardsStoryboards
Storyboards
TonishaMedia
 
All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...
Codemotion Tel Aviv
 
Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
Keyup
 
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
Binary Studio
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
Troy Miles
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Toolkit of modern web development (DevFest Košice 7.5.2016)
Toolkit of modern web development (DevFest Košice 7.5.2016)Toolkit of modern web development (DevFest Košice 7.5.2016)
Toolkit of modern web development (DevFest Košice 7.5.2016)
jskvara
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applications
Luciano Colosio
 
Using ReactJS in AngularJS
Using ReactJS in AngularJSUsing ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
Jesse Warden
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
 
Angular 2 Crash Course
Angular  2 Crash CourseAngular  2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
NAVER D2
 
All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...
Codemotion Tel Aviv
 
Ad

Similar to Angular 2 vs React. What to chose in 2017? (20)

Angular vs react comparison in 2022 which is better and why
Angular vs react comparison in 2022 which is better and whyAngular vs react comparison in 2022 which is better and why
Angular vs react comparison in 2022 which is better and why
Noman Shaikh
 
Angular vs.pdf
Angular vs.pdfAngular vs.pdf
Angular vs.pdf
SophiaJasper
 
Which technology has a better future_ AngularJS or ReactJS_.pdf
Which technology has a better future_ AngularJS or ReactJS_.pdfWhich technology has a better future_ AngularJS or ReactJS_.pdf
Which technology has a better future_ AngularJS or ReactJS_.pdf
Moon Technolabs Pvt. Ltd.
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
Angular VS React The Battle of Best Front End Frameworks.pdf
Angular VS React The Battle of Best Front End Frameworks.pdfAngular VS React The Battle of Best Front End Frameworks.pdf
Angular VS React The Battle of Best Front End Frameworks.pdf
JS Panther
 
Comparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-jsComparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-js
easyjobworld
 
React vs angular what to choose for your app
React vs angular what to choose for your appReact vs angular what to choose for your app
React vs angular what to choose for your app
Concetto Labs
 
React vs React Native
React vs React NativeReact vs React Native
React vs React Native
Albiorix Technology
 
Angular vs React 2019 [UPDATED] - tecHindustan
Angular vs React 2019 [UPDATED] - tecHindustanAngular vs React 2019 [UPDATED] - tecHindustan
Angular vs React 2019 [UPDATED] - tecHindustan
tecHIndustan Solutions
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
Albiorix Technology
 
React.js vs angular.js a comparison
React.js vs angular.js a comparisonReact.js vs angular.js a comparison
React.js vs angular.js a comparison
Narola Infotech
 
AngularJS Vs ReactJS_ What’s The Difference_.pdf
AngularJS Vs ReactJS_  What’s The Difference_.pdfAngularJS Vs ReactJS_  What’s The Difference_.pdf
AngularJS Vs ReactJS_ What’s The Difference_.pdf
Onviqa Pvt. Ltd.
 
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
Javascript Framework: React JS VS Vue.js | Bosc Tech LabsJavascript Framework: React JS VS Vue.js | Bosc Tech Labs
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
BOSC Tech Labs
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
Katy Slemon
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
75waytechnologies
 
Angular vs React: Making an Informed Decision for Your Web Development
Angular vs React: Making an Informed Decision for Your Web DevelopmentAngular vs React: Making an Informed Decision for Your Web Development
Angular vs React: Making an Informed Decision for Your Web Development
FredReynolds2
 
Angular vs React
Angular vs ReactAngular vs React
Angular vs React
Albiorix Technology
 
Comprehensive Guide to React Development 2022.pptx
Comprehensive Guide to React Development 2022.pptxComprehensive Guide to React Development 2022.pptx
Comprehensive Guide to React Development 2022.pptx
75waytechnologies
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
MoonTechnolabsPvtLtd
 
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevProReact vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
SofiaCarter4
 
Angular vs react comparison in 2022 which is better and why
Angular vs react comparison in 2022 which is better and whyAngular vs react comparison in 2022 which is better and why
Angular vs react comparison in 2022 which is better and why
Noman Shaikh
 
Which technology has a better future_ AngularJS or ReactJS_.pdf
Which technology has a better future_ AngularJS or ReactJS_.pdfWhich technology has a better future_ AngularJS or ReactJS_.pdf
Which technology has a better future_ AngularJS or ReactJS_.pdf
Moon Technolabs Pvt. Ltd.
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
Angular VS React The Battle of Best Front End Frameworks.pdf
Angular VS React The Battle of Best Front End Frameworks.pdfAngular VS React The Battle of Best Front End Frameworks.pdf
Angular VS React The Battle of Best Front End Frameworks.pdf
JS Panther
 
Comparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-jsComparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-js
easyjobworld
 
React vs angular what to choose for your app
React vs angular what to choose for your appReact vs angular what to choose for your app
React vs angular what to choose for your app
Concetto Labs
 
Angular vs React 2019 [UPDATED] - tecHindustan
Angular vs React 2019 [UPDATED] - tecHindustanAngular vs React 2019 [UPDATED] - tecHindustan
Angular vs React 2019 [UPDATED] - tecHindustan
tecHIndustan Solutions
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
Albiorix Technology
 
React.js vs angular.js a comparison
React.js vs angular.js a comparisonReact.js vs angular.js a comparison
React.js vs angular.js a comparison
Narola Infotech
 
AngularJS Vs ReactJS_ What’s The Difference_.pdf
AngularJS Vs ReactJS_  What’s The Difference_.pdfAngularJS Vs ReactJS_  What’s The Difference_.pdf
AngularJS Vs ReactJS_ What’s The Difference_.pdf
Onviqa Pvt. Ltd.
 
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
Javascript Framework: React JS VS Vue.js | Bosc Tech LabsJavascript Framework: React JS VS Vue.js | Bosc Tech Labs
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
BOSC Tech Labs
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
Katy Slemon
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
75waytechnologies
 
Angular vs React: Making an Informed Decision for Your Web Development
Angular vs React: Making an Informed Decision for Your Web DevelopmentAngular vs React: Making an Informed Decision for Your Web Development
Angular vs React: Making an Informed Decision for Your Web Development
FredReynolds2
 
Comprehensive Guide to React Development 2022.pptx
Comprehensive Guide to React Development 2022.pptxComprehensive Guide to React Development 2022.pptx
Comprehensive Guide to React Development 2022.pptx
75waytechnologies
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
MoonTechnolabsPvtLtd
 
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevProReact vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
React vs Angular - Unleashing the Ultimate Framework Showdown - AppsDevPro
SofiaCarter4
 
Ad

More from TechMagic (9)

K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
TechMagic
 
Android notifications. testing guideline
Android notifications. testing guidelineAndroid notifications. testing guideline
Android notifications. testing guideline
TechMagic
 
Coaching
CoachingCoaching
Coaching
TechMagic
 
Getting started with Stripe
Getting started with StripeGetting started with Stripe
Getting started with Stripe
TechMagic
 
Android developer options & android sdk tools (for qa)
Android developer options & android sdk tools (for qa)Android developer options & android sdk tools (for qa)
Android developer options & android sdk tools (for qa)
TechMagic
 
Tips and Tricks for email communication with customer
Tips and Tricks for email communication with customerTips and Tricks for email communication with customer
Tips and Tricks for email communication with customer
TechMagic
 
Test Driven Development in Node.js apps
Test Driven Development in Node.js appsTest Driven Development in Node.js apps
Test Driven Development in Node.js apps
TechMagic
 
OS X Server as CI for iOS
OS X Server as CI for iOSOS X Server as CI for iOS
OS X Server as CI for iOS
TechMagic
 
TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic - Development Studio for Startups (iOS, Android, Node.js)TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
TechMagic
 
Android notifications. testing guideline
Android notifications. testing guidelineAndroid notifications. testing guideline
Android notifications. testing guideline
TechMagic
 
Getting started with Stripe
Getting started with StripeGetting started with Stripe
Getting started with Stripe
TechMagic
 
Android developer options & android sdk tools (for qa)
Android developer options & android sdk tools (for qa)Android developer options & android sdk tools (for qa)
Android developer options & android sdk tools (for qa)
TechMagic
 
Tips and Tricks for email communication with customer
Tips and Tricks for email communication with customerTips and Tricks for email communication with customer
Tips and Tricks for email communication with customer
TechMagic
 
Test Driven Development in Node.js apps
Test Driven Development in Node.js appsTest Driven Development in Node.js apps
Test Driven Development in Node.js apps
TechMagic
 
OS X Server as CI for iOS
OS X Server as CI for iOSOS X Server as CI for iOS
OS X Server as CI for iOS
TechMagic
 
TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic - Development Studio for Startups (iOS, Android, Node.js)TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic - Development Studio for Startups (iOS, Android, Node.js)
TechMagic
 

Recently uploaded (20)

SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptxFINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
kippcam
 
How Binning Affects LED Performance & Consistency.pdf
How Binning Affects LED Performance & Consistency.pdfHow Binning Affects LED Performance & Consistency.pdf
How Binning Affects LED Performance & Consistency.pdf
Mina Anis
 
Water demand - Types , variations and WDS
Water demand - Types , variations and WDSWater demand - Types , variations and WDS
Water demand - Types , variations and WDS
dhanashree78
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
4th International Conference on Computer Science and Information Technology (...
4th International Conference on Computer Science and Information Technology (...4th International Conference on Computer Science and Information Technology (...
4th International Conference on Computer Science and Information Technology (...
ijait
 
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODSWIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
samueljackson3773
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
TEA2016AAT 160 W TV application design example
TEA2016AAT 160 W TV application design exampleTEA2016AAT 160 W TV application design example
TEA2016AAT 160 W TV application design example
ssuser1be9ce
 
Engineering Mechanics Introduction and its Application
Engineering Mechanics Introduction and its ApplicationEngineering Mechanics Introduction and its Application
Engineering Mechanics Introduction and its Application
Sakthivel M
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
Journal of Soft Computing in Civil Engineering
 
22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank
Guru Nanak Technical Institutions
 
Fundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptxFundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptx
drdebarshi1993
 
OCS Group SG - HPHT Well Design and Operation - SN.pdf
OCS Group SG - HPHT Well Design and Operation - SN.pdfOCS Group SG - HPHT Well Design and Operation - SN.pdf
OCS Group SG - HPHT Well Design and Operation - SN.pdf
Muanisa Waras
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
Blood bank management system project report.pdf
Blood bank management system project report.pdfBlood bank management system project report.pdf
Blood bank management system project report.pdf
Kamal Acharya
 
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
Taqyea
 
Understanding Amplitude Modulation : A Guide
Understanding Amplitude Modulation : A GuideUnderstanding Amplitude Modulation : A Guide
Understanding Amplitude Modulation : A Guide
CircuitDigest
 
SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptxFINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
kippcam
 
How Binning Affects LED Performance & Consistency.pdf
How Binning Affects LED Performance & Consistency.pdfHow Binning Affects LED Performance & Consistency.pdf
How Binning Affects LED Performance & Consistency.pdf
Mina Anis
 
Water demand - Types , variations and WDS
Water demand - Types , variations and WDSWater demand - Types , variations and WDS
Water demand - Types , variations and WDS
dhanashree78
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
4th International Conference on Computer Science and Information Technology (...
4th International Conference on Computer Science and Information Technology (...4th International Conference on Computer Science and Information Technology (...
4th International Conference on Computer Science and Information Technology (...
ijait
 
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODSWIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
WIRELESS COMMUNICATION SECURITY AND IT’S PROTECTION METHODS
samueljackson3773
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
TEA2016AAT 160 W TV application design example
TEA2016AAT 160 W TV application design exampleTEA2016AAT 160 W TV application design example
TEA2016AAT 160 W TV application design example
ssuser1be9ce
 
Engineering Mechanics Introduction and its Application
Engineering Mechanics Introduction and its ApplicationEngineering Mechanics Introduction and its Application
Engineering Mechanics Introduction and its Application
Sakthivel M
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
Fundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptxFundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptx
drdebarshi1993
 
OCS Group SG - HPHT Well Design and Operation - SN.pdf
OCS Group SG - HPHT Well Design and Operation - SN.pdfOCS Group SG - HPHT Well Design and Operation - SN.pdf
OCS Group SG - HPHT Well Design and Operation - SN.pdf
Muanisa Waras
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
Blood bank management system project report.pdf
Blood bank management system project report.pdfBlood bank management system project report.pdf
Blood bank management system project report.pdf
Kamal Acharya
 
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
最新版美国圣莫尼卡学院毕业证(SMC毕业证书)原版定制
Taqyea
 
Understanding Amplitude Modulation : A Guide
Understanding Amplitude Modulation : A GuideUnderstanding Amplitude Modulation : A Guide
Understanding Amplitude Modulation : A Guide
CircuitDigest
 

Angular 2 vs React. What to chose in 2017?

  • 2. What do Google Trends tell us?
  • 3. Angular 2 and React js trends
  • 4. Angular 2 ReactVS Version Year of creation Company Size prod. Size dev. Language 15.4.0 2013 Facebook 117 KiB 559 KiB JSX 2.0 2016 (1 version - 2010) Google 144 KB 1 MB TypeScript
  • 5. Angular 2 ReactVS Github Stars Github Contributors Churn Tooling Code Design JavaScript “Fatigue” DOM 60k 944 High High JavaScript Centric More Virtual DOM 55k 1569 Reduced High JS into HTML Less Regular DOM
  • 6. Angular 2 ReactVS Learning Curve Packaging Abstraction Debugging General Debug Line NO Unclosed Tag Mentioned? Fails When? Low Strong Strong Good JS / Bad HTML Yes Yes Compile-Time Medium Medium Strong Good JS/Good HTML No No Runtime
  • 7. Angular 2 ReactVS Binding Templating Component Model MVC Rendering Uni-Directional In JSX Files Medium View Layer Only Server Side 2 way In TypeScript Files Strong Yes Server Side
  • 8. Angular 2 Pros • Support for web components. Rather than having a closed system for modularising AngularJS applications, Angular 2’s foundations lie on the emerging Web Components standard. What this means is that AngularJS will be able to use directly, without any wrapper coding, any component written as a Web Component. • Usage of Typescript. The biggest selling point of TypeScript is tooling. It provides advanced autocompletion, navigation, and refactoring. Having such tools is almost a requirement for large projects.
  • 9. Angular 2 Pros • Great performance. Angular2 - doesn't do deep object comparison. If items are added/removed to/from an array, change detection won't detect it. The same for object properties as long as they are not directly bound from the view. • Angular2 CLI. The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
  • 10. Angular 2 Cons • Difficulty in learning. If you haven't used typescript before, you'll need to learn it and spend time for it. • Regular DOM. Angular manipulates actual DOM directly, which makes it quite slower and un-efficient in comparison with React. • Difficulties in the server templating. Angular 2 still maintains physical separation between the JavaScript driving your application, and the HTML being rendered.
  • 11. React Pros • Total separation of data and presentation. React provides little more than a presentation layer. Although React components do have a concept of 'state', this is best used for ephemeral storage. • Easy to start writing. Writing in React is almost similar to writing in HTML, therefore you can easily start coding, skipping all the syntaxis.
  • 12. React Pros • DOM binding isn't our concern. If you've written any front-end component, with or without a framework, in the past five years then you know the pain of binding DOM elements to functionality. Although React would handle this in much the same way, it would be split across multiple areas of the code with single responsibilities. • React isn't a framework. React is a library which provides a declarative method of defining UI components. ReactDOM is an associated library which provides rendering and DOM diffing. Redux is a library which provides a data store, and React-Redux provides the glue between React and Redux.
  • 13. React Cons • React isn't a framework.Again. Philosophy is great, but when you need to get something done quickly, the React Way can be frustrating. If you have clients and projects and pressing deadlines and the first page of your React handbook no longer works (I've actually seen this), you can get frustrated. • Build tools are necessary. Using build tools isn't too much of a pain, we generally use them when we work in other languages anyway. The only real issue with using them in JavaScript is there aren't standard, reusable solutions for all of your projects. This can unfortunately seriously increase the amount of time it takes to get the idea in your head into code. • Community conventions are still developing. There are so many problems to solve and React community isn't big enough to provide all solutions.
  • 14. Companies that use Angular.JS • PayPal • Upwork • The Guardian • Nike • Google • HBO • Sony • General Motors • The entire list of companies you can find here - https:// www.madewithangular.com
  • 15. Companies that use React • Alipay • Airbnb • Dropbox • Facebook • Netflix • Reddit • The entire list of companies you can find here - • https://github.com/facebook/ react/wiki/sites-using-react
  • 16. Conclusion • React and Angular both are great technologies that give miscellaneous opportunities in development. • Angular 2 is on the market from 2014 comparing React in 2013, but it obvious that the first one has a bigger community. Angular launched first Angular in 2010 and in 2017 announced plans of 4th version, so we can expect future improvement of the product. • Angular is really good at declarative solutions, but it lacks the freedom and simplicity of React. • Finally, there is no "silver bullet", you need to choose the right solution that will suit your challenges, goals, and long-term strategy.
  • 17. Have a Mobile or MEAN stack project? Contact us and we will build your own dedicated ninjas team Contact Us