Nativescript - Front in Maceió

Nativescript - Front in Maceió

Front in Maceió - Nativescript introduction

3279923e9153417b8d3d76ec85402dca?s=128

Márcio Vicente

March 18, 2017
Tweet

Transcript

  1. NativeScript
 Building truly native mobile apps with javascript }

  2. } $ whoami Co-founder Software Engineer Márcio Vicente marciovicente

  3. ARE YOU KIDDING ME? ARE YOU KIDDING ME? ARE YOU

    KIDDING ME? ARE YOU KIDDING ME?
  4. Native UX
 Native APIs Web Easy to learn
 Reuse Code

    (desktop/mobile) Hybrid The problem }
  5. 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. Behind the scenes Cordova Plugins 1.7M+ Developer Community 130K+ Customers

    300+ Awards
  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 "This is your last chance. After this, there is

    no turning back…”
  11. Architecture pattern
 No more MVC M V VM Model View

    View-Model Data logic UI Application Logic
  12. Layout system Stack Wrap } Absolute Flexbox Dock Grid

  13. Styling } Limited CSS properties Themes "Bootstrap" SAAS support Separated

    files by platform
 or resolution
  14. Plugins } Extensible

  15. Full access to 
 Android and iOS APIs

  16. }

  17. }

  18. None
  19. None
  20. //main-page.xml }

  21. }

  22. Truly full access to 
 Android and iOS APIs

  23. //Accessing Native APIs }

  24. }

  25. TELL ME HOW TELL ME HOW TELL ME HOW TELL

    ME HOW
  26. J V M Javascript Virtual Machine JavaScriptCore V8

  27. JVM Foo() → _Foo() C++ JNI JAVA OBJ-C

  28. UI Components

  29. }

  30. }

  31. }

  32. Wrappers

  33. } //Importing wrappers

  34. Create your own NS module

  35. } //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);
  36. Same Codebase

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

    (page.ios) {
 new UiAlertDialog().show('text');
 } else {
 new CustomJavaDialog('text'); } // from JS my-component.android.ts
 my-component.ios.ts // from file
  38. There’s no silver bullet

  39. None
  40. } Get started $ npm install -g nativescript 
 $

    tns create my-app $ tns platform add ios $ tns run ios --emulator
  41. Some tips • Use VS Code (+ NS extension) •

    Create from template • nativescript.rocks
  42. We’re hiring

  43. } #obrigadoMCZ ❤