Google+

Speculations for Build 2014

Build is a Microsoft developer conference that has taken the place of their Professional Developer Conference (PDC). The first Build was held in 2011 and introduced the world to Windows 8, along with an early preview of Windows 8 and a Samsung tablet. You can read my thoughts on Build 2011 here. In 2012, Build was held in Seattle and saw the release of Windows 8 and Microsoft’s Surface RT tablet. In 2013, Build was held in San Francisco and Microsoft announced Windows 8.1 as well as made available a preview release for developers. Before Build 2013 last year, I took a stab at speculating about what would be coming and did pretty spectacularly bad. With Build 2014 a month away, I thought it would be fun to try again!

Build 2013

First, it is interesting to look at how short the time is becoming between Microsoft Build conferences

  • Build 2011, Anaheim, CA September 13 - 16, 2011
  • Build 2012, Seattle, WA October 30 - November 2, 2012 (~13 months later)
  • Build 2013, San Francisco, CA June 26-28, 2013 (~8 months later)
  • Build 2014, San Francisco, CA April 2-4, 2014 (~9 months later)

You can see that Microsoft is quickly iterating and getting information out to developers. However, having said that, certain parts of Microsoft are executing VERY fast (I am looking at you Azure) and other parts are executing VERY slow (I am looking at you Windows Phone). With the breadth of developer platforms Microsoft has, they have many opportunities to get in front of developers, but it not always what the developers are expecting. So all of that to say this.... A lot of my speculation for Build this year looks a lot like last year! There are still some important pieces for the Microsoft developer story that I believe have yet to be communicated.

3D Printer Guitar

###One API To Rule Them All### The reality is, developing on the Microsoft stack today can be downright confusing. You have options between....

  • Web using MVC with HTML/JS/CSS
  • Web using Silverlight (version of XAML), though this is deprecated
  • Desktop using WPF (version of XAML)
  • Windows Modern/Metro/Store Apps using WinJS with HTML/JS/CSS
  • Windows Modern/Metro/Store Apps using XAML
  • Windows Phone (version of XAML)

For shops that are all in on the Microsoft stack, it can be confusing to determine what to go all in on. If you are a web developer and love HTML and JavaScript, your options are limited for Windows Phone. If you love all things XAML, you have to choose amongst WPF, Windows Phone or Windows 8 flavor of XAML. And while the XAML platforms are similar, they are not similar enough to not have a lot of rework. Things have gotten better though over the years with the introduction of the Cross-Platform portable class library, though it is still cumbersome hitting multiple endpoints.

Last summer I wrote

One API To Rule Them All – With the core of Windows driving Xbox One, Windows Phone and Windows 8, will Microsoft release a single API that enables development across all of their platform? That would be great to see and could drive a lot of great applications across Windows, Windows Phone and Xbox!

This year, I can write the same thing. There have been rumors coming from a leaked release of the Windows Phone 8.1 SDK of Universal Binaries that will allow Windows Phone 8.1 and Windows RT/Metro/Modern/Store Apps have a common base. According to the earlier link, over 75% of Windows Phone and Windows RT have the same shared API. That would be a great starting point for Windows 8 developers, especially if WinJS development is now an option for Windows Phone 8.1. Giving developers the opportunity to have one platform they can choose to develop on and hit multiple devices in the Microsoft devices strategy would be a great leap forward.

###Windows RT###

Last summer I wrote

Windows RT – Microsoft Windows RT, the ARM based version of their Operating System, is in a weird place. It runs Metro/Modern Design apps in a full touch mode. It also ships with a subset of Microsoft Office such as Word and Excel. However it does not run other Windows applications. What it does do is run all day on a single charge. It is a great productivity tool for knowledge workers. However, with the release of Intel’s Haswell chipset it seems that all-day battery life will be available on much more powerful chipsets. What, then, becomes the future of Windows RT? Will it move to being Microsoft Windows Phone OS? Will Microsoft reduce the cost of Windows RT to get more hardware vendors building machines? Maybe we will find out more at Build!

