Jared Matfess's Blog

Having fun with SharePoint, Office 365, and Microsoft Azure

The New SharePoint Framework Meets Corporate IT — July 27, 2016

The New SharePoint Framework Meets Corporate IT

As a consultant there are times where I am slightly disconnected from the “Corporate World”, which is honestly part of the draw. As consultants technology is the great enabler for providing clients with software & services in order to help them realize their business goals. So as a consultant we tend to gravitate towards both trends & solutions that help us provide more value in a shorter amount of time. Demonstrating value is what helps us to build relationships which in turn often times leads to repeat business – rinse, lather, repeat. However, in the Corporate World life is filled with words like standards, policies, approved lists, governance, compliance, legal, etc.

I have recently resumed working for one of my favorite clients at a large Insurance company in our area, which entails the usual badge, laptop, parking pass in order to comply with the contractual agreement between my company and theirs. One of the interesting points to note is that in order for me to perform development work, I actually need to use their equipment to access their environment. This is a rather large SharePoint business application that I had previously built which is a combination of code (all client side) and configuration with SharePoint 2013 workflows. During my previous engagement I had actually been given local administrative rights on my machine which allowed me to load software like Visual Studio Code in order to perform my job.

Fast forward to this engagement, I’m without Administrative Rights on my machine and my two text editors of choice are Notepad or SharePoint Designer. I walk down to their Tech Express counter to see about having them install Visual Studio Code on my machine and they empathize but explain that their new policies prohibit the installation of any software that hasn’t already been packaged by their Engineering group. When I inquire about that process it basically entailed a multi-step review by Legal, Compliance, Software Engineering, etc. Typical turnaround time is a couple of weeks which likely isn’t helpful when the work needs to be done in the next week or so. I thank the Tech and proceed back to my desk where I submit a request for Administrative Rights on my machine thinking at least if I can get that, I’ll load the software myself and be done with the work hopefully before their security group catches on.

My request is routed to a governance approver who expresses concerns at both my status as a non-employee but also my request (setup developer laptop is my vague request). We speak more about it and I learn that not only is the technician correct about the software process but he also proceeds to inform me about the extra attention that is placed on Open Source software. He explains that the EULA agreements can be confusing and sometimes publishers make distinctions between personal & corporate use which can have implications on who owns the intellectual property. We talk about the way development is going with open source technology such as NodeJS, Bower, Gulp, and installing Node packages to help streamline development and I’m met with the realities of Corporate IT. The main priority for Corporate organizations is to protect the company – functions like Legal, Human Resources, and event Information Technology have the initial marching orders to protect the company. Just because development trends are moving towards open source technology – big corporations are afraid of this from a support & licensing perspective. From a security perspective they also do not like things such as local web servers and folks having persistent administrative rights to load the newest packages from Github onto their machines.

So where am I going with all this? So for today’s SharePoint Development there area really a few choices:

1) Configuration with mostly out of the box functionality and perhaps customization using SharePoint Designer. (workflows, maybe a little jQuery here and there)

2) Client side development where you’re hopefully installing some sort of text editor like VS Code, Brackets, etc to write a combination of HTML & JavaScript. If you are able, you might include things like NodeJS, Gulp, Bower, etc to automate portions of your development life cycle.

3) Visual Studio (heavy) development – either server side code, sandbox solutions, Add-in model, or maybe even client side development since it does support that as well. 🙂

What I see as an interesting problem which will impacts both SharePoint as well as Web Developers in these large organizations is the trend towards NodeJS, Gulp, Yeoman, and whatever other Node modules/apps become popular. Loading these into the global scope can require administrative rights which is often times not given out. Furthermore to make it more difficult, you’re not just asking to have Visual Studio Professional loaded on your machine. With just Visual Studio, Enterprises can provide temporary admin rights or use policies to allow you to just run Visual Studio as an Administrator. There’s also the very clear licensing agreement between Microsoft & “Large Corporation”.

But the there is the argument that we are talking about “web development” and not really SharePoint development which I agree to. But if you think about it – web development is kind of that grey area because from what I have seen, most large organizations treat their external websites much differently than their corporate Intranets. The Internet site represents the company, the brand, & services both customers & potential candidates alike. Many times agencies are brought in to help with these from the design perspective and/or development resources are brought on to “build it”. In those situations the developers likely fall into the same category as me – the consultant types which bring our own equipment with no barrier to entry. SharePoint is on the corporate intranet, inside the firewall, maybe sometimes in O365. Microsoft touts the #’s of organization’s in the Cloud but for me most of my main clients are on-premises.

I’m not saying that I am against the new “SharePoint Framework” what I’m saying is, I think there’s going to be a market to cater to (being large enterprises) where perhaps there’s a less automated way – or better yet a more contained set of tooling for those developers. To scoff and say that large enterprises need to work towards embracing the way things are going is difficult as well. Going back to my earlier point, most of those departments (HR, Legal, IT, etc) are there to protect the company.

