With 2016 drawing to a close and 2017 already in full swing for me, I thought this was a good opportunity to reflect on how 2016 went and what 2017 has in store for me from a technological point of view.

2016

If asked how 2016 was from a professional perspective I’d probably try to sum it up as follows “Technology continued to roll out at an ever increasing pace, not only was new technology appearing faster than ever before, existing technology stacks started iterate and churn under our feet!”

Nearing the end of 2016 was where I finally admitted defeat and realized that I can’t keep up with everything and I while I sure am greedy and to know everything about everything, it was getting to the point that I was becoming a ‘Jack of all trades and master of none’ dare I say a full stack developer! I’d actually like to think I’m master of some, but certainly it was a big effort to stay on top of everything.

What did I get up to?

Azure : I got certified in Azure this was without doubt my most prized professional achievement of 2016, I’ve been using Azure for years and I feel quite confident in acclaiming it to be the best public could in the world today.
I’ve also started work on a state of the art data distribution network using Server-less architecture. I finally got down and dirty with Swagger/API Apps/LogicApps/AzureFunctions.
I got a lot better at networking, Load balancing resiliency, Azure/AWS causes a, devops inner persona to ooze its way to the top.
I listened with baited breath to the Azure Weekly Azure Podcast to see what was new (and always scratched my head when Cale got excited about BlockChains, perhaps next year I’ll look back and kick my self for not being an early adopter, it does seem to be an area that’s heating up).

AWS: I got certified as an AWS Solutions Architect, it was great to get a better understanding of AWS and indeed for a few offerings they I’d choose them over Azure. Got heavily involved in AWS CloudFormation and helped regain some control on AWS madness.

