Building Cross Platform Native Mobile Applications with NativeScript

This course introduces web developers to NativeScript, an open source framework for building native iOS and Android apps. Learn how a real app is constructed with NativeScript, discover its features, and alternate paths of development.
Course info
Rating
(42)
Level
Beginner
Updated
Jun 22, 2016
Duration
3h 54m
Table of contents
Course Overview
Course Introduction
Configuring Your Environment
Core Concepts
UI Basics
Working with Data
Navigation
Animation
Course Summary
Description
Course info
Rating
(42)
Level
Beginner
Updated
Jun 22, 2016
Duration
3h 54m
Description

Want to learn how to build native apps easily with free tools? This course introduces web developers to NativeScript, an open source framework for building native iOS and Android apps. First, you'll see the initial installation of NativeScript and configuring the modern open source Node.js-based ecosystem. The app that you will be building is a native mobile app developed for a fictitious company, RPS, to help its conference attendees view the conference schedule and create their own agendas. You will be guided through the app development process by seeing reasons behind each choice made to implement a feature, as if the author was an employee of RPS that was tasked with building the conference app. In each module, you'll be introduced to a new concept by implementing an app feature. By the end of this course, you'll be better prepared to tackle a full implementation of a real native app using freely available tooling.

About the author
About the author

Alex Ziskind loves tinkering with the latest web and mobile technologies and gets giddy over the possibilities that the cloud brings to those fields.

More from the author
NativeScript: Animation Techniques
Intermediate
2h 30m
6 Feb 2017
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, I'm Alex Ziskind, and I've been a web developer for most of my professional career. NativeScript has been truly transformative for me in the way I approach native mobile development, and I absolutely fell in love with this technology ever since I started using it. I'm really excited to get you started on your own journey of learning NativeScript, and hopefully you'll get all the benefits out of using this technology that I have. While web developers like you and I have been trying to get into developing for mobile devices, we've always been limited by being boxed into a web view or being at the mercy of the plug-in developers to unlock native functionality for us, while native developers got to play with the latest and greatest. Well, no more. With NativeScript, we get real native performance, running real native user interfaces, and 0 day support for native platforms, So now those of us that don't want to open Xcode or Android Studio or don't have time to learn Objective-C, Swift, or Java, can still tap into the full native capabilities that iOS and Android offer, but using what we already know, JavaScript or TypeScript. This course will introduce you to the NativeScript CLI, as well as give you guidance and helpful tools and libraries that are being used in the real world to build real applications. You will learn how to architect your applications through commonly used patterns as we build out a real app throughout the duration of the course. We'll learn about user interface components and how to bind data to their properties, and we'll also learn how to navigate within our app and apply animations to add that extra polish. I bet you're really excited to get started creating cross platform native mobile applications, so let's go on this journey together as we begin learning NativeScript.

Configuring Your Environment
The NativeScript CLI, or command-line interface, is a tool that you will use to scaffold, build, and run your applications in your development environment. The CL runs on Windows, Mac, and Linux, and has the same set of commands on these platforms. There are a few tools that the CLI depends on for this operation, such as Node, Android SDK, as well as Xcode on the Mac. Although you don't have to interact with these tools directly during your day-to-day NativeScript development, these tools should be installed as the NativeScript CLI uses them. In this module, we will review the initial setup required to get you going with NativeScript development using the CLI. If you're developing on a Mac, we'll see how to get iOS specific dependencies installed. For all of our environments, I'll show you how to run an installation script to set up dependencies, we'll see how to install Node and the NativeScript CLI, and finally we'll take a look at the tool I'll be using to write code in this course, Visual Studio Code, as well as the NativeScript extension for Visual Studio Code. I'll also show you how to keep your Visual Studio Code app folder looking clean while you're developing.

Core Concepts
Welcome back to Building Cross-Platform Native Apps with NativeScript. My name is Alex Ziskind, and in this module we will learn about the basic concepts needed to develop NativeScript apps. We will get an overview of design concepts that will be used during app creating, such as the MVVM pattern, observables, and the ability to tap into native device APIs with JavaScript. As we move through this module, we will begin building our RPS conference app while applying new knowledge about the NativeScript commands we can use. We'll review the app directory structure and architecture, and we'll discuss a few of the powerful features that will be applied later in this course.

