Tag Archive for Angular

Microsoft Ignite key takeaways

Great Content, Great Vibe; Ignite is here to stay

The first thing I learned from Ignite is that it wasn’t a mistake to attend to this conference. What a vibe! It’s always good to be around people with same interests and passion when it comes to technology. At first I was a bit skeptic about the integration of different Microsoft events but it turned out to be a success. The high quality sessions, well organized location (WiFi still kinda sucked but let’s call that a tradition) and for the first time I felt the Expo hall was actually a great addition to the conference. Normally this is just a platform for vendors but this time Microsoft had the biggest stands which were really good. People from the product teams where walking around every day to give information and support on a level I hadn’t experienced before. Awesome! So what are the key takeaways for me as a SharePoint / Office developer?

 

Self-contained Applications Cross Platform using ASP.NET

During the conference it was made clear that to drive productivity to the next level, the experience Microsoft offers should not be bound to a particular brand of device or even Operating System. This is a very bold statement if you ask me. The verge wrote an excellent article comparing its vision to Apples vision on this matter: http://www.theverge.com/2015/5/5/8550321/apple-watch-microsoft-hololens-us-future-vision-compete

A big help in getting to that experience are Self-contained Applications. We know this principle from Java for quite some time now. Basically Self-contained Applications include their own runtime and are built in a way that they’re deployable to any kind of platform. For instance using NodeJS for server operations and using AngularJS to build a Single Page Application you can create a package that is deployable to every platform that runs NodeJS. On top of that the entire application model (server – client) is written in 1 common (cross platform) language: JavaScript. These are non-Microsoft technologies but are advertised by Microsoft to leverage the new API’s Microsoft is offering in Office 365. The Office Dev team even supported this by handing out Raspberry Pi’s to stimulate development for Office on different platforms.