Again, same thing this Build. Windows RT has not had a lot of explanation about its continued existence in the Windows ecosystem. I am not 100% sure, but I believe the only devices released for WinRT in 2013 were from Lumia (Lumia 2520) and Microsoft (Surface2). The good news is, both of these devices were well received. The battery life and productivity for ARM based tablets running RT make for great use cases. However, as Intel releases improved Haswell and Atom chips with great battery life and the ability to run desktop applications, it doesn't make long term sense for Microsoft to support both platforms the way they are now. Unless, Microsoft is focused on making Win RT the phone platform as well as a tablet only platform, without the legacy desktop. I am pretty sure this is the case, but we haven't heard it from Microsoft yet. Maybe this Build we will?!?!

###Devices and Services Company### Microsoft has repeatedly said they are now a devices and services company. Since this announcement in 2012, they have released both Windows Surface Pro and Windows Surface RT, along with follow up versions in 2013. The Pro update was minimal in terms of hardware (adding the Haswell chip), but the Surface RT 2, now called Surface 2, saw a pretty significant upgrade in performance and hardware. In 2013, the release of Xbox One happened. Other than that, not a whole lot in terms of devices.

Obviously, the purchase of Nokia's Lumia line will see a lot more Microsoft devices being released in 2014. However these will be phone devices, there has not been a 7-8 inch Surface release to compete with the iPad Mini or Kindle fire, the fastest growing tablet market. There also has not been a Microsoft Laptop/Ultrabooks released. Further, we still are not sure what happens to the Lumia Brand and the Surface Brand. Will they merge? Will one replace the other? Will one be the Tablet platform and the other the Phone platform? Will one be for consumers and the other for enterprises? An explanation of these brands moving forward would be great!

I expect that Build 2014 will shed a lot more light on this, especially the company's strategy for integrating Nokia and the possible announcement of a Surface Mini. In general, except for the first Build, it is not a place where Microsoft announces hardware though.

###Xbox One### With the news that Xbox One is built on Windows 8, and a tease at Build 2013 about a JavaScript based API for Xbox One, everyone I talk with thinks Xbox One will be part of Build 2014. Bring it on! This will be exciting for indie developers.

###Windows Phone### My guess, and that of many others, is above all things, Build 2014 will be about Windows Phone 8.1. I, and most of the world, expect them to show Windows Phone 8.1 while hitting on the developer story. It may be even that some new Lumia devices are announced to drive developer enthusiasm.

###Kinect for Windows RT###

Last year I wrote

Microsoft’s Kinect is impressive technology. Microsoft released a Kinect for Windows last year, but the hardware did not work on the RT side of the house. Will there be APIs in Windows RT for Kinect? Will there be new Kinect hardware?

This year, I again hope that the Kinect API will be part of the Win Metro API so developers can take advantage of the Kinect in Windows 8.1 apps. The technology is too impressive for Microsoft to just let it be used on the Xbox platform!

###Azure### Microsoft's Azure platform is amazing. The degree to which the Azure team can execute and release new features is dizzying. As someone who is a big proponent of the cloud for organizations to embrace, I spend time following the various platforms. It is hard to keep up with all the great things the Azure team is doing.

The one thing that I am most interested in seeing from Microsoft over the next year, is if the speed of execution that Satya Nadella bought to the Azure team when he led the group, can be bought to the whole Microsoft organization. If there is one person from within Microsoft that can execute on the Microsoft One strategy, it is Satya. It will be something to watch in 2014.

###Pick a Name### I am still very confused by what Microsoft calls its non-desktop platform, aka the Windows formerly called Metro. Is it Windows Store apps? Is it Modern apps? Is it Win RT? What is the Microsoft design language formerly known as Metro called? It would be nice to clearly and concisely pick the terms and have everyone use the same vocabulary. Even the Microsoft developers presenting at previous Builds still call everything Metro!

