Page 1

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

Profile for Dariusz Kalbarczyk

CONQUER THE WEB AND MOBILE WORLDS WITH A SINGLE PROJECT  

Building separate web and native mobile apps, requires a lot of effort and is very expensive. This often forces us to pick just one and as a...

CONQUER THE WEB AND MOBILE WORLDS WITH A SINGLE PROJECT  

Building separate web and native mobile apps, requires a lot of effort and is very expensive. This often forces us to pick just one and as a...

Advertisement