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. 3.

    ARE YOU KIDDING ME? ARE YOU KIDDING ME? ARE YOU

    KIDDING ME? ARE YOU KIDDING ME?
  2. 4.

    Native UX
 Native APIs Web Easy to learn
 Reuse Code

    (desktop/mobile) Hybrid The problem }
  3. 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"
  4. 11.

    Architecture pattern
 No more MVC M V VM Model View

    View-Model Data logic UI Application Logic
  5. 16.

    }

  6. 17.

    }

  7. 18.
  8. 19.
  9. 21.

    }

  10. 24.

    }

  11. 29.

    }

  12. 30.

    }

  13. 31.

    }

  14. 32.
  15. 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);
  16. 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
  17. 39.
  18. 40.

    } Get started $ npm install -g nativescript 
 $

    tns create my-app $ tns platform add ios $ tns run ios --emulator
  19. 41.

    Some tips • Use VS Code (+ NS extension) •

    Create from template • nativescript.rocks