SlideShare a Scribd company logo
INFINITY WAR
By Marudi Tri Subakti
JavaScript Developer at HongLeong Bank Bhd
FRONTEND NOWADAYS
OBJECTIVES
Here are the questions we’ll address today:
• How mature are the frameworks / libraries?
• How extensive and helpful are their corresponding communities?
• How easy is it to find developers for each of the frameworks?
• What are the basic programming concepts of the frameworks?
• What does the learning curve look like for each framework?
• How easy is it to use the frameworks for small or large applications?
• What kind of performance can you expect from the frameworks?
• Where can you have a closer look under the hood?
• https://marudits.github.io/discussee-angular/
• https://discussee-react.herokuapp.com/
• https://marudits.github.io/discussee-vue/#/
WHAT IS IT? • Angular is a TypeScript-based Javascript framework.
• Developed and maintained by Google
• Angular (also “Angular 2+”, “Angular 2” or “ng2”) is the
rewritten, mostly incompatible successor to AngularJS (also
“Angular.js” or “AngularJS 1.x”).
• Now has stable version 5, and has roadmap plan until 2019
to release stable version 8
https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.m
d
HOW
IT
WOR
KS
ARCHITEC
TURE
Why we use & don’t?
 PROS (+)
 MVC framework
 Angular templates
 Simple Implementation of two-way
data binding
 Big community
 CONST (-)
 Doesn’t use Virtual DOM at all
 Usage of TypeScript (?)
 Lower render speed
 Heavyweight code
When to use?
 Cross-platform mobile development
(mobile-first approach)
 Enterprise software
 Progressive web apps and hybrid
mobile apps development
IS IT ENOUGH?
• React is described as “a JavaScript library for building user
interfaces”.
• Initially released in March 2013, React was developed and is
maintained by Facebook, which uses React components on
several pages (not as a single-page application, however).
• React is used far more at Facebook than Angular is at Google
• Facebook is working on the release of React Fiber. It will
change React under the hood
https://github.com/acdlite/react-fiber-architecture
WHAT IS IT?
HOW
IT
WOR
KS
ARCHITEC
TURE
Why we use & don’t?
 PROS (+)
 Componet model
 Virtual DOM
 One-way data binding
 Native mobile development
framework
 Big community
 CONST (-)
 Need to use third-party technologies
 Using JSX (?)
 Complex app structure
 Steep learning curve
When to use?
 Dynamic Application
 Single Page Application (SPA)
 Native Mobile Apps
IS IT ENOUGH?
WHAT IS IT?
• Vue (pronounced /vjuː/, like view) is a progressive
framework for building user interfaces
• Vue describes itself as a “Intuitive, Fast and
Composable MVVM for building interactive interfaces.”.
• It was first released in February 2014 by ex-Google-
employee Evan You, without the backing of a big company
and currently has a team of dozen core developers
• It has been able to learn from the mistakes and successes of
Angular and React.
• In 2016, version 2 was released and plans for Vue 3 release
in 2018. Vue is used by Alibaba, Baidu, Expedia, Nintendo,
GitLab
https://github.com/vuejs/roadmap
HOW
IT
WOR
KS
ARCHITEC
TURE
Why we use & don’t?
 PROS (+)
 MVVM Architecture
 Lightweight Solution
 Pure JavaScript
 Virtual DOM
 Low Learning Curve
 CONST (-)
 Small community and support
 Chinese roots
 LTS is uncertain
 Being too flexible can be
problematic
When to use?
 Dinamyc high-performance
applications
 Single Page Application (SPA)
