Angular vs React vs Vue.js Part I: The Case For Angular

Angular vs React vs Vue.js Part I: The Case For Angular

K&C Frontend Superstar Alex Chugaev Explains Why He Would Always Opt For Angular Ahead Of React Or Vue.js For Enterprise-Level Applications

Angular vs. React vs. Vue.js as the choice of front-end JavaScript framework is a question project sponsors and their development teams ask themselves at the planning stage of most new user-facing software products. The three big beasts of the front-end ‘JavaScript Zoo’ are each, in their own right, popular and highly effective frameworks.

Angular, React and Vue.js each have their strengths and weaknesses between different use cases. But is there an argument one of the big three is the best ‘all-rounder’ as a JS framework?

In this article, the first of a trilogy where each instalment will argue the case in favour of one of Angular, React and Vue.js, the focus falls on Angular.

If you currently face a decision on the right framework for a particular development project, or the longer-term strategic decision for your organisation to work with a core framework, this series will help you contextualise the comparative strengths of Angular, React and Vue.JS.

This first instalment offers a detailed overview of the strengths and limitations of Angular as a JavaScript framework and why it comes into its own in the context of enterprise-level applications.

When and Why Angular Should Be Your Choice Of JavaScript Framework

In the corner for Angular is K&C frontend maestro Alex Chugaev. Alex has been working with Angular and Angular.js for over 5 years now and also has 3+ years of experience with TypeScript, plus a strong working knowledge of NestJS.

He tackles the question of when and why it makes sense to opt for Angular ahead of React and Vue.js as the optimal choice of JS framework, by explaining the pros and cons of Angular in a variety of use-cases. Over to Alex:

The Questions To Ask When Assessing Any JavaScript Framework And Their Answers In The Context Of Angular

