Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro To NativeScript with Angular

Intro To NativeScript with Angular

Welcome to NativeScript

3de614918b5182f2562bc3659de0b296?s=128

philpalmieri

May 24, 2017
Tweet

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