Chris O'Brien - Introduction to the SharePoint Framework for developers


Published on

Describes the new SharePoint development framework, which uses Gulp, node.js, TypeScript, SASS and other modern web technologies. Covers client web parts, modern pages and the canvas, and how to surface your files on a CDN for optimum performance. This intro presentation helps you get started.

Published in: Internet
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Chris O'Brien - Introduction to the SharePoint Framework for developers

  1. 1. @ChrisO_Brien
  2. 2. Subtle shift to client side development Beyond jQuery - developers seeking to use latest tech Still difficult for devs new to SharePoint
  3. 3. Modern pages and client web parts Client side applications (list-based and page-based) A new development model New deployment possibilities We’ll focus on these aspects
  4. 4. Likely to sit in a new library e.g. “Client Pages” Apps, but no IFrames! Similar to recent Delve blog pages New page “canvas” – no classic web part zones
  5. 5. Pure JavaScript implementation “Baked-in JS injection” Simplified end-user experience (e.g. web part properties)
  6. 6. Not just JavaScript, but TypeScript! Use your preferred JS framework – React, Angular, Knockout, jQuery, or none Gulp for build Yeoman for startup No need for Visual Studio!
  7. 7. Pre-requisites: Process:
  8. 8. Fundamentals TypeScript is expected (at least, for now) Client web parts
  9. 9. 1. Variables and types var foo: string var foo: UserProfile var foo: any 2. Typings for libraries (e.g. jQuery, CSOM) 3. Import a module to use it
  10. 10. BaseClientSideWebPart provides:
  11. 11. Folder Purpose config Settings for bundling/deployment dist Run-time files for your app lib Intermediate folder in build system node_modules JS dependencies src Where you write code typings TypeScript typings
  12. 12.   
  13. 13.
  14. 14.
  15. 15.  
  16. 16. Refactor into separate TypeScript classes Implement promises (e.g. ES6) for async methods Create class/interface to represent a search result Final code – separate ‘Search’ utility class. GetResultsAsync returns promise with my TS interface representing a search result (with URL, description & title properties):
  17. 17. Your files can be hosted anywhere App packages are the deployment vehicle Ensure dependencies are bundled OR referenced
  18. 18. Upload resources to CDN Update path to JS bundle Package app Add to app catalog Add to page
  19. 19. 1. Upload resources to CDN • Use supplied Gulp task (“upload-cdn”), or do it yourself 2. Deal with dependencies • Ensure 3rd party libraries are bundled OR referenced externally 3. Package app • Use supplied Gulp task (“gulp package- solution”) 4. Add to app catalog • Administrator drags and drops into catalog 5. Add to page • Web part can now be added to page
  20. 20.   
  21. 21. Good news! Likely to be released in a Feature Pack update, some time in 2017
  22. 22. There isn’t one! client-side Provider-hosted add-ins/IFrames are still a good choice Create a server-side component (e.g. WebAPI) where necessary
  23. 23. SharePoint dev is changing! SPFX does not replace anything Start your dev prep now!