Anatomy of a large Angular application

Build it and they’ll… have an easier time developing.

Do I really need a strategy?

Setting a direction

Separation of concerns

Steer the ship in that… uh, general… direction

Better tooling

Future proofing

The bare necessities

  • separate your concerns,
  • keep the flow of data unidirectional,
  • manage your UI state using data,
  • use a transpiled language,
  • have a build process in place,
  • test.

Separating concerns

Vertical separation

A good application standing on the shoulders of verticals

Horizontal separation

  • services layer,
  • facade layer,
  • components layer.
  • services that handle your data or UI state (e.g. DataService and UIStateService),
  • services that assist them in doing so (e.g. DataFetchService or LocalStorageService) and
  • other services that you may need like a service that’s going to tell you at which breakpoint in a responsive layout you are.

Keeping the flow of data unidirectional

Getting data

Modifying data

Keep it flowing

Managing UI state using data

Transpiling code

  • using features that are coming in newer versions of ECMAScript,
  • abstraction of JavaScript quirks,
  • compile time errors,
  • better tooling…

TypeScript

Having a build process in place

A typical build process

Testing

Real world example

Heroes of Warcraft is a trademark and Hearthstone is a trademark or registered trademark of Blizzard Entertainment, Inc., in the U.S. and/or other countries.

Source repository

Vertical separation

Horizontal separation

Services layer

Facade layer

Components layer

Data flow

Under consideration

What now?

  • additional filtering of cards by cost, hit points, attack points or card rarity
  • sorting by all possible criteria,
  • adding Bootstrap’s Affix to the chosen cards in the deck builder
  • developing a better Local Storage service which has much better object checking and casting
  • further improving the Page Value Extractor service to allow for metadata being included in the JSON for better type association
  • etc.

The devil is in the detail

Back to the drawing board

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kristian Poslek

Kristian Poslek

More from Medium

How to setup your first Angular app

How to Edit Context Menu in AG Grid

Angular with clean URL’s using Apache’s mod_rewrite

10 Key Benefits Of Angular & Use Cases | Calibraint

Angular Development