Part 1 - SharePoint Framework?
What is SharePoint Framework
During this introduction we will talk about the development options we have in SharePoint.
We will take a look at SharePoint Framework and it's toolchain and how it fits into the SharePoint development story.
- SharePoint Framework overview
- SharePoint Framework tools
Preparing your machine for the SharePoint Framework
In this module we will talk about the SharePoint Framework development process and how each of the tools fits into that process.
- Visual Studio Code
- Yeoman - scaffolding
- Node.js/NPM - local hosting and module management
- Phantom.js - headless browser
- Webpack - packaging
- Gulp - build configuration and automation
- Variables, Objects, Arrays and Functions
- Understanding the SharePoint Document Object Model
This chapter will show you some of the commonly used patterns.
- Constructors and Prototypes
- Callback pattern
- Option hashing
- The self-invoking function
- Class and Module pattern
Part 3 - Developing Client-Side Web Parts
In SharePoint Framework, Typescript is used by default in all generated projects. It allows for better typechecking while developing client-side code.
This module will teach you some of the basic elements we can use: Interfaces, Classes, etc.
- Implementing Types, Classes and Inheritance
- Programs and Modules
- Internal and external Modules
Building Client-Side Web Parts
The SharePoint Framework allows us to build modern client-side web parts. We will use the Yeoman generator to create a web part project.
During this module we will explore the project structure and make some basic changes to our first web part.
- Client-side web parts fundamentals
- Web Part Project Structure
- Changing the web part property pane
- Loading external frameworks
Loading SharePoint and Office365 data in client web parts
When loading data from client-side code, we will use REST. SharePoint has REST services, but there is also the Office365 Graph API we can connect to.
This module will teach you how to use the Framework HTTP Client to consume these services.
- Working with OData Services
- Discovering the SharePoint REST endpoints
- Office 365 REST API
- Handling cross domain issues with CORS
Extending your Client-Side web part projects
It is possible to add multiple web parts to your projects. Also we could share data between these web parts and not write the same code twice.
- Adding Multiple web parts to your project
- Share reusable code with multiple web parts / projects
Brand your client web parts with SASS and Office-UI-Fabric
In this module you will learn how to make your SharePoint Framework projects look good.
We will talk about SASS, which is a CSS pre-compiler and thus gives us better options.
Also, you will learn about Office UI Fabric and how to use it to get the Office365 look out of the box.
- SASS, the dynamic stylesheet language
- SASS Variables, Mixins, Nesting, functions, ...
- SASS Preprocessing
- Office UI Fabric Components
Client-side data binding with knockout.js
Knockout is just one of the many data binding frameworks available. In this module we'll look at data binding as a concept.
Then we'll explore Knockout and how it fits into the SharePoint Framework
- The need for data binding
- MVVM pattern
- Binding to collections
- Binding to functions
Using and building React components for the SharePoint Framework
During this module we'll cover the basics of React and how it's component system works. We will load components into our Framewokrk client side web parts.
- What is React?
- Writing JSX
- Building a SharePoint user interface using React
- Create and use your own React components
- Using the existing React components
Part 5 - Testing and Deployment
SharePoint Framework Testing
In this chapter, we will take a look at some of the debugging and testing options we have available for SharePoint Framework
- SharePoint Workbench overview
- Debugging your code
- Creating test for your client web part
The final step of each succesful project is it's deployment.
In this module you will learn how to deploy your SharePoint Framework projects and thus load your client side web parts on SharePoint pages.
- Debug and Release builds
- Packaging your web part
- Extending the build process with custom tasks
The SharePoint Framework or SPFx is a brand new development model that allows us to create modern client-side SharePoint experiences.
The first preview was released in August 2016 on SharePoint Online and will become available on SharePoint Server 2016 in 2017.
Most SharePoint developers today are excellent server side .NET developers but lack the required skills to make the transition to this new SharePoint Framework.
tools to start developing with the SharePoint Framework: TypeScript, Node.js, React, Knockout, gulp, yeoman...
Participants in this training should be experienced developers.
Knowing your way around SharePoint Online is advised.