Angular vs React vs Vue
Download as PPTX, PDF4 likes1,827 views
This document compares the React, Angular, and Vue JavaScript frameworks. It discusses their histories, key features, benefits, disadvantages, and performance. Angular is a TypeScript framework developed by Google, while React was made by Facebook and uses JSX. Vue takes ideas from both and is easier to learn. The document considers questions about which to choose and recommends Angular for structure, React for flexibility, and Vue for smallest size. It provides an overview of each framework's programming concepts, usage, learning curves, and long-term support.
Angular vs React vs Vue
- 1. •React vs. Angular vs. Vue •Hosein Mansouri •Qom Open Source Community
- 2. Basic Question? – Which framework should is choose? – Is angular than better than react? – Vue is better? – What I should learn? – I try to answer some of these question…
- 3. Advanced Question? • What are the basic programming concepts of the frameworks? • How easy is it to use the frameworks for small or large applications? • What does the learning curve look like for each framework? • What kind of performance can you expect from the frameworks? • Ready, set, GO!
- 4. Angular History • 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”) • Released in October 2010
- 5. Angular History • The newest major release is version 5, Older version is 4 and version 3 was skipped. • Angular is used by Google, Wix, weather.com, healthcare.gov and Forbes
- 6. Angular 2 or above • Benefit – Modularity – Dependency Injection – Routing – Validation – TypeScript(like C#, like Java) – Clear separation between HTML an TypeScript
- 7. Angular 2 or above • Disadvantages – Angular feature can confusing for newcomers – Backward Compatibility (new release breaking change) – TypeScript (for java script background)
- 8. React History • React is described as “a JavaScript library for building user interfaces”. • Initially released in March 2013 • React was developed and is maintained by Facebook • React components on several pages
- 9. React History • React is also used by Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart and others • React Fiber was released with React 16 in September 2017.
- 10. React • Benefit – Support by Facebook – JSX (Mixing java script and HTML) – Active Community – Many Package – Easy to use – Like React native
- 11. React • Disadvantage – JSX (can’t use normal HTML) – Add extra router – Add extra form validation
- 12. Vue History • Vue describes itself as a “Intuitive, Fast and Composable MVVM for building interactive interfaces.” • Vue is one of the most rapidly growing JS frameworks in 2016. • It was first released in February 2014 by ex-Google- employee Evan You
- 13. Vue History • It’s been quite a success, especially given that Vue is getting so much traction as a one-man show without the backing of a big company. • In 2016, version 2 was released. • Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab
- 14. Vue • Benefit – Great Idea from angular and react – Use ES5 and ES6 – Separation template and java script code – Normal HTML and Normal CSS – Easy to learn, Easy to use – Router is provided – Great Communication – A Great Documentation
- 15. Vue • Disadvantage – Is New – Lack dependency injection – Don’t use by a great company – Less job
- 16. Comparison of React, Angular & Vue
- 17. GitHub Star
- 18. NPM Trends
- 19. Google Trends
- 20. Components • The frameworks in question are all component-based. • The defined components should be easy to reuse on the webpage or within other components.
- 21. Typescript vs. ES6 vs. ES5 • React focuses on the use of Javascript ES6. Vue uses Javascript ES5 or ES6. Angular relies on TypeScript. • TypeScript also introduces concepts like decorators and static types. Static types are useful for code intelligence tools, like automatic refactoring, jump to definitions, etc. • TypeScript adds a lot of (learning) overhead to projects
- 22. Templates —JSX or HTML • React breaks with long-standing best practices. For decades, developers were trying to separate UI templates and inline Javascript logic, but with JSX, these are intermixed again. • JSX is a big advantage for development, because you have everything in one place, and code completion and compile-time checks work better. • “Angular 2 continues to put ‘JS’ into HTML. React puts ‘HTML’ into JS.”. This is a good thing, because Javascript is more powerful than HTML.
- 23. Framework vs. library • Angular is a framework rather than a library because it provides strong opinions as to how your application should be structured and also has more functionality out of the box. Angular is a “complete solution. • React and Vue, on the other hand, are universally flexible. Their libraries can be paired to all kinds of packages.
- 24. Other programming concepts • The model-view-controller pattern (MVC) splits a project into three components: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the V — you need to solve the M and C on your own.
- 25. Flexibility & downsizing to microservices • You can work with React or Vue by simply adding the Javascript library to the source code. This is not possible with Angular because of its use of TypeScript. • Angular work best for SPA, as it is probably too bloated to be used for microservices.
- 26. Long-term support & migrations- React • React APIs are quite stable, as Facebook states in their design principles. There are also some scripts to help you move from your current API to a newer one. • Migrations are quite easy and there is no such thing (needed) as a long-term-support version. • When they add a deprecation warning, they keep it for the rest of the current release version before the behavior is changed in the next major version.
- 27. Long-term support & migrations - Angular • There will be one major update every six months, and there will be a deprecation period of at least six months (two major releases). • Angular team has announced long-term-support versions starting with Angular 4. • This means Angular 4 will be supported until at least September 2018 with bug-fixes and important patches.
- 28. Long-term support & migrations - Vue • The update process for Vue 1.x to 2.0 should be easy for a small app —the developer team has asserted that 90% of the APIs stayed the same. • There is no clear (public) roadmap about the next major version or information on plans for LTS versions.
- 29. What should I choose? • 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
- 30. What should I choose? • 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 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 build an app with react-native: 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
- 31. THE END & Thanks.