Some reasons why I think you should consider using Angular in your next project

Hola a todos 😉

Today I really want to talk about a topic I am really enthuasiastic about – and this topic is Angular. Since released in September 2016 many applications started to use this framework. And today I would like to talk about my experiences using the framework in the past years. So maybe you are asking now, why the hell should I read another blog post about that framework? Maybe I can give you a reason. When I came to my current company 3 years ago we started a new project. I have used Angular.js in my recent projects and also I have used React. So first we were sure that using Angular.js is a good idea, why not, it is easy to use (remember the good old days when nothing more was neccessary than including a script and you have a whole framework with you) and there was a hell of a big community out there. But at this time there was already lot of discussions out there in the internet that the new Angular, Angular 2 has many advantages. And that was why I started googling it. Very fast I could find out how this framework works because there are so many explanations out there and Google is also doing a fantastic job from documentations perspective. That was why we started using it and since this time we actually never had any problems with that framewok.

• 

As already described in my introduction, the biggest advantage of using Angular is that it has a big community out there and there are so many ways of learning the framework and getting support using it. Google is doing a fantastic job with their tour of heroes ( https://angular.io/tutorial ) which is explaining the important aspects of Angular very fast. On Stackoverflow there are over 200.000 questions meaning that there is a very active community. And in my mind having many ways of getting information about a framework is one of the most important aspects in modern software development. Nothing is worse than googling an error you have for hours and hours and not finding a solution.

The next good aspect is something that many people don’t like about Angular. It is the strictness of the framework. I know, we all are Software developers and we don’t like too many rules. Especially as web developers we really like the web as it is. We produce code and the browsers are doing the best to correctly run it. That is beatiful. But as projects are growing it is good to have rules – or at least to have some rules. Different software developers are creating code differently. They may use different libraries, they may use different ways of solving problems. Sometimes that is good because it is a way of getting new ideas. But sometimes it is just a big hell of a mess. Hands in the air if you have had any bad experience debugging good old spaghetti style code that was produced by somebody. Angular has solved this issue by providing many features that are normally solved by different libraries. For instance it is including its own HTTP client, it is having a routing functionality and it has all packaging tools included by default. Also it is using typescript which is very recommendable to not run into typical javascript errors produced by somebody that don’t have a clue about that language.

Packaging is something that we as software developers really don’t like to think about. The code should run and the web application should be as small as possible, that is the most important goal. Thank god, today this is something we don’t need to think about since there are tools providing that functionality. Angular is providing those tools and you can run them just by using the angular cli. By the last update of Angular 9 the team also solved a problem that many developers had – that the production bundle is way too big. And also Angular is providing tools to deploy the application directly, so no more worries about copying something to a web server or creating a script that is doing that for you. Check out https://angular.io/guide/deployment for more information.

Ok now some good points but what are the disadvantages? Of course there are also some. As Angular is a framework that can only be used as a whole or not you have to consider that it is developed by Google and if you are using it you are dependent on Google and their developers. I am not one of this guys with their tiny foil hat that are warning you about that company since I think they are providing fantastic features but you have to think about that before using it. If Google wants you to pay for the framework at some time you have to pay them because you are depending on that framework. But isn’t that the same with every framework? No matter if you are using React, Vue.js or some other framework. Either you have to use some library that somebody created or you have to use good old fashioned javascript and DOM functionality and do everything by yourself. But than you will need more time creating things that somebody has already created to get something that somebody else has finished two months ago.

• 

Managing CSS is a problem for many software developers. Creating some nice UI can be pretty different. Today creating a web app is not only focused on providing good functionality but it also needs to focus on good design and usability. So what we are normally are doing is searching for a nice CSS framework and then we are hoping that we don’t have to change too many parts of it. As Angular is a framework with many restrictions searching for UI libraries was used to be difficult, especially in the beginning time of the framework. But that is not the case now. Many UI libraries are providing Angular components out of the box, so you can choose whatever framework you like. If you want to use the styles that are used in every Android phone use Material ( https://material.angular.io/ ). If you more a bootstrap guy you can use ng-bootstrap ( https://ng-bootstrap.github.io/#/home ). PrimeNg also provides nice UIs ( https://primefaces.org/primeng/#/ ).

• 

Now since you still reading I finally can start with the boring part – which is unit testing… 😉 Angular provides everything by its cli to use jasmine testing framework. For those who don’t know it, it is a framework that is nothing more than a whole framework for testing using nothing more than javascript. The Angular cli is creating by default a test by each component or service, so everytime you create a new part of your application also a new test is created. Writing jasmine unit tests is very easy, actually it is so easy that I prefer using unit testing to start an onboarding process with a new employee since you can write tests without understanding a big application. And if you are using WebStorm or vscode you can start the tests without knowing all the cli commandos. I think that is something that is really great because so many times it is a valid excuse for developers that creating tests is so time consuming and so there is no time for it. But creating unit tests provides security for changes in our application as they are telling you if the behaviour is still valid or not. And if a framework is providing you such features by default it is definetivly worth giving it a chance.

• 

I already talked about growing projects that are getting bigger and bigger. At some point it makes sence to create some small libraries that provide functionality with a specified interface. You could create a libarary that provides some base components so that nobody in your company needs to worry about these, you may also want to create a library with all the functionality to create REST calls. Angular is giving you all the tooling you need to do that. Libaries are small projects in a project that are created with the cli. A library can be handled like a normal Angular project. You can write components in it, you can test your components in it and when you are finished you can simply deploy that library and include it. See https://angular.io/guide/creating-libraries how to create libraries in your Angular project.

Google describes its framework as “One framework.
Mobile & desktop”. So one code base for all platforms, sounds like a dream doesn’t it? And so it is, but not by default. What is is meant by one framework is that every platform is able to open web applications. And as we still want to have mobile applications as applications that are available in our app stores this is not enought. I know, somebody out there is right now screaming around because of that point. There are ways to create APKs with Angular code. And yes, calm down, I come to that in a second. But first I would like to start with PWAs. PWA is a technology that provides your web application with functionality that is normally only useable by native applications – so very short, it is awesome. For instance your web application can be used offline or you can use the mobile camera with the app. Maybe you now think, holy shit, that means I have to think about many things like storing all the application data somewhere to be offline available. And also I will not be able to use the dino game of Google Chrome, which is the best inventation that has ever been made by humanity (isn’t that the case?). But here is the good news, not many applications are using PWA technology (which is actually not a good news) and if you want to use PWA it is very easy. Angular CLI provides you commandos to use different functionality. You just need to use the command ng add @angular/pwa and you are able to start. Check out that post to get more information ( https://angular.io/guide/service-worker-getting-started ).

But now, finally, how can we create installable mobile applications with Angular. And here is the good news, there are many ways. One option is to use Ionic ( https://ionicframework.com/docs/). In ionic you build web apps that are then bundled into an installable native app that includes a browser that then is able to display the app. A big advantage of using such a technology that the same code base is usable by a desktop application too (which may be a web app or a desktop app with Electron).

As you see, Angular is a framework that has many advantages. Of course, not everything is good but in my mind it is a framework you should think about when you are in the position of choosing a technology for a new project. What are your experiences with Angular? Do you think that it is a pretty cool framework or do you think that it is too complicated?