NativeScript in Action
Michael E. Branstein and Nicholas J. Branstein
  • MEAP began July 2016
  • Publication in October 2017 (estimated)
  • ISBN 9781617293917
  • 350 pages (estimated)
  • printed in black & white

Using JavaScript and CSS to write true native-quality mobile applications is an appealing, but elusive, goal. The NativeScript mobile framework provides a uniquely-powerful solution that simplifies the web-to- mobile divide without compromising features, performance, or design. With NativeScript, you write your apps in standard JavaScript and CSS. However, rather than translating JavaScript into lookalike elements, NativeScript directly calls the native platform components, so that your apps look exactly as iOS and Android intended. You can directly manipulate the native APIs with your JavaScript code, and it's a snap to write custom plug-ins to extend the NativeScript feature set.

"It's a great guide to getting started with NativeScript."

~ Stephen Byrne

"The Branstein brothers do a great job laying down the complexity and misunderstandings of hybrid/JIT app building with this book."

~ Joseph Tingsanchali

"Does a good job of taking the reader from a complete beginner to getting an app out to market."

~ Davey Montooth

Table of Contents detailed table of contents

Part 1: The basics

1. Why NativeScript

1.1. Introducing NativeScript

1.2. What You Will Learn in This Book

1.3. What NativeScript Means to Mobile Development

1.3.1. Different Types of Mobile Apps

1.3.2. Why NativeScript is Important

1.3.3. What types of apps can be built with NativeScript

1.4. How NativeScript Works

1.5. Summary

2. Your first app

2.1. Hello world

2.1.1. NativeScript CLI

2.1.2. Using the CLI to scaffold your project

2.1.3. Initial platform and development tools

2.1.4. Adding and removing platforms

2.1.5. Running your app in an emulator

2.2. NativeScript apps

2.2.1. The NativeScript runtime

2.2.2. JavaScript virtual machines

2.2.3. JavaScript virtual machines in NativeScript

2.3. Establishing your development workflow

2.3.1. Building NativeScript apps

2.3.2. Livesync

2.4. Summary

2.5. Exercise

2.6. Solutions

3. Anatomy of a NativeScript app

3.1. Exploring the structure of a NativeScript app

3.1.1. The root application folder and files

3.1.2. The node_modules folder

3.1.3. The platforms folder

3.1.4. The app folder

3.2. Understanding app startup

3.3. Understanding NativeScript conventions

3.3.1. File-naming conventions and pages

3.3.2. Platform-specific conventions

3.3.3. Screen size conventions

3.3.4. Screen orientation conventions

3.4. Style guide and app organization

3.5. Summary

3.6. Exercise

3.7. Solutions

Part 2: Structuring your app

4. Pages and navigation

4.1. Creating a multi-page app

4.1.1. Creating the Home page

4.1.2. Adding content to the Home page

4.2. Creating another app page

4.2.1. Creating the About page

4.3. Navigating between app pages

4.3.1. Adding a button to the Home page

4.3.2. Button events

4.3.3. Applying transitions to page navigation

4.4. Summary

4.5. Exercise

4.6. Solutions

5. Understanding the basics of app layouts

5.1. Understanding NativeScript layouts

5.1.1. Layouts and screen pixels

5.2. Stack Layout

5.2.1. Adding content to the Tekmo app using Stack Layouts

5.2.2. Scrolling pages

5.2.3. Using textboxes and providing feedback to users

5.3. Summary

5.4. Exercise

5.5. Solutions

6. Using advanced layouts

6.1. Introducing the grid layout

6.2. Adding content to a grid layout

6.2.1. Adding a single UI component to a grid cell

6.2.2. Adding multiple UI elements to a grid cell

6.2.3. Spanning UI elements across multiple rows and columns

6.3. Controlling grid layout rows and columns

6.3.1. Understanding percentage sizing in the Tekmo app

6.3.2. Using automatic sizing for rows and columns

6.3.3. Additional layout containers

6.4. Summary

6.5. Exercise

