DevNexus 2018 - You Don't Know Angular

Youdon’tknowangular@joshj
You.
Don’t.
Know.
Angular.

#01
Mobile Architect //
Transamerica
Mobile Architect,
Entrepreneur, FPV
Pilot & Whiskey Fan.
INTR.
ODU.
CTI.
ON.

Money comes raining
down and life is as it
should be…

Usually it’s this…

Architecture.
“…in the end, architecture boils down to
whatever the important stuff is.”
- Martin Fowler

Architecture.
“the decisions that are hard to change”

Architecture.
• Code Craftsmanship
• Flow Strategies
• I/O Strategies
• Readability

Think Like an
Architect.

Craftsmanship
Code

Code.
Crafts.
man.
ship.
Find ways to love the code you
are working on.

Build a working document your
team can get behind.
Code.
Crafts.
man.
ship.

If you have a team: Have
training / idea sharing times.
(If not, take a class)
Code.
Crafts.
man.
ship.

Be a Zen Master Architect.
Code.
Crafts.
man.
ship.

FlowStrategies
#03

Nomenclature
Almost anything can be a service. A service is typically a class with a narrow,
well-defined purpose. It should do something specific and do it well.
Service
The component or set of methods that will be using our service.
Consumer

Bicycle Wheel
Flow.
stra.
teg.
ies.

Bicycle Wheel
Service
Flow.
stra.
teg.
ies.

Bicycle Wheel
Service
Consumers
Flow.
stra.
teg.
ies.

Flow.
stra.
teg.
ies.
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}Service
Consumer
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger
) {}
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}

Flow.
stra.
teg.
ies.
Bicycle Wheel
Service
Consumers
Consumers
Consumers
Consumers
Consumers
Consumers

Flow.
stra.
teg.
ies.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Service

Flow.
stra.
teg.
ies.
Bicycle Wheel

Waterfall
Flow.
stra.
teg.
ies.

Flow.
stra.
teg.
ies.

Waterfall
ServiceFlow.
stra.
teg.
ies.

Service NavControllerFlow.
stra.
teg.
ies.

Don’t Use Events(Unless you absolutely have to…)

Flow.
stra.
teg.
ies.
Waterfall
Service NavController

Flow.
stra.
teg.
ies.
Waterfall
Service
Consumer
NavController
PageComponent

Flow.
stra.
teg.
ies.
Waterfall
Service
Consumer
Consumer Child
NavController
PageComponent
ButtonComponent

@Injectable()
export class NavigationService {
public navigate() {
// Do something
}
}
Service

@Injectable()
public navigate() {
// Do something
}
}
export class MyPageComponent {
constructor (
public navigationService: NavigationService
) {}
}
<nav-button [navigationService]="navigationService">
Service
Consumer

@Injectable()
public navigate() {
// Do something
}
}
export class MyPageComponent {
constructor (
public navigationService: NavigationService
) {}
}
export class NavButtonComponent {
@Input() navigationService: NavigationService;
onButtonClick() {
this.navigationService.navigate();
}
}
<nav-button [navigationService]="navigationService">
Service
Consumer
Consumer Child

import { NavigationService } from './shared/navigation.service';
@Component({
selector: 'nav-button',
template: `<button (click)="navigationService.navigate()">Navigate</button>`
})
export class NavButtonComponent {
@Input() navigationService: NavigationService;
}

Flow.
stra.
teg.
ies.
The Molecule

Flow.
stra.
teg.
ies.
https://angular-realworld.stackblitz.io
Modular

Flow.
stra.
teg.
ies.
https://angular.io/guide/ngmodule
NgModules

Flow.
stra.
teg.
ies.
Functional
Blocks
Shared

Flow.
stra.
teg.
ies.
Shared

Flow.
stra.
teg.
ies. export * from './article-helpers';
export * from './buttons';
export * from './layout';
export * from './list-errors.component';
export * from './models';
export * from './services';
export * from './shared.module';
export * from './show-authed.directive';

Flow.
stra.
teg.
ies.
import { ArticleListComponent } from '../shared';
import { ArticleListComponent } from '../shared/article-
helpers/article-list.component';

Flow.
stra.
teg.
ies.
Module
Folder

Flow.
stra.
teg.
ies.
• Organized
• Easy to reference
• Self contained
• Safer for teams
Benefits

Flow.
stra.
teg.
ies.
Module

Flow.
stra.
teg.
ies.
NgAppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NavButtonComponent } from './nav-
button.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,
NavButtonComponent],
})

Flow.
stra.
teg.
ies. Imports

Flow.
stra.
teg.
ies.
Imports
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,
NavButtonComponent],
})

