Perbandingan Sederhana Angular vs React vs Vue.js

4 min readNov 11, 2019

1. Angular

JavaScript MVVM Framework, TypeScript-based open-source web application framework, great for building highly interactive web app.

Pros:

+ Angular-language-service, bisa autocomplete dalam file HTML external

+ Banyak fitur baru seperti library npm berbasis angular yang dapat digunakan oleh command-line interface

+ Dokumentasi detail

+ One-way data binding memungkinkan singular behavior dari app, sehingga mengurangi resiko error

+ MVVM, memungkinkan dev bekerja secara terpisah dalam satu bagian app yang sama dengan set data yang sama

+ MVC Framework

+ Dependency injection pada fitur-fitur yang berkaitan dengan komponen modul

+ Struktur dan arsitektur dibuat untuk project dengan skalabilitas besar

+ Code dimiliki serte di maintain oleh Google

Cons:

- Sulit dipelajari karena struktur sangat bervariasi dan kompleks (Injectables, Components, Pipes, Modules, etc.) dibandingkan dengan React dan Vue.js yang hanya punya “Component”

- Performa lebih pelan secara relatif, tetapi dapat ditangani dengan “ChangeDetectionStrategy”, yang dapat mengontrol proses render dari komponen secara manual

Perusahaan yang menggunakan Angular: Microsoft, Autodesk, McDonald’s, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, ProtonMail, Clarity Design System, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase, Lego, The Guardian.

2. React

Pure JavaScript, great for building modern single-page app of any size and scale.

Pros:

+ Easy to learn, simple design, use of JSX (HTML-like syntax) for templating, highly detailed documentation

+ Dev bisa alokasi waktu lebih banyak code modern javascript karena tidak perlu khawatir soal framework-specific code

+ Extremely fast, karena implementasi React’s Virtual DOM dan berbagai rendering optimization

+ Great support untuk server-side rendering, making it a powerful framework for content-focused app

+ First-class Progressive Web App (PWA) support, karena ada ‘create-react-app’ app generator

+ One-way data-binding, mengurangi side effect yang tidak diinginkan

+ Adanya Redux, most popular framework for managing app state in React, mudah dipelajari dan dikuasai

+ React mengimplementasi konsep Functional Programming (FP), sehingga membuat code yang easy-to-test dan highly reusable

+ App dapat dibuat type-safe dengan Microsoft’s Typescript atau Facebook’s Flow, keduanya ada native support for JSX

+ Migrasi antar versi sangat mudah dengan Facebook menyediakan “codemods” untuk otomatisasi sebagian besar dari prosesnya

+ Skill yang dipelajari di React dapat diaplikasikan pada pengembangan React Native

Cons:

- React tidak memberikan opini yang kuat, sehingga dev yang menentukan sendiri apa cara terbaik dalam development, dapat diatasi dengan project leadership yang kuat dan proses yang develop yang baik

- Community sekarang terbagi dua mengenai cara terbaik untuk menulis CSS dalam React, antara traditional stylesheet (CSS Modules) dan CSS-in-JS (Emotion and Styled Components)

- React mulai menjauh dari class-based components, dapat menjadi kendala bagi programmer yang lebih nyaman dengan OOP

- Bercampurnya template dan logic bisa membuat bingung developer yang tidak familiar

Perusahaan yang menggunakan React: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft, Slack, Storybook, Tesla.

3. Vue.js

JavaScript framework, cocok untuk membuat highly adaptable UI and sophisticated single-page app.

Pros:

+ Empowered HTML, sehingga vue.js punya banyak kesamaan dengan Angular, dan dapat membantu optimize HTML blocks handling dengan menggunakan banyak komponen yang berbeda

+ Dokumentasi yang mendetail mempercepat waktu belajar hanya dengan basic knowledge dari HTML dan JavaScript

+ Adaptability, switching period dari framework lain ke vue.js sangat cepat karena banyak kesamaan design dan architecture dengan Angular dan React

+ Integrasi sangat bagus, small interactive parts can be easily integrated into existing infrastructure tanpa efek negative terhadap keseluruhan sistem

+ Large scalling, dapat membantu develop reusable template yang besar tanpa alokasi waktu extra karena strukturnya simple

+ Tiny size, bisa hanya sekitar 20 KB sehingga cepat dan fleksibel, reaching much better performance compared to other frameworks

+ Sintaks yang simple dan mudah dipelajari bagi pemula

+ Struktur yang tidak ribet

Cons:

- Kurang tersedianya resource dari knowledge sharing karena masih baru

- Resiko dari terlalu fleksibel, kadang bisa ada isu saat integrasi project besar

- Dimiliki oleh satu orang dan di maintain oleh tim kecil

Perusahaan yang menggunakan Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters, 9gag, Laravel, Font Awesome.

Performance: Which Is Better?

Virtual DOM model is very helpful in terms of performance. Both, React and Vue has a Virtual DOM. Due to a well-built structure, Vue delivers great performance and memory allocation. React, on the other side, works well and Angular is already ahead in the competition.

The performance depends on various factors. These three frameworks are comparatively faster than other JavaScript frameworks. You should not take performance into account to draw the conclusion because it mainly relies on the size of the application and optimization of code.