6.6. Solutions

7. Styling NativeScript apps

7.1. Using cascading style sheets

7.1.1. Styling basics

7.1.2. Using global CSS styles

7.1.3. Styling a grid layout with page-specific CSS

7.2. Adding images to an app

7.2.1. Using the Image element

7.2.2. Challenges with displaying images on mobile devices

7.2.3. Solutions to DPI density differences

7.2.4. Displaying multi-resolution images in NativeScript apps

7.2.5. Styling images

7.3. Summary

7.4. Exercises

7.5. Solutions

Part 3: Refining your app

8. Working with data

8.1. Databinding

8.2. Observables in action

8.2.1. Property binding

8.2.2. XML binding

8.2.3. Pet scrapbook page

8.2.4. Binding Expressions

8.3. Observable arrays

8.3.1. Using an observable array to build master-detail pages

8.4. Action bar

8.5. Summary

8.6. Exercise

8.7. Solutions

9. Native hardware

9.1. The file system module

9.1.1. Using the file system module

9.1.2. Integrating the file system module into the Pet Scrapbook

9.2. Camera

9.2.1. Taking photos

9.2.2. Saving the image to the file system

9.2.3. Displaying the image

9.3. Using GPS and location services

9.3.1. Plugins

9.3.2. Using the geolocation plugin

9.4. Summary

9.5. Exercise

9.6. Solutions

10. Creating professional UIs with themes

10.1. Themes

10.1.1. Incorporating themes into your app

10.2. Using text classes, alignment, and padding

10.2.1. Affecting text size

10.2.2. Aligning text

10.3. Styling buttons

10.3.1. Cleaning up

10.4. Styling list views

10.5. Working with images

10.6. Styling data-entry forms

10.6.1. Structuring data entry fields

10.7. Summary

10.8. Exercises

10.9. Solutions

11. Refining user experience

11.1. Building professional UIs with modals

11.1.1. Moving date pickers to modal pages

11.2. Adding tablet support to an app

11.2.1. Targeting multiple screen resolutions

11.2.2. Adding a list to the tablet-specific page

11.2.3. Adding the update data entry elements to the tablet-specific page

11.2.4. Adding behavior to the update page UI with JavaScript

11.3. Refining the tablet-specific user experience

11.3.1. Visual feedback for the selected page

11.3.2. Auto-selecting a page when it's added

11.3.3. Hiding the data-entry UI elements when the page loads

11.3.4. Hiding the data-entry UI elements after pressing Done

11.4. Summary

11.5. Exercises

11.6. Solutions

12. Deploying an Android app

12.1. Customizing Android apps with the App_Resources folder

12.1.1. App_Resources/Android contents

12.2. AndroidManifest.xml customizations

12.2.1. App icons

12.2.2. Customizing app icons

12.2.3. Understanding app icons and the AndroidManifest.xml file

12.3. Launch Screens

12.3.1. Updating the launch screen

12.3.2. Targeting various screen sizes

12.3.3. Versioning

12.3.4. App naming

12.4. Building your app

12.4.1. Digital signatures

12.4.2. Generating a keystore file

12.4.3. Creating a release build of the Pet Scrapbook

12.5. Summary

12.6. Exercise

12.7. Solutions

13. Preparing an iOS app for distribution

13.1. Transforming your app code into an iOS app

13.1.1. The prepare phase

13.1.2. The build phase

13.1.3. Using the CLI to prepare and build your app

13.2. Finalizing your app

13.2.1. Naming your app

13.2.2. Versioning

13.2.3. Adding icons

13.2.4. Launch screens

13.2.5. Supporting device orientations

13.3. Summary

13.4. Exercises

13.5. Solutions

14. iOS security and building your app with Xcode

14.1. Building your app

14.1.1. Exploring iOS app security

14.1.2. Managing your app with Xcode

14.1.3. Building your app

14.1.4. Creating an app archive

14.2. Summary

14.3. Exercises

14.4. Solutions

Part 4: Angular 2 and NativeScript

