Intro To NativeScript with Angular

Intro To NativeScript with Angular

Welcome to NativeScript

3de614918b5182f2562bc3659de0b296?s=128

philpalmieri

May 24, 2017
Tweet

Transcript

  1. 2.
  2. 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
  3. 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
  4. 7.

    How NativeScript Does It TNS - Command Line - Build

    tool - Code generator - Publishing tool - Run w/livesync - debugger @philpalmieri
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 18.

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

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

    Community UI - Card View - Sliders - GridView -

    Search npmjs.org for more @philpalmieri