Create a simple HelloWorld application with NativeScript

What is NativeScript?

NativeScript is a framework that let you to build cross-platform, native iOS and Android apps without web views. Use Angular, TypeScript or modern JavaScript to get truly native UI and performance while reusing the skills and the code from your web projects. Get 100% access to native APIs via JavaScript and reuse of packages from npm, CocoaPods and Gradle. Open source project maintained by Progress.

Getting Started With NativeScript

To get start with NativeScript, It require setup NativeScript CLI on your system. There are two way to setup NativeScript CLI, Quick Setup and Full Setup. Go through the System Requirements and CLI Setupdocumentation of NativeScript to set up your system.

Information Source - Set Up Your System

I am on a Widows 10 machine so I followed the Full Setup approach and followed below setup install all prerequisites to start with NativeScript:

  1. Open command prompt as an administrator on you system.
  2. copy and paste the script below into your command prompt and press Enter:
    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

Note: Please be sure that you run this command in cmd as an administrator (Windows key > type "cmd" > right click > Run as Administrator).

After the installation, your system will have following tools available:

  • The latest stable official release of Node.js (LTS)
  • Google Chrome
  • JDK 8
  • Android SDK
  • Android Support Repository
  • Google Repository
  • Android SDK Build-tools 28.0.3 or a later stable official release
  • Android Studio
  • Set up Android virtual devices to expand your testing options

The two environment variables JAVA_HOME and ANDROID_HOME are required for Android development, which should have automatically added as part of the installation:

Creating first program using NativeScript

tns create HelloWorld --template https://github.com/NativeScripting/template-ng-getting-started-hello

Now open project in the Visual Studio code using below command:

cd HelloWorld 
code .


image

It will open the project in the Visual Studio Code. Now you can edit the project file and also can add some plugin for NativeScript Angular snippets.

Running the Application

If you do not required libraries in the project folder then use “npm install” command to download the dependencies.

You can now bundle your project by passing --bundle flag to NativeScript

CLI commands:

- tns build android --bundle

- tns build ios --bundle

- tns run android --bundle

- tns run ios –bundle

Run the command “tns run android –bundle” to test your first application in the emulator.


It is all done with creating a simple application in using the NativeScript.

Containerizing a .NET application

What is Docker?

From Wikipedia:
Docker is a computer program that performs operating-system-level virtualization, also known as "containerization". It was first released in 2013 and is developed by Docker, Inc.

Docker is used to run software packages called "containers". Containers are isolated from each other and bundle their own application, tools, libraries and configuration files; they can communicate with each other through well-defined channels.

All containers are run by a single operating system kernel and are thus more lightweight than virtual machines. Containers are created from "images" that specify their precise contents. Images are often created by combining and modifying standard images downloaded from public repositories.

Unification of container technology

  1. A set of command-line tools to work with containers
  2. A unified way to build Container images
  3. A unified way of maintaining images in a registry
  4. A daemon process that manages the images & networking on a host machine

clip_image001

from: Microsoft doc

What Is a Container?

A container is an isolated, resource controlled, and portable operating environment. A container provides a place where an application can run without affecting the rest of the system and without the system affecting the application.

If you were inside a container, it looks very much like you are inside a freshly installed physical computer or a virtual machine.

Containers are compared to virtual machines, but they are completely different technology.

Below are the benefits of containers over Virtual machines:

  1. Containers provide the isolation of a virtual machine with the lightweight process. Container provides almost the same level of isolation as you see in a virtual machine but is very lightweight in terms of overhead and start-up time.
  2. You can see inside a container and also make changes to it but in case of Virtual machines you have to first start the VM to the Virtual machine architecture and data. You can even make changes in your container, and then the isolation will ensure that nobody else but you can see the changes that you've made.
  3. The container will enable you to fully utilize the host machine resources e.g. CPU, memory, disk, and networking.
  4. Containers does not pre-allocate any resources. It is very light weight comparable to a process. If you run multiple containers on the same host machine, then these are fully isolated from each other and the host.

Containers vs. Virtual Machines

At first look containers and Virtual machines look similar because both uses the hardware and the host operating system. You can run applications on the host operating system, and we can have virtual machines and Containers on the host as well.

Virtual machine has its own operating system and separate application on it. On another hand still have the hardware and, of course, the host operating system interact with the kernel which is responsible for interacting with the hardware handling scheduling of different processes and managing resources like virtual management and CPU cycles.

Containers let us to run our application by sharing the operating system kernel. This kernel has edit capabilities to create isolation between the different containers and never share anything else between the containers. Although Virtual machine provide isolation but using Hypervisor. Virtual machine has its own operating system and applications.

Setting up the Virtual machine operating system and application is a long task but setting up the containers using the images is a faster process. It just requires an image and configure your application on container using these predefined container images.

Container provide faster bootup time rather than the virtual machine. They are up and running within few seconds.

Containers

Virtual Machines

clip_image002

clip_image003

Source: Run Windows Containers

Containerise a .NET application

To create custom image for your application, we require docker tools. In this article, you will know that how to push your containerized application to the docker repository and to Azure App Service.

You can also deploy your application’s container from Visual Studio to Azure Container Registry, and then run it in App Service.

Now it is time to start creating a container image for ASP.NET MVC application using the windows containers.

Prerequisites

To create a .NET application container image, we require below prerequisites tools:

o Install the latest updates in Visual Studio by clicking Help > Check for Updates.

o Add the workloads in Visual Studio by clicking Tools > Get Tools and Features

Note: In this article, Visual Studio 2019 Preview is used to create to the ASP.NET MVC application.

Create/Open an ASP.NET web app


