Is Angular 2’s state management magic eating React alive? Is React better suited to mobile environments than Angular 2? What if I am just a newbie coder and need to choose between the two?
Two full-contact Javascript professionals Henri and Roope are here to share their secrets. So let’s get into the ring and find the next Javascript framework champion! Feel free to read the introductory, more general Part I as an appetizer.
Fast, faster, Angular 2
Q5: Are there any big performance differences between Angular 2 and React?
Henri: Performance-wise there’s not much of a difference between React and A2. Performance used to be a bit of an issue for A1, but A2 is pretty much on a par with React when it comes to perf.
Roope: Even the initial release of Angular was already faster than React in many cases thanks to its highly sophisticated change detection mechanisms. Angular is also a very young technology, and is continually evolving performance-wise. Angular’s subsequent releases have already brought extra improvements to performance. Also, at the same time it offers excellent performance, it makes it extremely easy to manipulate the state by using a library called zone.js.
Q6: Is the bundle size going to be an issue for React/Angular 2?
Henri: For a React-based app, it depends entirely on your build configuration and the number of dependencies you’re bundling along with React. React itself is just a view library and doesn’t hook into your build-time bundle generation process in any way.
That being said, react and react-dom together weigh in at around 40 kB (minified and gzipped), which is definitely not too much for the majority of use cases.
Roope: Angular comes with ready-made bundling with Angular CLI. Thus you don’t need to spend your valuable time adjusting the builds and reinventing the wheel again and again. Instead Angular CLI provides you an easy to get started sample project along with code generation features besides the obvious highly optimized building and bundling for production. Angular’s architecture with TypeScript and Ahead-of-Time compilation allow it to skip every single not used thing from the bundle.
Since React itself is also relatively small, I don’t see that bundle size would be concern for either. The bundle sizes of course depend on what all you include and thus the comparison in actual size does not make that much sense.
Thick and thin React
Q7: Which technology has a simpler state management implementation?
Henri: As React is just a view library, it only concerns itself with component-level state. Application-level state can be managed in a number of ways at other layers of your application architecture. At the time of writing, the most popular state management solutions to be used in tandem with React are Redux and MobX.
Generally, the complexity of your state management layer should be no greater than warranted by your application’s requirements. For simple apps React’s component-level state might be enough, which is hard to beat as far as simplicity goes. In the majority of cases, however, you are probably going to need a separate state management library. Of the popular two options in the React ecosystem, MobX is simpler, easier to get started with and less opinionated than Redux. On the other hand, Redux gives you a proven state management architecture that might scale better as the size of your team grows.
In the end, the simplicity of your application’s state management layer comes down to the requirements. The view layer, whether it be React, Angular 2 or something else, should not impose any significant architectural constraints when it comes to application state management.
Roope: Angular provides no limitations on the state management. That said, it provides you with an easy solution for some common, basic needs with services. Besides the services, you can easily add the very same Redux from the React world, or use the more user-friendly @ngrx/store which combines the reactive programming library RxJS along with Redux concepts. This allows you to write more elegant code with the knowledge you might already have from earlier Redux usage.
Q8: Let’s say that you are a newbie programmer. Which technology has an easier learning curve?
Henri: Compared to Angular 2, React has a way smaller API surface and less custom syntax to learn. This, coupled with the fact that A2 developers usually have to invest some extra time to learn TypeScript when they get started with their first Angular project, gives Angular a steeper learning curve as compared to React.
It should be kept in mind, though, that Angular gives developers a lot more out of the box than React does, which makes this comparison a little unfair. When it comes to building a full, nontrivial application with either technology, Angular might be easier to pick up for a total newbie as compared to setting up a similar React-based stack and deciding between the various alternatives for routing, state management and backend integration.
Roope: Angular is often mistakenly taken as hard to learn. After giving dozen of trainings on Angular & TypeScript I can assure you that it is not the case. Angular is divided into modules elegantly and the core itself does not have a lot to learn. The components are easy to understand and templates only have 5 well-declared additions to plain HTML.
As compared to React, where you usually first need to adapt the JSX language the templates are just simpler to understand and require no special knowledge about Angular to be understood by anyone with prior knowledge of building modern web applications. Also the same syntax can be more or less found from Vue.js, though the syntax there is a little more hazard.
Also, since TypeScript is very friendly in that it does not enforce you to type everything from the beginning, you can get up and running with Angular straight away without getting to know TypeScript. You just get all the benefits, including code completion for all library code and static error messages for all of your templates and other code.
The last point, but certainly not the least, on this topic is that starting to build an actual React application (not some pet project) requires you to choose dozens of libraries to support you. You need to, for example, choose libraries for the following concerns: routing, state management, testing, test runner, bundling & minification, http requests, form handling, server-side rendering, typing. Angular has a great solution for all of these already available, but as you can read in my earlier blog post, titled Angular is not a massive monolith – but your mom is, this does not mean you couldn’t use any solution you see suitable, but instead you can modify the Angular anyway you see suited.
Is Angular mobile?
Q9: The whole world is going mobile. How will React/Angular 2 respond to market demand?
Henri: The traditional React way to go mobile is building a platform-specific UI layer for Android/iOS with React Native while reusing the code at upper architectural layers across the target platforms. This, in my opinion, is a very sensible way to go about code reuse across different platforms as it allows you to craft a quality UI for each platform using the platform’s native UI components while still being able to reuse the parts of your code that back the UI.
Another, more bleeding-edge approach to going mobile is building a progressive web app, something that Google has been actively promoting for the past year or so. While some browser vendors have been holding back in implementing PWA essentials like the Service Worker, it still looks that, in the medium term, PWAs will become an attractive alternative to traditional mobile apps. Obviously, you could build a PWA using any view library, such as React, as the Service Worker sits way above the UI layer.
Roope: On mobile world, there are three suitable options available. The first and most important one is the Apache Cordova approach where your web application is packaged as a mobile application running on top of the native WebView available on a device. Apps will also have access to all native APIs such as Bluetooth and camera via plugins available. This allows you to write your code with familiar technologies and develop in faster iterations on the browser as well. With the performance of mobile devices these days, Cordova is really the best solution assuming that you aren’t making a game with extremely high-performance requirements. To support this with Angular there is a framework called Ionic 2 which provides a set of ready-made Angular components that work on supported platforms (iOS, Android and Windows Phone) as they would be totally native.
If you are fanboy of React Native, you might be happy to hear that as a second option Angular also supports usage of React Native with Angular React Native Renderer. This way you can utilize the ready-made UI components of native mobile platforms. Development with these is a little bit of a hassle, but can be managed and you can rely on all of your UI elements to behave exactly as native components (since they are). There is also another framework called NativeScript which plays even better together with Angular. These frameworks are also a viable option for mobile app development, especially if you don’t have tight schedules or budgets.
The third option is progressive web applications. These are built on top of web app manifests and service workers, which both still lack the support of some major browsers (Apple’s Safari & mobile devices and Edge). They provide an interesting middle-ground between native applications and websites by providing features such as offline usage, native API access and desktop installable icons. Luckily Angular provides out-of-the-box support for these too via a project called Angular Mobile Toolkit.
As Google has emphasized many times during the release of Angular, it is more of a platform than just a framework. These are all examples of this approach. Angular provides seamless support for all of your needs whether they are for mobile, web or desktop applications. This is one the greatest points of Angular ecosystem.
Q10: The ecosystem around either technology is an important consideration. Which one has the upper hand here?
Henri: Both Angular and React have strong and healthy ecosystems and I don’t see them dying down anytime soon. React, having been around longer than A2, has a head start here, meaning that there are probably more alternatives for React-based apps than there are for A2 apps. Angular users, on the other hand, can also use some of the existing libraries available for A1, provided they have been updated to support Angular 2 as well.
Roope: It is true that React ecosystem has been around a lot longer and has more possibilities available. Still the amount of libraries for Angular is just huge and I’ve never had a situation where I would need a library for certain thing and it would not be available. One important thing here is also that since Angular does not restrict you that much, you can re-use many of the libraries originally made for React world.
Choose a life. Choose a job. Choose React. Choose Angular 2. Choose a life.
Q11: What if I need to get shit done in very little time — like one month? Should I choose Angular 2 or React?
Henri: That would depend on the composition of your development team. If you have a bunch of seasoned Angular veterans with very little exposure to React it would be a no-brainer to go with Angular. Then again, if your team has very little experience building web apps with either technology (or has lots of experience in both A2 and React) the decision comes down to whether you need to use any 3rd-party libraries, and if so, which one has better alternatives to meet your requirements. Other things being equal, it’s a matter of personal preference.
Roope: It of course depends on your specific needs. For quick and simple projects I could go with Vue since it already has all the core pieces available and otherwise is as lightweight as React. Vue also has the Vue CLI to generate everything necessary for you.
If you instead are going to build a more sophisticated application, I would definitely choose Angular. The main reasons for this are the ease of getting started with enterprise grade application architecture that includes, for example, routing and form handling, extensive library support and seamless entree for new developers to the application since the core concepts are always the same. Also, performance will still be top notch and Google’s backing of Angular is an important consideration.
Q12: What if I have an application that will require dozens of developers and years of active development? Should I go with Angular 2 or React?
Henri: What matters more here is consistency in architecture, design and coding practices and how well you’re able to enforce them through your project’s toolchain — it’s not so much a question of which ecosystem to bet on since both are well-established and will probably be around for quite some time.
The one advantage, however, that Angular-based projects might have here is that they’re usually written in TypeScript, which really comes into its own in collaboration-intensive projects when compared to plain JS. Then again, you could just as well add TypeScript or Flow to a React-based project, so in the end it essentially comes down to having a well-thought-out toolchain in place to support your development workflow.
Roope: This one is a no-brainer. Angular is the obvious choice. Why? For really many reasons. This is where Angular really shines. Besides it being easy to get up and running with Angular, it also has a solid architecture for larger applications built-in. This, along with the extensive style guide enforced by the Codelyzer TSLint plugin, provides a solid structure to build on top of. It also makes it sure that any developer who knows the basics of Angular can just jump into the project and be productive immediately.
One important consideration here is also the usage of TypeScript. As you probably know TypeScript provides a flexible static typing system on top of JavaScript. It allows IDEs to provide better auto-completion, analysis and other useful stuff along with support for more sophisticated refactorings to be performed. Even though debatable, I’m a big believer in the benefits of static typing for program correctness and have been able to see the gains in action on a project where we have been building large-scale Angular application for over a year with a dozen developers.
One last thing is the fact that Google backs it up and also depends heavily on it in its own huge applications. Thus the support will be around for quite some time. Also, the roadmap for future releases is quite ambitious. This, compared with Facebook’s backing of React, feels a lot safer. Facebook can’t grow forever and as we all know, the market for social media is constantly changing. If something would happen, supporting the React ecosystem most probably wouldn’t be the top priority for Facebook.
Last words
Clearly, Angular 2 and React are the two sides of the Moon. This blog post shows only a fraction of these two awesome frameworks. And as always, the ruthless but fair developer community will have the final call.
For a wannabe coder like me, this journey has been remarkable. But real heroes are Roope and Henri. It’s amazing to see your passion and knowledge of real software development craftsmanship. You are today’s wrestling stars!
Author: Juhana Huotarinen
Experts: Henri Heiskanen & Roope Hakulinen
Graphic design by Ville Takala