CONSIDERATION
• History
• Core Development
• Market Lifecycle
• Long-term Support & Migrations
• Library/Frameworks support project requirements
• Human Resources & Recruiting
Lifecycle & strategic considerations
CONSIDERATION (2)
1. Components
2. TypeScript vs ES6 vs ES5
3. Templates – JSX or HTML
4. Framework vs Library
5. State Management & Data
Binding
6. Other Programming Concept
Comparison of Angular, React, and Vue
7. Flexibility & Downsizing to
Microservices
8. Size & Performance
9. Testing
10.Universal & Native Apps
11.Learning Curve
12.Under the Hood
ASPECT Angular React Vue
Maturity - 2010
- 1, 2, 4, …
- Roadmap plan
until version 8
- 2013
- React Fiber &
React 16
- 2014
- Now version 2
- Plan version 3,
parity support
Support Google Facebook, Dev
Circle
Small Dozen Team
Human
Resources
Well known OOP
concept
JS specialist Learning curve is
sloping
Programming
Concept
- MVC, DI
- TypeScript
- Ng-template
- V
- ES6
- JSX
- MVVM
- ES5, ES6
- vue-template
Bundle Framework, 143k Library, 43k Library, 23k
Universal &
Native Apps
Angular Universal,
NativeScript
Next.JS, React-
Native
Nuxt.JS
Project Scale Large, Enterprise Small-Mid,
Attached
Small-Mid,
Attached
CHOICE(s)
• If you love TypeScript: Angular
(or React)
• If you love object-orientated-
programming (OOP): Angular
• If you need guidance, structure
and a helping hand: Angular
• If you like flexibility: React
• If you love big
ecosystems: React
• If you like choosing among
dozens of packages: React
• If you love JS & the
“everything-is-Javascript-
approach”: React
• If you like really clean code: Vue
• If you want the easiest learning
curve: Vue
• If you want the most lightweight
framework: Vue
• If you want separation of
concerns in one file: Vue
• If you are working alone or have
a small team: Vue (or React)
• If your app tends to get really
large: Angular (or React)
• If you want to have a lot of
developers in the pool: Angular
or React
• If you work with designers and
need clean HTML files: Angular
or Vue
• If you like Vue but are afraid of
the limited ecosystem: React
CONCLUSION
• Angular uses TypeScript and is ideal for
programmers with a solid Object-Oriented
Programming (OOP) background who
need detailed guidance and structure.
• For those who love massive ecosystems
and more flexibility, React is the way to go.
• Vue is relatively simple to pick up and
integrate for a small team of core
developers.
“The best simply does not exists. If there is something best, other solutions will not exist and if exist, will not survive.”
INFINITY WAR
By Marudi Tri Subakti
JavaScript Developer at HongLeong Bank Bhd

More Related Content

What's hot (20)

PPTX
Jenkins
MohanRaviRohitth
 
PDF
Intro to containerization
Balint Pato
 
PDF
What is Jenkins | Jenkins Tutorial for Beginners | Edureka
Edureka!
 
PDF
What is Docker | Docker Tutorial for Beginners | Docker Container | DevOps To...
Edureka!
 
PPTX
Docker networking Tutorial 101
LorisPack Project
 
PPT
Jenkins Overview
Ahmed M. Gomaa
 
PPT
Docker introduction
Phuc Nguyen
 
PPT
Angular.ppt
Mytrux1
 
PDF
Dockerfile Tutorial with Example | Creating your First Dockerfile | Docker Tr...
Edureka!
 
PDF
A Introduction of Packer
Freyr Lin
 
PPTX
Docker introduction
dotCloud
 
PDF
Express node js
Yashprit Singh
 
PDF
A Hands-On Introduction To Docker Containers.pdf
Edith Puclla
 
PPTX
Microservices
SmartBear
 
PDF
Introduction to Docker
Aditya Konarde
 
PDF
주니어의 쿠버네티스 생태계에서 살아남기
InfraEngineer
 
PPTX
React vs angular what to choose for your app
Concetto Labs
 
PPTX
Introduction to Docker
Pubudu Jayawardana
 
PDF
DevOps - A Gentle Introduction
CodeOps Technologies LLP
 
Intro to containerization
Balint Pato
 
What is Jenkins | Jenkins Tutorial for Beginners | Edureka
Edureka!
 
What is Docker | Docker Tutorial for Beginners | Docker Container | DevOps To...
Edureka!
 
Docker networking Tutorial 101
LorisPack Project
 
Jenkins Overview
Ahmed M. Gomaa
 
