Podcast Guests –

• Vinayak Joglekar, CTO at Excellarate
• Nikhil Walvekar, Associate Director of Engineering at Excellarate

Podcast Host – Madhura Gaikwad, Excellarate

Brief Summary

Angular Flex-Layout is a stand-alone library developed by the Angular team for designing sophisticated layouts.

In this podcast episode, we talk to Nikhil Walvekar about the advantages, use cases, and differentiators of Angular Flex layout.

Transcript

Madhura Gaikwad (00:09)
Hello everyone. And welcome to yet another episode of zip radio podcast powered by Excellarate. In today’s episode, me and my co-host Vinayak Joglekar are chatting with Nikhil Walvekar, who is the Associate Director of Engineering at Excellarate on Angular Flex Layout. Angular Flex Layout is a popular standalone library for designing sophisticated layouts. So welcome onward Vinayak and Nikhil.

Vinayak Joglekar (00:31)
Thank you Madhura. Thanks for the introduction. And we have been as developers doing layouts for so long, and here’s something that I’m really excited about. So Angular Flex Layout is a new tool and Nikhil is going to talk about that. You know, we have a number of layout libraries, basically at the root of it is a dom manipulation that what happens finally. So, is this different or is it the same?

Nikhil Walvekar (01:02)
It’s still same. So, flex is extension or a specification into CSS. So that’s a new way to lay out the component. If we just talk about the layouts over it, as you were saying about, different libraries or different ways to do it. So back in early days, we used to use the able as a medium to place a layout, everything. So, if we go back like Yahoo mail that had complete table-based design, then we had the different, devices and different resolutions coming into picture. Then the major milestone will be like, we can call it as bootstrap where we had those column-based layouts and everything, and then there was evolution of the mobile and different layouts where we had responsive. So, we have been going through a lot of changes, evolutions on the layouts. So, flex is, uh, what currently, where we are using it, and which is like being used at multiple pluses as well. So, what major factor in the flexes it allows container or the parent to layout or decide how the layout of the child element is that way. So that’s the main though behind.

Vinayak Joglekar (02:14)
If I remember sometime back, just the way you are describing that there is a outer container, which is like a class, and the inner container, which is contained within that is a sub class. It inherits the properties of the parent class in the sub class, right? Yes, yes. So, but that was available before. I mean, if I remember as long, so what’s new about, because I remember that like 20 years back, the Java layout library, it had the same features, right?

Nikhil Walvekar (02:47)
Yes. So, inheritance is there and it’s still as it is, but this is mainly from the lay outing point of view. Like usually what we have is let’s take example of a toolbar, right? So, we have all the buttons which are plus into one after another, and then with a specified gap. Now, if we had to do it in the old kind of way, is we’ll have a table with those many columns and then we’ll do that. Or in case of bootstrap, we’ll all the like columns-based grid system do that in a column now then aligning, adjusting width for everyone, each element as the size changes, media queries and everything. So what flex is giving us is we can define that. Let’s say how those are arranged in the sequence. Then we can have the width, so it can occupy the full available width or how much that can be specified a gap. So, it’s a new way of writing it now earlier, like some places we had to shift using, flows or inline views and everything. So, which was creating like, let’s say issues somewhere. So that flex addresses specifically, right?

Vinayak Joglekar (04:00)
So let me, just replay what you just said, that what I heard was that, you know, initially let’s say if you had a table kind of thing, then you had to actually manage physically the, uh, components that go in respect to columns of the table and actually, you know, size them properly and leave enough space, between them and al=l that you had to do manually. And to some extent, that problem was solved by bootstrap and libraries that came after that, but flex provides additional flexibility on top of that. So let me describe the problem that often we face today where, you know, getting the layout right, is really a challenge is because of the variety of form factors that we have today, you know, it does flex improve the responsiveness in the sense that top showing or hiding some things which are otherwise going to be shown. And you also mentioned media queries and other things. So does it automatically fire media queries in the background.

