55249 Developing with the SharePoint Framework

This 5-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework. In this course, students will learn about the new tools needed when developing with SharePoint Framework.

sharepoint_logo

55249 Developing with the SharePoint Framework

This 5-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework.

Overview

This 5-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework. In this course, students will learn about the new tools needed when developing with SharePoint Framework. Next to that, JavaScript and its potential pitfalls are discussed, leading into using TypeScript as typed superset of JavaScript. Students will also be introduced to the JavaScript library React, which is commonly used inside SharePoint Framework components. Using all these, previously mentioned, techniques, students will learn how to build client-side web parts, extensions, field customizers, … with SharePoint Framework. Finally, students will learn how to include other JavaScript frameworks, provide unit tests, configure the packaging and deploying their solutions.

Prerequisites

None.

Who Should Attend?

This course is intended for experienced developer who want to start building solutions with SharePoint Framework. No prior knowledge of JavaScript or TypeScript is required. Knowing your way around SharePoint is advised.

Course Outline

  • What is SharePoint Framework?
  • Why SharePoint Framework?
  • Modern toolchain
  • The Future
  • Setup Office 365
  • Software Installation

Lab: Preparing your machine for the SharePoint Framework

  • Modules
  • Creating a Project
  • Using Modules
  • CommonJS
  • Important Modules
  • 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

  • What is JavaScript
  • What is ECMAScript
  • Using libraries to extend JavaScript functionality
  • Debugging JavaScript with the browser debugger
  • Variables, Objects, Arrays and Functions
  • JavaScript Scopes and Closures
  • Function Parameters
  • Function Constructors
  • Prototypes
  • Error handling

Lab: JavaScript Basics

  • Callback Pattern
  • Options hashing
  • Self-invoking functions
  • Class Pattern
  • Module Pattern
  • The self reference
  • What is TypeScript
  • Using TypeScript in your project
  • Variables
  • Functions
  • Interfaces and Classes
  • Modules and Namespaces

Lab: Creating a toy store with TypeScript

  • Client Web Part Properties
  • Webpart Properties
  • Adding Properties
  • Using Properties
  • Preconfigured Entries
  • Dynamic Data
  • Custom Properties
  • Advanced Configuration
  • Loading Libraries and/or Frameworks
  • Considerations
  • NPM Package
  • Loading from a URL
  • Loading a Local Copy
  • Loading jQuery and plugins
  • Component loader
  • What is SASS?
  • The Language
  • Variables
  • Types
  • Comments
  • Nested Rules and Properties
  • Partials
  • Extend
  • Mixins
  • Functions

Lab: SASS in a SharePoint Framework project

  • Loading SharePoint data
  • Page Context
  • Web Services Overview
  • REST and ODATA Fundamentals
  • SharePoint REST API’s
  • AJAX
  • Framework HttpClient
  • Solving cross domain issues with CORS

Lab: Loading SharePoint data in a client-side web part

  • Build and Deploy a Framework solution
  • Overview
  • Building
  • Deployment

Lab: Deploying a SharePoint Framework client web part

  • What is React JS
  • Model View ViewModel (MVVM)
  • React Components
  • What is JSX
  • HTML Tags vs React Components
  • Creating Components
  • JavaScript Expressions
  • JSX Gotchas
  • Relationship with State Machines
  • Handling Component State
  • Adding Interactivity by means of events
  • Using Multiple Components
  • Transferring props between components
  • The Lifecycle of a Component
  • Alternative Syntax
  • SharePoint Framework and React

Lab: Building React components to view the members and permissions in your site

  • What is Office UI Fabric?
  • Office UI Fabric Versions
  • Fabric Core Styles
  • Example Uses
  • Fabric Components
  • Fabric JS
  • ngOfficeUIFabric
  • Fabric React

Lab: Using Office UI Fabric React Components

  • Deploying SharePoint Artifacts
  • Deployment Options
  • Asset Types
  • Features
  • Introduction to Microsoft Graph
  • Authentication Providers
  • Microsoft Graph API
  • Development
  • SharePoint Framework Extensions
  • Extensions Overview
  • Creating Extensions
  • Application Customizers
  • Field Customizers
  • Command Sets

Lab: Using the new Microsoft Graph client from within an application extension

  • What is Webpack
  • Entries and Outputs
  • Using Loaders
  • The need for Plugins
  • Installing Gulp as a node module
  • Gulp primitives
  • Gulp by example
  • Including test frameworks
  • Running tests
  • Component testing

Get Brochure and Pricing

More Like This

Get the course Brochure & Pricing

Our course consultant will contact you within 1 working day

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Get in touch with our consultant