I don’t have the perfect solution but I can tell you that I’m curious to see how this unfolds.

Bower, Yeoman & More — June 28, 2016
Current thoughts on the new SharePoint Framework — May 15, 2016

Current thoughts on the new SharePoint Framework

The blogosphere erupted after the May 4th Future of SharePoint event for right reason – senior leaders at Microsoft unveiled the roadmap for new functionality to first be released in O365 and that will eventually trickle down to on-premises via “feature packs”. Out of all the UI/UX enhancements that were announced, the one bit of news that perhaps got the least coverage but the most post-event commentary was the new SharePoint “Framework”.

I’m not going to re-cap the features of the new framework, that’s been done much better by the likes of Chris O’Brien & Doug Ware:

Chris O’Brien’s code examples, breakdown, etc
Doug Ware’s comments


What struck me as interested and perhaps even excited came a few days later during a Collab365 session where Daniel Kogan (Microsoft) started to talk about how all new enhancements to the SharePoint Platform are going to be developed using this new framework. Let me dig into that a little bit – the new page structures which include responsive design, are going to be developed using this new framework.

This is a huge deviation from the Microsoft of old where they offered Sandbox Solutions & Add-ins/Apps but never had to suffer with building client solutions using these development frameworks. Right out the chute you now have <insert big number of developers here> who have the ability to influence this new development framework. Just the fact that the new branding techniques are being introduced to the platform using the SharePoint Framework has me feeling optimistic that maybe it won’t completely suck.

There’s also the fact that Microsoft is all-in on continuing to push developers towards modern web development tools & technologies such as Node.JS, Gulp, Yeoman, Typescript, etc. I love that this is exactly the same message I have been communicating during my SharePoint Saturday sessions introducing attendees to client side development using JavaScript. The other unexpected benefit of this is you will be able to find more developers who are able to build customizations on top of SharePoint without having to be “SharePoint Developers” since Microsoft is embracing common web development patterns.

So yes, this might be the 4th development pattern recommended to SharePoint Developers – but it honestly isn’t quite so different from what many folks are doing today. Honestly since O365 has come out, there are a a lot of developers building rich solutions which leverage the CSOM & JSOM and which are included via Script Editor or Content Editor Webparts. This framework is extending that capability and with Microsoft eating their own dog food – I imagine that you will see continual enhancements to the framework even after initial release.

I’m looking forward to getting my hands on this new framework and try it out myself!

Introduction to Bower Package Manager — February 29, 2016

Introduction to Bower Package Manager

 

This blog post is part of a new series that I am writing to help SharePoint Developers learn how to improve their skills to become more adept with modern web development techniques. They will be tagged with “SharePoint Web Development” so feel free to browse them all. 🙂

If you have met me before, you will know that I am a huge fan of Visual Studio Code. For the past 9 months I have exclusively been using it to build client side solutions for my clients. For those of you who are also doing client side development let me know if this workflow sounds familiar to you. So you are working with your project team and receive the requirement to build a webpart that pulls items from a calendar list and presents them back to the user in a way that they can add them to their Outlook calendar. Rather than describe it in great detail – here is a quick screenshot of what the client is expecting to see:

upcoming_events

Now if you are like me your first thought is “No problem” that is absolutely a slam dunk using a bit of JavaScript, HTML, and some CSS styling. To grab the items from the list I will either use SPServices or more likely jQuery for the AJAX call and I will probably format the date using Moment.JS. Next, I will likely open up Chrome and grab a version of jQuery compatible with the client’s browsers along with Moment.JS. From there, I will create a folder on my local hard drive, open up Visual Studio Code, and set that as my project folder. The next few steps are a matter of creating folder structures for the libraries, copying them in, etc. Now this is not a ton of work since it is a small project, but imagine doing that many times over the course of a week, month, year. What about managing multiple libraries? I have had projects with 5-7 libraries for larger projects and repeating those steps can be a bit of a pain. Well, here is how Bower can come in and help optimize your workflow.

So what do you need to get started with Bower? Well first off, you will need to have Node.JS running on your workstation. I don’t have a step by step tutorial for that but it’s pretty easy.  (Here’s one for installing on Windows) Once you have Node.js all set, you will want to install Bower. Open up a command box and type in npm install bower -g and this will install Bower globally on your machine. Yeah it is really that easy. 🙂

Navigate to your project (folder) and now you can very quickly add in 3rd party libraries from Github directly to your project. With the command prompt still open, try typing in:

bower install jQuery

Bower-jquery-example.PNG

jQuery is special because there are two tracks of it – a version 1.x & 2.x which have different browser compatibilities. Bower prompts you to pick a version and by typing in 2, I receive the version 2.2.1 of jQuery in my project.

Try it out and watch your project – what you should see is a new folder created called bower_components and then inside that you will see jQuery.