Nikhil Walvekar (05:08)
Flex box, like layout or the CS S that is independent of media queries. So, we can combine flex box and media queries to make the response to layouts and everything. That’s the so Angular Flex Layout of which is the library for angular, so that provides all this in one library where we can have responsiveness as well as flex layout, which can be used that way. So that’s where that library comes into the picture and help out. So, it becomes declarative. Now, if we just go through the flex layout or flex box layout, so there are a lot of say things into it or terminologist, like there is a main axis, there is a cross axis and then there is a, like a main size and everything. So, it’s basically how the components are placed. That is the main axis. And the other axis is called as cross axis, that way. So those are a lot of different terminologies that we have to use when we are working, with flex, that way. Now that becomes too much for any developer or you are person to remember. So, what this angler flex layout use is a declarative way of using it, make sure that the appropriate styles are applied and then it becomes easy. So that’s where that responsiveness is. Right?

Vinayak Joglekar (06:26)
So appropriate styles are applied, meaning you still have to build a style sheet like CSS for that?

Nikhil Walvekar (06:34)
In this flex, Angular Flex Layout, so all, all those styles are applied inline directly to those dorm elements. So, the library itself doesn’t have its own CSS. So, it’s that way pretty lightweight. And since everything is inline, it’s better, it has more specificity as compared to the themes or in everything. So those are directly.

Vinayak Joglekar (06:55)
So inline meaning in, of having a standalone dot CSS file, it’ll be a part of the Java script?

Nikhil Walvekar (07:03)
No. It’ll be part of the HTML elements only. So, it’ll be using the style attribute of dom elements. And that’s where it’ll be rendered. So, it’ll set the displays as set for the parent, and then set the direction and how the items are placed or aligned. So those are directly set over there.

Vinayak Joglekar (07:22)
Okay. But the library itself, like, you know, do you have that running on the client as such? I mean, the entire thing is happening inside the browser on the client side.

Nikhil Walvekar (07:36)
Yes. Now, with this angular flex layout library perspective, so, it’s a JavaScript library, which provides directives, where which we can use. And then it, those directives appropriately add styles attributes to the dom element, like how we are defining the layout or alignment of the flex items and everything. So that way, so JavaScript library runs within the browser and that’s what is responsible to do it. But this library also has, responsive things added to it. So probably will, once you are done with flex probably will go over there.

Vinayak Joglekar (08:13)
Right? Right. Yeah. So, in my high level, understanding there are libraries which I actually manipulate the way your pages are rendered in real time, based on the interactions which the user has in the browser, to that extent, whatever is the way it works on the client side is defined as there is no further interaction with the server were, there is no additional information coming from the server, which will change the layout, et cetera. So, whatever is there, is there on the client side. And then there are other, behaviour where part of the rendering is determined by what response you get from the server and, you know, for the lack of better. So, it is some call-backs that come, which determine like, you know, the way the layout will be rendered on the client side and the way thing. So, there is some logic that runs on the server.

Vinayak Joglekar (09:16)
So what I understand here is that all the things that are happening in flex are happening on the front end. So, there is no amount of, flexibility that is offered on the backend, depending on what. So, it’s basically the Jason comes, and it is rendered here or the whatever is coming as data that is being rendered here. There is nothing coming from the server in terms of the, you know, the way the rendering will happen, part of it as a CSS or part of it as dom manipulation as a, you know, Java script, if you will.

Nikhil Walvekar (09:55)
Yes, that’s right. So, this, flex layout is, UI specific and rent runs directly on the browser. OK. Mainly responsible for rendering the contents, or how those are placed, that’s what it is responsible for.

Vinayak Joglekar (10:10)
So is it inline style sheet? I mean, instead of having the style sheet as a, a standalone, you are saying that this style sheet gets integrated with the HTML page itself. Right? And you don’t have a separate

Nikhil Walvekar (10:26)
Yes. That’s right. So, whenever that direct run, it goes and updates the host element, or that deal that, okay, these are now, this is how you, you should render your child elements. So those are set as HTML attributes.

