Intro To NativeScript with Angular

Transcript

1. 1.

   Intro to NativeScript with Angular Phil Palmieri PartnerComm

2. 2.

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

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

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

   How NativeScript Does It TNS - Command Line - Build

   tool - Code generator - Publishing tool - Run w/livesync - debugger @philpalmieri
8. 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. 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. 10.

    Templating...

11. 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. 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. 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. 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. 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. 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. 17.

    Additional UI

18. 18.

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

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

    Community UI - Card View - Sliders - GridView -

    Search npmjs.org for more @philpalmieri
20. 20.

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

21. 21.

    Angular / NativeScript Demo