What if you don’t want the latest version of jQuery? Well, you can specify which version of jQuery you install by adding a # after the word jQuery and specifying the version.

For example: bower install jQuery#1.12.0

jquery-1.12

Not sure which version of jQuery is available? Why not search for it?

Type in bower info jquery  – and then look for the version that you would like to add. (For jQuery you may need to scroll quite a bit)

bower-jquery

You can follow this same type of setup for pulling in additional JavaScript libraries like Moment.JS, lodash, Twitter Bootstrap, etc. What you will find is after installing each package it will create a folder under the bower_components folder and pull in the necessary JavaScript files, etc.

Many times however you will want to specify the folder where you want to store these files and that is also pretty easy. Within your project folder you just create a file called .bowerrc and inside that some JSON notation to specify where you want packages installed.

For example if you wanted them all stored in the root of your project in a folder called “jslibs” you would add the following to your .bowerrc file:

{
“directory”: “jslibs”
}

Follow the previous steps of typing in bower install moment for example and watch it add the necessary package files into your jslibs folder. It is fine if you did not already create that jslibs folder, bower will create it for you!

So then there’s one really important concept to be aware of and it is the manifest file concept of bower.json. Basically what this does is keep track of all the packages you have added to your project and it allows you to automatically pull those in.

From the command prompt in your project directory you will want to type bower init. It will start to ask you a bunch of questions about your project. If you hit the Enter button it will grab the default such as the name, authors, etc. If you have already installed components it will ask if you would like to include them.

bower-init

Scrolling down a bit, I let bower add commonly ignored files to the ignore list. These include things like test files. After that there’s a question about marking the package as private which prevents it from being accidentally published to the registry. After that it gives you a brief preview of what your bower.json file will look like, once you click Yes it will actually create the file in your project root.

Going forward you can install additional packages using bower install jquery –save and it will also add jQuery to the list of dependencies.

If you want to maintain dependencies for packages that are just relevant to development you would type bower install jquery –save-dev

The really awesome part of having a bower.json file is that you don’t need to check in the 3rd party libraries to source control and also it makes shipping your project a lot easier.

If you type bower install it will read the bower.json file and pull in all of your dependencies! How awesome is that?

I plan to follow up soon with another helpful post on Bower.

Add Node.JS to your learning plan — June 20, 2015

Add Node.JS to your learning plan

I had the pleasure of attending a fast & exciting session at this year’s Microsoft Ignite Conference called “Building Business Apps Like They Do in the Valley with AngularJS, Node.js, and More.” by Andrew Connell. It was one of those sessions that made me very thankful that Microsoft is now recording these sessions and putting them up on Channel9. In case you did not have the ability to see this session yourself, feel free to check it out here: https://channel9.msdn.com/Events/Ignite/2015/BRK4123

Andrew’s session can certainly add more detail than this blog post but I walked away with two very important ideas:

1. Server-side capability – Node provides the ability to for JavaScript to be run on the server vs just the client. That opens it up for some interesting possibilities when building provider hosted applications.

2. Client-side development improvements – Andrew talked about NPM (Node Package Manager) which is a way of downloading libraries/frameworks using Node. He did not go into great details but looking into NPM – I found that there are other libraries that could be used to automate certain development tasks such as Grunt.js which is a JavaScript task runner which can do things like minify JavaScript files.

For those of you out there who are starting to learn JavaScript and are moving from C#, I believe that looking into Node.JS appears to be a very good idea as part of your 2015 learning plan.

 

What’s in a namespace? — April 16, 2015

What’s in a namespace?

If you have attended any of my sessions on beginning Client Side Development you might have heard me talk about ensuring that you do not promote the public namespace. For SharePoint/O365 Developers who are starting to learn client-side the concept of namespaces are common in C#, but not as common in JavaScript. The whole purpose of developing under a namespace is to ensure that your variables do not collide with other variables, resulting in broken functionality, errors, etc.

The approach that I take to address this is by creating a unique object and then working under that object as a pseudo-namespace.

For example:

var jaredApp = jaredApp || {};
jaredApp.GetData = function(){

console.log(“This functionality exists under jaredApp”);

}

You could follow that approach and build out your other functions – and then it is as easy as jaredApp.GetData(); to call the function. The benefit of this is all of your variables fall under jaredApp (or whatever you decide to call it), rather than binding to the window object which is where variables are assigned by default – this is also referred to as the global namespace.

There are a couple of other approaches such as the immediately invoked function execution (IIFE) which looks something like this:

(function(){
console.log(“This functionality exists temporarily within this invoked function”);
})();

The nice things about the IIFE is all variables created within it are scoped within that function therefore they would not be bound to the global namespace, which prevents collisions.

Happy SharePointing & JavaScripting!

SharePoint Saturday New Hampshire Slides Posted — October 18, 2014