NativeScript in Action
Michael E. Branstein and Nicholas J. Branstein
  • MEAP began July 2016
  • Publication in Summer 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.

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.

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

14. iOS security and building your app with Xcode

Part 4: Angular 2 and NativeScript

15. Creating a NativeScript app with Angular 2

16. Updating a NativeScript app to use Angular 2


Appendix A: Android emulator tips

A.1. Emulator speed

A.2. Using Genymotion

Appendix B: Creating custom UI controls

B.1. Introducing reusable, custom UI controls

B.1.1. Creating a simple custom UI control

B.1.2. Creating complex custom UI controls

B.2. Using custom UI controls

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

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

B.3. Summary

B.4. Challenge

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.
MEAP combo $44.99 pBook + eBook
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks