Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

19,163 views

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

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

  1. 1. www.sharepointnutsandbolts.com @ChrisO_Brien http://cob-sp.com/COBLinkedIn
  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. 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. Classic pages Modern pages Classic web parts Y N Modern web parts Y Y Modern web parts can work in: But classic web parts can NOT work in modern pages
  7. 7. 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!
  8. 8. Pre-requisites: Process:
  9. 9. Fundamentals TypeScript is expected (at least, for now) Client web parts
  10. 10. 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
  11. 11. BaseClientSideWebPart provides:
  12. 12. 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 cob-sp.com/SPX-Files
  13. 13.   
  14. 14.
  15. 15.
  16. 16.  
  17. 17. Refactor into separate TypeScript classes/use new SpHttpClient class 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):
  18. 18. Your files can be hosted anywhere App packages are the deployment vehicle Ensure dependencies are bundled OR referenced
  19. 19. Build app in release mode (-- ship) Upload resources to CDN Upload app package (.sppkg) to app catalog Add to page
  20. 20. 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
  21. 21.   
  22. 22. Good news! Likely to be released in a Feature Pack update, some time in 2017
  23. 23. 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
  24. 24. SharePoint dev is changing! SPFx does not replace anything Start your dev prep now!

×