Docker introduction
Phuc Nguyen
 
Angular.ppt
Mytrux1
 
Dockerfile Tutorial with Example | Creating your First Dockerfile | Docker Tr...
Edureka!
 
A Introduction of Packer
Freyr Lin
 
Docker introduction
dotCloud
 
Express node js
Yashprit Singh
 
A Hands-On Introduction To Docker Containers.pdf
Edith Puclla
 
Microservices
SmartBear
 
Introduction to Docker
Aditya Konarde
 
주니어의 쿠버네티스 생태계에서 살아남기
InfraEngineer
 
React vs angular what to choose for your app
Concetto Labs
 
Introduction to Docker
Pubudu Jayawardana
 
DevOps - A Gentle Introduction
CodeOps Technologies LLP
 

Similar to Frontend War: Angular vs React vs Vue (20)

PPTX
Eureko frameworks
Görkem Sazara
 
PDF
Angular VS React The Battle of Best Front End Frameworks.pdf
JS Panther
 
PPTX
JavaScript Frameworks Popularity
Albiorix Technology
 
PPTX
ReactJS vs Vue.js — What to choose in 2019?
PixelCrayons
 
PPTX
Trending Popular JavaScript Frameworks.pptx
Sophia Adams
 
PPTX
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
BOSC Tech Labs
 
PPTX
Vue Framework: Why is the best alternative to React and Angular? 
simonedaniels3
 
PDF
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
PDF
HOW TO CHOOSE THE BEST FRAMEWORK FOR YOUR WEB DEVELOPMENT
asiyahanif9977
 
PDF
5 Best Frontend Frameworks For Web & Software Development
GrapesTech Solutions
 
PPTX
Javascript frameworks
RajkumarJangid7
 
PDF
Comparing AngularJS and ReactJS_ Finding the Best Framework for your Next Pro...
JPLoft Solutions
 
PPTX
Comprehensive Guide to React Development 2022.pptx
75waytechnologies
 
PDF
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
PDF
AngularJS vs ReactJS: Which One is Best for Next Front-end Development
Andolasoft Inc
 
PPTX
Dirigible powered by Orion for Cloud Development (EclipseCon EU 2015)
Nedelcho Delchev
 
PPTX
9 Best JavaScript Frameworks To Choose
Albiorix Technology
 
PDF
Top JavaScript Frameworks for Mobile App Development
ScalaCode
 
PPTX
Angular.js vs React.js vs Vue.js _ Elsner.pptx
Elsner Technologies Pvt. Ltd.
 
PPTX
Top 10 Front End Development Technologies to Focus in 2018
Helios Solutions
 
Eureko frameworks
Görkem Sazara
 
Angular VS React The Battle of Best Front End Frameworks.pdf
JS Panther
 
JavaScript Frameworks Popularity
Albiorix Technology
 
ReactJS vs Vue.js — What to choose in 2019?
PixelCrayons
 
Trending Popular JavaScript Frameworks.pptx
Sophia Adams
 
Javascript Framework: React JS VS Vue.js | Bosc Tech Labs
BOSC Tech Labs
 
Vue Framework: Why is the best alternative to React and Angular? 
simonedaniels3
 
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
HOW TO CHOOSE THE BEST FRAMEWORK FOR YOUR WEB DEVELOPMENT
asiyahanif9977
 
5 Best Frontend Frameworks For Web & Software Development
GrapesTech Solutions
 
Javascript frameworks
RajkumarJangid7
 
Comparing AngularJS and ReactJS_ Finding the Best Framework for your Next Pro...
JPLoft Solutions
 
Comprehensive Guide to React Development 2022.pptx
75waytechnologies
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
AngularJS vs ReactJS: Which One is Best for Next Front-end Development
Andolasoft Inc
 
Dirigible powered by Orion for Cloud Development (EclipseCon EU 2015)
Nedelcho Delchev
 
9 Best JavaScript Frameworks To Choose
Albiorix Technology
 
Top JavaScript Frameworks for Mobile App Development
ScalaCode
 