Finally Microsoft adopts this principle with the new ASP.NET 5. The DNX (.NET Execution Runtime) is open source now that can be found on GitHub (https://github.com/aspnet/DNX) and can run on any kind of platform. Given this fact we don’t have to run an ASP.NET MVC Application on an IIS server but we can use a Linux based server with the ASP.NET 5 runtime! Making the runtime open source gives a lot of insight in the .NET platform and is a huge leap forward for Microsoft. See a great session from Glen Condron here: http://channel9.msdn.com/events/Ignite/2015/BRK4703

 

Office 365 as Data Hub (ePaas)

Is SharePoint going away? Expected is that the brand name “SharePoint” is fading but the SharePoint technology is very much alive. It is the very foundation of the Next Gen Portals in Office 365. These portals are offering a way better experience for End Users but also from a developers perspective this is a huge improvement. For a while now Microsoft is unifying its API for Office 365 into one endpoint. With this endpoint developers can get all the data out of Office 365 they want. There was an example in a developer session where Rob Howard rebuilt the Video Portal by just using the Unified API in his own app running on NodeJS. In this case Office 365 is used as a Data Hub and not as a platform where we try to customize the OOB experience. When a different experience is required, we can now built it ourselves by leveraging the API. Andrew Connell describes this as ePaaS (Enterprise Platform as a Service) in this excellent post:

http://www.andrewconnell.com/blog/office-365-is-a-development-platform-epaas

 

SharePoint 2016

Remember the SharePoint Conference in 2012? In my opinion this was quite a confusing one. Microsoft just bought Yammer and was hinting towards the Cloud first approach for SharePoint Online thereby leaving the development on the On-premises version a little bit in the open. There was a lot of speculation on if SharePoint would made it to a next On-Premises version or not. In 2014 it became clear that SharePoint 2016 will be the successor of SharePoint 2013 On-premises.

Now at Ignite, Bill Baer announced what SP2016 is going to offer us On-premises and a little hint (again) on the future. “SharePoint 2013 will be the Foundation of every future SharePoint version.” he said in a session full of SharePoint 2016 intell! Wait, does that mean we can expect a SharePoint vNext On-premises after 2016? That wasn’t confirmed but wasn’t denied either. The vision on this I think is to bring SharePoint On-premises and SharePoint Online more and more together and fade the boundaries between the two. The Hybrid scenario for instance now is part of the SharePoint Products configuration wizard with the Scenario picker. This will make it way easier for admins to configure a hybrid scenario between SharePoint On-Premises and Office 365.

Microsoft has done some outstanding work under the hood to make SharePoint 2016 “Cloud-like”. For instance they’re introducing zero-downtime patching (just like Office 365), a new server role called minRole (minimal server role to scale up fast) and again a stretch of the limits and boundaries.

On a telemetry perspective, SharePoint 2016 will introduce a complete new experience to monitor real-time usage data of the entire SharePoint Farm. Think Google Analytics interface with lots of graphs for indication. Things that are monitored for instance are 404 responses, browser / device info and latency statistics between client, server and SQL.

 

We need windows 10!

This was already a big factor in the Keynote. Windows 10 will give us a whole new level of user experience. With Cortana integrated in and a lot of new compliance and security features all indicates this will be the biggest release of the Windows operating system to date. A couple of features can be found here: http://windows.microsoft.com/en-us/windows-10/feature-images

Cross Device experience will be elevated to the next level with Continuum! https://www.youtube.com/watch?v=-oi1B9fjVs4 This Experience will bring mobile devices and desktop / laptop devices even closer together. This can finally leverage the mobile devices to a “work machine” instead of a “reading machine” when connecting to an external display.

From a developer perspective the thing I liked most is that Microsoft is coming with a Windows 10 Nano version that can be run from a SD card for instance on a Raspberry Pi. This move clearly indicates Microsoft is betting on the IoT (Internet of Things) world to use Windows 10 as a platform for this. There is already a preview available as part of the Windows 10 Insider program: https://ms-iot.github.io/content/GetStarted.htm

More of the new key Windows 10 features: https://www.youtube.com/watch?v=84NI5fjTfpQ

 

Summary

It was great to (re)connect to all my SharePoint friends worldwide and see a lot of excellent content, sessions and labs. Ignite was a great event for me and I hope to return next year! Here a some links to other sessions I saw that I think were very good.

Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices

Building Business Apps Like They Do in the Valley with AngularJS, Node.js, and More

Transforming Your SharePoint Full Trust Code to the Office App Model

MVP Panel: Sample Apps and Intelligent Solutions Showcasing Office Graph and Delve Extensibility

Developing Web and Cross Platform Mobile Apps with Azure Active Directory

Dealing with Application Lifecycle Management in Microsoft Office 365 App Development

MVC using Angular and Promises in SharePoint 2013

Lately I’ve been reading all kinds of cool articles about Angular JS. One of them written by Jeremy Thake: http://www.jeremythake.com/2013/10/sharepoint-hosted-app-with-angularjs-for-mvc-javascript/. This was an excellent starting point for me to see what Angular has to offer. I noticed two things:

  1. Scoping in Angular JS is pretty tricky. Jeremy’s example was written in the global namespace and I wanted to add some best practices.
  2. Combine the scoping difficulty with multiple Asynchronous calls from your JavaScript code and it’s easy to get lost. Promises to the Rescue!

Namespaces in JavaScript

A very common issue in coding JavaScript is conflicts between 2 variables with the same name in the global namespace. If you code in multiple JS files it’s possible that var i for instance is used more then once. This can easily be avoided by using Namespaces like this:

var AP = window.AP || {};

This statement loads AP from the global namespace if it already exists and otherwise creates a new namespace AP. The functions or vars created in that namespace will never conflict with same function- or varnames in a different namespace. #winning!

AP.WebPropQuery = function() { var i = 0; };
AP.ContactsQuery = function() { var i = 1; };

This makes the code maintainable and readable while the var i now is always the right value in the right context. If you want to know more this is an excellent read:

http://www.kenneth-truyers.net/2013/04/27/javascript-namespaces-and-modules/

Angular JS

My goal here was to use the namespacing practice with the Angular is written. Angular also has a way of scoping everything and I found challenging to combine it with this approach of Namespaces.

With a directive in the HTML code “ng-app” we specify the scope of this Angular App. Using this code I register it as a Module so I also can use a Service later on.

AP.Promise = angular.module('AP.Promise', []);

My goal in this example is to load a Property from the Web’s Propertybag. This property contains the name of a Contacts list. I want all the contacts to be rendered with Full Name and Email address.

Controllers

A controller in the MVC pattern handles a certain part of the View. In our case a list of Contacts. I used the directive ng-controller=”ContactController” and matching JS code

/*
* Angular Controller Registration
* Dependencies: $scope and the $ProfileService
*/
AP.Promise.controller('ContactController', ['$scope', '$ContactService', function ($scope, $ContactService) {
   $scope.contacts = [];
   $ContactService.getContacts($scope);
}]);

When adding this Controller to the Module, I pass along 2 dependencies. $scope (which is kind of mandatory otherwise the controller would be useless) and $ContactService. In this service the logic is stored for getting the data out of SharePoint. The contents of the service

/*
* Angular Service Registration to Support SharePoint interaction
*/
AP.Promise.service('$ContactService', function () {
//Service Method to Get the Contacts
  this.getContacts = function ($scope) {
     //Logic
  };
});

This is the base of our Angular code. Now we need some JS to get the data out of SharePoint. In this example I’m using the REST API.

REST calls and Promises

One library that makes our lives easier when using REST API is jQuery. You might have noticed that the $ char is very popular and is used by lots of JavaScript libraries. We have to be carefull not to call into the wrong library here.

At the start of this post I created two functions in the AP namespace which we are going to fill. One for the Call to get the Web Property and one for the Call to get the Contacts.

/*
* Query object to retrieve Property from Propertybag
* Return: Promise object that is filled with data after ASync call is returned
*/
AP.WebPropQuery = function ($) {
   var deferred = $.Deferred();
   var execute = function () {
      $.ajax({
         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/AllProperties?$select=p42contacts",
         method: "GET",
         headers: { "accept": "application/json;odata=verbose" },
         success: function (data) {
            deferred.resolve(data);
         },
         error: function (err) {
            deferred.reject(err);
         }
      });
      return deferred;
   };
   return {
      execute: execute
   }
}(jQuery);

This is what the first function looks like. Now the important part is the Promise var deferred = $.Deferred(); This var is called a promise and is kind of like an object placeholder which you can work with untill the Async call replaces the object with the final result of the call. Using these promises you don’t have to nest the second call in the success function of the $.ajax call. This increase readability and maintainability of your code. Scott Hillier wrote a great piece on Promises and how to use them:
https://curah.microsoft.com/11711/using-promises-patterns-in-sharepoint-2013-apps-with-javascript-and-jquery

Making the function calls

The final missing piece in this is making the function calls from the logic in the Angular Service. Again the code of the service with the missing logic

/*
* Angular Service Registration to Support SharePoint interaction
*/
AP.Promise.service('$ContactService', function () {
   //Service Method to Get the Contacts
   this.getContacts = function ($scope) {
      //First Async Call
      AP.WebPropQuery.execute().promise().then(function (data) {
         //Second Async Call depending on data from 1st call
         AP.ContactsQuery.execute(data.d.p42contacts).promise().then(function (data) {
            //Data to work with
            var results = data.d.results;
            for (var i = 0; i < results.length; i++) {
               $scope.contacts.push({ fullname: results[i].FullName, email: results[i].Email });
            }
            //Apply scope to see results
            $scope.$apply();
         }, function (err) { });
      }, function (err) { });
   };
});

AP.WebPropQuery.execute() is the regular function call. With .promise().then() it now is possible to add a second function call based on the promise that is returned in the first. That second call also returns a promise and with that data we can populate our Model.

The View

The View to match all this JS code is a very plain and simpel piece of HTML.

<script type="text/javascript" src="/Style Library/Scripts/p42.contacts.js"></script>
<div ng-app="AP.Promise">
   <div ng-controller="ContactController">
      <ul>
         <li ng-repeat="contact in contacts">{{contact.fullname}} - {{contact.email}}</li>
      </ul>
   </div>
</div>

Results

The thing I really like about this combination of Promises and Angular is that your JavaScript has very clear build up. It’s very readable and maintainable and on top of that it’s very fast! This way we don’t have to wait on all the SharePoint JS files to be loaded as well since we use the REST API. Very powerfull stuff!

You can download a Visual Studio 2012 Solution here. This solution contains a Sandboxed Solution (still fine for provisioning stuff!) with a default Script Editor WebPart that holds the View HTML with the Angular directives.

Todo yourself:

– Create a Contact List and make sure the Full Name and Email are filled
– Create a Property using SP Designer called “p42contacts” in the rootweb and add the name of the Contact List as value.