Looking for web design?

In order to provide the clearest possible communication for our visitors, we now have separate websites showcasing our software and web design services.

How to Create a Custom, Shared Library in Angular

By Grey Patterson  |  

Software Developer

The DRY Principle

Software is complicated. It has a lot it must do: connecting to databases, reading and writing data, following all the rules of a business, and displaying an interface to the user that is not only functional but also intuitive, empowering, and styled to brand guidelines.

With that much to do, one thing becomes very important: staying organized.

This has been the subject of many a blog post already, as well as quite a few books and plenty of college courses. Programming paradigms are built around organizational methods. From MVC to ReactiveX, these methodologies help programmers keep their code organized.

A fundamental goal of that organization – and one of the earliest lessons programmers are taught – is the DRY principle: Don’t Repeat Yourself.

Why, though? Computers are fast, and storage is cheap. So what if we’ve got some repetitive code? There are a few solid benefits to staying DRY:

  • Less code takes less time to write. That means more time for the programmers to catch and fix bugs, polish the interface, and develop new features.
  • Less code is easier to maintain. If you need to change the way something works, it’s far more efficient to do so in one place than in 10.
  • Less code means fewer bugs. By keeping the code to do something in one place, fixing a bug once means it’s fixed everywhere.

Recently, Buildable has made a big improvement in keeping our code DRY.  

All the software we build has some common components, like “section header,” “list of data,” or “editable form.” Over time, we’ve built some powerful functionalities into these components – searching, sorting, and filtering lists of data, for example.

In each project, these components were following the DRY principle: The code was written in one place and reused across the project.

Outside each project, however, we weren’t staying so DRY. Each project had its own version of these common components. Features and functionalities migrated from project to project as needed, but this was done manually with an engineer copying over (or recreating) the code on demand.

Our development process is now much simpler thanks to our custom shared library. Every feature is available to every project immediately – no manual synchronization required.

We’ve called this library the Buildable Foundation.

Building the Foundation

The Foundation only contains frontend components. (We are working on a similar project for shared backend components, but it is, as yet, unnamed.) As it turns out, converting a collection of Angular components into an Angular library isn’t too difficult. Angular has a few tools available to help you get started, and since we had already built the components, moving them over was easy.

However, those tools only went so far as being a separate library within a single project. In practice, there was almost no difference between this approach and the way we’d originally been managing the code. The next step was to break out the library and make it available to other projects.

Now, there are also some tools for doing this, but they make some assumptions about the workflow involved, which in our case ranged from “mildly incorrect” to “seriously wrong.” Fortunately, there are other ways, but the setup is fairly involved.

Our first take on sharing the library between projects built on some tools we were already using. We manage all of our code using GitLab, and Node Package Manager (NPM), the tool that manages the frontend libraries in our projects, has built-in support for using a Git repository instead of an NPM repository. (It even supports version numbering by way of Git tags!)

Unfortunately, NPM only works with a Git repository in a very specific format. That format, while available as the output of an Angular library, is tucked away somewhere that NPM can’t (or rather, won’t) find. For testing purposes, we were able to work around this – by creating a second Git repository and using a little-known feature of Git to copy over just the files we wanted – but the resulting workflow was slow, somewhat fragile, and annoying; an improvement, but marginal at best.

From there, we decided to go heavy-duty: a Docker container running Nexus Repository Manager. It’s a purpose-built tool for replacing the public NPM repository. By changing the configuration of our projects, and uploading the Buildable Foundation into our repository, we can use it in our projects as if it were a public library.

After a bit of configuration on GitLab, we have made the development process for the library much easier. A developer can check out the Foundation’s source code, make changes, and submit their work for review. If the updates earn approval from the rest of the team, they are then merged in. GitLab works with Nexus to make the updated version available to all projects using the Foundation. Those updates are then integrated into all of our projects, automatically.

The end result is incredible: While each project’s frontend remains just as customizable as ever, the powerful functionality and logic backing those tools are now consistent across all projects. Whether it’s a new feature, performance improvement, or bug fix, we write the code for one project, and the DRY benefits go to all of them.

/10

"They were never afraid to show me their code, so I could always see what they were working on."

Adolf Valdez
Precision Analytical Inc.

"I found the best thing I liked about them is their communication. We were never left in the dark, like with other development companies."

Adolf Valdez
Precision Analytical Inc.

"Everybody here is more excited about the look and feel and being able to finally get live data. With the old system, we had to export text files and it always took a day. We're all excited to have something new, fresh, and with more functionality. The reports are more dynamic, and we can actually scale them."

Adolf Valdez
Precision Analytical Inc.

"Buildable Custom Software has people on our calls that are dedicated to our project, which is something we have not experienced before. Unlike past vendors that have experienced a lot of staff turnover, we have had the same team."

Josh Jones
CityCounty Insurance Services

"We haven't found many other vendors that can understand our unique business needs as well as Buildable Custom Software."

Josh Jones
CityCounty Insurance Services

"We have a rules engine that has hundreds of lines of code to develop these rates, and Buildable Custom Software condensed that down to seven or eight lines of code, and it works great."

Josh Jones
CityCounty Insurance Services

"The project manager puts the contract together and outlines what we're doing each sprint. She does an excellent job of organizing everything we need."

Josh Jones
CityCounty Insurance Services

"Buildable Custom Software has done a great job of understanding what our needs are."

Josh Jones
CityCounty Insurance Services

"They blew us out of the water with their proposal. They featured the latest and greatest software, and we were impressed by their past work."

Josh Jones
CityCounty Insurance Services

Web Design and Web Development by Buildable