Friday, June 19, 2015

What is npm ? How to get started with npm with Visual Studio 2015

This blog post is for following audience:
a) Microsoft stack and .NET developers.
b) New developers using Apache Cordova.
c) An engineer who has not been using any open source tools in Visual Studio.

This blog post will answer the following questions:
1) What is npm ?
2) Why would i use it ?
3) How to use it ?

npm is a package manager for: JavaScript, Node, Cordova, JQuery, mobile, angular, react and other famous JavaScript libraries and frameworks.

You will use npm when you want to install any js library or framework in your Visual Studio project. For example: if you want to install node.js, Cordova js libraries or any other js library such as: ionic or react!

To get npm js package manager, you need first to install Node.Js which contains npm package manager tool.

https://nodejs.org/

Once you download and install the installer, you would have npm package manager tool in your system!

How to use it?
Open your command line after you installed node.js installer and type the following to install ionic framework:

npm install -g cordova ionic



Hope this helps you how to get started using npm package manager!

-- ME

Thursday, June 18, 2015

What is TypeScript? Why would i strongly recommend to use it in your next project



As all of us know, Building large applications in JavaScript is hard! It gets messy and hard to manage and test.

The Problem
Because of the nature of JavaScript, it is not "favorable & easy practice" for non JavaScript developers to write classes, modules, OOP code in an easy, clean and straight forward way.

This was the reason of the rising & popularity of JS libraries and frameworks such as: jQuery, Angular, Knockout and much more amazing js libraries.

Recently, I have been thinking to build a Hyprid mobile application using Cordova, and this open source platform helps developers to build cross platform native apps using standard web technologies in JS and HTML.

I was thinking what is the right and best approach to start structuring my project in an organized pattern such as MVC, so i have bunch of views and controllers and my code is clean to build robust solution!

The Solution
You have different ways to implement this, One is to use Angular JS library that helps you strcture your code in a MVC patterns and design your views that are linked to models and js files that have all your controllers implementations.

Another approach, is to use TypeScript which gives your the ability to write clean client scripting and it generates JS code for your and it works in all browsers!

If you are using any OOP programming language such as: C# or Java. It will so easy for you to add TypeScript (*.ts) file in your project and start writing classes, interfaces and all OOP code with IntelliSense and type casting capabilities within VS IDE.

So, you write C# Like code in TypeScript file, it generates JS code and it works in al browsers.

Here is a play ground site to test it some code and see generated code:
http://www.typescriptlang.org/Playground

The same site has tons of materials to learn, samples and get started:
http://www.typescriptlang.org/Tutorial


TypeScript is available and supported if you use VS 2013 (update 2) or VS 2015!

Hope this helps!

Friday, June 12, 2015

How to start ASP.NET 5 Development on OS X Mac



It is the day when Microsoft @ BUILD conference in 2015 announced the availability of Visual Studio Code to allow OS X and Linux Developers to tap into .NET development

I am writing this blog post to show in step by step from ,net development perspective how to install and configure your macbook pro to have VS and starting developing and debugging asp.net applications.

Here is what you need to get you up and running:

1) Install Visual Studio Code: https://code.visualstudio.com/
It is a straight forward installation as we used for all MS products installation. Once you install it you will be able to run the VS Code as shown above.

2) Install Homebrew for managing missing packages for OS X:
You need to open the Terminal window and type (copy & paste) below command:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This command install homebrew which is the missing package manager for OS X. It is same as Nuget console manager we do have in VS in windows to install any needed packages to our projects.

homebrew homepage url: http://brew.sh

Below screen shot show brew installation in the terminal window.


Once you hit enter, it will ask to enter your password and hit enter.
below show the completion of brew installation.



3) Install asp.net 5 and DNX:
Run the following 3 commands to install asp.net and DNX:

brew tap aspnet/dnx
brew update
brew install dnvm
Below screen shot shows the successful installation of DNX and ASP.NET on my macbook pro.



Now we have Mono, asp.net 5 is installed on our MacBook Pro! Hooray...

There is not further steps to do, but if you want to test compiling, debugging and running asp.net apps. You can install samples from github: https://github.com/aspnet/home#os-x

This sample contains console app, asp.net mvc and aspnet web app.
Below link shows you how to run the samples as well:
https://github.com/aspnet/home#running-the-samples

Hope this helps!




Wednesday, June 10, 2015

How to start mobile apps development using Cordova in Visual Studio 2013/2015


I am writing this blog to show how to start developing cross platform mobile native applications using Cordova.

Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. It is an open source platform which means it is free to download and start building cross platform native applications using standard web technologies skills set.

If you would like to read more about Cordova project and its capabilities, here is the Cordova project homepage: https://cordova.apache.org/

Microsoft has started to integrate Cordova into VS 2013 and VS 2015. In this blog post i am showing how to start working with Cordova in VS 2013 by getting all the tools in step by step fashion.

Once you open VS2013, Click on Start a new project.

Under JavaScript Template, Select Multi-Device Hybrid App, then double click on Install Tools for Apache Cordova.



This will open up a new browser windows to start installing all the tools. download the executable file.




Next, Make sure to close VS before start installing Apache Cordova for VS 2013 tools (vs2013mda_0.3.1.exe)



Open up VS again, You will find a blank App (Apache Cordova) project template in VS 2013!


Hope this helps!

UPDATE 06/12/2015: Microsoft recommends to use VS 2015 for all Cordova applications because VS 2015 is using a new project structure to support third party CLIs, while VS 2013 is still using the old/deprecated project structure.