###Conclusion### I have the sense that Build 2014 is really Build 2013, part 2. A lot of the pieces that weren't fully basked for Build last June, like Xbox One and Windows Phone 8.1, should be announced this April. I am quite hopeful that the Microsoft One vision will be introduced for developers at Build 2014. I believe this will really help Microsoft accelerate application across multiple platforms and give developers a sense of ease about a single execution strategy. More to come!

I will be out at Build 2014. Feel free to hit me up on twitter, @jptacek if you are out there in April.


 

Setting Up Cordova (PhoneGap) for Development on Windows Machines

Cordova, also known as PhoneGap, is an interesting technology to bundle up mobile web apps created with HTML, CSS and JavaScript for deployment across multiple phone platforms, such as iOS and Android. Cordova also has a JavaScript library that provides access to phone features such as the camera, accelerometer, compass, etc. For organizations that don’t want to invest in coding up an application for multiple platforms, it can be a quick option. Recent versions of Cordova have utilized a Command Line Interface (CLI) for installation and configuration leveraging Node.JS for their implementation.

The terms PhoneGap and Cordova can be a bit confusing for folks, especially for those just getting started. PhoneGap was a platform for creating mobile applications using native web technologies produced by Nitobi. Adobe then purchased PhoneGap. Around version 1.9 of the product, they Open Sourced PhoneGap and called it Cordova. They kept the PhoneGap name and have extended things a bit by creating an great back end system to build for multiple platforms as well as starter solution for different platforms. More information about PhoneGap can be found at phonegap.com. The reality is I, and most people, refer to the names interchangeably, but there are differences.

So with that out of the way, let's look at how wo install Cordova on Windows 8.

First, you will need to download and install Node.js from http://nodejs.org/download. After this, you should be able to start up PowerShell and run Node from the command line. You can ensure you have node setup by running node –version within a PowerShell prompt

Cordova Version check

We will be installing global packages via the Node Package Manager (NPM). If you have never used or installed Node previously, you will need to update your path variables to the global packages location is in your path.

This is done by going to the computer properties and selecting Advanced System Settings

System Settings

Since we need to update the path, we choose Environment Variables

Environment Variables

Within the Environment Variables, there are two paths you can choose between, the path for the logged in use and the path for all users. I usually update the current logged in user (the first Path listed under user variables for jptacek)

Path variables

You then just update the Path by clicking edit and adding the location of the NPM packages by appending the following

%userprofile%\AppData\Roaming\npm

Note, if you did not have the NPM packages in your path and have taken these steps, you will need to restart PowerShell for your environment variables to be set. At this point, we have Node setup and are set to install Cordova. This is accomplished via the Node Package Manager (NPM), which downloads and sets up Node applications.

Npm install –g cordova

Cordova Install

The –g flag indicates to the NPM package manager that that package should be installed globally. On Windows, this directory is often your user directory, AppData\Roaming\NPM, which we talked about setting up above.

Now that we have Node and Cordova setup and configured on our machine, we are moving on to the fun stuff, app development!

The way Cordova applications work is by having a base web application with our HTML, JavaScript, CSS and other assets. For each platform we want to deploy and build locally, we have to add the platform. This will also enable us to use emulators for devices on our development machine. We will then invoke the build process, which takes assets from our main WWW application and packages and deploys them to the various platforms we have on our machine. So if, as we are about to do, have platforms for Windows Phone 8 and Windows 8, the build process takes our web assets from our base WWW app, copies them to those specific platform installs.

Let us take a look at this…

To create an application in Cordova, we use the CLI to have it generate the shell of our application by running the Cordova create command

cordova create MyApp com.jptacek.MyApp MyApplication

The MyApp parameter identifies the directory for the application, which will be created. The second argument, is the identifier, which you want to be unique. Most people use the reverse domain style identifier. The last parameter is optional, but is the title of the application for display.

This process will actually go and download the latest template and create the project structure

