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

download Componentized Frontend Architecture Overview - Componentized Frontend Architecture Overview Alexander

of 16

  • date post

    22-May-2020
  • Category

    Documents

  • view

    1
  • download

    0

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

    https://twitter.com/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

    mailto:mobile-number-verification@1.2.2

  • 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

    http://www.ebay.com.au/ http://www.ebay.com.au/sch/Digital-Cameras/31388/bn_1131/i.html

  • 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

    https://au.linkedin.com/in/alexanderburakevych https://twitter.com/oburakevych https://github.com/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