BlogPost

SharePoint Framework (SPFx) moving forward in SharePoint Online and SharePoint 2016.

SharePoint Framework (SPFx) moving forward in SharePoint Online and SharePoint 2016.



Tuesday was the day we started with Bill Baer and Dan Kogan with and introduction to the SharePoint Framework, then onto Chakkaradeep Chandran to Build client-side web parts or Microsoft SharePoint and then finished off with the future of SharePoint development with Mike Ammerlann and Luca Bandinelli, just overload for any SharePoint Geek.

Now, after getting blown away yesterday (and the conference is only half way through the week!) I'm going to turn the next x amount of my blogs into going through each component of the new development tooling so that I can deep dive into each section so that I can learn and hopefully it will help someone else in the process… all the credits and Information comes from the people and sites listed through this page.

Let's see how we get on...

To start the below diagram is a server side tool comparison diagram that was show to us on a few of the sessions throughout yesterday




As you can see above the client side rendering is coming into full effect! the below diagram show the open source tooling that we are going to take on…





SharePoint Framework development tools and libraries

TypeScript

All the information below is from dev.office

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces. You can use these to build robust client-side web parts.


JavaScript frameworks

You can choose any one of a number of JavaScript frameworks to develop client-side web parts. The following are some of the most popular:

Because client-side web parts are components that are dropped into a SharePoint page, we recommend that you choose a JavaScript framework that supports a similar component model. Lightweight frameworks such as React, Handlebars, and Angular 2 all support a component model and are well suited to building client-side web parts.


Node Package Manager (npm)

SharePoint client-side development tools use the npm package manager, which is similar to NuGet, to manage dependencies and other required JavaScript helpers. npm is typically included as part of Node.js setup. For more information about npm, see the npm documentation.


Node.js

Node.js is an open source, cross-platform runtime environment for hosting and serving JavaScript code. You can use node.js develop server-side web applications written in JavaScript. The Node.js ecosystem is tightly coupled with npm and task runners such as gulp to provide an efficient environment for building JavaScript-based applications. Nodel.js is similar to IIS Express or IIS, but includes tools to simplify client-side development. For more information about Node.js, see the following:

  • Getting started with Gulp
  • TypeScript and Gulp
  • Articles about Gulp


Gulp task runner

SharePoint client-side development tools use gulp as the build process task runner to:

  • Bundle and minify JavaScript and CSS files.
  • Run tools to call the bundling and minification tasks before each build.
  • Compile LESS or SASS files to CSS.
  • Compile TypeScript files to JavaScript.

For more information about gulp, see the following:


Webpack

Webpack is a module bundler that takes your web part files an dependencies and generates one or more JavaScript bundles so you can load different bundles for different scenarios. The development tool chain uses CommonJS for bundling. This enables you to define modules and where you want to use them. The tool chain also uses SystemJS, a universal module loader, to load your modules. This helps you to scope your web parts by making sure that each web part is executed in its own namespace.

Form more information about webpack, see the following:


Yeoman generators

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. SharePoint Yeoman generator will be available as part of the framework to kickstart new client-side web part projects. Once the project is generator, you can use your choice of IDEs like Visual Studio or HTML/JavaScript code editors like Visual Studio Code or Sublime Text or Atom.

For more information about Yeoman, see the following:

The following are some common Yeoman generators that you can try, depending on your choice of framework:


SharePoint REST APIs

The SharePoint Framework provides key integrations with SharePoint experiences and targets web development. The SharePoint REST APIs enable you to interact with SharePoint and other workloads that shape your web part functionality. We recommend that you become familiar with the following set of REST APIs:



Patterns and Practices

The Office Dev Patterns and Practices / SharePoint Pattern and Practices (PnP) initiative provides code samples, patterns, and other resources to help you transform your existing solution to the SharePoint Framework. Be sure to become familiar with the code samples and guidance that is available through the PnP effort.




Additional resources