keep looking, don't settle

I think of myself as a fullstack developer but the stack is becoming more complex each passing day and at times am not sure what it means anymore. For instance, before mobile development was popular fullstack mostly meant a person comfortable with back end(C#,PHP,Java,SQL,MySQL…) and front end(HTML,CSS,Javascript…) hence that’s where I fit in.

However when you start talking about native mobile application development, the stack begins to change because Android or IOS or whatever you’re into brings its own stack in some sense. As such to make sure I fit in within the ‘modern stack’, I have to be comfortable with the mobile frameworks as well, at least in my opinion. If I was still in college, it would be fun to learn all these and impress companies with my application portfolio. Now I do not have that luxury, as such I have to make sure am adding as much value as I can to my current work place leaving little time to experimentation of the ‘modern stack’.

For the longest time, I have been trying to find ways to make use of my current web development knowledge to build native mobile application as quickly as possible. I have been experimenting with Ionic, Xamarin to make applications that have same feel as native apps but haven’t had much luck with that. That’s the main difference between hybrid apps and native apps, it doesn’t just feel same no matter how hard you try. Hybrid application definitely work and sometimes an average user can’t tell difference between hybrid application and native application.

Good news is the answer is here: Angular2 and NativeScript. These two will change web and mobile development game. They are both in Alpha stage but I am taking them for a drive because I am very excited what these two guys can accomplish together. So now I can just work making my javascript or typescript knowledge better and develop across all platforms. That’s a win 🙂

I will be blogging more about these two magical things; Angular2 and NativeScript {N}.

Spent 3hrs the other day trying to figure out how to delete folder with node_modules in a windows box. I know you thinking, why not just google it! Trust me I did, but sometimes we look into wrong places for answers and that’s okay. I learned a thing or two in those 3 hours, they didn’t go to waste. Failing forward 🙂

Long story short here’s how you can resolve the issue: Use ROBOCOPY! Its so simple. I will not go over robocopy syntax in this blog (Let’s keep that for another day)

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a sense where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun 🙂

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

Working computer (PC/MAC). I will be using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.

Node. Assuming you’re working in your local machine.

Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual code here.

Code_pen for live demos (optional)

Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download from here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart 😉

Installing node via terminal using homebrew

open your terminal

Type $ brew install node

Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a sense where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun 🙂

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

Working computer (PC/MAC). I will be using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.

Node. Assuming you’re working in your local machine.

Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual code here.

Code_pen for live demos (optional)

Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download from here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart 😉

Installing node via terminal using homebrew

open your terminal

Type $ brew install node

Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

————————–

Working Examples

1. Hello world

2. Business card

Details

&lt;div ng-app=&quot;mainApp&quot;&gt;&lt;/div&gt;
;

ng-app is an angular directive where we’re declaring the module in our example.

&lt;div ng-controller=&quot;appController&quot;&gt;&lt;/div&gt;

ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.

I am developing a web service using .Net framework. There is another Web service or API am trying to access in my local machine on client side of this Web Service am working on. However I was getting the following error when I try to access this other API sitting out site my local environment.

No ‘Access-Control-Allow’ origin header is present on the requested resource

I spent a lot of time trying to figure out how I could access this resource from my client side scripts. Turns out I had to add custom header to web.config file on IIS server in order for my javascripts to access the external API.

Summary
-The server/api you’re making request to has to implement CORS to grant access to javascripts(angular/jquery/*)
-The scripts can’t grant themselves access. So don’t waste time trying to implement this CORS in your scripts to get access to resources on the server. I mean you could but personally haven’t figure out a way, so let’s assume its not possible for the sake of this post 🙂

The amazing thing about prototypal pattern is that you can change properties or override function on the fly as compare to C# for instance where you can’t modify properties or methods once an object has been instantiated

Javascript is a prototype based language. But what does that mean? First let’s work on some terminology here. Prototype basically means a model of something. I have a Java/C# background so this was pretty confusing to me at first that’s why we’re taking baby steps to understand what we’re dealing with here.

Anyone one who’s been working with Classical model of OOP thus folks doing Java/C++/C# or anything along those lines will find Javascript OOP a little weird. Let’s get to work.

We will attempt to create a class hierarchy using Employee object for instance. We will approach this from a classical model perspective and prototypical perspective to see how these two differ.

That was a hierarchy example of classical model. Now let’s look at a similar example in javascript

2. Prototypal model: Javascript

By the way there’s no concept of public|private|protected in javascript. You could achieve similar thing but let’s save that for another day. As such we won’t be implementing getters and setters like we did in the Java example. Let’s jump to it 🙂

Lets stop there for a second, I know things are getting weird now if you have Classical model kind of background. You’re not alone 🙂

In prototypal model inheritance works mainly by “association”,meaning, we’re not creating an Instance of Employee object but rather we’re associating Employee object to Contractor object. Let’s proceed.

Now let’s create sales engineer object

var salesEngineer = new Contractor();

Now we have created a hierarchy in prototypical model.

Summary
This example shows the difference between classical model and prototypical model to highlight concept of Inheritance in javascript.

We looked at inheritance in classical model and inheritance in prototypical model. Its important to understand the two especially for people like me getting deep into Javascript with a Java/C#/C++ background. Check out my next post on interacting with Javascript objects. Bye for now.

NB(update)
There’s a confusion about whether the above javascript code is “classical model” pattern or prototypal model pattern. This example is how you would do “classical model pattern” in javascript. For the actual prototypical pattern approach or the newer way to do inheritance in Javascript that most modern projects are using will be in the next post just to clear some of this confusion.

Iterate through array
Powershell is very “powerful” and super weird when you’re used to writing code in C# or Java or anything that looks like code really. Anyhow this example demonstrates how to iterate through a an array in powershell.