In Visual Studio, create a ASP.NET MVC project by selecting File > New > Project.

In the New Project dialog, select the template Visual C# > Web > ASP.NET Web Application (.NET Framework).

clip_image005

Define the solution and the project name then press create.

clip_image006

select the MVC template and do not forgot to select Enable Docker Compose support.

Select OK to continue.

clip_image007

Once the project is setup then you will find Dockerfile under the project. It defines the structure of the container and which base image will be used to host your application.

clip_image008

Update the docker file with Azure App Server supported base image so the update docker file would be as below:

FROM microsoft/aspnet:4.7.1
ARG source
WORKDIR /inetpub/wwwroot

COPY ${source:-obj/Docker/publish} .

Here is the list of  supported base image.

Create and Publish to Docker Hub

In the Solution Explorer, right-click the created project and select Publish.

clip_image009

Select Container Registry > Docker Hub > Publish. There is another option also available. You can directly publish this application to Azure App Server or Azure Container registry. Although, we took the publish path from docker registry to Azure App service.

clip_image010

Enter your docker credentials:

clip_image011

Now publish process create the docker image using the base image and bundle your application in to the image.

clip_image012

When process complete you will be able to see the pushed docker image in the docker registry at docker hub.

clip_image013

Now setup the Azure Container service to use this docker image.

Create a Windows container app

Sign in to the Azure portal at https://portal.azure.com with your account.

  1. Choose Create a resource in the upper left-hand corner of the Azure portal.
    clip_image014
  2. In the search box above the list of Azure Marketplace resources, search Containers and then select Web App for Containers.
    clip_image015
  3. Provide an app name and let the default option create a new resource group selected, and click Windows in the OS box.
    clip_image016
  4. By default, wizard Create an App Service plan but you can create your custom by clicking App Service plan/Location > Create new. Give the new plan a name, accept the defaults, and click OK.
  5. Now you will configure the container and provide the detail of the create docker image in the step. Click Configure container. In Image and optional tag, use the repository name you created in Publish to Docker Hub step, then click OK. In previous step I have create repository with name “niranjankala\webdevaspnetmvc” as you can see in above docker hub image.clip_image017
    There is an option for the Kubernetes but Kubernetes is only supported on Linux operating system-based applications.
  6. Click Create and wait for Azure to create the required resources.

Once the deployment complete you are ready to browse your containerized application. Now browse “webdevaspnetmvc.azuresites.net” or whatever application name you chosen during the web app service setup process.

clip_image019

clip_image021

Now your containerized application is up and running.

Visual Studio 2019 with more developer productive features

Microsoft announced the availability of Visual Studio 2019 Preview 1 in the Microsoft Connect(); 2018  keynote. Download is now available for both Windows and Mac platform.

What New Features bring with Visual Studio 2019

Visual Studio 2019 launched with faster tooling, enhanced collaboration and productivity improvements. The public preview 1 includes a new start window experience to get developers into their code faster, a new search experience, increased coding space smarter debugging, AI-powered assistance with IntelliCode, increased refactoring capabilities, and built-in access to Visual Studio Live Share.

clip_image002

Below the list of improved features

Source: Visual Studio 2019 Preview

Intellicode and One-click Code Cleanup

Drive code maintainability and fix warnings and suggestions with one-click code clean up, and use more refactoring capabilities than ever.
clip_image004

Live Share and PR Experience

you can collaborate in real-time whether your team members are working from home or across the world. Live Share installs by default and supports all projects, app types, and languages.

clip_image006

When you’re ready to check in your code, try the new pull request (PR) experience. It lets you and your team quickly review code (even run the app and debug!) from Azure Repos directly in the IDE.

Search Window and Snapshot Debugger

Improved stepping performance and support for large C++ apps enhance your debugging experience. New search capabilities in Autos, Locals, and Watch windows help you find objects or values, or visualize Collections.

clip_image008

With new app targets for Snapshot Debugger, you can debug issues in a production environment without impacting performance or stability. It takes a snapshot of the environment so you can inspect objects and call stacks.

clip_image009

Connected Services and Azure App Services

Configure your applications to use Azure services with just a few clicks. You can create new instances of Azure Storage, Key Vault, Cognitive Services, and more without ever leaving the IDE.

clip_image010

Start developing your code locally and offline until you are ready to deploy. Then publish directly to Azure in minutes, not hours, targeting virtual machines, containers, or Azure App Service.

clip_image012

.NET Core 3 and C++ Improvements

Visual Studio 2019 gives your current projects the full-fledged support they need across any platform including desktop, web, mobile, and games. It also supports .NET Core 3, one of the fastest frameworks on the planet.

clip_image013

With support for Linux targeting, and CMake and ClangFormat support, Visual Studio 2019 is the most complete IDE for C++ developers. C# and F# developers can build native cross-platform apps with Xamarin.


clip_image015

Happy Coding

AI-Assisted development with IntelliCode in Visual Studio Code

Recently, I come across the MSDN magazine article “Java Gets AI-Assisted IntelliCode in Visual Studio Code Editor”. It is great that the Microsoft Visual Code, light weight open source editor is now enabled with features which was part of the Visual Studio 2017.

It is not alone support Microsoft support languages e.g. C#, VB.NET also the Java and Python too.

What is IntelliCode?

Definition from: Introducing Visual Studio IntelliCode

IntelliCode is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, inference and enforcement for code styles, and focused reviews for your pull requests (PRs.)

Visual Studio IntelliCode – extension is in Preview and the Visual Studio IntelliCode extension provides AI-assisted productivity features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. It can be installed directly in Visual Studio code:

clip_image001

Little demo from MSDN article:

clip_image002

Happy Coding!