Intro To NativeScript with Angular

Welcome to NativeScript

Transcript

1. Intro to NativeScript with Angular Phil Palmieri PartnerComm
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