1 of 93

Ionic, ngrx and Angular

building web and mobile apps with one code base

2 of 93

Duncan Hunter

@DuncHunter

3 of 93

4 of 93

�Mobile��

�Web��

5 of 93

University

School Chain

Investment Company

6 of 93

foodzone

7 of 93

�Mobile��

�Web��

�Core��

8 of 93

9 of 93

10 of 93

11 of 93

12 of 93

13 of 93

Then most recently the team at nrwhl which is a team of consultants who are mostly x angular core team members who specialise on enterprise clients in America, released a set of extension on top of the angular cli which is the most popular tool chain for building and bundling angular applications

And nx follows a monorepo approach where you make multiple angular frontends and share code between with shared libraries or libs.

So a mono repo basically is sticking all your code in one repository and this means sharing the dependencies and building the whole suite of applications everytime you build. Which can make your builds longer but also can be great for assurance that your shared code is not going to break the apps that consume it

So more recently I have been using this approach to share code between a web and mobile app as an alternate option and I am going to run you through whats good and bad and how to do each option

14 of 93

Agenda

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

15 of 93

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

16 of 93

AngularJS is a superheroic JavaScript framework

17 of 93

18 of 93

One Framework

Mobile & Desktop

19 of 93

Angular CLI

Docs

Big Framework

Big Community

Universal

Patterns - ngrx

Stable

Super FAST !

20 of 93

Internet Usage 2009 - 2016

51.3 %

Mobile & Tablet

48.7 %

Desktop

21 of 93

=

Cordova

Ionic

Angular

Open source SDK for building mobile apps

22 of 93

Ionic 1

23 of 93

Ionic 3

24 of 93

Ionic CLI creates your project

$ ionic start myNewProject tabs

cd ./myNewProject

ionic serve

25 of 93

Ionic CLI builds the project for the app store

$ ionic cordova run android --release

26 of 93

One app that looks native on each device

27 of 93

28 of 93

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

29 of 93

�Mobile��Components

Routing

Services�State�

�Web��Components

Routing

Services

State

30 of 93

�Mobile��Components

Routing�

�Web��Components

Routing�

�Core��

Angular Services

State

Components ?

31 of 93

32 of 93

33 of 93

34 of 93

�Mobile��

�Web��

�Core��

35 of 93

Angular Package Format v5.0

core.metadata.json - Metadata for AOT and angular compiler

core.d.ts - Typescript definitions and code completion

core.js - Flattened ES Module or FESM

core.umd.js - Universal Module Definition

closure compiler annotations

36 of 93

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

37 of 93

=

RxJS

redux Pattern

ngrx

Angular

ngrx is the redux pattern for Angular

+

38 of 93

ngrx promotes moving logic out of components

39 of 93

CONTAINER COMPONENT

SERVICE A

40 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

SERVICE A

41 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

SERVICE A

42 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

PRESENTATIONAL COMPONENT

@Input/@Output

SERVICE A

43 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

PRESENTATIONAL COMPONENT

@Input/@Output

PRESENTATIONAL COMPONENT

@Input/@Output

SERVICE A

44 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

PRESENTATIONAL COMPONENT

@Input/@Output

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

45 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

46 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

47 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

SERVICE B

48 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

SERVICE B

CONTAINER COMPONENT

SERVICE A

SERVICE B

49 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

SERVICE B

CONTAINER COMPONENT

SERVICE A

SERVICE B

50 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

SERVICE B

CONTAINER COMPONENT

SERVICE A

SERVICE C

SERVICE D

SERVICE B

SERVICE C

SERVICE D

SERVICE B

51 of 93

CONTAINER COMPONENT

SERVICE A

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

SERVICE A

SERVICE B

CONTAINER COMPONENT

SERVICE A

SERVICE C

SERVICE D

SERVICE B

SERVICE C

SERVICE D

SERVICE B

52 of 93

CONTAINER COMPONENT

STORE

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER COMPONENT

PRESENTATIONAL COMPONENT

@Input/@Output

CONTAINER

COMPONENT

STORE

CONTAINER COMPONENT

STORE

53 of 93

Component

Store

Reducers

ACTIONS

SELECTORS

Effects

Services

ACTIONS

NEW STATE

{

type: 'DELETE_COMPANY',

payload: {id:1}

}

{

companies: [

{id:1, name:'SSW'},

{id:2, name:'Microsoft'}

],

contacts: [

{id:1, name:Duncan}

]

};

