What to look out for in an Angular 2 Seed project when migrating a large application

arrow_downward

 

As mentioned in my AngularConnect recap, we have been toying around with Angular 2 and various samples and seed projects for some time now, but still had some doubts about the right way to start. In this post, I want to highlight the requirements we have in our project and which Angular 2 seed projects we considered.

The HQ is a large but modular business application for agencies and professional service companies that is built in ASP.Net. We’re in the process of migrating the entire application piece by piece to Angular 2. We started out by separating frontend and backend and are building an API that allows access to both entities and business logic, which we have a lot of.

vscode

For this large project, we want to build on the right foundation. This is why we’re carefully evaluating the various seed project options and our requirements. Here are a few of them:

Develop and Production Build
To get started quickly, we need a working Develop and Production Build. Since we are only starting with Angular we are no experts on the Angular Compiler yet (even though Tobias Bosch’s talk was really enlightening) and have never really worked with gulp and the like before.
In order to have a production-ready MVP soon, we want to automate the production build with our existing CI and CD, which we rely heavily on.

Unit and E2E Tests
In our current application, we integrated only few automated Unit tests and had a large set of manual test protocols instead. In our new front end, we want to change that. We are aiming for a test pyramid with a focus on automated Unit and E2E tests and only few manual tests.
Out-of-the-box support for writing and running both Unit and E2E tests is therefore important in our project.

SCSS to CSS
Angular 2 components already allow CSS files to be applied directly to a component and DOM shadowing makes sure that these are only applied to that component. Adding SCSS which gets compiled to CSS during build is a new option that allows for a lot of flexibility during development. For example, colors and other variables can be edited in a global file and then imported to the component-specific SCSS files.

Linting
Lint is a way to check the code style according to various defined rules, also called static code analysis. It should be integrated into a production build step and validate the application code for proper code style in TypeScript, CSS and template files.

Tree-shaking, lazy-loading and preloading
The HQ is a huge application with more than 180 different modules. In Angular terms, our application modules would probably consist of 15-50 components or NgModules in the Angular world. To handle this complexity and size, optimizations like tree-shaking, lazy-loading and preloading help to reduce the size of the final application bytes transferred to the browser.

Tree-shaking is the process of stripping unnecessary imports and thereby reducing the output size. Lazy-loading allows the developer to split the application into different bundles which are then only loaded when needed. This dramatically reduces startup times of the application. Preloading the fetches the lazy-loaded modules in the background before they are required by the browser to avoid Internet round trip times.

All these powerful concepts make sense for a large application like ours and should therefore be configured in the project. They are all part of the Angular Core and Compiler, but need to be supported by the build steps and module loader.

 

The creators of Angular 2 and the community provide several projects that help to start the development. For one, there is ng new, the Angular CLI command to create a new project. Then there is the official Angular seed project by the Angular team: https://github.com/angular/angular2-seed

One of our favorite seed projects, Angular 2 Seed created by Minko Gechev (recently renamed to Angular Seed) and the community, currently does not support lazy-loading in the production build. It uses the SystemJS module loader while other seed projects, including the official Angular 2 seed project, rely on WebPack.
However, for many other reasons, we decided to build our application on the community-built seed project. It provides all of the above mentioned features and we hope that it is only a matter of time until lazy loading will be supported. Otherwise, we might need to find a way and add it ourselves.

 

Are there more requirements for starting a large project that we did not consider? Which seed project are you using?

 

Update October 11th: Minko has just announced that he is working on lazy loading for the production build here.


Get Angularity updates

mail

 

Schreibe einen Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

comment
face
mail
place