CONQUER THE WEB AND MOBILE WORLDS WITH A SINGLE PROJECT

Conquer the web and mobile worlds with a single project DARIUSZ KALBARCZYK

2019

Who am I?

www.helion.pl/autorzy/dariusz-kalbarczyk

!2

@ngKalbarczyk

#ngPolandConf #jsPolandConf

!3

@ngKalbarczyk

!4

@ngKalbarczyk

!5

@ngKalbarczyk

!6

@ngKalbarczyk

Baby

+

=

!7

@ngKalbarczyk

!8

@ngKalbarczyk

@nativescript/schematics

!9

@ngKalbarczyk

!10

@ngKalbarczyk

iOS

Android

Web

!11

@ngKalbarczyk

Why?

!12

@ngKalbarczyk

Time for a quiz!

!13

@ngKalbarczyk

True or true?

Companies today are producing more source code than ever before!

!14

@ngKalbarczyk

True or true?

Successfully organizing all these code, dependencies between apps and frameworks is crucial for development velocity.

!15

@ngKalbarczyk

True or true?

{N} is the best!

!16

@ngKalbarczyk

7{N} reasons

One project Three platforms !17

@ngKalbarczyk

7{N} reasons

#reuse !18

@ngKalbarczyk

7{N} reasons

#standardization

!19

@ngKalbarczyk

7{N} reasons

#oneTeam

!20

@ngKalbarczyk

7{N} reasons

#visibility !21

@ngKalbarczyk

7{N} reasons

#centralization

!22

@ngKalbarczyk

7{N} reasons

#synchronization

!23

@ngKalbarczyk

7{N} reasons

#completeness

!24

@ngKalbarczyk

Disadvantages?

!25

@ngKalbarczyk

What Does This Button Do?

!26

@ngKalbarczyk

<A> architecture

!27

@ngKalbarczyk

The 7 1.

2.

3.

4.

5.

6.

7.

Components Templates Metadata Data binding Directives Services Dependency Injection a.k.a. DI !28

@ngKalbarczyk

+2

1.Modules 2.Routing

!29

@ngKalbarczyk

Component export class HomeComponent {

title = 'Star Wars';

director = 'George Lucas';

budget = '$11,000,000';

cumulativeWorldwideGross = '$775,398,007';

clickMessage = '';

onClickMe() {

this.clickMessage = 'You are my hero!';

}

} !30

@ngKalbarczyk

Web <div>

Title: {{ title }}

Director: {{ director }}

budget: {{ budget }}

cumulativeWorldwideGross: {{ cumulativeWorldwideGross }}

<button (click)="onClickMe()">Click me!</button>

{{clickMessage}}

</div>

!31

@ngKalbarczyk

Mobile <ActionBar [title]="title"></ActionBar>

<StackLayout>

<Label text="Director: {{director}}"></Label> <Label text="Budget: {{budget}}"></Label>

<Label text="Cumulative Worldwide Gross: {{cumulativeWorldwideGross}}"></Label>

<button (tap)="onClickMe()">Click me!</button> <Label text="{{clickMessage}}"></Label>

</StackLayout>

!32

@ngKalbarczyk

Reuse component Movies Service

Home Component

movies.service.ts

home.component.ts home.component.html

News Service

home.component.tns.html

news.service.ts

!33

@ngKalbarczyk

Reuse component Movies Service

Home Component

movies.service.ts

home.component.ts home.component.html

News Service

home.component.tns.html

news.service.ts

!34

@ngKalbarczyk

Angular Component home.component.ts home.component.css

home.component.html

home.component.tns.css

home.component.tns.html

!35

@ngKalbarczyk

Sharing

• Routes for navigation,

• Services for common business logic,

• Component Class definition for common behaviour of a component

!36

@ngKalbarczyk

Splitting the code

• •

UI Layer (CSS and HTML)

NgModules

!37

@ngKalbarczyk

Creating a New Project Prerequisites Angular CLI - v6.1.0 or newer npm i -g @angular/cli The latest version of NativeScript Schematics npm i -g @nativescript/schematics

ng new --collection=@nativescript/ schematics project-name --shared !38

@ngKalbarczyk

tns run ios --bundle

!39

@ngKalbarczyk

ng serve

!40

@ngKalbarczyk

Migrating Project Structure ng add @nativescript/schematics The ng add @nativescript/schematics command converts the project to a code-sharing structure, but it doesn't convert your app contents.

The next step from here is to migrate your: - navigation - components - modules

!41

@ngKalbarczyk

Thank You ngKalbarczyk ngKalbarczyk dKalbarczyk darek@ngpoland.pl

!42

@ngKalbarczyk