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

Angular Components: Decoupled, Shared, Reusable & OpenSource

By willmendesneto

Made with Slides.com

Angular Components: Decoupled, Shared, Reusable & OpenSource

Are you working with a big Angular component based application? Components are the best way to share your code across web apps, having extreme importance for the success of your project, but how to start? How to validate if you are really doing great sharing your components thinking in something decoupled and reusable? In this talk we will learn how to contribute to the NG-Ecosystem sharing your components, how to improve and share modules between applications, manage code quality, semantic versioning and more that makes your life easier and productive.

  • 3,608

More from willmendesneto