Angular Components

Wilson Mendes

@willmendesneto

Google Developer Expert Web Technologies

Decoupled, Shared

 Reusable & OpenSource

So, let's start?

HI, IT'S ME

1. Access https://goo.gl/PibUcQ

2. Decrease the price to $0,00

3. Enjoy

Nodebots book free!

<webapps/>                    are evolving

and we need to be up-to-date

Frontend architecture

Component based

Web friendly

Checklist

Share components is <3

How to solve

the code problems

<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />

bundle
test
publish
lint

Opinions ?

reporter
dev server
types
coverage

Zero Config

or boilerplates if there's no other way

https://github/topics/zero-configuration

https://cli.angular.io/​

npm install -g @angular/cli
// Installing Angular CLI
ng new my-app
// Creating a new Angular App
ng serve
// Starting local server

Keep it simple         Keep it small

it's a fight to be continued...

Integration in your module

Easy to maintain

Refactor across teams

Why small packages

NG-Japan updates

https://goo.gl/h2D1YG

small scope

boundaries

plug-and-play

Everything is a component

EX: Feature toggle

Feature Toggle Service

Reactor Feature toggle

NGX Feature toggle

import { FeatureToggleModule } from 'ngx-feature-toggle';
...
@NgModule({
  ...
  declarations: [
    YourAppComponent
  ],
  imports: [ FeatureToggleModule ],
  bootstrap: [YourAppComponent]
  ...
})

export class YourAppComponent {
}
...
<feature-toggle-provider [features]="featureToggleData">

  <p>Enabled content</p>

  <feature-toggle [featureName]="'enableContent'">
    <p>Disabled content</p>
    <p>In that case this content should not be rendered.</p>
  </feature-toggle>

  <feature-toggle
    [featureName]="'enableContent'"
    showWhenDisabled >

    <p>Disabled content</p>
    <p>But, it has `showWhenDisabled` attribute.</p>
    <p>In that case this content should be rendered.</p>

  </feature-toggle>

</feature-toggle-provider>

Demo page, please

You might not need

* specially talking about opensource ...

https://youmightnotneed.com/lodash/​

Component composition

* Framework internals

over

import { FeatureToggleModule } from 'ngx-feature-toggle';
...
@NgModule({
  ...
  declarations: [
    YourAppComponent
  ],
  imports: [
    FeatureToggleModule.forRoot({ enableContent: true })
  ],
  exports: [FeatureToggleModule],
  bootstrap: [YourAppComponent],
  ...
})

export class YourAppComponent {
}
...
<feature-toggle-provider [features]="featureToggleData">

  <p>Enabled content</p>

  <feature-toggle [featureName]="'enableContent'">
    <p>Disabled content</p>
    <p>In that case this content should not be rendered.</p>
  </feature-toggle>

  <feature-toggle
    [featureName]="'enableContent'"
    showWhenDisabled >

    <p>Disabled content</p>
    <p>But, it has `showWhenDisabled` attribute.</p>
    <p>In that case this content should be rendered.</p>

  </feature-toggle>

</feature-toggle-provider>
<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />

ngDoCheck: 4.7ms

ngZone: 4.3ms

Toolings

Greenkeeper

Code Climate

Publishing a module

...can give you some hard time

ESM2015
FESM2015
UMD

Different bundle types

ESM5
FESM5

.mjs

# Github: https://goo.gl/TXsXk3
# Usage: 
# PKG_VERSION=<patch|minor|major> ./publish.sh 

npm run test && \
npm run build && \
npm run bundlesize && \
node ./build.js && \
npm publish dist && \
npm version $PKG_VERSION -m "v%s"

Scripts

Build system

ng-packagr

ng-packagr -p ng-package.js
// Creating the bundle

// ESM2015    // ESM5
// FESM2015   // FESM5
// UMD

 

ng generate my-awesome-lib
// Generating a library
ng build my-awesome-lib --prod
cd dist/my-awesome-lib
npm publish
// Publishing a library
np 
  --no-yarn 
  --contents=dist
// Publishing a library

https://goo.gl/4JZGGn

<ngx-recap/>

Think in architecture

Zero-config ...always!

Choose carefully

Automate everything

https://github.com/willmendesneto/micro-frontend-pages

Feature toggle service

 

 

NGX Feature toggle

 

 

Reactor feature toggle

https://goo.gl/WYZFjF

https://goo.gl/wQQ7yh

https://goo.gl/E7Ffzr

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Made with Slides.com