UI Basics
In the last module, we saw how pages are created in NativeScript. Pages are the root of every view and typically have many components nested in them. NativeScript's built-in modules provide many of the components you will use to compose your application user interfaces. You can even create your own custom components and compose those together as well. If this sounds familiar to you, then you've probably worked with other UI frameworks before, WebClient frameworks such as Angular 2 or Aurelia, or several frameworks such as ASP. NET. In this module, we will be introduced to the concepts behind using UI elements in NativeScript and how they translate to native UI elements. We will show top-level UI components and how they interact with lower level components, explain how observables work with property binding and event binding. We will start with layouts, which are also types of components, move on to widget components as we build out our conference app, then we will see how to use data and event binding with our observable ViewModels, and cover gestures and CSS styling. If you need to review what role observables play in the MVVM pattern, please review the core concepts module.

Working with Data
So far we have been hard coding some of our business objects, such as sessions and rooms, but we don't have speakers yet, nor do we have enough data generated to make it feel like we are seeing real data. And that's what this module is all about. We are going to generate all of our sessions, rooms, speakers, the three conference days, and we're going to do this in our JavaScript code, and on the server far, far away. First, we're going to look at generating our data right in our app using an npm library called Faker. This will demonstrate how to install and use third-party JavaScript libraries delivered as npm packages with NativeScript. We're also going to read some sample data from the file system. Then, we're going to transition to pulling the data from a remote server via HTTP rest calls. We're going to deploy the mock data generated to the cloud, in this case, Microsoft Azure, and pull our session data from there. Finally, we'll see how to store user's favorites in our app's local storage mechanism called application settings.

Navigation
In the previous module, we used data delivery services to get our app displaying sessions and speakers. We have a bit of a problem, though. Our list on sessions is on one page, and our speaker details is on another page. In this module, we will solve this problem by creating a master detail relationship between the list of sessions on our main page, and the session details page, and we will do this using NativeScript's navigation techniques. We will also add other pages to our app to fulfill the requirements, and demonstrate different navigation options while we do it. We'll discuss two major players in the NativeScript navigation world, the Frame class, which allows us to navigate forwards and backwards, and its counterpart, the NavigationEntry class, which is the configuration object that is used to control navigation. We'll learn how to use two UI components for navigation purposes, the SegmentedBar and the SideDrawer, and we'll see how to spice up your navigation visually using transitions. And throughout the module, we'll apply these techniques to our conference application as we learn about them.

Animation
Taking a look back at the RPS conference application that we've built, we see that it fulfills all our business requirements. So, why do we still have another learning module? If you've been paying attention to the mobile app landscape over the last few years, it has become very important not to just have a functioning app, but to have an attractive user experience with transitions that mimic the real world in the palm of your hand. This applies to business mobile applications, but especially to consumer facing apps as well. The ability to run robust and performant animations is one of the biggest reasons people choose to build native mobile apps in the first place, and NativeScript makes running these animations simple. We will add a few simple animations to our conference app to sweeten the pot, so to speak. The NativeScript animation modules provide a series of JavaScript APIs that let you perform a wide variety of animations to the elements on the screen. In this module, we will cover NativeScript's simple, yet powerful API for animating almost any native UI element in your application by getting a hold of a view in code and using the view's animation function. We'll discuss how to configure animations using the AnimationDefinition, we'll see how to control even more aspects of your animations using the Animation class, and animation chaining. And since we're trying to mimic the real world, we will look at controlling the timing of an animation using animation curves or easing functions, and finally, we'll take a look at animations defined in CSS.

Course Summary
NativeScript is an incredible technology to develop native mobile applications. Whether you're a web developer that's always wanted to get into mobile development, but felt like your skills wouldn't deliver the best experience for your app users, or you're a native developer who knows one platform or another, but not both, NativeScript could help you out. This has been an introduction to NativeScript and what it can do for you to help you with your mobile application goals. We've developed the customer conference application for our company, RPS, as we applied what we've learned throughout the course. And you're walking away with basic knowledge about how NativeScript UI components work together, how to architect and organize your applications, how to mock data and fetch real data from remote source, and how to navigate pages and create animations. I'm so glad you've come on this learning journey with me to start learning NativeScript. I've really enjoyed building applications with it myself, and I look forward to sharing even more knowledge on NativeScript with you soon in the next NativeScript course coming to Pluralsight.