Agile Way Of Angular

Agile Way Of Angular

The angular transformation, Now a days every customer need their application is to be super fast, more reliable and easy to maintain.When It comes to Web 'Angular is the best choice' in the current ecosystem (yeah React is also trending up very fast, but it takes a bit more for enterprise adoption: aka React lovers 💜

When we started building a enterprise application as a technology point of stand the only aim to meet customer functional and non function requirement. The angular framework and its architecture is completely stand out when its comes to methodology what we are following Waterfall or Agile. Even though we are working in Agile environment where requirements can be changes in next sprint, we completely forgot Agile while writing code. That's is the main agenda of this article.

As team member , we assign a certain at task each day, find the solution for that task and Unit Tested it and that's it. The same way we all do.(most of the time we missed out to keep the scope of changes). Angular is all about components and reusable code(component, services, directives, pipes). My main focus here is on reusable components and trust me some time it become the nightmare to maintain reusable component in Agile environments. yeah ! this is what I was talking about and I always stuck and ending up with creating new component and forgot the reusability of code.

As a lead developer , our job is to first find the reusability scope once the requirement design has been articulated for the scope of the project. What we follow
• Analyze all the requirements thoroughly.
• Extract the resulabe component includes (services, pipes, directives)
• Create the communication map of reusable components that included data and event flow basically across the components.
• Develop them  individually get it Unit tested and bundle them in shared module.
• Use them across the application in different modules at different use case.

The above step is work like a charm and we ended up with a good reusable code architecture for the application , but only If it is a waterfall. So what's about Agile.

All good with Agile, until this situation arise “in sprint 7 something has to changes that has been built in sprint 2’ and its related to some functionality that has been achieved by using a single common component let say R, and that has been used in around the application at many places”.
So the same R component has a good working charm behavior of running Horse in component(A,B,C,D.etc) and working fine. but suddenly . In Component X, we want component R to be used as Monkey that can run and climb the tree easily.

So what's now ? there is few way we can do:

1. Create duplicate component RM, copy all the code form R and write new functional code and use it in the required X component. This usually happens when we have to ship the delivery on Friday EOD and ‘there is dinner date has been booked 💜’. Now X is also happy getting a Monkey and A,B,C etc they are all good anyway , code deliver customer is also happy. The only one guy who is not happy with this approach is ‘Angular Code Reusability’, and Don’t worry This guy never stops your build process either, it even doesn’t exist until you thought of it.
2. The other way is customize behavior of implement the new functionality and configure it with some of the If else statement like when you are running for A,B,C,D etc only run when you are running for X ‘please climb also’. By this approach all good everyone will be happy even that special guy too.

But again one more guy will not be happy that is ‘Agile’. Again in next sprint in Component Y, they wanted Component R to climb the tree with one hand and one leg. Again the same problem and you will have the exact same solution as no 2 this time as well.
At the end you will have a bunch if else statement in Component R. With a small code its good but with the large functional behaviour putted in if else zunky block. Dear friends let me tell you , you are inviting this guy to meet you soon ‘Bug Nightmare’.

The only way to keep away from all of these, along with the reusability , please design your component as behaviour driven. Write configurable object based component as much as possible, even some feature you added later, put it in its configuration and configure all the old component A,B,C etc whoever is using this Reusable Component. With that it's easy to maintain the state, behaviour and all these can be controlled from the source.

That the way I figured it out in couple of month for
‘Agile way of Angular’.

Your suggestion , comments , sarcasm will be
truly appreciated.

Happy coding !!