Flow.
stra.
teg.
ies.
Imports
import { ArticleModule } from './article/article.module';
@NgModule({
declarations: [],
imports: [
ArticleModule,
],
providers: [],
bootstrap: [AppComponent]
})

Flow.
stra.
teg.
ies.
import { ModuleWithProviders, NgModule } from '@angular/
core';
import { RouterModule } from '@angular/router';
import { ArticleComponent } from './article.component';
import { ArticleCommentComponent } from './article-
comment.component';
import { ArticleResolver } from './article-
resolver.service';
import { MarkdownPipe } from './markdown.pipe';
import { SharedModule } from '../shared';
article.module.ts

Flow.
stra.
teg.
ies.
const articleRouting: ModuleWithProviders =
RouterModule.forChild([
{
path: 'article/:slug',
component: ArticleComponent,
resolve: {
article: ArticleResolver
}
}
]);
article.module.ts

Flow.
stra.
teg.
ies.
@NgModule({
imports: [
articleRouting,
SharedModule
],
declarations: [
ArticleComponent,
ArticleCommentComponent,
MarkdownPipe
],
providers: [
ArticleResolver
]
})
export class ArticleModule {}
article.module.ts

Flow.
stra.
teg.
ies.
https://angular-realworld.stackblitz.io
Molecule

I/O Stratagies.

#01
Whenever data
enters or leaves the
application have a
strategy for hiding
the source or the
target from the
application as a
whole.
I/O
Stratagies.

I/O Stratagies.
Components
Services
Adapters

I/O.
stra.
teg.
ies.
Article Component http()

I/O.
stra.
teg.
ies.
Article Component
Article Service http()
getArticles()

I/O.
stra.
teg.
ies.
Article Component
API Service http()
getArticles()
this.apiService.get()Article Service

I/O.
stra.
teg.
ies.
Article Component
ApiService
apiHttpStrategy
getArticles()
this.apiService.get()Article Service
apiFileStrategy
API Service

@NgModule({
declarations: [
],
imports: [
],
providers: [
{
provide: ApiService,
useFactory: (http: Http, jwtService: JwtService) => {
if (environment.production) {
return new ApiService(http, jwtService);
} else {
return new MockApiService(http, jwtService);
}
},
deps: [Http, JwtService]
}
],
bootstrap: [AppComponent]
});
I/O.
stra.
teg.
ies.

I/O.
stra.
teg.
ies.
Article Component
Analytics Service http()
event()

I/O.
stra.
teg.
ies.
Article Component
Analytics Service event()
this.analytics.event()
Google Strategy http()

I/O.
stra.
teg.
ies.
Article Component
Analytics Service
Crashlytics Firebase
event()
this.analytics.event()

export class AnalyticsService {
private strategies: Array<any>
constructor(
private crashlyticsAnalytics: CrashlyticsAnalyticsService,
private firebaseAnalyticsService: FirebaseAnalyticsService,
private googleAnalyticsService: GoogleAnalyticsService
) {
this.strategies = [
crashlyticsAnalytics,
firebaseAnalyticsService,
googleAnalyticsService
]
};
public event() {
for (let strategy of this.strategies) {
strategy.event();
}
};
}

Readability

“Any fool can write code that a
computer can understand. Good
programmers write code that humans
can understand.”
Martin Fowler

I/O.
stra.
teg.
ies.
The rule of
“huh”

I/O.
stra.
teg.
ies.
L.I.F.T
• Locate
• Identify
• Flat
• Try to be DRY

I/O.
stra.
teg.
ies.
Import line spacing
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Hero } from './hero.model';
import { ExceptionService} from '../../core';

I/O.
stra.
teg.
ies.
Component
Selector
Names
selector: 'toh-hero-button',
<toh-hero-button></toh-hero-button>

I/O.
stra.
teg.
ies.
Don’t Abbreviate your
constructor arguments or
instantiated classes.
constructor(
private navigationService: NavigationService,
private myElementReference: MyElementReference
) {
this.fooAwesome = new FooAwesome();
};

I/O.
stra.
teg.
ies.
Remember: 
A bad Function Name
can put you in
aFunc();

I/O.
stra.
teg.
ies.
constructor(
private navServ: NavigationService,
private el: MyElementReference
) {
this.foo = new FooAwesome();
};
No…

I/O.
stra.
teg.
ies.
Small Functions
private specificTask() {
var doSomethingWell = true;
var doSomethingSpecific = true;
return (doSomethingWell && doSomethingSpecific);
}

I/O.
stra.
teg.
ies.
Use a Code Tool

I/O.
stra.
teg.
ies.
Use Semicolons;
seriously.

END.
@joshj //
joshjensen.com

DevNexus 2018 - You Don't Know Angular

More Related Content

Recently uploaded

Featured

DevNexus 2018 - You Don't Know Angular