Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nativescript - Front in Maceió

Nativescript - Front in Maceió

Front in Maceió - Nativescript introduction

Márcio Vicente

March 18, 2017
Tweet

More Decks by Márcio Vicente

Other Decks in Programming

Transcript

  1. ARE YOU KIDDING ME? ARE YOU KIDDING ME? ARE YOU

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

    (desktop/mobile) Hybrid The problem }
  3. 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"
  4. Architecture pattern
 No more MVC M V VM Model View

    View-Model Data logic UI Application Logic
  5. }

  6. }

  7. }

  8. }

  9. }

  10. }

  11. }

  12. } //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);
  13. } //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
  14. } Get started $ npm install -g nativescript 
 $

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

    Create from template • nativescript.rocks