Cordova App Creation

If we take a look in our directory, you will see it created the default structure for the application with the creation of a www directory with a shell application, a plugins directory, etc.

Cordova App Creation

So far, so good, but we cannot actually BUILD anything yet because we haven’t created any platforms on the development machine. The WWW directory shown above has our HTML, JavaScript, CSS and other assets. The platforms are the various devices we want to be able to build locally on our machine. The implication here is that you need to setup the local machine for those platforms. This is done by adding the platforms via the CLI.

Since we are doing this on a Windows machine, we will add two platforms, one for Windows Phone 8 and one for Windows “Metro” 8

Add application platform

Note, if you try and add platforms that are not available for development, Cordova will not allow this. For example, you cannot do iOS development on a Windows 8 machine, so Cordova will not be able to find the XCode libraries and will raise an error trying to setup. If you want to be able to build locally for an Android device, you will need eclipse and the Android SDK, etc.

By adding the platform, you are actually creating Visual Studio solution files for creating both a native Windows Phone 8 and

Windows 8 application that can be loaded in Visual Studio and run with the appropriate emulator.

Solution Directory

You can load up these solutions and run them natively. However, you first need to build the solution. At this point, you just have a skeleton setup for the project, no assets have been deployed to the skeleton of the project. To do this, you will run the build command in Cordova.

Cordova build

This then enables you to run either Windows 8 or Windows Phone 8 to see your solution. Two things… Since each build recreates your solution files from the default WWW directory, your changes will be overwritten. As a result, I usually don’t like doing my code editing with the WP8 and Windows 8 emulator.

Second, since you essentially have a web application, you like having access to tools you have come to know and love like Chrome Developer tools or FireFox as you develop your code. For this reason, I usually will create a Virtual Directory to server up the WWW assets from a platform, for example, Windows8, that are deployed during a build. This allows for me to use my tools of choice for web development.

The reality is, I am most likely to use build.phonegap.com for testing by using the actual native deivces. Build.PhoneGap.com will actually take your source, and build your application for the multiple platforms supported by PhoneGap. Its hydrate function automatically check for new versions and downloads when you launch on a mobile device like Android or Windows Phone.

I have not found a great way to do development with PhoneGap. I am VERY interested in the workflow other people use for their Cordova/PhoneGap development, please share!


 

AngularJS - Introducing Routes

AngularJS is a Javascript MVC framework from the fine folks over at Google. The focus of Angular is building complex HTML based client applications. Its design philosophy is data first, where your data will be updating the DOM. Contrast this to a framework like JQuery where the DOM will update your data.

AngularJS Logo

This is the seventh in a series of posts on AngularJS where we are using Chemistry data from the periodic table to help us understand the framework. The others posts are

  1. AngularJS - Introduction
  2. AngularJS - Introducing AngularJS Controllers
  3. AngularJS - Introducing NG-Repeat
  4. AngularJS - More with NG-Repeat
  5. AngularJS - Image Binding
  6. AngularJS - Introducing Templates
  7. AngularJS - Introducing Routing
  8. AngularJS - Introduction to Services
  9. AngularJS - Introduction to Directives
  10. AngularJS - Further with Directives
  11. AngularJS - Best Practices
  12. AngularJS - CSS Animations

Note: AngularJS does not allow for more than one ng-app directive. When I have multiple angular posts on the home page of my blog, only one application will work. I need to refactor the entire site to account for this. All of that to say this, you are best clicking on a single article so you can see the pages in action.

AngularJS is, at its heart, a Single Page Application (SPA) platform. While you can use it in many ways for client side development, it is great for SPA apps, and that means routing. In this post, we will introduce AnuglarJS routing. More information can be found at the official site on routing.

Routes are a way for multiple views to be used within a single HTML page. This enables you page to look more "app-like" because users are not seeing page reloads happen within the browser. To setup a page for routing there are several steps, but nothing overly difficult.

