Angular Remote Meetup | July 2021

How to avoid memory leaks, Integrating Tailwind CSS and HOC, custom directives and more

Author

Siri KaliparambilTechnical Content Writer

Date

Aug 9, 2021

Book a call

The third Angular meetup which was organised by GeekyAnts was a flurry of events on an exciting and intuitive Saturday. The two hour session was an amalgamation of discussions which promises to provide viewers with an insight about the technology in a fruitful, learning environment. This engaging session revolved around topics such as how to avoid memory leaks in Angular, Integrating tailwind CSS and HOC in projects, custom directives in Angular and how stably migrate projects and lastly an exploration of light-weight JavaScript for 1+8+N connected IoT for application development. The discussion started with an introduction to the agenda by the keynote speaker- Manav Goel, who also gave a short recap of the previous Angular meetup which consisted of presentations about micro frontends, Angular elements, Angular liabilities and sneak peek into Angular Ivy.

The following is an overview of all the events that transpired during the remote Angular meetup that was recently organised:

How to avoid memory leaks in Angular: Vishvanath Shankar

The first discussion on the agenda was on how to avoid memory leaks in Angular and it was given by Vishvanath Shankar, a cloud solution architect who specialises in cloud native technologies. The talk covered the basics of memory loss and the importance of memory management when working on a project based on Angular. He also extensively discussed the negatives of not implementing memory management solutions which could potentially lead to unwanted situations such as causing the app to slow down and stop automatically rendering. To elaborate on this discussion, Vishvanath also conducted an experiment wherein he tested use cases in which AngularJS would cause a memory leak by inducing various components under different scenarios to see the result. The findings of this experiment concluded that Angular has a sturdy garbage collector which uses a market sweet algorithm which could efficiently eradicate memory leaks in most real-life scenarios. However, a dummy observable could be introduced in case the Javascript fails to detect memory leak which will serve the function of invoking an event to subscribe to services which will automate memory management.

Integrating Tailwind CSS and HOC in Angular: Abhinab Das

The next talk by an in-house software engineer from GeekyAnts-Abhinab Das, dealt with the topic of integrating Tailwind CSS and HOC in Angular projects. In his extensive expertise with creating payment systems, he realised that certain components needed to be modified by adding HOC on Angular due to certain issues that were arising due to high scaling mechanisms. The discussion started with an introduction to HOCs while also exploring the various benefits that come with the recent update on Angular Ivy. Abhinab’s rationale behind exploring this concept comes from the idea that most features can be eradicated during the development stage as most components are not used by consumers which makes creating them rather redundant. He explained this concept via a demonstration which was made possible due to Angular’s compilation properties which offer for compiling at the same locality without dependencies and the the ability to delete anything that is not required. Ivy has eradicated CSS issues by providing a predictable way of merging which was witnessed in the experiment with a presentation where the slide show is lazily loaded with the smaller components being rendered when the left button is clicked. The talk concluded with the consensus that integrating Tailwind CSS and HOCs in Angular projects results in customisable UI applications wherein the unnecessary components have been purged as well as quality performant code.

Do more with custom directives in Angular: Adithya Sreyaj

Aditya Sreyaj, a senior frontend engineer at Hypersonics, was the next speaker on the list with a talk about doing more with custom directives in Angular. He started the discussion by explaining directives which are classes that add additional behavior on Angular projects to modify it while also touching up on the various types of directives which include components, attribute and structural directives. Next, he argued the importance of using custom directives by talking about the various possibilities and benefits that custom directives offer which include testable code, easy maintenance, and the provision of input validations. Post this, a demonstration was conducted to show the functionalities of directives with multiple use cases wherein there is a directive and component and the objective is to move the complete sorting logic outside to gain access to the parent through the child directive; he three directives that were used as examples in the session were the table sort directive, fullscreen directive and the badge directive.

Light-weight JavaScript for 1+8+N Connected IoT Application Development: Valluri Kumar

The last discussion for the day was by Valluri Kumar, the chief architect at Huawei India who has more than twenty years of experience in the field. The discussion revolved around amalgamating Huawei’s 1+8+N strategy, which states that mobile phones are connected with eight other devices due to their vase capabilities, along with an IoT system to increase efficiency. Valluri also discussed the increasing importance of the smartphone in the digital era, whether it is for entertainment, professional, education or other purposes, which has caused Huawei to introduce this new technology based on Harmony OS as they saw the futuristic capabilities of such a system. He then spoke about the importance of building reusable components in app development as it is both cost and time effective while also introducing the concept of ALEG, which was Huawei's solution of bringing all reusable components under one platform.

The informative meetup covered many of the interesting happenings and innovations within the Angular community. The session was brought to an end with a Q&A session wherein the panelists answered questions from the audience.

You can watch the entire session below: