Toggle Menu

Insights > Digital Service Delivery > Building Scalable and Beautiful AngularJS Apps (Part 1): Leveraging Existing Skills and Pushing the Envelope

Building Scalable and Beautiful AngularJS Apps (Part 1): Leveraging Existing Skills and Pushing the Envelope

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.  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. Furthermore, building a […]

By

March 24, 2017

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

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. Furthermore, building a front-end application that looks and behaves great is difficult and expensive without dedicated UI and UX designers. Keeping up with all the new JavaScript frameworks to establish these both goals is next to impossible for most development shops. This is why I built Angular 1.5 starter and why I’m writing this blog post series to explain the motivation behind the choices I made or techniques I learned from the masters of the Angular community. The series will cover the following topics:

Building Scalable and Beautiful Angular Apps Series

Angular Starter demonstrates several important concepts in building a scalable code architecture for Angular 1.5.x. Following the patterns demonstrated in this project will help you write clean, maintainable code that is a half-step towards Angular 2.0 style coding, patterns, and practices.

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]

Existing Skills Matter

I built a batteries-included mobile-first Angular 1.5 and Angular Material seed project about a year ago, assuming Angular 2 would completely take over the scene, so I stopped updating it. In the intervening time, I came to realize that many developers out there have built strong Angular 1.x skills, companies are just jumping on board with Angular 1.x or building their next project using the existing skillsets. However, not very many people are aware that using Angular 1.5, you can start coding in the style of Angular 2 – this will allow you to leverage existing skills, while slowly start changing the mindset of how developers approach designing and architecting a front-end application. Let me expand on what that specifically means.

This project leverages components and the component router technology, similar to the way they’re utilized in Angular 2 — using ngComponentRouter, Angular Material 1.1.3 and Angular 1.5.11. The component architecture allows you to follow clean code and SOLID principals, where you can build multi-hundred view apps without your code architecture collapsing under its own weight.

Developers will be introduced to concepts that form the basis of Angular 2 while leveraging Angular 1.x skills. If you’re looking for a 3-5+ year solution, I highly recommend you start with Angular 2 – the initial pain will be worthwhile — as Angular 2, let’s just call it Angular beyond for ease of reference, is the foundational framework that’ll be compatible with Angular 4 and beyond. Angular team is committing to releasing a stable major version of Angular beyond every year going forward.

Push the Envelope

Change doesn’t happen overnight. You need a plan to bring your team forward from Angular 1.x to Angular beyond. My project introduces important new concepts while keeping many other things familiar. This feeling of familiarity will help your team pick up on these news concepts.

Coming to the table with a suggestion to jump onto Angular beyond may be a big ask for many organizations, clients, bosses, managers, CIOs, or CTOs. However, suggesting an Angular 1.5 project using better techniques will be difficult for anyone to disagree with. By taking half a step forward, you’ll have pushed the envelope in a critically important way without upsetting the status quo.

By practicing Angular 1.5 with the component architecture and router for 6-12 months, your team will be ready to pick up and run with Angular beyond with your next project. In addition, your bosses observing the capacity of your team to handle change and delivering a successful project will make them far more likely to support Angular beyond.

Start Today

As German poet Goethe puts it, “what is not started today is never finished tomorrow.” You and your team already pose the skills to write a better app. The Angular 2 ecosystem is still maturing with critical components like the CLI and Material 2, which are still in beta/rc/1.0 and the beyond upgrading techniques and tools are unreleased and untested. So, if you need to get something done today, then, by all means, go ahead and use my project: https://github.com/duluca/angular1.5-starter.

Fork it, create issues with it, otherwise just clone it and use it.

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

You Might Also Like

Tech Tips

Getting Started with Azure Stream Analytics

In my previous post, I walked through common scenarios and attempted to present a high-level...

Tech Tips

4 Reasons to Upgrade to Angular CLI v6

At ng-conf 2018, the Angular team unveiled an astonishing suite of new features to come...

Tech Tips

In the Driver’s Seat with Serverless Functions

Introduction Serverless functions have been quite a new and hot topic in the tech community....