ngular best practices

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Hi, it's me

DURING THE FREE TIME...

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

2. Decrease the price to $0,00

3. Enjoy

Nodebots book free!

So, let's start?

<webapps/> are evolving

and we need to be up-to-date

Share components is <3

Layout container

<page1>

</page1>

<component1 />

<component2>

</component2>

<component3 />

4 TIPS

TIPS

Nice to meet you

ngular Styleguide

Tip #1

https://angular.io/guide/styleguide

Types of Modules

CORE

FEATURE

CUSTOM

SHARED

Lazy loading

EVERYTHING

@NgModule({
  providers: []
})

class MyModule {
  static forRoot() {
    return {
      ngModule: MyModule,
      providers: [ /* LIST OF YOUR PROVIDERS */]
    }
  }
}

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyModule } from './my.module';

export const routes: Routes = [
  {
    path: 'crisis',
    loadChildren: 'app/crisis/crisis.module#CrisisModule'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    MyModule.forRoot()
  ],
  exports: [RouterModule, RouterModule]
})

export class AppRoutingModule {}

npm install @herodevs/lazy-af

...

@NgModule({
  imports: [LazyModule],
})
export class AppModule {}

...

<div (mouseover)="load = true">
  Hover to load TestModule
</div>
<lazy-af
  *ngIf="load"
  moduleName="src/app/test/test.module#TestModule"
>
</lazy-af>

nalize your bundle

Tip #2

webpack-bundle-analyzer

lways small

Tip #3

Integration in your module

Easy to maintain

Refactor across teams

Why small packages

When you use a component ...

Demo page, please

Plug-and-play

that is how components should be 😉


...
import {
  NgxSkeletonLoaderModule
} from 'ngx-skeleton-loader';
...

@NgModule({
  ...
  imports: [NgxSkeletonLoaderModule],
  ...
})

export class AppModule { }



<ngx-skeleton-loader
  count="5"
  [theme]="{
    'border-radius': '5px',
     height: '50px'
  }"
>
</ngx-skeleton-loader>

Decoupling Business Logic

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 [featureName]="'enableContent'">

  <p>Enabled content</p>

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

  <feature-toggle
    [featureName]="'disabledContent'"
    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>

ngDoCheck: 4.7ms

ngZone: 2.3ms

lways improve DX

Tip #4

Have you ever have problems with

Documentation

Deployments

Maintainers

Communication

Migration docs

Dependencies

Monorepos

...can be a good solution

Organized

Tooling

Tasks

Traceability

Cross-project

Dependencies

Why monorepos

yarn affected:build --base=master

// Running affected only

// E2E Tests

yarn affected:test --base=master

yarn affected:e2e --base=master

// Unit Tests

// Build

Greenkeeper

Code Climate

Publishing a module

...can give you some hard time

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

Blue Green dep

Canary release

Dark launch

Feature Flag Rollout

Release Strategy

MASTER

BRANCH

Landkid

{1}

{2}

{3}

{4}

{5}

{2}

{6}

{5}

{1}

}

MASTER

BRANCH

{1}

{2}

{3}

{4}

{5}

{2}

{6}

{5}

{1}

}

MASTER

BRANCH

MASTER

BRANCH

{1}

{2}

{3}

{4}

{5}

{6}

}

{2}

{5}

{1}

MASTER

BRANCH

MASTER

BRANCH

<ngx-recap/>

Angular styleguide

Analyse your bundle

Improve dev experience

Automate everything

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies