Introduction to development using the share point framework mv ps

1. Usama wahab Khan
SharePoint/Office 365 Architect
Office Serve and Services MVP
Twitter @usamawahabkhan
Blog : usamawahabkhan.blogspot.com
Introduction to
SharePoint Framework
Modern Toolchain

3. Developers
1

4. SharePoint Development Model
Evolution
Sources:
1. Gartner, Inc. 2013. Press Release: http://www.gartner.com/newsroom/id/2599315
2. 451 Research, Hosting and Cloud Study, 2014

5. Full Trust Code
Partial Trust Code
App Model
SharePoint Framework
2001
SharePoint
Portal Server 2001
2003
SharePoint
Portal Server 2003
2006
Office SharePoint
Server 2007
2009
SharePoint
Server 2010
2012
SharePoint
Server 2013
2016
SharePoint
Server 2016
Microsoft
Managed Solutions
Microsoft
Online Services
SERVER RENDERED ERA
CLIENT RENDERED ERA

6. 2016
Accelerating Web Development

7. SharePoint Extensibility Principles
Build long-term, value-added services for all developers
Principles

8. Purpose-built APIs for SharePoint
workloads
Includes lists, publishing, site management,
and video
Web hooks for outbound notifications of
changes in SharePoint lists, libraries, and
sites
Graph Integration

9. Modern Tool Chain
Make all of the tools and technologies that
internal engineers use to build available to third
party developers
Office UI Fabric
Open Source Tooling Support

10. Modern Toolchain

12. Modern Toolchain

13. Modern Toolchain

14. Enhancing the out of the box experience
Branding custom portals
Building custom Intranet Portals
Building custom Web Parts
Building vertical focused applications
Integrating with external systems
Scenarios

18. SharePoint Framework Components
Client-Side Web Parts
Modern Page Canvas
JavaScript Resource Management
Page Context & Site Data APIs
User Experience
Yeoman Templates
Gulp-based Build Process
SharePoint Workbench
Build Process & Tooling
Client-side Solutions
Tenant-Scoped Deployment
Packaging

19. http://github.com/sharepoint http://dev.office.com/sharepoint

21. Web Parts

50. IIS Express
Project Templates

51. Fonts, icons Colors

52. Fabric React
Robust, up-to-date
components built
with the React
framework.
Fabric JS
Simple, visuals-
focused components
that you can extend,
rework, and build on.
ngFabric
Community-driven
project to build
components for
Angular-based apps.
Fabric iOS
Native Swift colors,
type ramp, and
components for
building iOS apps.

59. todo.spapp
Package as an client-side solution
Developer
yo @microsoft/sharepoint
gulp –ship
gulp bundle --ship
gulp package-solution --ship
gulp deploy-azure-storage
Available to
SharePoint Sites
Tenant Admin
Tenant App Catalog ApprovedDeliver the package to upload, trust and
deploy the package to
Install/Uninstall app
Site Admin
Page Authors
Add
Configure
Todo Web Part
End Users
Interact

61. • Conceptual process – Checkout “JavaScript embed models” with
add-in model implementations from PnP
• Learn used technologies – Web stack tooling
• Learn JavaScript Framework(s)
• Learn Office UI Fabric usage

62. Code samples
Guidance documentation
Monthly community calls
Case Studies
Themes
SharePoint Framework
SharePoint add-ins
Remote API models with SharePoint
development
Sharing is caring…
http://aka.ms/SharePointPnP

73. http://fasttrack.microsoft.com/

74. http://techcommunity.microsoft.com

75. Client-side Web Parts

76. Demo – Client Side Web
Parts

77. Web Parts & Canvas

78. Getting Started with the SharePoint Framework
http://dev.office.com/blogs
http://GitHub.com/SharePoint
http://dev.office.com