Who needs Angular? What it, what it does, and what can it do for you?
by Ruslan Botnar
The development of Angular JS applications is a promising area and continues to gain popularity, so choosing it as the next milestone in development is a good decision. An angular developer is a sought-after profession as more and more companies want to use this technology. The framework is backed by Google and is used in google mail and YouTube apps. Such companies have already chosen it like Lego, PayPal, Upwork. A lively community helps in its development because it provides:
- Custom solutions that you can integrate into your project;
- The opportunity to look at other people's work and evaluate what can be done with angular;
- Assistance in solving complex issues (significant for angular, since many complex branched projects are built on it);
- An abundance of teaching materials in different forms - texts, videos. With them, the development of web applications becomes a completely understandable process.
Why do you need a framework?
If you don't know, JS (or client-side) framework is a technology that provides us with the tools to create a web application and dictates the design of the application and the organization of the code. Most frameworks are overconfident these days. They have their philosophy of how a web application should be built. You will have to take the time to learn the basic concepts. Other Backbone solutions don't tell developers how to do a project. Therefore, some even call such technologies simply libraries, not frameworks.
JS frameworks are not that old. We remember when sites were written with poorly structured JS code (primarily jQuery-driven). However, client-side UIs became more complex, and JS lost its reputation as a "toy" language. Modern sites rely heavily on JS, so the need for the proper organization (and testing!) Of the code has increased. Therefore, client-side frameworks have become popular, and at the moment, there are at least a dozen of them. AngularJS used to be a favorite among JS frameworks since it was introduced by google corporation in 2012. It was built on the concept of the Model-View-Controller. The authors of the framework called the idea "Model-View- *" or even "Model-View-Whatever."
A pure JS framework was supposed to decouple application logic and DOM manipulation. Its purpose was to update dynamic pages. But it was not so intrusive: only part of the page could be under the control of AngularJS. This framework introduced many powerful features to enable developers to create rich, single-page applications easily. In particular, an exciting concept of data binding was introduced. The view is automatically refreshed whenever the model changes and vice versa. On top of that, they introduced the idea of directives that allow you to create your HTML tags and animate them through JS.
AngularJS will process this custom tag and turn it into a full-fledged calendar, as stated in the source code. (Of course, your job will be to program the appropriate directive.) An essential concept of dependency injection was also introduced, which allows you to bundle application components, making code easier to reuse and test. We won't go deep in this article, but there is a lot more to AngularJS.
AngularJS became popular very quickly and received much support. However, the developers decided to go even further. They moved on to creating a new version of Angular 2 (later, just Angular without the JS part). The framework received a new name because it was completely rewritten and redesigned, and many concepts were revised. The first stable release of Angular 2 was published in 2016. AngularJS began to lose popularity in favor of the new version. One of the main features of Angular 2 is the ability to develop for multiple platforms: web, mobile, and native desktop (AngularJS did not have mobile support by default).
To make things even more complicated, Angular 4 was released at the end of 2016. "Where is version 3?" You ask. We had the same question. As it turns out, version 3 was never published at all! But how is that? In the official blog, the developers explained that they switched to semantic versioning with Angular 2. Following this principle, changing the main version (for example, 2.x.x becomes 3.x.x) means a turning point. The problem is that the Angular Router component was already in version 3. To fix this inconsistency, it was decided to skip Angular 3. Fortunately, the transition from Angular 2 to 4 was more straightforward than from AngularJS to Angular 2. However, the developers were still confused.
By now, there’s a fantastic Angular released in 2018. We have to dive into the differences between Angular 7 and earlier versions, some great features to improve performance and see why it attracts developers so much. At the very least, Angular 7 now uses Typescript 3.1, RxJS has been updated to version 6.3 and supports Node 10.
CLI: The newly updated CLI will allow you to make your ng-app installation even more accurate than before. For a pleasant conversation through the command line when using the ng new or ng add command, you can add routing, choose the option of writing styles between CSS, SCSS, LESS, etc., all with prompts. There are some tools to improve Accessibility:
Bidirectionality - When BidiModule is enabled, components can enter Directionality to get the current text direction (RTL or LTR);
The layout package provides utilities for creating responsive user interfaces that respond to screen size changes.
The overlay package allows you to open floating panels on the screen. If you are not using Angular Material, you need to connect it manually.
ScrollingModule: As many mobile frameworks began to move towards dynamically loading data such as images or long lists, Angular followed suit by adding a ScrollingModule to allow virtual scrolling. As elements appear or hide, they are loaded and unloaded from the DOM, which has significantly improved performance. The next time you have a potentially extensive list of scroll items, insert it into the CDK virtual scroll-viewport component. Virtual scrolling implementation is now available in yarn to add.
DragDropModule: The DragDropModule implementation is now available with @ angular / CDK / drag-drop. With this module, you can implement drag and drop support, including reordering lists and moving items between lists. The CDK includes automatic rendering, drag & drop handlers, animation, touch support, and even the ability to move data between lists. Start by importing the DragDropModule into the NgModule. You want to use the drag and drop functionality in the file. Now you can add the CDK drag directive to the elements to make them draggable.
Application performance: Angular 7 is faster than any of the previous versions. The framework is tighter because of many things - the added ScrollingModule, faster rebuilds, the use of Budget Bundles that notify you when your application reaches size limits. By default, you get warnings when you go 2MB and errors when you reach 5MB, but if you need a little more space, just add some configs to the JSON file.
The new generation of rendering is still under development. It is actively improving, but it is still not included in the standard specification at the time of the release of Angular 7. It is expected closer to version 8 of Angular. At the moment, Ivy Renderer is still available in an experimental format. It can be enabled by adding the following lines to the tsconfig.json file.
Slots with Angular Elements: It is now possible to use ViewEncapsulation.ShadowDom with Angular 6.1, which is excellent for Angular Elements but was previously missing the ability to use <slot>, a new standard HTML element introduced by the Web Component specification. This has now been fixed, and <slot> is available.
Angular benefits: So why Angular?
Because it is supported across platforms (web, mobile, native desktop). It is powerful, modern, it has a great ecosystem, and it is just fantastic. Not convinced? Let's go a little deeper into the details:
- Angular introduces not only tools but design patterns for building a maintainable project. With the proper Angular application, you will not be confused about classes and methods that are difficult to edit and even harder to test. The code is conveniently structured, so you can quickly understand what's what.
- It's JS, but better. Angular is built on typescript, which in turn, relies on ES6. You don't have to learn an entirely new language. You get features like static typing, interfaces, classes, namespaces, decorators, etc.
- There is no need to reinvent the wheel. Angular already has many tools for building an application. Thanks to directives, HTML elements can behave dynamically. You can enhance forms with form control and provide different validation rules. It is easy to send asynchronous HTTP requests of various types. You can easily configure routing. There are many more features in Angular!
- The components are disconnected. Angular has tried to remove the complex coupling between the various parts of the application. An injection is similar to nodejs, making it easy to replace components.
- All DOM manipulations go where they should. In Angular, the view and application logic are unrelated, which intensely cleanses and simplifies the markup.
- Testing in the spotlight. Angular is thoroughly tested and supports unit tests and end-to-end testing with tools like Jasmine and Protractor.
- Angular is mobile and desktop-ready - one framework for multiple platforms.
- Angular is actively maintained and has a large community and ecosystem. You can find many materials and valuable third-party tools around the framework.
We can say that Angular is not just a framework but a platform that allows developers to build applications for the web, mobile devices, and desktops. You can learn more about architecture in this tutorial.
Unfortunately, Angular is a rather large and complex framework with its philosophy. It will be difficult for beginners to understand and get used to. Learning framework concepts isn't the only challenge. There are many different technologies you need to know:
- It is recommended that you write Angular apps in TypeScript, so you need to understand them. It is possible to write code in modern JS (ES6).
- TypeScript is a JS add-on. Therefore, you also need to know it.
- To speed up the development process even further, you need to understand Angular CLI.
- Npm is actively used to install Angular and other components. You also need to know him.
- The ability to customize task runners like Gulp or Grunt can also come in handy. There is a lot you can do with them before deploying your application to production.
- Minifiers like UglifyJS and packers like Webpack are now widely used.
- During application development, it is essential to be able to debug the code. You need to be familiar with debugging tools like Augury.
- It is imperative to test Angular applications, which can get very complex. One of the most popular testing tools is Jasmine (a testing framework) and Protractor (used for end-to-end testing).
As you can see, there is a lot to learn to start building client-side web applications. But don't give up: the web is full of resources to know all of these tools and techniques. Of course, it will take some time to learn. Still, you will gain valuable experience and be able to create complex applications with ease. Note that sometimes it will be overkill to use Angular for an application. If the project is small or medium without complex UI and interaction, it may be better to use good old JS. Therefore, it is vital to evaluate all requirements, features of the new application, and deadlines before deciding to use a JS framework.
What is Angular suitable for, and where is it used?
Angular is more suitable for large projects with a rigid structure. It has a lot of ready-made solutions, a more thought-out system for collecting and storing information. This simplifies the construction of large websites and ensures that they function reliably.
Angular can be used for both hybrid and SPA applications. The latter are one-page sites created so that by going to the pseudo-page, the user does not download new information. Only dynamic data is updated. It turns out that loading is needed only once, regardless of which pseudo-page the user got to first. Each new page is pulled up separately on standard sites - people with poor-quality Internet connections have to wait, watching a blank screen, skeletons, or a preloader.
A new generation of SPA applications, PWAs, are being created to make the site work offline. Angular is used to make them available for download (even to a smartphone.) Bear in mind that such a product will not be able to load dynamic data. The user will be free to work with the content already present on the device. But SPA and PWA are not all that can be done in Angular.
As we wrote above, in the opinion of many web developers, it is better to do start-up projects in React since it allows you to come to pay-back quickly. In the case of angular, we are talking more about the sites of large organizations and banks. In conclusion, we note that with all the advantages of Angular, it is not a universal solution for absolutely any task, and this is normal. Any technology is suitable for solving specific issues.
For several other tasks, it would be more appropriate to use different approaches. It is easy to write an Angular project. More difficult is to understand whether this solution is optimal or worth using. To create a website on one of the frameworks is not a guarantee of success. It is necessary to keep in sight the project's goals, the needs of its target audience and talk over all the details with the customer. It is essential to understand what Angular is for and not mindlessly use it in any situation.