SharePoint Framework Overview

This module explains the development options we have in SharePoint. It gives an overview of the toolchain of SharePoint Framework and how it fits into the SharePoint development story.

Lessons

• What is SharePoint Framework
• Why SharePoint Framework?
• Modern toolchain
• The Future

After completing this module, students will be able to:

• Understand the development models in SharePoint
• Understand why SharePoint Framework was introduced
• Know what the toolchain consist of and what the role of every tool is

Preparing your machine for the SharePoint Framework

This module explains how to prepare your machine for SharePoint Framework development. Configuring your SharePoint environment for development and deployment is also discussed.

Lessons

• Setup Office 365
• Software Installation

Lab : Preparing your machine for the SharePoint Framework

• Set up an Office 365 developer tenant
• Set up your development machine

After completing this module, students will be able to:

• Set up a machine for developing with the SharePoint Framework

Node.js Modules

This module explains how a node.js project is structured, explains the role of the different components contained within and how to scaffold a project from scratch. It illustrates the different kind of modules you have and how to work with them; i.e. installing, versioning, locking down, caching…

Lessons

• Modules
• Creating a Project
• Using Modules
• CommonJS
• Important Modules

After completing this module, students will be able to:

• Setup a node.js project using npm
• Install the right modules for their node.js project
• Loading and caching modules in a node.js project

SharePoint Framework Client Web Parts

This module explains how to use the Yeoman generator to create a SharePoint Framework project. It will illustrate the structure of a SharePoint Framework project. This module introduces client-side web parts and how to make basic changes to it. It also introduces the local and online Workbench, where your web parts can be tested.

Lessons

• Framework Client Web Parts
• What is a Client Web Part?
• Creating a project
• Exploring Project Contents
• Running Your Project
• Gulp tasks
• Web Part Configuration

Lab : Create a SharePoint Framework Web Part

• Create a SharePoint client-side solution
• Take a look at the generated project
• Modify the properties and the property pane
• Modify the web part
• Test on SharePoint

After completing this module, students will be able to:

• Use Yeoman to scaffold a SharePoint Framework project
• Understand the different components inside a SharePoint Framework project and what their role is
• Create client-side web parts and make changes to it
• Run their client-side web parts on the local and online workbench
• Understand and use the Gulp tasks

JavaScript Introduction

This module explains about the origins of JavaScript and introduces the student to what JavaScript is.

Lessons

• What is JavaScript
• What is ECMAScript
• Using libraries to extend JavaScript functionality
• Debugging JavaScript with the browser debugger

After completing this module, students will be able to:

• Understand where JavaScript is loaded and run
• Use the browser debugger to debug JavaScript code

JavaScript Language

This module explains how to write basic JavaScript. It describes how to create and use variables and the types that are available in JavaScript. Also, it explains about objects in Javascript, including some out-of-the-box objects like Date, Array, Math, etc. The module shows how to write functions and explains about the scopes they create. Prototypes are also introduced. Error handling is the last part of this module.

Lessons

• Variables, Objects, Arrays and Functions
• JavaScript Scopes and Closures
• Function Parameters
• Function Constructors
• Prototypes
• Error handling

Lab : JavaScript Basics

• Read a number input from a user and compare it with a random value
• Write a function to test the elements of an array
• Write a function that transforms the casing of a string
• Write a rock-paper-scissors game using JavaScript objects
• Solve a JavaScript scope problem

After completing this module, students will be able to:

• Write basic JavaScript
• Create variables and objects in JavaScript
• Write JavaScript functions
• Understand JavaScript scopes
• Understand and extend JavaScript prototypes
• Handle JavaScript errors

JavaScript Patterns

This module explains how to use some of the most popular patterns in JavaScript.

Lessons

• Callback Pattern
• Options hashing
• Self-invoking functions
• Class Pattern
• Module Pattern
• The self reference

After completing this module, students will be able to:

• Use callbacks
• User option hashing
• Write a self-invoking function
• Use the Class and Module patterns
• Understand the self reference

TypeScript

This module explains how Typescript solves many of the problems discussed in the previous modules. TypeScript adds type annotations and code compilation to your development process so that you write better code. TypeScript is used by default in all SharePoint Framework generated projects. This module will discuss the TypeScript language and how it can help you in building your enterprise scale applications.

Lessons

• What is TypeScript
• Using TypeScript in your project
• Variables
• Functions
• Interfaces and Classes
• Modules and Namespaces

Lab : Creating a toy store with TypeScript

• Creating the model classes
• Providing dummy data
• Creating the shopping cart
• Using an external library

After completing this module, students will be able to:

• Use TypeScript as a typed superset of JavaScript
• Configure the TypeScript compiler tsc to convert the TypeScript to JavaScript
• Work with interfaces, classes, generics, lambda’s, … in TypeScript
• Debug the TypeScript code
• Create TypeScript modules that can be shared and reused

Client Web Part Properties

This module explains how to modify the property pane of your web part. It explains how to configure and use your own properties. It discusses how to dynamically load property pane options, create custom property controls, validate property values.

Lessons

• Client Web Part Properties
• Webpart Properties
• Adding Properties
• Using Properties
• Preconfigured Entries
• Dynamic Data
• Custom Properties
• Advanced Configuration

After completing this module, students will be able to:

• Customize the web part property pane with additional properties, groups and pages
• Synchronously and asynchronously load property options into the property pane
• Build custom controls to be used inside the property pane
• Provide property validation

Loading Frameworks and Libraries

This module explains how to load additional libraries inside your SharePoint Framework project from different sources.

Lessons

• Loading Libraries and/or Frameworks
• Considerations
• NPM Package
• Loading from a URL
• Loading A Local Copy
• Loading jQuery and plugins
• Component loader

After completing this module, students will be able to:

• Load additional libraries in their SharePoint Framework project using either npm, a url, local copy or the component loader.

SASS

This module explains how to apply styling to your web components by writing maintainable and simpler CSS by means of Sass.

Lessons

• What is SASS?
• The Language
• Variables
• Types
• Comments
• Nested Rules and Properties
• Partials
• Extend
• Mixins
• Functions

Lab : Sass in a SharePoint Framework project

• Optimizing the SCSS file
• Nesting and extending
• Working with mixins
• Observing the generated CSS

After completing this module, students will be able to:

• Write Sass code to style their html components with
• Compile the scss files to css