Vinayak Joglekar (10:42)
So, there was a level of, abstraction offered by CSS that you could take a CSS file and then apply it to multiple, like, you know, I a particular style for my entire website and I might have 10 or two 20 webpage is for which I apply the same CSS. And I see them following the same look and feel and layout, right? So that abstraction of CSS is what I learned about CSS, because then I could use the same CSS and be, assured that I will have the same look and feel. Now, if you are CSS is not there. And if it is a part of HTML, and how do I get the same look and feel?

Nikhil Walvekar (11:20)
That’s a definitely interesting point over here. So, there are like two things into this, CSS as well. So, one is the layouts and other is how we represent those, maybe it’s colours, fonts, different font traits, font sizes, et cetera. So those are separate. So those, we still get those consistency using themes and others. Now from the flex side, it’s mainly about how those items are placed within the container. Now, those can be, again, like we can have a CSS which defines that, okay, I have a list and then list item as two class, and then in a list, it always has the flex direction as set as like columns. So, we have everything one below another, and whereas there could be something like car kind of thing, where there is one after another, on the horizontal axis, those can be created, and people have been using flex box that way.

Nikhil Walvekar (12:21)
Now this angular flex box, what it gives is it has that type script support. Then it has responsive API where we can use, like, as you were saying about getting that Jason data and doing some manipulations on the UI side. So now some cases you may want to show something on the UI and hide in like, based on some condition. So those for that, we have directives like NGiF and that, but then it can go all beyond that. Okay. So, we, I want to show it on the small screens or large screens that way. So those are some additional features which we get like with the library.

Vinayak Joglekar (12:59)
Right, right. When did it come into existence in some history about it? I mean, why, and when did it come into existence and like angular has a support of Google, is it coming out of Google?

Nikhil Walvekar (13:15)
Yes. So angular, flex layout is part of the angular project itself, though. It’s not like packaged with the angular, but it is still widely being now used at Google as well. And, uh, it is maintained as part of angular project. So that’s advantage that we get, so this angular flex layout is backed by Google or angular team. This started so there with angular JS as well, there was a flex implementation, which was out there, but then it was on the different lines, as you were saying about the creating CSS. And so, it was from that angle now with the angular framework. So, when we have all, all the components and everything and TypeScript best, so this new flex layout follows that approach. And it has more directives, declarative way of, defining the layouts and handling like all the styles and everything which is out there. So, this started with, after angular, angular came into the picture, this specific library.

Vinayak Joglekar (14:16)
So is there any popular, like people talk about React, they talk about Facebook. So, you know, there is something that you can see publicly available where, a library such as react is in news. So, is there some, something where, you know, you have flex layout library use, that we can see?

Nikhil Walvekar (14:38)
Flex layout is I need to find out that example specifically, but it’s we use lot of places where we need, again, like coming back to those lay outing problems. Right? So, whether it’s just the tool bus or, the menus, which are out there on the left side on that way, or the cards, which we show that, but I need to get specific examples.

Vinayak Joglekar (15:05)
Yeah. I mean, since it is coming out, Google, Google must used it somewhere, right?

Nikhil Walvekar (15:10)
Yeah, Google is using it. Flex just let’s say, if we just talk about flex box lay outing, so that’s widely used and it is also used in like Facebook and all those, all the other applications. If you talk about specifically angular, flex layout library, it’s used with angular applications also with Google. Now we talk about angular material, which is a component library for angular. So, they are not directly using flex they’re handcrafting, the flex box layout. The only reason is it’s a component library and they want to have everything content. So, like something dependency and which they didn’t want it, but there are some integrations which are possible with the material as well, angular material.

Vinayak Joglekar (15:56)

So, material two dot oh, or with all materials?

Nikhil Walvekar (16:01)
Material two dot oh, angular material.

Vinayak Joglekar (16:03)
Okay. You know, if I have to learn if I’m an angler developer, so what should I do? I have to pick up this flex layer. So, what should I do? Are there any resources that I can look at and how long does it take for me to pick up?