First, AngularJS requires a service, the route service, which is not part of the default Angular library. You will need to load a separate javascript file, angular-route.js, as part of your script loading. This file can be downloaded as part of minified file from the AngularJS.Org site or via CDN. After downloading, we update our scripts reference to include the routing file as so

<script type="text/javascript" src="../js/lib/angular-route.min.js"></script>

Second, this is our first non-trivial look at the Dependency Injection model in Angular. Angular's Dependency Injection model is crazy slick. When the application starts up, an injector is created that is responsible for loading modules. The injector is unaware of any of our services until we inject them. To take advantage of this, we inject the route service when we create our app module via a parameter. Our chemistryApp.js now looks like

'use strict';

var chemistryApp = angular.module('chemistryApp', ['ngRoute']));

We will be digging deeper into Dependency Injection down the road, but for now it is enough to ensure we pass in our ngroute parameter, which ensures that AngularJS will load the route service.

The next step is to create the routes for our application. For us, we are going to create two routes. The first shows our list of chemical elements, and the second is responsible for displaying details about a given chemical element. The way the routes work, we do a couple of things. First, identify the url that we will be routing. This the HTML # (hashtag) standard to allow us to navigate within the page. While not 100% required, it IS needed for old browsers that don't support the new HTML 5 standard. If you are so inclined, you can setup the route to bypass this with $locationProvider.html5Mode(true). For our example, the URL for a list will be http://site/#/chemlist. Once we have the URL we are mapping to, we define two other items. The first is the controller that the route maps to, in our case chemListCtrl and then finally the templateURL for our HTML fragment that will be loaded\injected into a view container on our page.

We also want to identify a route for a given chemical element, essentially a master-detail approach. This is done by creating a second route where we identify a parameter on the URL that can then be used to retrieve an array element. For our example, we will take the atomicNumber and pass it to a second controller that is responsible for loading a chemical element from our array and making it available to a detail view.

Both of these routes are then chained to our creation of our app like so

'use strict';

var chemistryApp = angular.module('chemistryApp', ['ngRoute']).
    config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl:'templates/chemList.html',
                controller: 'chemListCtrl'
            }).when('/chemList/:atomicNumber', {
                templateUrl:'templates/chemItem.html',
                controller: 'chemItemCtrl'
            })
            .otherwise({redirectTo: '/'});
    });

Notice, we define a default route for when we are unable to match on a URL.

The next step, other than actually creating our controllers and HTML views is to add a view to our page markup for Angular to inject our template into. That is as simple as

        <data-ng-view></data-ng-view>

Our controllers and templates are very similar to what we have done before. Our controller class is now

chemistryApp.controller('chemListCtrl',
    function chemCtrl($scope) {
        $scope.periodic = periodicData;
    }
).controller('chemItemCtrl',
    function chemCtrl($scope, $log,$routeParams) {
        var elementNumber  = $routeParams.atomicNumber;
        for (var i=0;i<periodicData.elements.length;i++) {
            if (periodicData.elements[i].atomicNumber == elementNumber) {
                $scope.element = periodicData.elements[i];
                break;
            }
        }

    }
);

The most interesting thing to note is that we are now injecting a $routeparams variable when creating our controller for the view we use for an individual item. This allows us to get the parameter for the ID from the route. For example, the url http://site/#/chemList/:5 allows us to grab the parameter for the atomic number using a statement such as var elementNumber = $routeParams.atomicNumber;.

Just to give a quick look at the template and how we form our URL, the template that builds the list is

<div id="elements1" ng-controller="chemListCtrl" class="container">
        <ul>
            <li ng-repeat="element in periodic.elements">
                <a ng-href="#/chemList/{{element.atomicNumber}}">{{element.name}}</a>
            </li>
        </ul>
</div>

Now, we are dynamically loading data and swapping views based on the route we select. Very nice!

Watch it in action

You can either visit http://angularperiodic.azurewebsites.net/ to see the code in action and as always find the code out on GitHub


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+