Is it good practice to use Angular Flex-Layout?

Question

I would like to know if it really is a good practice to use Angular Flex-Layout module. Isn't it just sugar coated inline styles with extra performance cost since it's JavaScript that does the styling? So if you can, please explain to me why I should use it over basic flex box?

Answer 1

I know the answer comes late, but I've had this question myself after stumbling over the package. I normally just use CSS flexbox as it's very simple and I don't find it having a lot of boilerplate for getting quick results. To me the library looks pretty much sugar coated styles as you put it and I don't know about the performance penalty, however I found a link with some examples which basically show rather biggish CSS code reduction in favor of adding directives: https://indepth.dev/angular-flex-layout-flexbox-and-grid-layout-for-angular-component

I have also looked at CSS libraries solutions with helper classes that also reduce custom CSS usage, are made with responsiveness in mind, etc. such as https://tailwindcss.com/. If there really is any performance drawback with using directives based styling I would opt for CSS only based solutions.

Answer 2

caution: the answer may vary based on user opinion

If you are already flexbox in your css. I would not recommend to try out angular flex box packages as of now.

If you are freshly building some application, you can try that time.

However, the package still in beta. If I'm building a PROD application I wont use beta packages in my project. All you have to do is wait for major release to use in PROD version of application.

I'm just highlighting a comment in the github repo (https://github.com/angular/flex-layout/issues/674#issuecomment-374866400)

The reason for the perpetual beta stage of the project is because a lot of the functionality of the project has yet to be finalized. As you may have noticed over the past few weeks, we've introduced a ton of breaking changes between betas. Not to mention the changes we have in the pipeline (switching to the CDK layout engine for one), most of which are going to have to wait until the Ivy renderer has been completed (which will be well past v6).

While the functionality of many of the core directives remains stable, we are still tweaking them and trying to improve them. And then there are the performance hits from using a directive-based layout library that we hope to resolve when the Ivy renderer comes out.

We understand the frustration/turn-off of using a project still in beta, but it gives us the flexibility to improve the project at a faster pace for now while we work out what the "stable" version of the library will look like. We'll hopefully have more updates on this over the next few months as Ivy is finalized and we can settle on a design.

If you are beginner and want to try out this package in any small level project, just try out and be aware of breaking changes between beta version releases.