Intro To NativeScript with Angular

Transcript

1. Intro to NativeScript with Angular Phil Palmieri PartnerComm

2. None

3. Who am I : Phil Palmieri • Started in 1998

   with PHP3 • JavaScript hacking since late 90’s • Making APIs with PHP, Node, and Wordpress (yeah, yeah, i know) • Building Web / Native Apps with Angular and NativeScript the last 2 years • Involved with Orlando Devs / JS and Orlando PHP Web: ppalmieri.com Skype, Twitter, Slack: philpalmieri

4. What Is NativeScript • JavaScript toolkit for building native mobile

   apps • Distributed with NPM • Uses pure JS or TypeScript • Works seamlessly with Angular • Works with Android and iOS @philpalmieri

5. Really? Do We Need Another JS Mobile Tool? @philpalmieri

6. Getting Started Web: http://www.nativescript.org https://discourse.nativescript.org http://nativescriptsnacks.com Slack: nativescriptcommunity.slack.com Twitter: @nativescript

   Udemy: Nic Raboy https://www.udemy.com/nativescript-for-the-angular-2-developer @philpalmieri

7. How NativeScript Does It TNS - Command Line - Build

   tool - Code generator - Publishing tool - Run w/livesync - debugger @philpalmieri

8. How NativeScript Does It - 2 way data binding between

   native ui components and application code - Full (mostly) CSS support for UI components - *New: Flexbox support - Access to Native APIs - Access to tons of npm packages - Deploys code in V8 and JavaScriptCore - Multithreading - WebPack Option - AOT Compilation @philpalmieri

9. How NativeScript Does It - Builds Native projects for ios

   and android - Uses AndroidManifest and app.gradle - Uses Info.plist - Builds stand alone xcode project and android project that can be opened @philpalmieri

10. Templating...

11. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Set exact positioning <AbsoluteLayout> <Label text="This is Label 1" left="30" top="70" /> <Label text="This is Label 2" left="80" top="110" /> <Label text="This is Label 3" left="30" top="170" /> </AbsoluteLayout> @philpalmieri

12. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Align children to the edges <DockLayout stretchLastChild="true"> <Button dock="left" text="left" /> <Button dock="top" text="top" /> <Button dock="right" text="right" /> <Button dock="bottom" text="bottom" /> <Button text="fill" /> </DockLayout> @philpalmieri

13. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Rectangular layout with columns and rows <GridLayout columns="80, *, auto" rows="auto, *" > <Button col="0" /> <Button col="1" /> <Button col="2" /> <Button row="1" colSpan="3" /> </GridLayout @philpalmieri

14. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Stack children horizontally or vertically <StackLayout orientation="horizontal"> <Label text="This is Label 1" /> <Label text="This is Label 2" /> <Label text="This is Label 3" /> </StackLayout> @philpalmieri

15. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Positions children based on orientation and wraps <WrapLayout> <Label text="This is Label 1" /> <Label text="This is Label 2" /> <Label text="This is Label 3" /> <Label text="This is Label 4" /> </WrapLayout> @philpalmieri

16. Layouts ➔ AbsoluteLayout ➔ DockLayout ➔ GridLayout ➔ StackLayout ➔

    WrapLayout ➔ FlexboxLayout Positions children based on orientation and wraps <FlexboxLayout justifyContent="center"> <Label text="blue" backgroundColor="blue" height="100" width="100"></Label> <Label text="red" backgroundColor="red" height="100" width="100"></Label> </FlexboxLayout> @philpalmieri

17. Additional UI

18. Progress Telerik UI Free and Premium http://www.telerik.com/nativescript-ui - SideDrawer -

    ListView - Calendar - Charts - DataForm - Gauges - AutoComplete @philpalmieri

19. Community UI - Card View - Sliders - GridView -

    Search npmjs.org for more @philpalmieri

20. Startup Theming - https://docs.nativescript.org/ui/theme - http://www.nativescriptthemebuilder.com/

21. Angular / NativeScript Demo