Conociendo Nativescript

Slide 1

Slide 1 text

Conociendo Nativescript Victoria Ubaldo G. @VikyAle

Slide 2

Slide 2 text

Photo goes here Hola! ● Ing. de Computación y Sistemas, USMP. Mención en Ing. Software. ● System Engineer,Tata Consulting Services. ● Manager, WTM Lima. ● Full Stack Developer. ● <3 Compartir y aprender en comunidades de tecnología.

Slide 3

Slide 3 text

Fuente https://goo.gl/08ND0v

Slide 4

Slide 4 text

¿Qué es Nativescript? ¿y por qué debería usarlo?

Slide 5

Slide 5 text

` Es un framework opensource que nos permite crear aplicaciones nativas con Javascript.

Slide 6

Slide 6 text

` No WebView (HTML con estilo parecido a componentes nativos) No hay DOM que manipular

Slide 7

Slide 7 text

` No Cross-Compile (Interpretar código y transformarlo a nativo) No .Net

Slide 8

Slide 8 text

` 100% acceso a APIs nativas. Sin escribir en Object C,Swift o Java

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

100 % Web 100 % Nativo Híbrida Fuente https://goo.gl/ph21U0

Slide 11

Slide 11 text

100 % Web 100 % Nativo Fuente https://goo.gl/ph21U0

Slide 12

Slide 12 text

Híbrida Tradicional VS NativeScript WebView Requiere plugins para acceder a APIs nativas. (Ejm: cámara) Demora en actualizaciones JS Angular CSS Web/Móvil Cómo para desarrolladores web UI Nativa Buen performance Acceso al 100% a APIs nativas. Actualizaciones automáticas Fuente https://goo.gl/ph21U0

Slide 13

Slide 13 text

Nativa Pura VS NativeScript Máximo desempeño. Código por plataforma (lenguaje). No permite compartir código con web UI Nativa Buen performance Acceso al 100% a APIs nativas. Actualizaciones automáticas Un lenguaje para todas las plataformas. Reusa habilidades de web (JS , CSS). Reusa librerias web (Angular 2). Sí permite compartir código con web Fuente https://goo.gl/ph21U0

Slide 14

Slide 14 text

` ● No Jank ● Access All The Things ● Native UI ● Extensible ● Quick to learn ● IDE ( Visual Studio Code) ● Cross-Platform (iOS,Android,próximamente Windows Phone - CSS Especíﬁco). ● OpenSource ● Angular & TypeScript ● Style with CSS (SASS & LESS)

Slide 15

Slide 15 text

` Creado y soportado por :

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Native Layout Containers

Slide 19

Slide 19 text

` Existe mucho código hecho

Slide 20

Slide 20 text

¿Cómo se trabaja?

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Get Started

Slide 26

Slide 26 text

ó Tienes dos caminos npm install -g nativescript

Slide 27

Slide 27 text

` ● Usa AppBuilder o Screen Builder. ● Desarrollo en la nube. ● Desarrolladores en Windows escribiendo para iOS. Fuente https://goo.gl/ph21U0

Slide 28

Slide 28 text

` npm install - g nativescript tns create my-app tns platform add ios tns build ios tns livesync ios --emulator --watch

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

tns create my-app

Slide 31

Slide 31 text

tns platform add android

Slide 32

Slide 32 text

` Nativescript & Javascript

Slide 33

Slide 33 text

Estructura del Proyecto Inicial

Slide 34

Slide 34 text

node_modules

Slide 35

Slide 35 text

Dependencias

Slide 36

Slide 36 text

Código nativo por plataforma

Slide 37

Slide 37 text

main-page.xml

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

tns run android

Slide 40

Slide 40 text

tns livesync android --watch

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

main-page.js

Slide 43

Slide 43 text

main-view-model.js

Slide 44

Slide 44 text

En el archivo app.js indico la aplicación a iniciar.

Slide 45

Slide 45 text

` Nativescript & Angular 2

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Showcases https://www.nativescript.org/showcases

Slide 48

Slide 48 text

MeWatt utiliza NativeScript para construir una aplicación para iOS y Android que se pueden utilizar para administrar el uso de energía de sus aplicaciones de forma remota Fuente http://mewatt.com/

Slide 49

Slide 49 text

` ● Native UI ● Extensible ( NPM , CocoaPods (iOS) and Gradle (Android) ) ● Quick to learn ● Cross-Platform ● Strong Backing( Telerik) ● Open Source Conclusiones