Componentized Frontend Architecture Overview - Componentized Frontend Architecture Overview...

download Componentized Frontend Architecture Overview - Componentized Frontend Architecture Overview Alexander

of 16

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Componentized Frontend Architecture Overview - Componentized Frontend Architecture Overview...

  • 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 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 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

    ● ● ● 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





  • Deployment Stacks




    Microapp 1




    Microapp 2




    Microapp n



  • 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

    Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 Slide 13 Slide 14 Slide 15 Slide 16