Planning An Angular Application
Planning An Angular Application
APPLICATION
By Todd Motto
Planning an Angular (version 2 and above) application is
something you may have already done, or will be soon
attempting. This whitepaper documents a high-level outline of
things to consider when planning an Angular application, from
tooling choices during development all the way through to
deployment and performance strategies. Theres certainly a lot
more to it than meets the initial eye.
Project management
Before you get started, you need to consider how youre going
to get the ball rolling - and keep it rolling. This usually starts
with project management and discussing and agreeing upon
particular toolchains to accomplish your next application.
Progress.com 2
Software management tools
To manage the development of the front-end application, youll minimally need to select the following
software management tools to manage code, assets, and team members tasks:
Ensure that you and your team adopt the tools you choose, and frequently assess and improve
your workflow. New applications and tools are released to the public all the time and you may wish
to address new tools that coincide with features or things you feel are missing - and youll naturally
adopt new tools as time progresses.
Progress.com 3
Accessibility, i18n and Environments
Accessibility, i18n (internationalisation) and building for the correct environments are an essential part of any application. Its not just
deciding what to build, but how youre going to build and support it. Addressing these considerations at the beginning of a project
will enable you to clearly vision how youll implement the said features, such as accessibility concerns and i18n for example.
https://developers.google.com/web/fundamentals/getting-started/primers/
Offline-first
service-workers
Above are some examples for consideration when deciding baseline standards and types of support your application can offer.
These details may differ per project, for things such as i18n and offline strategies, it comes down to the goals of your project.
Progress.com 4
Development Process
Methodology
Typically there are a few different approaches to development, such as Agile,
Waterfall, Scrum, Kanban and likely many more adaptations.
Whichever approach you take, its important to remain consistent. The processes
Ive found to be ideal are the custom, loosely enforced, agile-like processes that
can be wrapped around the uniqueness of the project and team members.
Progress.com 5
Package Managers
Package managers allow you to grab dependencies from an external host, for example using npm to
fetch your dependencies for development and also any dependencies that will make it into production.
An example of this would be using a development dependency such as TypeScript, which will never make
its way into the browser as its pre-compiled locally during development and for project builds before
deployment. An example of a dependency that needs to make its way into production would be parts of
Angular itself, such as Http, core and other modules.
Progress.com 6
Task Runners
Task runners will allow you to configure particular tasks depending on what youre aiming to achieve.
Managing third party code and their dependencies should not be a manual task performed by a human,
its not productive.
For example, you can use a particular command from a task runner to start a local server, compile all
assets and then serve those assets in your browser with ease. WebPack has become the default standard
with Angular as it can run your tasks, tests, compile your code and serve locally - as well as much more.
Progress.com 7
Linters and enforcement
When working on a team, the goal should be that each file is written as if it were coded from a single
developers mind in regards to error prevention, formatting, and style. Three main types of tools (i.e. code
linters/hinters, code style checker, and a code editor config file) aid this process and should be properly
implemented and configured before coding begins.
Tools Examples
Angular CLI
The Angular CLI will allow you to do most of the above, all in a single environment. Using the CLI will
allow you to create new components, directives, services and more via commands in your terminal. You
can also serve the app, run local servers, build and compress styles (Sass) and compile the application for
best possible performance. Id highly recommend checking it out and building applications with it.
Progress.com 8
UI Components
Building web applications means that you are likely going to require some additional UI components
beyond what the browser itself has to offer. Textboxes, labels and dropdown lists will only get you so far.
When it comes to UI components, there are a lot of great options. You can choose either commercial or
open-source components. The important thing is to pick a component library which is built on Angular,
not wrapped with it. If the underlying components are not built specifically for Angular, you will lose much
of the advantages that Angular offers, such as Ahead of Time Compilation, tree shaking, server-side
rendering and more.
Tools Examples
Progress.com 9
Testing Methodologies
How you test and what you test is less important than the fact that you test something. Its likely the case
that youll want to test each module or unit of code by writing unit tests. When all of the units of code
unite to form a running application, youll want to do functional end-to-end testing. Below I detail the
tools required (tasking tool facilitate all this) to do cross-browser unit and functional testing.
Tools Purpose
The Jasmine test framework. provides everything needed to write basic tests. It ships with an HTML test
Jasmine
runner that executes tests in the browser.
The Angular testing utilities create a test environment for the Angular application code under test. Use them to
Angular Testing Utilities
condition and control parts of the application as they interact within the Angular environment.
The karma test runner is ideal for writing and running unit tests while developing the application. It can be an
Karma integral part of the projects development and continuous integration processes. This chapter describes how
to setup and run tests with karma.
Use protractor to write and run end-to-end (e2e) tests. End-to-end tests explore the application as users
Protractor experience it. In e2e testing, one process runs the real application and a second process runs protractor tests
that simulate user behavior and assert that the application responds in the browser as expected.
Progress.com 10
Codebase distribution
strategies
Gone are the days where we can just build an application purely for the browser
environment. Were at the stage where, without necessarily knowing it, were writing
code in a format that can run pretty much nearly anywhere. Under the hood, language
parsers such as Babel or TypeScript convert our code into an AST (Abstract Syntax
Tree). An AST is a chain of commands that describe our code, at a higher level. This
means that were not limited to the original language it was written in. People can then
(and already have for most cases) write programs that interpret these ASTs and spit
them out in whatever language is needed.
Via an AST, things like NativeScript exist to transform that AST into native code on
mobile for impeccable performance and native experience.
For your application, you need to consider the initial environments youll be deploying to,
as well as any future considerations - such as NativeScript for native mobile applications
(itll compile your Angular code for you, reusing 90%+ on average of your existing
codebase).
Browser only
If your application will only run in a browser, then your strategy will be fairly simple. Youll
be able to deploy to a single environment and the code will run in the browser like any
other web app thats browser only.
Progress.com 11
Server-side rendering
Server-side rendering has a huge performance and SEO benefit to loading an Angular
application directly in the browser. Because the Angular rendering core is split from the
framework itself, we can essentially render a view on the server. Once the server has rendered
the initial payloads, the client-side part of Angular can pick up where the server left off,
hydrating it with JavaScript once Angular is ready. For this, youll need Angular Universal.
Tools Purpose
Open source framework for building truly native mobile apps with
NativeScript
Angular, TypeScript or JavaScript.
Progress.com 12
Progressive Web Apps (PWA)
Progressive Web Apps use modern web capabilities to deliver an app-like user
experience. They evolve from pages in browser tabs to immersive, top-level
apps, maintaining the webs low friction at every moment. Heres some further
information as to characteristics of PWAs:
Angular makes these much more easy to integrate, and Id encourage you to
check out Angular Mobile Toolkit.
Progress.com 13
Define deployment strategy
You need a plan to get your local code to staging and production (i.e. deploy
local code to public servers). After all, not everyone can always see your
locally running application, even if you use some magic to make it happen.
A continuous integration server is an ideal solution for crafting deployments
regardless of whether you intend to deploy to production on every code push.
Let me step back for a moment from CI concepts and talk about local
development. Ideally, anything you do during CI, you should be able to do
locally. That means, building and testing your application should be crafted
first to run locally. In fact, I will often run a second server locally that serves
staging code on my local machine (i.e. what gets outputted during CI process).
Its this local testing and build process that becomes automated once you set
up your CI integration. Ive loosely mapped out below what this might look like.
This step is probably the most commonly skipped step in building JavaScript
applications. Dont overlook capturing runtime errors.
Progress.com 14
Style guide, Architecture and State
Management
Defining a style for your team and project is essential, as is deciding what architectural practices
youll be using.
The Angular style guide should be a go-to consideration to get familiar with architectural and
style best practices before diving into any Angular project. It offers a lot of help towards sensible
app structure, offers common gotchas and recommendations for you.
Progress.com 15
State management
Tools Purpose
Progress.com 16
Backend API
The first step assumes API-first development, which is an excellent
method that I highly recommended.
Its worth noting that it may be assumed that security and authentication
details will accompany the API. It is also assumed that the API developers will
provide a development API to be used for development. Using the same data
API for both development and production should never be an option.
Progress.com 17
Performance Strategies
Its worth investigating how to get the most out of your Angular application
before youve even set foot in the codebase. Lets investigate some approaches.
Ahead-of-Time compiling
If you dont AoT compile, youll ship the compiler to the browser, which means
the codebase is heavier, thus by default you adopt a Just-in-Time compilation
strategy. The AoT approach is also similar to Reacts story with JSX - its all
preprocessing.
Progress.com 18
Bundling
Bundling code allows us to eliminate dead code and minify our build before we deploy, as well
as minimising payload overheads when the browser requests the initial JavaScript file. This
also includes code mangling to rename variables, functions and properties to get the minimum
payload size possible.
Tree-shaking
Tree-shaking allows us to remove unused imports from our codebase, thus (potentially)
reducing the bundle drastically in size. The Angular team have put together a guide on tree-
shaking that walks you through itusing Rollup.js. Webpack 2 supports tree-shaking for ES2015
modules as well.
Lazy-loading
The Angular router allows lazy-loading of feature modules, which essentially will allow you to
request large module chunks on-demand rather than include it any initial payloads. It can be
removed before deployment and requested before accessing a particular route that a user
may not have visited yet.together.
Progress.com 19
Brought to You by Kendo UI by Progress
About the Author
Todd is a 26 year old front-end engineer from
Were engineering true Angular UI components, not just wrapping
England, UK. Runs Ultimate Angular, Founder of
existing components like other vendors. Were dedicated to
Voux, Developer Expert at Google, conference
delivering pure, high-performance Angular UI components without
speaker and open source evangelist.
any jQuery dependencies because we wont settle for anything
less and we dont think you should either. TheComponentspage
contains the most up-to-date list of included UI components.
Try Kendo UI
Worldwide Headquarters
Progress, 14 Oak Park, Bedford, MA 01730 USA Tel: +1 781 280-4000 Fax: +1 781 280-4095
On the Web at: www.progress.com
Find us on facebook.com/progresssw twitter.com/progresssw youtube.com/progresssw
For regional international office locations and contact information, please go to www.progress.com/worldwide
About Progress
Progress (NASDAQ: PRGS) is a global leader in application development, empowering the digital transformation organizations need to create and sustain engaging
user experiences in todays evolving marketplace. With offerings spanning web, mobile and data for on-premise and cloud environments, Progress powers
startups and industry titans worldwide, promoting success one customer at a time. Learn about Progress at www.progress.com or 1-781-280-4000.
Progress and Telerik Kendo UI by Progress are trademarks or registered trademarks of Progress Software Corporation and/or one of its
subsidiaries or affiliates in the U.S. and/or other countries. Any other trademarks contained herein are the property of their respective owners.
2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Rev 2017/02 | 161021-0009