Frontend War: Angular vs React vs Vue
Download as pptx, pdf1 like754 views
Web development nowadays is getting popular. Many company focus to develop their product in web application. Generally, web development divide into 2 parts, Backend & Frontend. Backend doesnt have improvement or new features too much after API technologies. But it is very different with frontend. There are lots of framework, tools, and approach in frontend area. Currently, there are 3 frontend technologies which get most attention both from Company and Developers. Those 3 are: Angular, React, and Vue. --- This article was presented in HongLeong Bank CoE Team at March, 2 2018
More Related Content
What's hot (20)
Similar to Frontend War: Angular vs React vs Vue (20)
Recently uploaded (20)
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
- 11. IS IT ENOUGH?
- 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