Developing any software is a challenge in today's Agile environment with ever shifting requirements. Today's web is rapidly raising the bar on user expectations on how a good application should work and the pressure on front-end developers to delivering great user experiences (UX) is higher than ever. Especially in Single Page Applications (SPAs) using Angular, React, Vue or any other framework, architecting your solution to support this type of rapid change and potential growth is often an after thought. You can overcome these challenges by using router-first architecture. Let's first dig into what the challenges are.

SPA Challenges

There are two main challenges in developing your apps. First is defining your requirements and the second is the architecture.

Requirements

This is notoriously difficult to do, however even in Agile software development, you must remember that you can't take your first step without a roadmap in place. So, how can we ensure that we have a concrete representation of a roadmap that is not open to wide interpretation like user stories or requirements documents can be?

Build a sitemap
Define different types of users that can log in to your system
Mockup rough drafts of all the views you can
Develop a walking skeleton of your application
As a bonus, insert the rough mockups in to your in progress app

Doing these things will scope out the entire UX you intend to build. It will be your roadmap. It will help tease early feedback from stakeholders and if you have multiple developers on your team, they can work in parallel, just filling in the blanks without stepping on eachtother's toes.

Architecture

A walking skeleton of your application is a great start, but application archictecture is so much more than just having the right routing structure. The pieces of software you develop should be flexible and performant. However, it is possible to be overly-flexible and ovelry-optimized for the task at hand. This can waste a considerable amount of your budget and rob you users of valuable features or improvements. So, how can you hope to accomplish this?

Leverage lazy-loading with modular development from the get go
Achieve a stateless, data-driven design
Enforce a decoupled component architecture
Create reusable user controls
Leverage ES6/TypeScript features to reuse code

These are high-level recommendations and dive deep into them for Angular, TypeScript and RxJS, in my recently published book, Angular 6 for Enterprise-Ready Web Applications.

Router-First Principles

In summary, a router-first architecture follows these principles:

Develop a roadmap and scope
Design with lazy loading in mind
Implement a walking-skeleton navigation experience
Achieve a stateless, data-driven design
Enforce a decoupled component architecture
Differentiate between user controls and components
Maximize code reuse with ES6/TypeScript

I will be talking about this topic more in meetups and conferences later this year, like on October 10-12 at Angular Mix in Orlando, FL.

Hoping to see you there! In the mean time, you can get my book for a discount until June 24th, 2018.

15% off Print + eBook: AERWA15
50% off eBook: AERWA50

Buy in Print or eBook Today!