Google Cloud: I spent a few weeks playing with it just to see how it’s coming along, at least now I’m somewhat informed but I’d only consider myself as a beginner (I’d consider GoogleCloud a beginner also , unless they put in a massive investment into the portal and services, they simply can’t compete with Azure and AWS.

Docker: I can create images, start stop then understand volumes, I didn’t get as far as any of the clustering techniques such as swarm but I see huge value in Docker!

AngularJS: Architected and delivered a cutting edge data visualization system based on Angular 1.x, typescript,sccs,gulp. 
Introduced AngularJS in to multiple smaller projects.

Typescript: This is a fantastic language, and now especially with all the bells and whistles in v2.1 (not least async/await for es5 targets). If you are writing any Javascript you need to learn this no one will ever convince me that a dynamically typed language is better than a statically typed language for starters, but with all the new Standards based features now baked in, it’s certainly taking the industry by storm, I can’t see how Babel will continue to fight for its place in the world alongside it.

Ionic2: I wrote another mobile app, I’ve done this in many languages to date, I started out with iPhones and xamarin c#, moved to objectiveC and java, and finally settled back on the Typescript/Angular2 based Ionic2 framework. It’s a pleasure to deal with, and with my other investments in the underlying stack it has become a natural fit.

Java8: Finally spend some time getting up to speed on the new jdk and it’s offerings. While not strictly Java8, I’m including Sprint Bootstrap, Wildfly10 Application server, CDI, JaxRS etc in this section.

Camel: Gained a basic understanding and working knowledge of the Camel EAI framework.

ActiveMQ: I debated about putting this one on here, all queues fulfil the same core requirements to pass messages right? But I did approach ActiveMQ from three different sides camel/c#/java, so that was interesting.

.NET 2017 I’m now informed about what’s coming down the line. Some interesting thing like C#7 (which I will admit I had to read twice before I saw the value in the language changes), better support for the web stacks (although I’d admit with a tear in my eye that I’ve moved to Jetbrains software and am unlikely to come back to VStudio unless it’s an ASP based backend).

Client Products: Not only the development stacks have been changing, products in use by my clients have been moving at a rapid pace also and given they pay the bills I dedicate a fair amount of time to understanding them in depth.

Resource Consumption:
DNR -Listened to nearly every episode of DotNetRocks.
Hanselminutes - Funnily enough I found DotNetRocks as I used to subscribe the Hanselminutes; I say used to, as I’ve finally given up on Hanselminutes it appears to have moved in a different direction in the last year or so, don’t get me wrong, Scott is a great guy one of the best technical speakers in MS if you ask me, I even follow the weekly ASP.net stand-ups which he’s in, it only the podcast that I gave up on in December.

Other recommended podcasts:
Angular In Action
Javascript Jabber
RunAs Radio
Azure Podcast

2017

As you can image it takes a lot of time to get proficient in any of the above stacks I’ve mentioned . I’ve been trying to stay on top of them all and I’ve now reached the point or realization that need to let some go (think of Kate Winslet prying Leonardo DiCaprio’s icy fingers off that board she was on, it’ll be oh so sad). I’m going to narrow down the field, I’ll still keep in touch with them and if I encounter anything I don’t understand then I’ll make it my business to understand it, I simply won’t actively go pursuing them all. I’ve been burnt before with that approach, I learn Sliverlight after all, it wasn’t all bad as I wrote a windows phone app and many WPF apps around the same time, so the experience transferred nicely, it’s just that I’m not writing much WPF these days so I’ll put effort back in that direction only if and when needed.

Q: So the question remains: Where am I going to put my extended effort this year? 
A: Azure first approach. Azure will be the primary topic of my blogs whether the implementation is in C#/JavaScript/Typescript/Java I don’t really care. If the backend is .NET or Java, again I don’t really care but I do intend on blogging on practical usage cases for Azure services, I may even create a video or two!

Happy new year!

In this post I show you how to generate a shell for a web applications in both Java and .NET, while they are not directly a one to one mapping I think some of you will find this interesting should you have never created a web application on either stack or perhaps just one of the below mentioned.
I’ll let the videos speak for themselves.

Java

.Net

Follow up

I did promise to dissect both projects however I ran out of time,

I’ll leave it to you to pick your tech stack of choice and if you have any questions just ask below and I’ll explain in more detail if necessary.

In this screencast I show you how to prevent a click event on a table cell content from propagating up to its parent.

Screenshots

So in my previous post I show you how to auth with a bearer token against WebApi2 with the OWIN middleware using a HttpClient. Next up I show you how to do the same with AngularJS.

AngularJS

True to form I’m not going to write a big long blog post on this topic, there are many others that are better than mine. There are even a nice few github hosted solutions you can grab for yourself.

I ended up picking the first post I saw, http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

Now lets ignore the CORS part for starters (have banged my head against the walls many times over that).  In order to get this working with the latest and greatest web api as of this post you’ll need two little tweaks

1) Relative URL

The author posts the following code

You’ll need to change the baseUrl to an empty string, if you leave it this way (even when correcting the port) you’ll end up in a CORS situation and you’ll see the browser send an OPTIONS request which you don’t want. (in fairness the author was showing CORS working so there is nothing wrong with his/her post).

2) Token Payload

The important part is that i create a new object ‘data’ and this contains the querystring for the POST body, in the $http call, I then pass data rather than userData like the codeproject article shows.

That’s it, you should now be up and running.

In this post I’m going to show you how to upload a file using Angular.js on the client side and Asp WebApi on the back end.

Lets get started

Create you project in visual studio, and add your angular.js app controllers etc.

Interestingly enough I’ve already shown you how to do the server side over 2 years ago!
Crikey 2 years and I’m still writing about the same old stuff….. well not really, last time it was knockout, sliverlight and the likes, now it’s Angular.js’ turn.

Angular file upload, Nuget

In order to facilitate the process, we’re going to use a nuget package I like, see screenshot.

