This is an exciting time! The much anticipated SharePoint Framework Preview was released yesterday. And guess what … they are essentially Add-ins /Apps. Right now just the web parts piece is released and the end result is an improvement over app parts. The most noteworthy part is that the web parts are now on the page as opposed to being inside of an iframe! They have a couple more improvements like being able to be fully responsive, having web part properties. They mention that new developments will be added frequently and they are targeting a release time frame of early 2017.
The biggest hurdle that I can see for traditional SharePoint developer is the tooling. If you are not comfortable with using a command line, Node.js, NPM, Yeoman or Gulp then you should invest a large chunk of time to familiarize yourself with those technologies. I believe that having a base knowledge of the “What” is actually happening when you type “yo @microsoft/sharepoint” is important. Most modern day front end web developers are already comfortable with these things. For the traditional SharePoint developer most of these things will be foreign and seemingly difficult to grasp at first (for some).
So you’ve visited the SharePoint Framework Developer Preview Release git-hub and you’re following the steps but you find yourself scratching your head. What did you miss? What is all this stuff? Where do you begin to even get started?
First off don’t feel bad.. most people are seeing this for the first time just like you.
<rant> Just the other day I discussed the front end development build process of node/gulp/npm to other day to our Senior SharePoint developers and even they were confused. Some even got pissed off and mad at Microsoft. I can remember the comments clearly, “COMMAND LINE? What year is this?”. I’ve embraced the change and I can see the good things that can come out of it. Getting back to point of this article. </rant>
I recommend that you take the time to learn about the new tools that they are asking us to adopt. There are ton’s of free online resource on YouTube alone… However if you have or can get your job to pay for a Pluralsight you will access to premium content with some of the top authors (this will be more important for the SharePoint work)
Online resources (free) to help you get familiar with for Node/Gulp/TypeScript/Yeoman
- Node.js Fundamentals
- NodeJS – NPM Package Manager – Tutorial 2
- Gulp.js Build System #1 – Fundamentals
- Gulp – The Basics
- TypeScript/ES6 Module Syntax Intro
- Yeoman – Read first paragraph
Pluralsight Courses for SharePoint Client Object Model
- David Mann
- Rob Windsor
- Rob Windsor, & Sahil Malik
Can I just use Visual Studio? PLEASE!@#!@ Do I need to learn all the front end tooling?
The framework can be intimidating for the people not comfortable with the technologies listed. For the most part you really just need to learn a couple of things and you can get by. TypeScript is not one of those things. Good news for those most comfortable working in Visual Studio. They have documentation on how to get setup via Visual Studio 2015 (Update 3) here. The bad news is that is still uses Node.js and the Gulp build tasks to compile and build the project. We will just have to wait and see if the process is improved with future releases.
Ok I got all that…
After you’ve covered all this then you should walk through the examples. The documentations is very good at explaining how to get everything installed and get up and running with your first Hello World web part. My only piece of advice is to read through everything 1 step at a time. It took me a few reads before I was able to get the first web part to load inside SharePoint.
- Get an Office 365 Developer Account
- Learn the fundamental technologies in play – Node.js, Gulp, Yeoman, Node Package Manager (npm)
- Become a TypeScript master
- Changes, Updates, Fixes will be coming frequently with a release time frame of 2017 (so they say)
- Preview is missing a few things that a traditional deployment would have
- Examples on how to deploy files to SharePoint / not CDN
- Examples on how to deploy assets (List Definitions, Content Types, Site Columns) => Notes on Solutions Packaging