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 the user experience

12. Building and deploying an Android app

13. Building and deploying an iOS app

Part 4: Angular 2 and NativeScript

14. Creating a NativeScript app with Angular 2

15. Updating a NativeScript app to use Angular 2

Appendixes

Appendix A: Setup tips

Appendix B: Android emulator tips

Appendix C: Common events

Appendix D: UI widgets reference

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

FREE domestic shipping on three or more pBooks