Nikhil Walvekar (16:19)
Angular Flex layout is part of Angular Getup repository. So, it’s, getup.com/angular/flex layout, so where, and slash Wiki will give you all the documentation and everything around the, also on the same page, there is a demo, which is out there. So, which can give you like, what you see, what you get kind of editor, where you can play around with the options. And then it gives you code as well. Like, okay. So, if you want to have, say, horizontal layout where everything is stretched to the available width, so it gives you that code and you can just copy paste. So that’s easy way to do it with the editors in place, like visual studio code. So, what we have is there are, some plugins which can give you those, snippets for the flex as well. So, which can make developer’s life easy, and they can just type in, and it prompts you, like, what are the things which needs to be filled over there? So, these are two easy to go resources.

Vinayak Joglekar (17:23)
If I have visual studio, I can actually create a layout and, you know, see the, convert it to angular flex.

Nikhil Walvekar (17:34)
Yeah, that’s right. So, in angular, what we have is template in that HTML template, we can, use those snippets to generate the attributes, like in case of flex layout, so the attribute will be like FX layout equal to row, which is like, the layout is in a row direction that way. So, it can generate that attribute for us. And then we can start from there.

Vinayak Joglekar (17:58)
In terms of speed of development. You know, generally speaking, if I were to compare it other libraries, how fast it is once as I double have learned this, is it terms of development speed any faster, slower, how does it compare? Or what are the main advantages that I maybe have to think about besides of course, not having to mess around with CSS.

Nikhil Walvekar (18:24)
Yeah. So that’s actually biggest advantage. Yeah. So, you don’t have to know what CSS to be applied and where, where else you can just define those directives and, get it done. So yeah, that way, it is easy learning curve will, small over here to learn. So, what you need to just know is what you want to achieve, like how you want to build that layout, that, so it’s easy to get started. And as let’s say, the layouts get complex. So then only thing what you have to be cautious, like how you divide your layout into parents and that way.

Vinayak Joglekar (19:01)
OK. I would say that for those who are not that good at CSS, they should definitely take a look at this, that this could be a faster, a way for the, to render what they want in a very quick manner. And when it becomes too complex, maybe then, they have to worry about it. But otherwise for general, simple layouts, they don’t have to worry about, CSS themselves.

Nikhil Walvekar (19:26)
Yep. That’s true.

Vinayak Joglekar (19:27)
All right. Anything that I didn’t ask you that I should last, we have three more minutes.

Nikhil Walvekar (19:32)
With this angular flex layout, one thing which, I like most is, again, the way you were saying that about messing out with CSS. One additional advantage is the responsive API or the directives which has the responsive built-in to it. Like, let’s say if you are doing layout, which is a horizontal layout for a large screen, but for the small screen, like mobile, we want a vertical layout, like column layout. So, where it goes on the like vertically, it becomes easy. So, we just add, suffix for the small layout. And then, we can specify that for small, it is row direction for large like column direction. So that is really easy, which is out there. And then it applies to all the flex layout attributes, whether we can hide certain things for a certain, layouts, or if you want to do something like let’s say all the layouts, which are less than medium or which are less than the large. So, they have this attribute. So as that GT, LT and SM kind of, those are pretty good to use, features. So again, like you don’t have to remember media queries, what to write and what is the small screen? What is the large screen? Those are defined into Angular Flex layout, and then we can make use of it. So that’s also advantage for a person who doesn’t know that okay, what to be used. So, these numbers are calculated based on all the available usage patterns that way.

Vinayak Joglekar (21:00)
Wonderful. So, this is extremely developer friendly, and I appeal to the audience that they should take time trying to just try out angular flex library and be the layouts and see the magic that Nikhil just told us about. So, thanks, Nikhil. Thanks for being on this podcast, zip radio, and it was wonderful to have you today.

Nikhil Walvekar (21:25)
Thanks, Vinayak.

Madhura Gaikwad (21:26)
Thanks, Vinayak and thank you Nikhil for taking the time out today to join us. Thank you everyone for tuning into this episode. For more information on product engineering and digital transformation, visit our website.excellarate.com. Thank you.