Taking Benefit of Angular Component's Structure

in OCD11 months ago

From the last 2 months, I have been totally working on the UI i.e. mainly Angular. The task was to convert our legacy ASP.NET aspx code to Angular UI using the latest version of Angular 9 (though Angular 9 is not latest anymore as Angular 10 is out). We are also using Syncfusion for some of our obvious components like DatePicker, DateTimePicker, Grid, Charts etc so that we don't have to spend time in writing those.

We had 4-5 Angular apps where we used to use syncfusion directly and spending a considerable amount of time in each app. But the problem was we did not have a base project where we could have created a component and used it everywhere. So since we are starting out a new project we thought of streamlining some of the processes, like creating one component and use it everywhere.

Along with that Angular has a feature called Workspace, where you can set any number of angular applications and libraries. It has one angular.json at the root level and thus all the configuration related to all the projects or project-specific goes here, similarly only one package.json where you can keep all the dependencies at one place. So we have first started with Initializing Angular Workspace.


PC: Pixabay.com

Now along with Workspace, we have Angular Library which differs from a normal app, the library should be imported in an application and use it there. So it will be the best candidate to keep all your common components there. So what we have done is that we encapsulated all our Syncfusion components in our own components and kept it inside the base library. This way all the Syncfusion changes will be done at one place and we use our own library in another project. Along with any component which we write also go into the same library.

This way we are taking the benefit of Angular Component and thus creating building blocks of a large application inside the library. Some of the problems we faced when using the library and the workaround which we have done to solve the issue is -

  1. Testing Component - For testing, we cannot directly test it in the library, so we need to create a test app to test all those components in the library. The library creates a single .js file for all components and thus it was little hard to test it in the browser.
  2. Localization - In Angular Library, we cannot directly import assets folder and thus it was hard to do localization on the component, what we had to do is to write a post-build script to copy the assets to the project.

Though the above 2 issues were not big and the good thing is that we had a workaround and thus we can use the library. Once we have created enough components in the library, we have imported those in the actual application and used it. So actually we have taken benefit of Angular component structure to break down our large application into smaller and simpler blocks and use it everywhere.


PC: Pixabay.com

This was a POC and it did go well and now we are in a process to move all our application with this structure. We might face some issues doing it, but I hope we might have some workaround to fix those issues.

I think with Angular, React and Vue framework, building Web UI is much simpler nowadays and thus anyone having some knowledge of CSS, HTML and Javascript can use these frameworks and create their own web UI as per their choice.


image.png

image.png

Sort:  

In another two months I will also be getting started with angular 10 probably. I proposed an upgrade with the next gen UI and we got approval. I have to do a POC in another two months. Our legacy code is also in ASP.NET but I'm not going to be converting it instead I'm going to rewrite the whole application in the new technology stack.

In our case for the UI components like date picker etc, we have a framework already available customized for our company. Built on top of Bootstrap. So building a UI should be pretty much simple for me. But ya have to get my hands into this after two months. If I need any help, I'm going to bug you. 😉

Yeah, we also are not converting it, we are just rewriting it but again whatever has already written we are making those as a component in library. Bootstrap is actually good and in my personal project I have used it a lot but again companies don't want to invest too much on writing some obvious hi elements.

Sure, I have been working on Angular from the last 1 year or so and thus getting better at it day by day.

That's nice. Better to use a library instead of crafting everything out. I guess some teams in my company tried to have their own version of Bootstrap but not every company succeeds with that. Syncfusion is a one such company that is successful with creating their own components.

Let's see how it goes.

Yeah, in my previous company we were using Telerik, that was good too. Yeah if something which is not out there than its best to create your own or convert something to meet your needs

Oh nice. I have heard about Telerik but never used it. But my company's current component framework looks a bit decent. I did an analysis and it looks like everything is there. If something is not available, I will have to create it myself.