Microsoft has just announced the SharePoint Framework – a new model for building SharePoint solutions. And although you can’t start building solutions using it just yet, there are quite a few things that you can start learning today to be prepared when the new framework becomes available.
SharePoint Framework – yet another tool in your developer toolbox
If you’ve been building SharePoint solutions in the past, you shouldn’t be worried. SharePoint Framework isn’t replacing or deprecating anything. It’s still perfectly valid to use the SharePoint Add-in model for building customizations. Everything you’ve learned in the past and have been using every day is still relevant. Additionally, your knowledge of SharePoint and its API will be relevant more than ever as the new solutions will be looking for efficient ways of interacting with SharePoint and new developers will start using the new model.
SharePoint Framework – it’s web stack
In the past SharePoint solutions were based on a proprietary model based on XML and WSP files. As a result you needed specific knowledge to be able to build SharePoint solutions and you could do it only using Visual Studio on Windows. SharePoint Framework offers new opportunities for all developers. For the first time you can build SharePoint solutions on any platform. You can build them using the tools and stack that you know – Visual Studio and .NET on Windows but you could as well build solutions using the new SharePoint Framework on OS X with Visual Studio Code and React. SharePoint Framework is based on web stack allowing you to use any framework to build your solution: a client-side framework for the UX and optionally a server-side framework for communicating with back-end systems or performing long-running operations. So for example you could build a Web Part communicating with SharePoint REST API using only Angular, you could build an Application communicating with your line of business systems using React on the client and Web API on the server or you could use Knockout to communicate with server-side APIs built with Node.js.
So with all that flexibility, what should you learn to get the most out of the SharePoint Framework?
JavaScript
SharePoint Framework uses exclusively JavaScript for building UX. No matter if your solution communicates with SharePoint or some external services, its presentation layer will always be built using JavaScript. While you have probably used JavaScript to some degree in the past, it’s important that you start learning more about how it works and what the best practices are. Start building your first applications and learning how to debug them efficiently. Try to port your existing requirements like logging or exception handling to JavaScript and read how different developers, not necessarily using the Microsoft platform, are solving these challenges.
TypeScript
JavaScript is a very loose language. It offers a lot of flexibility which can be harmful, particularly in larger applications. Coming from C# I would suggest you learn TypeScript. Although it’s not required by the SharePoint Framework, once you start using it, you will notice that you can find errors easier and write code that is easier to maintain than vanilla JavaScript. TypeScript adds richer syntax to JavaScript but eventually is transpiled to plain JavaScript so that it runs in every browser.
If you would choose to build SharePoint Framework solutions using TypeScript you will gain compile-time code verification and combined with tslint (syntax rules for TypeScript) you will enforce code consistency which is particularly valuable when building solutions with multiple developers.
Recently I’ve been working on an Angular solution where we use TypeScript. Quite a few times already TypeScript helped us finding inconsistencies in our code – and it’s not because we’re sloppy. It’s because JavaScript by default allows you to write your code loosely. If you’re curious about how Microsoft uses TypeScript themselves I would recommend a recent article by the Delve Engineering team.
Learn more about TypeScript at http://www.typescriptlang.org.
React
React is a rich framework for building web applications. It’s been around for quite some time and it’s being used by some big applications like Facebook or What’s App. If you’ve been following the latest announcements closely, Microsoft has been using React too. Delve Web or the new Document Library UX are just two samples Microsoft using React. Although the SharePoint Framework supports any framework you might think of, Microsoft chose to build their solutions using React. Because Microsoft committed to sharing their UX code, if you woudl like to leverage some of their efforts, learning React is a smart thing to do. I would also recommend you read a recent blog post by the Delve Engineering team in which they explain why they chose to refactor Delve from home-grown JsMVVM to React.
Learn more about React at https://facebook.github.io/react/. When you’re ready to start, grab the React project blueprint from my blog at https://blog.mastykarz.nl/blueprint-react-webpack/.
Node.js
Node.js is also known as server-side JavaScript and can basically be used in two ways. On one hand you can use it as the runtime for your application – similarly to .NET. You would then build your application in Node.js and have it run on top of the Node.js engine. Your application could be a complete web application similar to ASP.NET MVC or you could build APIs like you would with ASP.NET Web API.
Another way of using Node.js is as the platform for developer tools. Node.js ships with npm – a package manager similar to NuGet – and thousands of ready-to-use packages that do virtually everything: from running tasks to optimizing your application files for release. You can easily combine these packages together and build your own developer toolset. There are many developers all over the world using Node.js and npm for hosting their toolset and finally we can leverage the same capabilities for building SharePoint solutions. This is how Node.js is used within the SharePoint Framework.
Setup and more information about Node.js are available at https://nodejs.org/en/.
Gulp
Gulp is a task-runner based on Node.js. You could compare it to MSBuild with the slight difference that tasks are described using code rather than configuration. Web developers use Gulp frequently to implement the build process for their web application: from transpiling TypeScript and Sass files to bundling the application using Webpack. Virtually anything can be done with Gulp and knowing how to build Gulp tasks is invaluable.
In your SharePoint Framework projects you could use Gulp to optimize your solutions for release, run automated tests and verify that the solution adheres to your organization’s guidelines. SharePoint Framework itself uses Gulp for the different tasks: from building and starting a local web server to packaging for release.
You can find more information about Gulp at http://gulpjs.com.
Yeoman
Developing using Visual Studio how often have you used the New Project Wizard to pick a template and have Visual Studio scaffold the particular project type for you including the commonly used files and configuration? All developers want to be productive and spend their time on building the actual application rather than scaffolding the project.
Yeoman is another Node.js-based tool that allows you to quickly scaffold a project. There are hundred of generators available on the Internet for variety of projects – from web applications to cross-platform applications. There are even Yeoman generators for dotnet core and Office Add-ins, and the SharePoint Framework uses Yeoman too!
Having built both Visual Studio project templates and Yeoman generators I find Yeoman generators to be easier to build and customize which might be invaluable when your organization will start using the SharePoint Framework and will want to start every project using your organization’s guidelines.
More information about Yeoman is available at http://yeoman.io.
Webpack
When building web applications using ASP.NET MVC it allows you to bundle and optimize the different assets in your application to optimize its performance. In ASP.NET MVC this is done on runtime.
Building client-side applications optimizing your assets can make a huge difference in your application’s performance. There a number of approaches that you can use. For one you could manually combine a number of Gulp plugins and write your own optimization task. But perhaps a better – easier way is to use Webpack. Webpack is module bundler that can be used in a number of ways including being called from Gulp tasks. Using its configuration settings you can specify how many bundles you want, what you want to include in each one of them and whether they should be optimized or not. The Delve Engineering team has recently shared how they use Webpack for bundling Delve and also the recently announced SharePoint Framework uses Webpack for bundling the generated packages.
Read more about Webpack at https://webpack.github.io.
Git
You might have noticed that over the last months Microsoft has been gradually moving from CodePlex to GitHub with their projects. Now everything from Azure libraries and documentation to Office Dev PnP is hosted on GitHub and knowing how to move around GitHub and use Git is very valuable both for consuming and contributing to the numerous initiatives that help developers. If you’ve worked with TFS in the past, there are some similarities with Git but there are also big differences so be sure to take your time with it and learn the differences.
You can download Git and learn more about using it at https://git-scm.com.
Visual Studio Code
Visual Studio Code is an open-source code editor built by Microsoft. Despite its name it’s very different from Visual Studio which is an enterprise-grade IDE. Nevertheless Visual Studio Code is a valuable asset in your developer toolbox and I would challenge you to give it a try and build a web application with it. You will find it surprising how fast it is comparing to Visual Studio and how far it takes you for building web applications.
Yes, you will be able to keep using Visual Studio to build SharePoint Framework solutions, but why not use a tool which is more light-weight and with which you could be as productive or maybe even more productive instead?
Get Visual Studio Code from https://code.visualstudio.com.
Next steps
I’ve been using all of these tools myself for the past year – some more than others. I’ve been building Office Add-ins and web applications using the Yeoman Office generator using Angular on OS X. I’ve contributed to the Yeoman Office generator. Over the past few months I’ve been contributing to building Angular directives for Office UI Fabric on GitHub and have presented about React. Currently I’m working on an Angular solution using TypeScript.
In all that time the one thing I’ve noticed, is that the switch to using these new tools isn’t as hard as you might think. Moving away from the wizard-based world of Microsoft developers might be scary at first, but once you pass the first hurdles, you will notice, that through these new tools you will actually become a better developer. In most cases these tools are more verbose showing you what exactly went wrong without giving you their own interpretation. Another great benefit is, that by using these tools you open up to a new developer community – one that isn’t tied to a specific platform, but one that’s about developing web applications using the latest capabilities and tools.
I would strongly recommend that over the coming weeks you give these tools a try and build a web application using them – even if it’s only a pet project. You will learn a lot and everything you learn, you will be able to use for building SharePoint solutions on the SharePoint Framework. And when the SharePoint Framework becomes available for us to use, you will be able to leverage it to its full potential.
