Componentized Frontend Architecture Overview

Alexander Burakevych AngularJS Melbourne 04/08/2016@oburakevych

What Is Component?

● Component is atomic frontend piece that is composable and reusable, and should work with other pieces in a way that’s performant.

● Isolated, decoupled and configurable (optionally) instance with no side effects.

● A component is made up of some parts HTML, some parts CSS, and some parts JavaScript.

HTML <select> is a a native HTML UI component

Component-first driven development

● Everything Is a Component● We’re not designing pages, we’re designing

systems of components.● Not only UI elements can be componentized

but also processes, e.g. Analytics, Sanitazation, Authentication, Error Handling, Request/Response Interceptors, etc.

Component Is In the Heart of Angular

A basic Angular 2 component looks something like this (using TypeScript and system.js):

Then, you can use the my.hello.ts module in another module (i.e. app.ts) that will bootstrap the Angular app:

Then import the app.ts module into an HTML page to create the <my-hello> component:

Configurable Components

● Modules in Angular have their own lifecycle, e.g. config(), run(), etc., which makes it a great place for configuration.

Local vs Shared Component

● Local Component is used only within a single app

● Shared Component is used across multiple apps

Separate Repository For Shared Component/Module

● Independent code base

● Tests

● index.html to bootstrap the component for reference impl and testing

● Build and deployment scripts

● Versioning & Dependency management

● Changelog

● Readme

Publish Shared Components To Private Registry

● NPMJS● Github● Nexus● Artifactory● ...

Then consume it in your app:npm install mobile-number-verification@1.2.2 --save-dev

Microapps Architecture

● Microapps belong to the micro-services architecture : complex applications are indeed composed of small, independent pieces of functionality

● Microapps should provide a range of capabilities whose functionality is both highly focused and task-based

● One Set of Routes – One App*● Common Header/Menu/Footer – shared

components* Set of routes (e.g. /user/..., /order/..., /item/...) can be one app, depends on the tasks performed and scalability requirements

Every Set of Routes Points To a Different App

● http://www.ebay.com.au/● http://www.ebay.com.au/sch/Digital-Cameras/31388/bn_1131/i.html● Each app has its own repository, tests, build

and deployment scripts ● Each app is deployed to a different instance● Apps use API Gateway Pattern

API Gateway

Node.js

Microservice

Microservice

Microservice

Deployment Stacks

Test

Stage

Prod

Microapp 1

Test

Stage

Prod

Microapp 2

Test

Stage

Prod

Microapp n

...

NGINX

Complications

● Requires advanced infrastructure support● Requires DevOps● Managing tens, hundreds of source repositories

and deployment stacks is hard● Dependency and versioning becomes much

harder● Takes more development time initially (but

benefits in the long run)

Thank You

● LinkedIn Alexander Burakevych● @oburakevych● Github oburakevych