Best practices for 

Wilson Mendes

@willmendesneto

GDE Angular

shared modules

in Angular

So, let's start?

4

TIPS

TIPS

Nice to meet you

ngular Styleguide

Tip #1

https://angular.io/guide/styleguide

Module types

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 {}

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

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>

utomate everything

Tip #4

Canary build

Static code analyse

Package publishing

Dist files

How to contribute

Demo

Documentation

Open source?

Demo time

NG-Japan updates

#Recap

#Angular Styleguide

#Analyze

#Always small

#Automate

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

GDE Angular

Obrigado

ありがとうございました