Toggle Menu

Insights / Digital Service Delivery / Building Scalable and Beautiful AngularJS Apps (Part 3): Organized Code and Scalable Angular Architecture

April 03, 2017

Building Scalable and Beautiful AngularJS Apps (Part 3): Organized Code and Scalable Angular Architecture

7 mins read

Doguhan Uluca was a speaker at ng-conf 2017, where he talked about Do More with Less JavaScript. Check out the full talk. For more about conference-related materials visit TheJavaScriptPromise.com

This post is the third in a multi-part series on building scalable and beautiful Angular apps.

First things first: Running code is far more valuable than any blog post. So, launch the demo site here, check out the source code on GitHub and pull the Docker image without delay:

[pcsh lang=”js” tab_size=”4″ message=”” hl_lines=”” provider=”manual”]

 docker pull duluca/angular1.5-starter

[/pcsh]

Treat JavaScript Right

Most development teams treat JavaScript like a second-class citizen. They underestimate its powers and treat it like a “scripting” language. If there’s anything I learned over the years, that would be to treat JavaScript the way you want it to treat you. If you just start coding without a carefully planned application architecture, your team is bound to run into merge conflicts, slow performance, inter-woven and inter-dependent views, and services that are difficult to maintain over time. You know you are in trouble when your development speed is not accelerating over time or when fixing one issue creates five other issues across your app.

Building front-end applications with a scalable-code architecture is a topic foreign to many, but an issue consistently encountered by teams small and large. It is easy to write off challenges of building large applications to the inadequacy of JavaScript. JavaScript, along with the npm ecosystem is more than capable of supporting Agile engineering best practices like unit testing, SOLID principles, dependency injection, and static code analysis. Let’s dive into how you can build Angular 1.5 apps that scale to 100s of views and support dozens of developers contributing code to it at the same time.

Tools for Organized Coding

Before we dive into how you organize your code, let’s talk about the tools you use to organize your code with: your code repository and integrated development environment (IDE).

Use a modern code repository that supports git, because it allows for infinite branching and gracefully handles merging everything back together. However, choosing the right git host is critical. There are some enterprise tools out there that lock you into monolithic tools set, avoid those tools like the plague. I recommend going with GitHub or GitHub Enterprise. GitHub is pluggable, which will help it integrate with your existing issue tracking systems or any other future needs you may discover. In addition, having GitHub experience on your resume is an asset. Here are best practices for using GitHub properly.

The traits of a good IDE are fast load times, extensibility options with plug-ins and sensible defaults, so that new team members can be on-boarded more quickly or new teams can become productive, faster. If you are using an IDE your team is in love with, stick with it. Otherwise, I recommend using Visual Studio Code (VS Code) as your code IDE. VS Code works great with JavaScript right out of the box. It is hands down the best Node.js debugger out there and best of all it has the speed performance of a text editor. VS Code has some good plug-ins, but best of it all your team and personal IDE configuration is stored under the .vscode folder in easy to read json files. VS Code also allows you to bring in type information for third party JavaScript libraries, which can save a lot of mistakes and time for your development team. Learn more about TypeScript vs ES6.

Establish Developer Norms

The Angular Starter project includes the dev-norms.md file, which provides a set of sensible default norms for your team to follow. Developer norms are a necessary way to set some ground rules, so your code base can retain some consistency, remain maintainable over the next days, months and years, and all developers are on the same page. Why keep your norms elsewhere, when you can keep them as a living piece of documentation right in your repo. You can manage the file using the dev-norms tool.

Control Your Dependencies

I have seen three distinct references to Angular in projects before; one as a <link> tag on your index.html, one as a bower dependency, and one as an npm dependency. All three referred to different versions of Angular, but which one was the one being loaded and used at runtime? The answer would depend on a variety of factors and could change over time with configuration changes.

It’s a no-brainer that your team should work against a single source of the truth. However, to achieve this goal some planning and browserify is required.

First and foremost, require all dependencies to come from npm. As a result, your first and only stop to audit and maintain dependencies should be package .json. It is also important to briefly go through the source code of each package to gain an overall understanding of what each package does.

Second, use npm shrinkwrap to lock down your dependencies to ensure that every developer will get the same exact patch of every package and critically ensure your various servers will also have identical dependencies. If you are not familiar what a patch version means, read about semver.

If your target is a large population of users, consider using CDN links of your dependencies so you can reduce your bandwidth costs, but also be a good netizen and leverage cached resources that may already exist on your users’ devices.

Key Components of Scaling Angular Apps

To scale and achieve an accelerating development velocity several key components must be decoupled. On a regular Angular app architecture, there are several hot spots like index.html, app.js, and the router, where multiple teams must be in close communication to avoid merge conflicts or contention over the naming of components and routes. This can be largely avoided with ng-components and ngComponentRouter.

Define Child Roots

This is the single most important concept that will allow your code to scale. With child roots, you’ll be able to create nested components that are decoupled from the rest of your app from a routing perspective, folder organization perspective, and dependency management perspective.

Let’s examine how the admin root works. You register the module with a single line of code in app.js. Calling require(‘../../routes/admin/admin’) is all that’s needed to signal Angular and Browserify, simultaneously, that we intend to use admin.js. Now, we are free to require all of your child dependencies in admin.js. Therefore, decoupling JavaScript dependencies, components names and child services from the rest of the app. In addition, all code related to admin can be organized under one folder, preventing merge conflicts with other developers or teams.

You register admin as a child root with the router with { path: ‘/admin/…’, component: ‘admin’, name: ‘Admin’ }. The … portion of the route allows us to define all child routes of admin in admin.js. Therefore, decoupling all routing concerns from the rest of the app. You won’t have naming clashes with other teams and since you child components won’t be evaluated until someone navigates to an /admin path, any broken code you commit won’t impact other teams. See dashboard, dashboard-two, and dashboardService as examples of decoupled child dependencies.

Start Today

As German poet Goethe puts it, “what is not started today is never finished tomorrow.” Here’s the code on GitHub. Fork it, create issues with it, otherwise just clone it and use it. Start today.

If you have any questions, ask them on Twitter @duluca.

You Might Also Like

Resources

Simplifying Tech Complexities and Cultivating Tech Talent with Dustin Gaspard

Technical Program Manager, Dustin Gaspard, join host Javier Guerra, of The TechHuman Experience to discuss the transformative...

Resources

How Federal Agencies Can Deliver Better Digital Experiences Using UX and Human-Centered Design

Excella UX/UI Xpert, Thelma Van, join host John Gilroy of Federal Tech Podcast to discuss...