Nativescript - Building truly native apps with Javascript

Transcript

1. NativeScript
 Building truly native mobile apps with javascript

2. None

3. } $ whoami Co-founder Software Developer Márcio Vicente marciovicente

4. } The problem Native UX
 Native APIs Web Easy to

   learn
 Reuse Code (desktop/mobile) Hybrid

5. } What is NativeScript? What is NativeScript? "An open source

   framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular and CSS, and get native UI and performance on iOS and Android"

6. Cordova Plugins > Behind the scenes >

7. Not like Hybrid Apps There’s no DOM to manipulate or

   style
 No WebView }

8. Not like React Native Unlimited API Faster }

9. Not like Xamarin No cross-compile
 No bindings required to access

   native APIs }

10. Stack } or/and or/and 2

11. Architectural pattern
 No more MVC M V VM Model View

    View-Model Data logic UI Application Logic }

12. Layout system } Absolute Dock Grid Stack Wrap

13. Extensible } Plugins

14. Full access to 
 Android and iOS APIs

15. } //Accessing Native APIs

16. }

17. None

18. J V M Javascript Virtual Machine JavaScriptCore V8

19. JVM } Foo() _Foo() C++ JNI JAVA OBJ-C

20. } UI Components

21. }

22. }

23. }

24. } Custom components

25. } // app/components/buttons/flat.xml <button>{{ label }}</button> 
 
 // app/main.xml

    <Page xmlns:buttons=“components/buttons“> <buttons:flat label=“{{ btnLabel }}” /> </Page> // Custom components

26. } // app/page.ts @Component({ selector: ‘flat-btn', template: ‘<button class="flat">{{label}}</button>’ });

    // app/page.html <flat-btn label=“Submit”></flat-btn> Custom components

27. } Wrappers

28. } //Importing wrappers

29. } Create your own NS module

30. } //Custom NS plugins // custom-plugins/device.ios.js
 module.exports = { version:

    UIDevice.currentDevice().systemVersion }
 
 // custom-plugins/device.android.js
 module.exports = { version: Build.VERSION.RELEASE }
 
 // app.js
 import device from ‘./custom-plugins/device’;
 console.log(device.version);

31. } Same codebase

32. } //Same codebase <Button ios:text=“Submit" android:text=“Send" /> // from attributes

    if (page.ios) {
 new UiAlertDialog().show('text');
 } else {
 new CustomJavaDialog('text'); } // from JS

33. There’s no silver bullet

34. } Get started $ npm install -g nativescript 
 $

    tns create my-app $ tns platform add ios $ tns build ios $ tns livesync ios --emulator --watch

35. } Some tips • Use VS Code (+ NS extension)

    • Create from template • nativescript.rocks

36. } THX!
 
 Questions?