Best practices for 

Wilson Mendes

@willmendesneto

GDE Angular

shared modules

in Angular

Hi, it's me

#phototime

Nodebots book for free

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

 

2. Decrease the price until the minimum

 

3. Enjoy

So, let's start?

4

TIPS

TIPS

Nice to meet you

ngular Styleguide

Tip #1

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

When you use a component ...

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

https://goo.gl/h2D1YG

#Recap

# Angular Styleguide

# Analyse your bundle

# Be 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

ありがとうございました

Best practices for shared modules in Angular

By willmendesneto

Best practices for shared modules in Angular

Are you working with a big Angular application with shared components? Don't you know how to manage or share these components between applications? How to start and validate if you are really doing great sharing your components thinking in something decoupled and reusable? In this talk, I will share my experience and decisions about improvements sharing modules between applications, how to manage code quality, semantic versioning and more that makes our team deliver more valuable features.

  • 1,833
Loading comments...

More from willmendesneto