The beauty of this package is that its got shims for non html5 browsers (apparently there are a few hanging around still :-( )

To use this package you’ll need to include 2 scripts, file-upload-shim before angular.js and file-upload after.

Script Includes

Markup

Next add the input tag and add the ng-file-select directive

Javascript

Module

Add the upload module

Factory

Here i added the $upload factory to my controller

Controller function

Here I enumerate the files (should i wish to have multi select) then I upload each one by posting to my Web Api .net controller, I pass a little more information also as to the diff side, but that’s pretty much it.

.NET

Now even though I did show you the .net code before I’m going to show it again now, because as I mentioned I’m passing a little information as to the side the file I’m uploading represents.

You won’t believe the amount on questions I’ve come across regarding the confusion between angular services factories and providers. This blog post attempts to help clarify same and get you started.

Which should I use?

Factory* if you don’t know this this is a good place to start.

Which is most powerful?

Providers

What’s the difference?

I’m not going to cover providers here so lets see the difference between services and factories.

The rhetoric

Service gets passed a function that’s considered to be a constructor, so you get back a new-ed constructor.
Factory gets passed a function which it invokes and returns the result.
A service is often used when you have 3rd party constructor function and want to use this.

Example1 – Same end result both ways

Service

First lets show the view in all it’s glory, it’s quite simple just will display whatever x is.

 
Then the angular code

You can see that we don’t return anything! so think of this as a constructor function, so effectively angular will give us a new TestService and we can call the doSomething method on it, the output looks like this

Factory

Now let’s look at the same thing as a factory

What’s the difference? Well in this instance we are returning something! Angular will call new on the returned object and return it.

Ok I get it but

Show me a reason to prefer one over the other? Well lets say we want to pass some information to the service or factory, well given we have no control over angular creating our service we cannot pass any additional information! it just creates the function.

Factories on the other hand we get to return what we want! So we can return a function! Lets look at some code to make this easier to see

So now if we don’t change our controller we have a problem, because angular has just created f for us! Let’s see this in a debugger, we can clearly see that TestService is not an object but rather a function.

Now we need to modify our code to work, let’s do that.

So hopefully that’s helped you a little understand the difference.

Example 2

I’m working on a project at the moment and I’ve just created a backend REST webservice to manage user properties

as you can see I've got the basic REST HTTP verbs, GET,POST,PUT,DELETE, it’s done in Java, but could just as well be in .NET, node, php etc, it doesn’t matter, the basic premise of REST is that it just used what HTTP already gives us.

Now I want to be able to use this information in JavaScript, Angular itself exposes a $resource exactly for this scenario (read the docs there’s one or two simple steps needed to use it).

The important thing to notice is that we are returning something from our function, and we are passing parameters, therefore we cannot use a service in this scenario.

I hope this has clarified this situation for you, if so please drop me a line and let me know and I might cover providers also.
(comments are disabled until i get a better recapcha for all this spam I get when enabled).

Another day, another post with me talking about something I barely know about. Today I’m going to show you my first second stab at a recursive Angular.js directive.

Let’s first have a look at the end goal (forgive the as of yet unfinished css and bad contrasting colors)

Basically we have a list of objects in the dependency tree, each of these in turn can contain a list of children.

JSON

Lets have a look at the JSON we are trying to represent

It’s pretty simple, each dependency can have children that are in fact themselves the very same object literal types.

Directives

I created two directives, one for the dependency and one for it’s children.

As seen from the screen clipping the directives are pretty simple, however I’d like to draw your attentions to the link function of the curve directive. The reason I had to do this is because on my first attempt I tried to just call the <dependencies  in the template itself with an angular ng-if, however angular.js just kept going into an infinite loop, so I added the children <ul> on the fly and $compiled them in (note: $compile is injected).

The templates for these widgets are pretty trivial (i could have in-lined with “template” but choose to use templateUrl as I much prefer this approach.

This template just creates a <ul> and then calls the other directive that creates the <li> entries.

This template shows the <li> entries, remember that I $compile in any children in the directive, it also adds a good or bad class if necessary for styling.

I hope this helps someone should they also encounter the same problem I did with the infinite loop, I’m definitely not saying what is presented above is best practise as I’m relatively new to angular.js after hanging up my knockout.js belt (it was good while it lasted but angular is much more in line what what I need for SPA apps).