Need advice about which tool to choose?Ask the StackShare community!
Angular 2 vs React: What are the differences?
Angular 2 is a comprehensive JavaScript framework for building large-scale web applications, while React is a lightweight JavaScript library focused on building reusable UI components. Here are the key differences between Angular 2 and React:
Architecture and Design Philosophy: Angular 2 is a full-fledged framework that follows the MVC (Model-View-Controller) architecture. It provides a structured and opinionated approach to web development with built-in features like dependency injection, data binding, and routing. React, on the other hand, is a JavaScript library focused on building user interfaces. It follows a component-based architecture and promotes a more flexible and modular design approach, allowing developers to make decisions about the architecture and libraries they want to use.
Learning Curve and Complexity: Angular 2 has a steeper learning curve compared to React. It has a large and comprehensive documentation, and developers need to understand various concepts such as modules and decorators. React, on the other hand, has a simpler and more intuitive API, making it easier to get started. React's core concepts, such as components and virtual DOM, are relatively straightforward, and developers can gradually learn additional libraries and patterns as needed.
Language and Tooling: Angular 2 is primarily written in TypeScript, a statically typed superset of JavaScript, which brings additional features like strong typing and compile-time error checking. React, on the other hand, can be used with JavaScript as well as TypeScript. Angular 2 comes with a comprehensive CLI (Command Line Interface) that offers a range of development tools and utilities. React, being a library rather than a full framework, allows developers to choose their preferred tools and build setups.
Component Reusability: Angular 2 and React both support component-based development, but with different approaches. Angular 2 encourages the use of a hierarchical component tree, where components have a predefined structure and communicate with each other through input and output bindings. React, on the other hand, creates reusable components by composing smaller components together using props. React's unidirectional data flow and virtual DOM diffing enhance rendering efficiency and component reusability.
Community and Ecosystem: React has a large and active community. It has a rich ecosystem of libraries and tools built around it, providing solutions for various use cases. Angular 2 also has a strong community, but it may not be as extensive as React's. Angular 2 has its own set of libraries and tools, but it may have a narrower scope compared to React's ecosystem.
In summary, Angular 2 is a powerful and feature-rich JavaScript framework offering extensive tools and functionalities for building complex web applications. React, on the other hand, is a lightweight JavaScript library, known for its efficient rendering and component-based approach, making it ideal for building dynamic user interfaces.
I am almost done with frontend development and know JavaScript. I wanted to know if it is necessary to learn any frontend framework, and what would be the advantage of using them? I also want to know which of the frameworks to choose, especially on factors such as responsiveness(like mobile version or web app)? I am also open to suggestions of using frameworks other than the above two such as Vue.js etc. Thanks in advance.
Choosing a framework be it angular, react, ember or vue is personal preference. I would say start with each and build something that utilise state management (todo list perhaps?) and see which style you are comfortable with.
If you wants to get employed, React is a wiser choice. It also helps you build native mobile apps with react-native . If you are building enterprise app with alot of client-side data, nothing beats Ember.js ember-data.
If you are like me who is prototyping light-weight startup and would like to move fast and missing your first front-end learning (angular 1), go with Vue.js . NativeScript-Vue is the binding to build mobile native apps with it.
I would first like to differentiate between two categories of front-end frameworks: JavaScript front-end frameworks (Angular, React, Vue) and CSS front-end frameworks (Bootstrap, Tailwind, Foundation).
Responsiveness is an aspect that deals mostly with CSS, and CSS frameworks such as the ones mentioned are focused on addressing this aspect, making it easy to use components in a standard and less bug-prone way when compared to writing CSS from scratch. This said, knowledge of CSS is very important for front-end development, as it is required to customize components provided by these frameworks, and allows you to create more customized and compelling experiences.
Choosing to use a CSS framework does not prevent you from using a JavaScript framework. The two are frequently used together. Usually, React, Vue and the other front-end JavaScript frameworks have their own implementations of these CSS frameworks, tailored to better integrate with the JavaScript frameworks themselves. The React community, for example, has React Bootstrap, and Material-UI, which are React implementations of popular CSS frameworks, among others.
In no way you are required to use JavaScript frameworks, but they tend to lower the barrier of writing apps by surrounding you with a component-based development process, which generally allows you to better organize code. It is usually better to allow yourself to feel the pain of not using a framework so you can understand what frameworks have to offer.
In any case, should you want to learn a JavaScript framework, I would suggest that you take the tour of each JavaScript framework, then try implementing a simple project, such as building a small blog application or a tic-tac-toe game, and try implementing it using different JavaScript frameworks. This should provide you with an overview of how things operate in each framework.
Also, I would like to add that the learning curve of Angular is generally considered much higher than the other JavaScript frameworks, so I would recommend that you avoid it for now unless you are sure that you would like to dive into it.
Personally, I have used Vue.js, React, Ionic, Angular, and I enjoyed the first two the most, especially React.
What is the best MVC stack to build mobile-friendly, light-weight, and fast single-page application with Spring Boot as back-end (Java)? Is Bootstrap still required to front-end layer these days?
The idea is to host on-premise initially with the potential to move to the cloud. Which combo would have minimal developer ramp-up time and low long-term maintenance costs (BAU support)?
React might be a good option if you're considering a mobile app for the future, because of react native. Although, Vue.js has the easiest learning curve and offers a better developer ramp-up time. Vue.js is great to build SPAs, very clean and organized and you won't have a lot of long-term maintenance problems (like AngularJS, for example). Bootstrap can still be used, but with flexbox there's no need anymore.
I recommend React because of less memory occupant compare to Angular, but this will depend on your organisation flexibility. When you use React you need to import different libraries as per your need. On the other side angular is a complete framework.
Performance-wise I vote for react js as it loads up quickly and lighter on the mobile. You can make good PWA with SSR as well.
If you are new to all three react will be a good choice considering, react-native will be useful if you want to build cross platform mobile application today or tomorrow. If you are talking about bootstrap styling framework than it's a choice you can style ur components by ur self or use bootstrap 4.0 framework. The complete stack mentioned above is platform agnostic u can run it anywhere you want be it cloud or on-premise.
We are coming from a C# background and we are trying to port our Windows Forms and WPF UIs to the browser. Our current UI is hosted in a "framework" which hosts all Windows and you can navigate in the program. As a back-end, we want to use ASP.Net Core to use some existing logic as well as database access logic. We already collected some experience in JS and TS and are able to create basic UIs in vanilla JS/TS. But we struggle a bit with navigation from one "App" to another "App".
What would be your recommendation?
Coming from C# I think you’ll find Angular comfortable. If you were more node/ruby/web developer savvy I’d probably recommend React.
Angular comes with everything you need out of the box, it’s a bit more opinionated framework. React is a series of libraries that you can patch together to tweak exactly how you like to web dev.
Have you tried Angular or React? They are frameworks for creating single page WebApps where the DOM is updated on a single webpage, what this means is that your app only loads once and thereafter it is as smooth as a native experience. What you can do is build one menu interface and then have multiple apps all running in the same project. Google Docs is a good example of this. Angular is easier to manage, but personally a bit jarring to get into and understand, whereas React is a bit messier, but easier to pick up.
I think react easy and fast to learn for you.
We are looking for a way to cope with AngularJS' LTS coming to its end. We have been working for about the last 3 years on a project, written using ASP.NET Core + AngularJS 1.5.7 + Fuse theme. Altogether we've invested about 10 development years into it. The alternatives we've looked at so far were migrating to Angular2+ or React, but we expect those alternatives to be too costly (we can't afford ourselves investing ~3 development years on such a migration project). We've also considered side-by-side development – that is leaving the current code as is, and using some more advanced technology only for new features – but we couldn't find a reasonable way to implement it, and it won't actually solve the main issue we have with the LTS ending. The main issue for us with AngularJS' LTS coming to its end is the lack of security updates that come as parts of new releases (and of course we are happy to advance to a newer technology regardless).
So which technology is the simplest to migrate to, and is there some tool or library that can help us?
I've found myself in the same scenario 2 years ago, I did the migration to Angular and the difference between both versions is huge! you are basically going to create the project from zero (again). If that is the case, I recommend React. The learning curve is smaller, it's easy to develop and maintain, and it's way better when writing specs. You could work on the migration project in parallel doing releases per feature and then replace the project when the migration is done.
I did this migration in 2016-2017 on a pretty large app. Search "migrating from angularjs to angular" and you'll find tons of advice. And some tools. We chose to upgrade based on route, where basically more of our routes were handled by Angular over time and less by AngularJS. The whole migration took about 18 months, the app continued to work fine, and eventually, it was all migrated.
Here are some tools that can help suggest a path forward. https://blog.angular.io/migrating-to-angular-fc9618d6fb04
Modern Angular is so wildly different from Angular.js, there's no reason to choose it over any other framework. If you're choosing a new framework, I recommend Vue.js which has very similar syntax and concepts, and an easy learning curve. Vue has the benefit of being very lightweight and incrementally adoptable.
Here's the official doc comparing Vue and Angular.js
BackgroundI used Angular.js until the release of Angular 2.
The frameworks were so wildly different I went out looking for something better.
Angular 2+ is the most complex option - requires TypeScript, a build system (babel, webpack). Disclaimer - I did not try React or Ember.
I found Vue.js easy to learn as it borrowed many concepts that originated in Angular.js - such as directives, filters, and much of the form handling approach (even ng-model
is available as v-model
). I've found Vue to be closer to Angular.js (esp. v1.5 which added components) that more modern versions of Angular!
More importantly, Vue.js is incrementally adoptable, and can be used without a build system. The Vue.js intro page embeds 7 entirely independent tiny Vue apps on the same HTML page!
This means you could embed a tiny Vue.js app inside your Angular.js app, and slowly swap out sections slice by slice, until the entire app has been replaced. A similar approach was used by Slack to incrementally migrate their entire app to modern React.
This approach can also be done when migrating to Angular 2 +. Check out episode 141 of Adventures in Angular for a discussion of this approach.
My personal pick would be Vue.js, but regardless of the framework you choose, incremental adoption is the way to go.
- UPDATE Turns out there's an entire ecosystem of tools for embedding components of one framework inside another - such as angular2react and react2angular
Moving from AngularJS to Angular is as hard as moving to any other tool because the only thing they share is the name-ish. React is my logical decision because for me it simpler due to its use of JavaScript. You don't have magic as with Angular. You use plain JavaScript to code, and things just work. The new Angular is a copy of React (mostly). And having to work with TypeScript makes things messier. You can migrate React to TypeScript, but if you have no experience, you don't need to use it. For me React is cleaner and simpler than Angular as "the new technology to use to migrate all your codebase". You can always leave your clients with the old app, and add a button to a new and shiny app in development, and ask them to try and give feedback. Doing this, you will find what's important for them, and which parts need to be prioritized instead of migrating all from a to z. It also helps your clients to learn the application step by step instead of having a sudden change to a new app that they don't totally know. Doing this you allow them to compare the old and the new one, and find their way around easily. Hope this helps you :)
I'd recommend React. This is because React is very easy to learn. Furthermore, you get to code your dynamic UI components like classes and objects which will make them reusable all through your project. I find that as being one of the best features React has. Also, you get speedy development with React due to its simplistic syntax and the sharing of data among components through props. Also it's backed by Facebook and the framework is easy to integrate with other applications.
React has a different mindset. React is about composition and state management. It's easier to build and compose components which for me speeds up the UI development. Plus, more features that aims for reusability and consistency of components and its state. Thus, I recommend React.
Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"]
would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.
For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.
How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...
In my view, the upside of React is you're likely to find more existing, robust design systems (e.g. sets of components containing anything from buttons to datepickers) in the React ecosystem than Vue. UI frameworks aside, momentjs comes in when you want operate on the date(times) you get back from whatever datepicker you choose (e.g. date formatting, date match).
I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?
I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.
It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.
I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)
I would also go with React. The learning curve can be a little more difficult but as soon as you got the concepts it's really easy to create things. As everybody has mentioned the React community is huge and it keeps growing, anything you may need for your project there are super high probabilities that you will find it.
React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.
I'd have to concur that I'd advise React. In addition to the reasons mentioned, the developer pool is significantly larger (and also slightly more expensive) for React. In time, engineering costs will even out as more and more teams adopt it. The community support is fantastic, and the available components significant.
Both have their pro's and con's; however to agree what has been mentioned here before; Using Vue.js will be easier as it's learning curve isn't steep; plus learning Vue.js will teach you fundamentals which (in a sense) can be applied to React as well. Community support for React is indeed very big, but Vue.js is also still growing. Component wise, I wouldn't worry to much about that, writing your own components is also a good tool for learning a language.
Having developed in both Vue.js and React, I agree with your assessment of Vue. It does feel light and easier to understand and therefore learn. Seeing that Vue has some genetic roots with React, I would say start your friend out on Vue. If they need to learn React later, that should give them a good foundation. If you have a Pluralsight subscription, look for my course on Vue.js and feel free to use the demo project as a starting point.
Would start with Vue especially if you want to progress more quickly and don't want/need to spend time learning React just for the sake of it. You can always pick up React later if necessary. I would caution about using "more readily available React components" just because they exist.
Anything that interacts with the Internet, websites, applications, etc., while it may be more complex to build, will be easier to maintain in the long run. React
offers more flexibility, a much larger support base for knowledge and opinion, and is just as stable asVue
.
To make the best comparison in my opinion, think of React
as the Android OS and Vue
more like iOS. While Vue
may be advantageous in some cases, it is limited by constricting parameters. On the other hand, while React
may be more complex and incorporate more open-source/third-party constructs, it is supported by over 50,000 npm packages and allows for the use of JSX. Which I might add, once learned, becomes second nature to employ and offers more flexibility.
It all depends. Vue.js is smaller, and from what I saw (benchmarks) faster. It's also slightly more intuitive and easier to grasp. React is more popular, and the adoption rate is much higher.
Again, it all depends.
If I may, my personal choice would perhaps be either React or Svelte.
We did a comparison between React, Vue and Angular and while found each capable of supporting our needs, we ended up using VueJS because of its ease of use, the ability to use templates, large and growing community and good documentation. After developing on it for a around 4 months we re-evaluated and agreed that we had made the right choice and continue to migrate our products/platform to it.
I would recommend both of them since Vue is a UI library and helps you to design beautiful website while react allows you to handle backend problems like comment management and onspot reloading more efficiently also react includes useState and react is a framework while vue is a library
It is hard to say which is good. I've used both. Vue is easier. But I feel more comfortable with React. That is why I chose React.
VueJS hands down. Which components do you need? Have a look at Vuetify, mature project, plenty of components ready to plug and play. If on the other side you need more customization, have a look at tailwindcss. VueJS is much cleaner and IMO will overtake React soon. It's simply a better React.
Virtual dom and JSX. Vue is just a baby to the race. React has it's mobile platform version as react native . so it would be easy for you and you wont reinvent the wheel again for mobile apps.
As others have stated there are more canned components available for React, but your observation about it's complexity is an important one. There are architectural aspects of Vue.js that lead to cleaner more concise solutions. As React apps get bigger they become a little unwieldy. Depending on your requirements you need to weigh those competing concerns. Our team is using React, but I am beginning to question that choice as time goes on. Another consideration is that Vue.js is becoming more mature as we speak. Also as others join the project, react developers should be productive in Vue.js within days. Just my 2 cents...
For me Angular is a complete framework. It is built on the experience of AngularJS, has a very cool CLI with a lot of features (also IntelliJ Integration of course), complies with web standards, provides a good maintainability and integrated solutions like i18n or animations. And it is also good for beginners. (linked a german article about my first steps in angular)
It was easier to find people who've worked on React than Vue. Angular did not have this problem, but seemed way too bloated compared to React. Angular also brings in restrictions working within their MVC framework. React on the other hand only handles the view/rendering part and rest of the control is left to the developers. React has a very active community, support and has lots of ready-to-use plugins/libraries available.
It is a very versatile library that provides great development speed. Although, with a bad organization, maintaining projects can be a disaster. With a good architecture, this does not happen.
Angular is obviously powerful and robust. I do not rule it out for any future application, in fact with the arrival of micro frontends and cross-functional teams I think it could be useful. However, if I have to build a stack from scratch again, I'm left with react.
Working on a new SaaS web/mobile app and ended up with React as our choice of Frontend JavaScript framework for SPA web version with React Native for iOS, Android, Windows clients.
The key takeaways:
Both frameworks can do the job quite well for us. This might be true for the majority of utility web apps being built out there as well, so there was no "wrong" decision here.
Vue is often cited as easier to learn and code on. But only in case your engineers never worked with either Vue or React and start learning them from scratch. In our case, we knew we'll be hiring engineers who already have experience in the framework we'll select - so it was not a big argument for Vue.
We're building our engineering team in Ukraine and realised we have 3(!) times more engineers with React experience on the market than having Vue experience.
Mobile - React Native, despite being a different framework, still shares a lot with React and it's just easier for React developers to start using React Native in days.
The strongest points for our decision:
React community is larger, means more/faster answers to your questions and existing components.
Way more experienced React engineers on the market.
React + React Native is a great combo if you're building web and mobile clients of the same app.
I used React not just because it is more popular than Angular. But the declarative and composition it gives out of the box is fascinating and React.js is just a very small UI library and you can build anything on top of it.
Composing components is the strongest asset of React for me as it can breakdown your application into smaller pieces which makes it easy to reuse and scale.
Svelte is everything a developer could ever want for flexible, scalable frontend development. I feel like React has reached a maturity level where there needs to be new syntactic sugar added (I'm looking at you, hooks!). I love how Svelte sets out to rebuild a new language to write interfaces in from the ground up.
I was first sceptical about using Angular over AngularJS. That's because AngularJS was so easy to integrate in existing websites. But building apps from scratch with Angular is so much easier. Of course, you have to build and boilerplate them first, but after that - you save a ton of time. Also it's very cozy to write code in TypeScript.
Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:
- Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
- Vue Styleguidist as our style guide and pool of developed Vue.js components
- Vuetify as Material Component Framework (for fast app development)
- TypeScript as programming language
- Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
- ESLint, TSLint and Prettier for coding style and code analyzes
- Jest as testing framework
- Google Fonts and Font Awesome for typography and icon toolkit
- NativeScript-Vue for mobile development
The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:
- Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
- Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
- Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
- Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
- Large scaling. Vue.js can help to develop pretty large reusable templates.
- Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!
What do you think?
Reactjs is much better with the server side rendering and virtual dom than Angular JS in multiple reasons. Reactjs has SEO-friendly and Angular JS is not despite being built by Google.
Community supportHuge community support for Reactjs. Hell lot of libraries. Use material UI for UI. Redux for state management. Everything is pretty much out of the box
Ease of learningPeople say Reactjs js has steep learning curve. This is true for a web developer who does not know about classes. But if you already know about Classes it is much easier to work with ReactJS
on NPMBest packager ever
Pros of Angular
- It's a powerful framework109
- Straight-forward architecture53
- TypeScript48
- Great UI and Business Logic separation45
- Powerful, maintainable, fast40
- Amazing CLI39
- Great mvc33
- Powerfull Dependency Injection29
- Easy to build19
- All in one Framework16
- Opinionated, batteries-included approach15
- Schematics11
- Solid Standard Setup.10
- Structured8
- Performance7
- Complex5
- Only for single page applications4
- Builders3
- RxJS2
- Ng upgrade2
- React1
Pros of React
- Components832
- Virtual dom673
- Performance578
- Simplicity508
- Composable442
- Data flow186
- Declarative166
- Isn't an mvc framework128
- Reactive updates120
- Explicit app state115
- JSX50
- Learn once, write everywhere29
- Easy to Use22
- Uni-directional data flow21
- Works great with Flux Architecture17
- Great perfomance11
- Javascript10
- Built by Facebook9
- TypeScript support8
- Server Side Rendering6
- Speed6
- Feels like the 90s5
- Excellent Documentation5
- Props5
- Functional5
- Easy as Lego5
- Closer to standard JavaScript and HTML than others5
- Cross-platform5
- Easy to start5
- Hooks5
- Awesome5
- Scalable5
- Super easy4
- Allows creating single page applications4
- Server side views4
- Sdfsdfsdf4
- Start simple4
- Strong Community4
- Fancy third party tools4
- Scales super well4
- Has arrow functions3
- Beautiful and Neat Component Management3
- Just the View of MVC3
- Simple, easy to reason about and makes you productive3
- Fast evolving3
- SSR3
- Great migration pathway for older systems3
- Rich ecosystem3
- Simple3
- Has functional components3
- Every decision architecture wise makes sense3
- Very gentle learning curve3
- Split your UI into components with one true state2
- Image upload2
- Permissively-licensed2
- Fragments2
- Sharable2
- Recharts2
- HTML-like2
- React hooks1
- Datatables1
Sign up to add or upvote prosMake informed product decisions
Cons of Angular
- Overcomplicated9
- Large overhead in file size and initialization time9
- Ugly code2
- CLI not open to other test and linting tools2
Cons of React
- Requires discipline to keep architecture organized41
- No predefined way to structure your app30
- Need to be familiar with lots of third party packages29
- JSX13
- Not enterprise friendly10
- One-way binding only6
- State consistency with backend neglected3
- Bad Documentation3
- Error boundary is needed2
- Paradigms change too fast2