Angular.js vs React.js vs Vue.js _ Elsner.pptx
Elsner Technologies Pvt. Ltd.
 
Top 10 Front End Development Technologies to Focus in 2018
Helios Solutions
 
Ad

Recently uploaded (20)

PPTX
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
PPTX
In From the Cold: Open Source as Part of Mainstream Software Asset Management
Shane Coughlan
 
PPTX
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
MiniTool Power Data Recovery 8.8 With Crack New Latest 2025
bashirkhan333g
 
PPTX
AEM User Group: India Chapter Kickoff Meeting
jennaf3
 
PPTX
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PPTX
Coefficient of Variance in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
Milwaukee Marketo User Group - Summer Road Trip: Mapping and Personalizing Yo...
bbedford2
 
PDF
Odoo CRM vs Zoho CRM: Honest Comparison 2025
Odiware Technologies Private Limited
 
PDF
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
PPTX
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
PDF
Simplify React app login with asgardeo-sdk
vaibhav289687
 
PDF
How to Hire AI Developers_ Step-by-Step Guide in 2025.pdf
DianApps Technologies
 
PDF
ERP Consulting Services and Solutions by Contetra Pvt Ltd
jayjani123
 
PPTX
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
PDF
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
PPTX
Get Started with Maestro: Agent, Robot, and Human in Action – Session 5 of 5
klpathrudu
 
PPTX
Customise Your Correlation Table in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PPTX
Build a Custom Agent for Agentic Testing.pptx
klpathrudu
 
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
In From the Cold: Open Source as Part of Mainstream Software Asset Management
Shane Coughlan
 
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
MiniTool Power Data Recovery 8.8 With Crack New Latest 2025
bashirkhan333g
 
AEM User Group: India Chapter Kickoff Meeting
jennaf3
 
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Coefficient of Variance in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Milwaukee Marketo User Group - Summer Road Trip: Mapping and Personalizing Yo...
bbedford2
 
Odoo CRM vs Zoho CRM: Honest Comparison 2025
Odiware Technologies Private Limited
 
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
Simplify React app login with asgardeo-sdk
vaibhav289687
 
How to Hire AI Developers_ Step-by-Step Guide in 2025.pdf
DianApps Technologies
 
ERP Consulting Services and Solutions by Contetra Pvt Ltd
jayjani123
 
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
Get Started with Maestro: Agent, Robot, and Human in Action – Session 5 of 5
klpathrudu
 
Customise Your Correlation Table in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Build a Custom Agent for Agentic Testing.pptx
klpathrudu
 
Ad

