Downloaded 49 times
Uploaded byMarudi Subakti
Frontend War: Angular vs React vs Vue
The document compares three popular JavaScript frameworks: Angular, React, and Vue, discussing their maturity, community support, learning curves, and use cases. Angular is ideal for those with an object-oriented background and requires structure, while React offers flexibility and a vast ecosystem. Vue is positioned as a simple, lightweight option for small teams, promoting ease of use for dynamic applications.
In this document
Powered by AI
Introduction to the presentation by Marudi Tri Subakti, focusing on modern frontend technologies.
Outlining key objectives for discussing frameworks/libraries: maturity, community support, developer availability, programming concepts, learning curves, application use, and performance.
Angular is a TypeScript-based framework by Google, known for its MVC architecture and community support, but has drawbacks like heavy code and lower speed.
React, a library developed by Facebook, emphasizes a component model and one-way data binding but introduces complexity with JSX and a steep learning curve.
Vue is a progressive framework with a low learning curve, MVVM architecture, and lightweight nature, but its smaller community can be a limitation.
Key considerations for choosing frameworks include development history, support, programming concepts, performance, state management, and project requirements.
A detailed table comparing Angular, React, and Vue on maturity, community support, programming concepts, application types, and project scales.
Guidelines for selecting frameworks based on preferences for TypeScript, OOP, flexibility, ecosystems, learning curve, and team dynamics.
Summary of framework capabilities: Angular for OOP users, React for flexibility seekers, and Vue for simplicity in small teams.
Reiteration of the presentation details by Marudi Tri Subakti, including his role as a JavaScript Developer.
Frontend War: Angular vs React vs Vue
- 1. INFINITY WAR By MarudiTri Subakti JavaScript Developer at HongLeong Bank Bhd
- 2.
- 3. OBJECTIVES Here are thequestions 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
- 5.
- 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
- 7.
- 8. • React isdescribed 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?
- 9.
- 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.
- 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
- 13.
- 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 • CoreDevelopment • 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 ReactVue 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 youlove 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 usesTypeScript 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 MarudiTri Subakti JavaScript Developer at HongLeong Bank Bhd