Nativescript - Front in Maceió

Front in Maceió - Nativescript introduction

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. }
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
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 ❤