Frontend War: Angular vs React vs Vue

  • 1. INFINITY WAR By Marudi Tri Subakti JavaScript Developer at HongLeong Bank Bhd
  • 3. OBJECTIVES Here are the questions we’ll address today: • How mature are the frameworks / libraries? • How extensive and helpful are their corresponding communities? • How easy is it to find developers for each of the frameworks? • What are the basic programming concepts of the frameworks? • What does the learning curve look like for each framework? • How easy is it to use the frameworks for small or large applications? • What kind of performance can you expect from the frameworks? • Where can you have a closer look under the hood? • https://marudits.github.io/discussee-angular/ • https://discussee-react.herokuapp.com/ • https://marudits.github.io/discussee-vue/#/
  • 4. WHAT IS IT? • Angular is a TypeScript-based Javascript framework. • Developed and maintained by Google • Angular (also “Angular 2+”, “Angular 2” or “ng2”) is the rewritten, mostly incompatible successor to AngularJS (also “Angular.js” or “AngularJS 1.x”). • Now has stable version 5, and has roadmap plan until 2019 to release stable version 8 https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.m d
  • 6. Why we use & don’t?  PROS (+)  MVC framework  Angular templates  Simple Implementation of two-way data binding  Big community  CONST (-)  Doesn’t use Virtual DOM at all  Usage of TypeScript (?)  Lower render speed  Heavyweight code When to use?  Cross-platform mobile development (mobile-first approach)  Enterprise software  Progressive web apps and hybrid mobile apps development
  • 8. • React is described as “a JavaScript library for building user interfaces”. • Initially released in March 2013, React was developed and is maintained by Facebook, which uses React components on several pages (not as a single-page application, however). • React is used far more at Facebook than Angular is at Google • Facebook is working on the release of React Fiber. It will change React under the hood https://github.com/acdlite/react-fiber-architecture WHAT IS IT?
  • 10. Why we use & don’t?  PROS (+)  Componet model  Virtual DOM  One-way data binding  Native mobile development framework  Big community  CONST (-)  Need to use third-party technologies  Using JSX (?)  Complex app structure  Steep learning curve When to use?  Dynamic Application  Single Page Application (SPA)  Native Mobile Apps
  • 12. WHAT IS IT? • Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces • Vue describes itself as a “Intuitive, Fast and Composable MVVM for building interactive interfaces.”. • It was first released in February 2014 by ex-Google- employee Evan You, without the backing of a big company and currently has a team of dozen core developers • It has been able to learn from the mistakes and successes of Angular and React. • In 2016, version 2 was released and plans for Vue 3 release in 2018. Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab https://github.com/vuejs/roadmap
  • 14. Why we use & don’t?  PROS (+)  MVVM Architecture  Lightweight Solution  Pure JavaScript  Virtual DOM  Low Learning Curve  CONST (-)  Small community and support  Chinese roots  LTS is uncertain  Being too flexible can be problematic When to use?  Dinamyc high-performance applications  Single Page Application (SPA)
  • 15. CONSIDERATION • History • Core Development • Market Lifecycle • Long-term Support & Migrations • Library/Frameworks support project requirements • Human Resources & Recruiting Lifecycle & strategic considerations
  • 16. CONSIDERATION (2) 1. Components 2. TypeScript vs ES6 vs ES5 3. Templates – JSX or HTML 4. Framework vs Library 5. State Management & Data Binding 6. Other Programming Concept Comparison of Angular, React, and Vue 7. Flexibility & Downsizing to Microservices 8. Size & Performance 9. Testing 10.Universal & Native Apps 11.Learning Curve 12.Under the Hood
  • 17. ASPECT Angular React Vue Maturity - 2010 - 1, 2, 4, … - Roadmap plan until version 8 - 2013 - React Fiber & React 16 - 2014 - Now version 2 - Plan version 3, parity support Support Google Facebook, Dev Circle Small Dozen Team Human Resources Well known OOP concept JS specialist Learning curve is sloping Programming Concept - MVC, DI - TypeScript - Ng-template - V - ES6 - JSX - MVVM - ES5, ES6 - vue-template Bundle Framework, 143k Library, 43k Library, 23k Universal & Native Apps Angular Universal, NativeScript Next.JS, React- Native Nuxt.JS Project Scale Large, Enterprise Small-Mid, Attached Small-Mid, Attached
  • 18. CHOICE(s) • If you love TypeScript: Angular (or React) • If you love object-orientated- programming (OOP): Angular • If you need guidance, structure and a helping hand: Angular • If you like flexibility: React • If you love big ecosystems: React • If you like choosing among dozens of packages: React • If you love JS & the “everything-is-Javascript- approach”: React • If you like really clean code: Vue • If you want the easiest learning curve: Vue • If you want the most lightweight framework: Vue • If you want separation of concerns in one file: Vue • If you are working alone or have a small team: Vue (or React) • If your app tends to get really large: Angular (or React) • If you want to have a lot of developers in the pool: Angular or React • If you work with designers and need clean HTML files: Angular or Vue • If you like Vue but are afraid of the limited ecosystem: React
  • 19. CONCLUSION • Angular uses TypeScript and is ideal for programmers with a solid Object-Oriented Programming (OOP) background who need detailed guidance and structure. • For those who love massive ecosystems and more flexibility, React is the way to go. • Vue is relatively simple to pick up and integrate for a small team of core developers. “The best simply does not exists. If there is something best, other solutions will not exist and if exist, will not survive.”
  • 20. INFINITY WAR By Marudi Tri Subakti JavaScript Developer at HongLeong Bank Bhd