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

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


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