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 [email protected] --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