Nativescript - Front in Maceió

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 ❤