When a project sponsor or DevOps team leads are approaching the decision of which JavaScript framework to opt for, there are a handful of questions that should always be asked:

    1. Who’s behind the technology? (I want to be sure this framework is and will be sustainably maintained by a first-class software development specialists).

    Angular is maintained by Google, and the tech giant is committed to popularising the framework as a leading web development technology.

    1. Is it reliable / stable / proven in real projects / success stories? (I want to be sure this framework has been successfully used by other organisations for projects with similar complexity to ours).

    Yes, Angular has been a market leading JS framework since the release of the original AngularJS back in autumn 2010. Over the 10 years since, a huge number of organisations have successfully built their software products with Angular. Some of the leading examples of products built on the Angular framework are detailed here – https://www.madewithangular.com/.

    1. Will it have a long-term support? (I want to be sure that framework will be improved over time and we can smoothly go with it).

    Google has ambitious future plans for Angular and is currently doubling down on its support and development efforts for the framework, with predecessor AngularJS being retired in terms of ongoing support from summer 2021.

    1. Is it a popular framework? How many businesses already use it? What does its use trajectory look like? (I want to be sure that we’re at the cutting-edge of technology and will be able to hire experienced developers keen to work with it).

    Angular is, of course, a hugely popular framework with contemporary developers. The fact that it continues to be selected as the framework of choice for some seriously big hitters, gives me the confidence to state that is not going to change at any time in the foreseeable future.

    1. How extensive and active is the community behind the framework? (I want to ensure that there is a rich resource of materials, tutorials, meetings and conferences, and an active community helping each other to solve ongoing problems).

    Angular benefits from a large online community and, as an open-source framework, there is a rich resource of official and community-driven forums for discussions around Angular. The best-known dev community resources such as StackOverflow, GitHub and Gitter chat all have a big Angular presence and are backed up by a strong ecosystem of blogs, social network communities and professional groups where developers share their knowledge and can turn to for help.

    1. How productive are developers using the framework? (I want to ensure the framework supports the rapid development of new features so our time-to-market will be optimal).

    Individual developer and DevOps team velocity depends on many factors, not only the qualities of the framework itself and the technical level of the project team. A well-organised and disciplined team can work quickly and effectively even if it doesn’t benefit from outstanding framework skills.

    On the other hand, a team that enjoys the presence of supremely talented Angular experts can work slowly and produce less value from each sprint if they are poorly organised. But if a project’s planning and delivery management levels are on point, Angular lends itself to a workflow that breaks bigger problems down into the smaller chunks that support a rapid release cycle at least on par with what React or Vue.js allow for.

    1. Is the framework the best choice in the specific context of the project? (I want to be confident it can be used to effectively create our solution).

    To answer this question effectively, we first have to define the use cases Angular is best suited to by looking at:

    • Project type
    • Project complexity
    • Project size
    • Project support period

    Project type

     Angular is a universal framework and can be used to create web, desktop and mobile apps.

    Project complexity

    Angular can be used for the rapid development of projects of any complexity level, as long as the individual use cases are appropriate.

    But I would argue that Angular’s strength is larger scale and complex projects. The framework offers great modular enterprise architecture and the kind of conventions essential to large teams working together efficiently on one large, complex product.

    Project size

    There is still debate around the question “how big should a project be before we choose Angular?”. I personally think the question itself is wrong and the only thing we should really be asking “can we effectively use Angular for this kind of project?”

    Angular’s Strengths

     So where does Angular excel as a JavaScript framework?

    Reusability

    Similar components are self-sufficient and can be re-used by developers across different parts of an application. This is particularly efficient in enterprise-scope applications where different systems converge but can contain many similar elements like search boxes, date pickers, filters, etc.

    Readability

    Components also speed up the onboarding process for new developers, helping them read the code more easily which means they reach peak productivity more quickly.

    Unit-Test Friendly

    The independent, encapsulated (self-sufficient) nature of components simplifies quality assurance procedures conducted through unit tests that assess the performance of the different parts of an application.

    Maintainability

    Components that can be easily decoupled from each other also mean improvements and maintenance is convenient. That’s a real strength for the kind of iterative development workflow large, complex apps rely on.

    TypeScript

    Angular is written in TypeScript – a superset for JavaScript. While fully compiling to JS, TypeScript makes identifying and eliminating common mistakes that occur when actually typing in the code a lot easier. That’s less important for small projects but cleaner code can make a significant difference to the performance of enterprise-scale applications.

    Pure JavaScript can be used instead of TypeScript so it’s not completely necessary for Angular developers to learn the latter but it will enhance their skills in the context of larger, more complex app development thanks to TypeScript’s superior navigation, autocompletion, and refactoring services.

    RxJS

    The RxJS library is used with Angular to manage asynchronous data calls. RxJS means events can be handled independently and in parallel like a factory assembly line where a manufacturing process is broken down into interchangeable stages that are not tied to one another. This means a web page is not left unresponsive while it waits for some event to happen to trigger subsequent events.

    Asynchronous programming did not come into existence with RxJS but the library certainly makes it much easier. A downside to RxJS is that it comes with a steep learning curve but once mastered it makes the job of an Angular developer a lot easier.

    Web Development – Frontend

     Angular’s most common application is in frontend web development. And it’s in its natural habitat that the framework’s strengths are most obvious. I’ve personally used Angular for web development projects of all kinds of scale, from 5-page apps to a huge enterprise portal for an international company (Bosch).

    In combination with the professional organisation of work processes and leveraging a degree of automation (CI/CD) we were able to produce a lot of value in a short space of time.

    Angular’s component-based architecture is a significant improvement on AngularJS. Angular components are sections of the user interface, or functionalities, that exist in a strict hierarchy. The benefits of Angular’s component-based architecture are:

    Interactive Apps

    It should be highlighted that Angular is best suited to interactive applications. It does not make much sense to use if for web development projects such as simple blogs or news and content-centric, where users do little other than consume content.

    While steps such as setting up server-side rendering mean JS websites can now rank in Google without major issues, its dynamic nature means JavaScript is not optimally SEO-friendly. But that goes for JS and JS frameworks in general, rather than Angular specifically.

    For most other kinds of user-facing web development, especially so called “fat/solid client” apps that have a lot of business logic held in the frontend app rather on the server side, Angular is likely to be a strong option you won’t go far wrong with.

    Mobile development

     Angular can be used in conjunction with NativeScript (or similar solutions) to build high-performance mobile apps. This mean an Angular frontend developer’s skills can be applied to the creation of native mobile apps when complimented by a level of platform API.

    For SMEs, this can mean hiring Angular developers makes a lot of sense because the same team can work on both web development projects and mobile apps.

    Desktop Development

    When it comes to desktop development, Angular has stronger competition in the form of .NET Core, WPF etc., which are superior when it comes to building applications that are more efficient in the machine resources they run on.

    Despite some shortcomings in resource efficiency, some desktop applications are built with web technologies like Angular, especially if that resource is already conveniently available to the organisation.

    Angular’s Weaknesses

    I’m an Angular evangelist but, of course, it is only possible to objectively champion the framework’s strengths against the backdrop of its weaknesses. So what are Angular’s issues?

    Complexity

    Frontend developers who prefer React, Vue.js or other JS frameworks to Angular most commonly criticise its relative complexity and verbosity. That’s been a drawback levelled at the framework since AngularJS was first released a decade ago.

    My personal position here is ‘no pain, no gain’, but it is true that Angular is complex. The framework’s component-based architecture is one of its big benefits but the way these hierarchical components are managed could be simpler. It can be necessary to create as many as five files for a single Angular component, inject dependencies and declare component lifecycle interfaces.

    This can mean a lot of time spent on repetitive tasks during Angular development.

    A Steep Learning Curve

    An extension of the previous point on Angular’s complexity, the difficulty levels of the framework do mean that it will usually take more time for JavaScript developers to learn to use the framework compared to getting up to speed in React or Vue.js.

    New Angular developers will need time to get on top of modules, dependency injection, components management, services and templates. And that’s before they get started on mastering RxJS, which, to a basic to intermediate level, is not more or less a necessity to working with Angular.

    While it’s possible to get by on just JavaScript, to really be an effective Angular developer, TypeScript also has to be learned. Doing so, as mentioned when I covered Angular’s strengths, comes with major pluses when it comes to improving the cleanliness and maintainability of code but does, unarguably, add another stage to the steepness of the Angular learning curve.

    Angular’s weaknesses are mainly tied to the process of learning the framework, rather than its technical capabilities as implemented by an already proficient Angular developer. However, for organisations who may not always be in a position to hire or bring in ready-to-go Angular developers, the framework’s learning curve and complexity is definitely a consideration.

    Angular Is My Choice Of Framework For Enterprise-Level Applications

    Personally, I would almost always opt for Angular as a framework for enterprise-level applications whose primary function is not to serve content.

    In long-term projects where investment will be considerable, Angular’s complexity and steep learning curve is compensated for by the more efficient maintenance clean TypeScript code provides for. The stability and ongoing tech support and consistent improvements Google’s support means is also a huge plus in the context of enterprise-level applications.

    React and Vue.js may be easier and cheaper to train and recruit for as well as to deploy in but neither framework is as versatile, maintainable and future-proof as Angular is.

Add comment

E-mail is already registered on the site. Please use the Login form or enter another.

You entered an incorrect username or password

Sorry that something went wrong, repeat again!
Contact us