Developers View On Angular Workflow
Whats your #1 question about Angular
In the one corner with Angular
The Evolution of Angular
Written by Merixstudio, a top-rated development shop.
Created in 2010, Angular has become one of the most successful tools of the modern front-end development. The rapid growth of the Angular community is followed by the fast development of the framework itself. Nowadays we can observe constantly growing demand for experienced front-end developers with battle-tested commercial experience. I’ve asked my teammate, Mateusz Anioła about the workflow of Angular projects conducted by his team.
Mateusz, what’s your experience regarding Angular?
“I’ve started working with Angular when the version 1.x released and instantly fell in love with SPA frameworks. Previously if you ever wanted to load some data asynchronously without the need to reload a web page you had to use jQuery, or any other popular library, to make an AJAX call and then somehow turn the response into HTML and inject it into the DOM. It was clunky and not reliable. Angular allowed me to prototype projects very quickly as well as provide a proof of concept that later could be developed into a fully operational product.
Of course, Angular 1.x had its drawbacks. It was tough to optimize processes properly and to avoid producing spaghetti code at the same time. Before the next major version of Angular (2.0) came out I also had had the opportunity to learn React and had seen how component-based structure can be more readable and cleaner. While using Angular 2.0 beta, I was happy that it was similarly structured and that inputs and outputs work almost the same as React props. Making a usage of Angular through beta, RC, and now working on the newest 4.x version, I must say that the entry-level knowledge is higher than it was with Angular 1.x but really worth to learn”.
Please explain the approach for launching Angular projects.
At our software development company, we usually go with a tool called Angular CLI. It generates the project structure for you and comes up with all other necessary tools (TypeScript, Webpack, Sass, etc.). It also has a ready-to-use unit testing environment based on Karma/Jasmine as well as e2e testing based on Protractor. To ensure unity in the syntax itself, we follow our TSLint rules very strictly. To maintain clear code among the stylesheets, we follow the BEM methodology when naming CSS classes.
Tell me a few words about the beginnings of using Angular in your team.
We’ve started working with Angular from its early beta version, and one of the things we found very tricky to design correctly was the data flow. RxJs (and reactive programming in general) can be very difficult to understand and work with. On the other hand, while working with React, we used (and we still do) Redux to manage the app data, and we were very satisfied with it. The idea behind Redux is very simple, so it’s easier to understand and talk about the app logic.
Could you please elaborate on that? What’s the greatest benefit of using Redux?
There are Redux bindings available for Angular that are called ngrx and this is what we usually use to develop our web applications. There are a few more libraries that we use to ease the development process like reselect or ngrx-store-devtools.
The greatest benefit of using Redux is the simplification of the app management. As I mentioned before, understanding Redux is very easy – there are a lot of articles, videos, and tutorials covering the topic, including a great video series from the creator of Redux himself, Dan Abramov (https://egghead.io/courses/getting-started-with-redux).
In my experience, projects written with Redux are easier to maintain and have a lower entry level, especially for developers that already had some contact with the library, regarding the framework itself.
What’s your favorite feature when it comes to Angular?
It’s really hard to pick only one feature, but if I had to choose, that would be lazy loading. I was shocked how easy it was to lazy load modules with Angular – instead of importing the module itself you just have to define its path as a string within your app routing module. It is a great feature primarily when you’re working on more expanded, commercial web applications. Honorable mentions also go to form builder and built-in HTTP service.
What is the biggest challenge you had to deal with while developing Angular projects?
The most challenging thing is to develop a digital project that is maintainable and scalable. I guess that’s the goal of all projects regardless of the tech stack. One of our team main goals is to divide the functionalities into components that are meaningful, respect a single responsibility principle, and are reusable. Angular gives you great tools to do so but the challenge is to use them appropriately.
Libraries and ideas that I described here impact the whole app, so the decision to use them should be made before kickstarting the project. You can add them later, but it doesn’t come without a cost. It can lead to the need to redesign the existing workflow to suit Redux. If you’re not familiar with Redux and aren’t sure if its a good fit for your tech stack, try to give it a chance and develop a small prototype at first. I’m sure you’ll fall in love with it as much as I did.
Mateusz ANIOŁA was interviewed by Michał LISEWSKI