{

companies: [

{id:2, name:'Microsoft'}

],

contacts: [

{id:1, name:Duncan}

]

};

companies: [

{id:2, name:'Microsoft'}

];

new state

action

{

type: 'DELETE_COMPANY_SUCCESS',

payload: {id:1}

}

action

store state

i've really lied to you here. because reducers are meant to be pure functions, and a pure function is a function that given the same arguments will always return the same results.
so making http requests to delete companies would mean these are no longer pure functions because you cannot guarantee what would come back from the server and this is where a library called ngrx effects can help deal with these side-effects like http requests.
so let's start again

we have our store
and we have our current state with an array of companies and contacts
i can select that company state into the component
i can dispatch an action with a type and a payload of delete company

but now there are two people listening to dispatched actions.
there are reducers.... and there are effects.
the job of the effects are to handle any actions that have side effects, leaving the reducers with the job of just updating the store
the effect is what would actually pick up the delete company action
if will call the company service to do the delete, and if successful it will dispatch another action, the 'delete company success action'
and if it was to fail it would dispatch 'delete company failure'.. but let's stick with the happy path.
the reducer handles the 'delete company success message', takes the current state, the action and makes new state, and updates the store.
now we are back to where we were before with a deleted company.
so you can see how ngrx can be really powerful for pushing logic out of your components.

54 of 93

export class LoginComponent {

constructor(private store: Store<AuthState>) {}

login(authenticate: Authenticate): void {

this.store.dispatch({

type: 'LOGIN',

payload: authenticate

});

}

Inject the store

Dispatch an action

55 of 93

export class LayoutComponent implements OnInit {

user$: Store<User>;

constructor(private store: Store<AuthState>) {}

ngOnInit() {

this.user$ = this.store.select(getUser);

}

Inject the store

Select state

56 of 93

57 of 93

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

58 of 93

59 of 93

�Mobile��Components

Routing�

�Web��Components

Routing�

�Core��

Angular Services

State management

60 of 93

61 of 93

62 of 93

63 of 93

64 of 93

65 of 93

66 of 93

67 of 93

68 of 93

@NgModule({

imports: [CommonModule],

declarations: [SampleComponent],

exports: [SampleComponent]

})

export class SampleModule {

static forRoot(): ModuleWithProviders {

return {

ngModule: SampleModule,

providers: [SampleService]

};

}

Export components

Register services

69 of 93

import { SampleModule } from '@sample-package/core';

@NgModule({

imports: [

SampleModule.forRoot()

]

})

export class AppModule {}

Register angular module

npm install the package

70 of 93

npm link

cd my-app

npm link my-shared-code

71 of 93

npm install ????

72 of 93

Hosted Package Manager

Paid - like npmjs.org

Private - like verdaccio

73 of 93

npm install from git repo url

"dependencies": {

"@angular/animations": "^4.3.1",

"@angular/router": "^4.0.0",

"@sample/core": "git://github.com/sample/core.git",

"@ngrx/router-store": "^4.0.0",

"@ngrx/store": "^4.0.0",

"rxjs": "^5.1.0",

"zone.js": "^0.8.4"

},

74 of 93

npm packages

Versioned packages
Stable code
Needs to be public
Needs more tests
Time to configure
AOT - Ahead of Time Compilation

75 of 93

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

76 of 93

77 of 93

nx = angular cli on steroids

78 of 93

79 of 93

�Mobile��

�Web��

�Core��

80 of 93

�Mobile��

�Web��

�Nx libs��

Angular Services

State management

81 of 93

Nx Workspaces - apps & libs

sample-web

layout

sample-mobile

layout

photos

auth

profile

material

data-models

reusable libs

sampe-web libs

sample-mobile libs

82 of 93

83 of 93

84 of 93

85 of 93

86 of 93

import { AuthModule } from '@sample/state/auth';

@NgModule({

imports: [

BrowserModule,

AuthModule.forRoot()

],

declarations: [AppComponent],

bootstrap: [AppComponent]

})

Import nx lib

Register nx lib as a module

87 of 93

duncanhunter.com.au

88 of 93

Monorepo

Faster to configure a project
Easier to integrate shared code
Shared dependencies?
CI/CD build size

89 of 93

Where to from here ?

90 of 93

91 of 93

Summary

The new Angular and Ionic

Code reuse options

Reusable logic with ngrx

Option 1 - npm packages

Option 2 - nx monorepo

92 of 93

Thank you

@DuncHunter