Nativescript - Building truly native apps with Javascript

Transcript

1. NativeScript
 Building truly native mobile apps with javascript
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. }
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?