Building Scalable and Beautiful Angular Apps Series
- Leveraging Existing Skills and Pushing the Envelope
- Web App Packaging and Publishing Best Practices
- Organized Code and Scalable Angular Architecture
- Reusable Components, Templates, and Services
- Default Beauty and Great Mobile-First UX with Angular Material
- Navigation Lifecycle, Authentication Hooks, and Role Based Navigation
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
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.
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.