SharePoint Framework - Developer Preview

SharePoint Framework - Developer Preview

• 1.
  SHAREPOINT FRAMEWORK In-Depth analysisof developer preview Sean McLellan
• 2.
  SharePoint Components • ClientSideWebPart • "Modern"Page Experience • SharePoint WebHooks Tooling • Cross-Platform • Yeoman Template • NPM Modules • Webpack • Typescript • Generates .spapp Client-Side Frameworks • SystemJS • React/Redux/Flux • Office UI Fabric • SPFx Components • Complement with any client-side framework out there
• 3.
  SHAREPOINT COMPONENTS • NewAdditions to SPO • Provides another, possibly more guided approach to using Client-Side Techniques in SharePoint • Does not replace existing webparts, remote event receivers, pages or other behavior. • Will be made available to SP2016 on-prem in 2017 via an update.
• 4.
  SHAREPOINT COMPONENTS: CLIENTSIDEWEBPART • Newweb part currently available in SPO • Not to be confused with ClientWebPart, ScriptEditorWebPart, or AppScriptPart • Codification of the “App Script Part Pattern” introduced in 2014 by Vesa Juvonen • Available on “Classic” SharePoint pages.
• 5.
  SHAREPOINT COMPONENTS: CLIENTSIDEWEBPART BENEFITS •Script tag embedded with web part – No cross-domain library madness. • Configuration of the baseURL of script referencesis done via a new ClientSideComponent section of Elements.xml – Inline Script tag embed can’t be changed by end users • Web Part Mode is exposed and can be used to provide different modes for client side rendering • Embeds SystemJS and uses it to ensure that required modules are loaded prior to executing client-side webpart code. • React, Redux, and Office UI Fabric and SPFx components are included in the default manifest. • New Client-Rendering-driven web part properties.
• 6.
  SHAREPOINT COMPONENTS INSIDE THECLIENTSIDEWEBPART
• 7.
  SHAREPOINT COMPONENTS CSWP MANIFESTAND BOOTSTRAPPING • CSWP renders the Manifest as a JSON object on the page – this is the configuration of the web part defined in elements.xml • Inline code calls SPFx library which calls render() entry point of your CSWP instance
• 8.
  SHAREPOINT COMPONENTS CSWP INACTION
• 9.
  SHAREPOINT COMPONENTS: “MODERN” PAGEEXPERIENCE • Not fully part of the SPFx Developer Preview • Workbench.aspx is a sample of the fully-client side experience to come. • Will be similar to the MS Delve experience • React/Reduct/Flux based ClientSideWebPart Manager • Retooling of Page Layouts and WebPart Zones to utilize client-side rendering techniques • SharePoint Pages will be a 100% client side approach to “classic” web part pages.
• 10.
  SHAREPOINT COMPONENTS: SHAREPOINT WEBHOOKS •Not currently part of the SPFx Developer preview • Uses same event-driven pattern that modern sites such as GitHub are using to provide eventing • MS Graph WebHooks - Outlook and OneDrive • Allows external apps to consume events in SharePoint • Microsoft Flow • 3rd party tools like IFTTT/Zapier • Any WebAPI or service should be able to receive events • Think of a generic RemoteEventReceiver that makes a HTTP call when triggered.
• 11.
  TOOLING • Tools tobuild Client Side Web Parts • Possibly other components (libraries, pages, etc) in the future • Tools are to modern web developers – NPM packages, Yeoman templates and so forth • Cross Platform Tools • SPFx modules in NPM • Yeoman Templates • Gulp Tasks • Webpack bundling • IDE Agnostic • VS Code • Webstorm • Sublime • Your favorite editor here.
• 12.
  TOOLING PRE-CONFIGURED MODULES • Yeomantemplate initializes with a set of pre-configured modules • Webpack • Karma • Grunt • TypeScript/Typings
• 13.
  TOOLING GULP TASKS REFERENCE GulpTask Purpose gulp test Run karma-based unit tests gulp build Performs build tasks such as transpiling TS to JS, SCSS to CSS and so forth via Webpack gulp bundle Builds, localizes and bundles the project gulp deploy-azure-storage Uploads project’s bundled assets to a development CDN gulp package-solution Packages the project into a .spapp for use with the SP add-in model gulp serve Builds and bundles the project and serves it in an express-based local development server.
• 14.
  TOOLING STARTING A SPFXPROJECT
• 15.
  CLIENT-SIDE FRAMEWORKS • SPFxuses a number of existing open source frameworks for client-side behavior • SystemJS • React/Redux/Flux • Lodash • whatwg-fetch • Additional client-side behavior provided by custom SPFx-centric libraries • Custom HttpConext (using fetch behavior) • Digest caching (for X-Request Digest) • GUID Generation • SP-Prefixed object wrappers • Most likely to expand and be enriched over time.
• 16.
  CLIENT-SIDE FRAMEWORKS WHAT TOUSE TO BUILD YOUR APP (Use the client-side framework best suited for your team)
• 17.
  CLIENT-SIDE FRAMEWORKS HOW TOBUILD YOUR APP – GUIDANCE • Building your app does not hinge on SPFx availability, but is just another way of providing a way of hosting your HTML+JS native web app within SharePoint • SPFx complements the already existing approaches to client-side web part development
• 18.
  ROUNDUP • SharePoint Frameworkcan be conceptually seen as three key areas • SharePoint Components • Tooling to build those components (or not!) • Client-Side “Native Web Apps” • New SharePoint Components provide a new way of bootstrapping Client Side code • Modern web development already using similar tooling as SPFx now uses • Choice of client-side frameworks to use not limited by SPFx • Continue with current approaches to modern web development • Build HTML+JS apps that interact with SP data, and figure out how to host them in SharePoint with the experience your users expect - not the other way around. • Over time SPFx is sure to evolve as it progresses through preview. Stay tuned.