1. SPFx – A modern development tool for SharePoint
Kirti Prajapati
SPConsol

2. Kirti Prajapati SPConsol SharePoint Consultant, Ahmedabad, INDIA
11+ years experience
MCTS
Training
Contact Details
Twitter Facebook : facebook.com/kirti.prajapati.7374 LinkedIn : linkedin.com/in/kirtiprajapati

3. Agenda Introduction SharePoint Framework Intended Audience
Why do we need the SharePoint Framework?
What is the SharePoint Framework?
SharePoint Framework
Development tools and libraries
How the Toolchain works
Demo - Building client-side web parts
Intended Audience
Traditional SharePoint developers, Web developers
No previous experience with “modern web development” required

4. SharePoint Development Background

5. 72% 2000 2016 2003 2007 2010 2013 2001 UX Extensions Data Access
of customers are leveraging cloud for their applications—from pilots to production apps1
72%
2003
2007
2010
2013
2001
2000
Sources:
451 Research, Hosting and Cloud Study, 2014
Full Trust Code
Partial Trust Code
Microsoft
Managed Solutions
Online Services
App Model
Enterprise-Grade
Modern Toolchain
User Focused
Customer
Patterns
Consistent Platform
UX Extensions
Data Access
Eventing
Solutions Host
Custom Presentation
2016
Client Side and Open Source
Client Side and Remotely Hosted
REST and Cleaner Contracts
Web Hooks and Web Sockets
Cloud SaaS and Client Side Logic

6. 72% 2000 2016 2003 2007 2010 2013 2001 UX Extensions Data Access
of customers are leveraging cloud for their applications—from pilots to production apps1
72%
2003
2007
2010
2013
2001
2000
Sources:
451 Research, Hosting and Cloud Study, 2014
Full Trust Code
Partial Trust Code
Microsoft
Managed Solutions
Online Services
App Model
Enterprise-Grade
Modern Toolchain
User Focused
Customer
Patterns
Consistent Platform
UX Extensions
Data Access
Eventing
Solutions Host
Custom Presentation
2016
Client Side and Open Source
Client Side and Remotely Hosted
REST and Cleaner Contracts
Web Hooks and Web Sockets
Cloud SaaS and Client Side Logic

7. What is the SharePoint Framework?

8. SharePoint Framework
Modern pages and
Client web parts
Client side applications
A new development model
New deployment possibilities
The new SharePoint Framework is a new developer model accompanying the new SharePoint UX.
It's based on modern web development stack and for the first time ever Microsoft offers us a model that can be used on any platform with any JavaScript framework to build SharePoint customizations.

9. Key Features of SPFx
Provides full support for client-side customization
Provide easy access to SharePoint data
Customizations run in current context
Customizations responsive and accessible
Development experience embraces web development stack
Customization work in classic, publishing and modern pages
First Party & Third Party
End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.

10. Development tools and libraries

11. Development Toolchain Overview
Development environment
SharePoint Workbench
SharePoint Development Tenant
Developer toolchain
Node.js and NPM
Yeoman
Gulp
Automation
Platform-agnostic
Strong Ecosystem
Simple
Webpack

12. Development Toolchain Comparison
Project Templates C#
MS Build

13. How the Toolchain works

18. Client-side Web Part build flow

19. Install SharePoint Generator Test
gulp package-solution
npm install generator-sharepoint -g
gulp serve
Package/Deploy
Install SharePoint Generator
Test
yo sharepoint
workbench
gulp upload-cdn
Scaffold SharePoint Web Part Project
Local
Package/Deploy
Code
manual upload of the app
Build Web Part Code
UAT / Pre-production
Release using app catalog*
Available on Classic and Client-Side Pages
Ship?

20. Setup Office 365 tenant Sign up for an Office 365 tenant
Create an app catalog site
Create a new Developer Site collection
SharePoint Workbench

21. Setup SharePoint client-side web part development environment
Install developer tools
NodeJS
Code Editors
Install Yeoman and gulp
Install Yeoman SharePoint generator

22. Demo : Client-side Web Part

23. Getting Started with SPFx
Read the preview announcement at
Check out the documentation and samples at
Sign-up for the Office Developer Program at

24. Thank you! Get in touch.