15. Creating a NativeScript App with Angular

15.1. Why Angular

15.1.1. Advantages

15.1.2. Disadvantages

15.1.3. Recommendations

15.2. Using NativeScript with Angular to recreate the Pet Scrapbook app

15.2.1. Scaffolding an Angular project

15.2.2. Running an Angular project

15.2.3. App structure

15.3. TypeScript

15.3.1. Understanding TypeScript

15.3.2. Why TypeScript is significant

15.4. NativeScript Angular integration

15.5. Understanding NativeScript-with-Angular app startup

15.5.1. Understanding the app.module.ts file

15.5.2. Angular components and the app.component.ts file

15.6. Summary

15.7. Exercise

15.8. Solutions

16. Using Angular components and routing

16.1. Creating static components

16.1.1. Home component

16.1.2. Loading the Home component

16.2. Navigating between components with routing

16.2.1. Creating the List component

16.2.2. Page navigation in NativeScript-with-Angular

16.3. Summary

16.4. Exercise

16.5. Solutions

16.5.1. Step 1: Create the about component files

16.5.2. Step 2: Add UI markup to the about component

16.5.3. Step 3: Define the about component code

16.5.4. Step 4: Import the about component into the app module

16.5.5. Step 5: Add the about component route to the app module

16.5.6. Step 6: In the Home component's UI markup, add a tap event to the About button

16.5.7. Step 7: Handle the About button's tap event, navigating to the about route

17. Angular databinding and services

17.1. Databinding with Angular

17.1.1. Adding one-way databinding to the List component

17.2. Creating and using services

17.2.1. Page service

17.3. Databinding events

17.3.1. Using event binding to add a new scrapbook page

17.3.2. Passing data with event databinding

17.4. Advanced databinding

17.4.1. Two-way databinding

17.4.2. Formatting data-bound properties

17.5. Loading components as modal dialogs

17.5.1. Adding a date selection modal

17.5.2. Adding a gender selection modal

17.6. Summary

17.7. Exercise

17.8. Solutions

Appendixes

Appendix A: Android emulator tips

A.1. Emulator speed

A.2. Using Genymotion

Appendix B: NativeScript CLI quick reference

B.1. Creating apps

B.2. Adding the Android and iOS platforms

B.3. Building apps

B.4. Deploying apps

Appendix C: NativeScript conventions

C.1. Understanding NativeScript conventions

C.1.1. File-naming conventions and pages

C.1.2. Platform-specific conventions

C.1.3. Screen size conventions

C.1.4. Screen orientation conventions

C.1.5. Chaining conventions

Appendix D: Creating custom UI controls

D.1. Introducing reusable, custom UI controls

D.1.1. Creating a simple custom UI control

D.1.2. Creating complex custom UI controls

D.2. Using custom UI controls

D.2.1. Replacing existing XML code with a custom UI control

D.2.2. Adding a custom UI control to a new page

D.3. Summary

D.4. Challenge

About the book

NativeScript in Action teaches readers who know JavaScript and CSS how to create native iOS and Android apps using NativeScript. You'll begin learning how mobile applications differ from web applications, and discover how NativeScript bridges the gap. Then, by following progressively more complex and interesting examples, you'll develop apps in JavaScript that will run natively on your mobile platforms. Along the way, you'll learn everything you need to know about the iOS and Android SDKs to write beautiful native apps, master mobile dev best practices, and learn countless NativeScript tips and techniques that will make you instantly more productive.

What's inside

  • Create cross-platform designs that look and run like platform-native apps
  • iOS and Android-specific UI practices
  • Single and multi-page apps
  • Several fully-functioning reference applications in GitHub

About the reader

Readers should be familiar with JavaScript, CSS, and basic web development. No experience creating mobile apps is required.

About the authors

Mike and Nick Branstein are consultants, software developers, technology evangelists, and brothers. Together, they have over 24 years of experience developing applications, mobile apps, and backend services.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Buy
MEAP combo $44.99 pBook + eBook + liveBook
MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks