Nativescript - Building truly native apps with Javascript

Nativescript - Building truly native apps with Javascript

3279923e9153417b8d3d76ec85402dca?s=128

Márcio Vicente

October 08, 2016
Tweet

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?