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.

SharePoint Framework at a glance

255 views

Published on

Get a brief overview of the SharePoint Framework, in this session we will discuss why SharePoint Framework is valuable, what is the tool chain available today to start developing, what are the moving pieces that constitute a client side web part, what resources are available to continue learning and enhancing your skills. The goal is to show you what it takes to write your first SPFx web part, possible deploy if time permits.

Published in: Technology
  • Be the first to comment

SharePoint Framework at a glance

  1. 1. San Diego SharePoint User Group Monthly Meeting
  2. 2. SharePoint Framework at a glance Haaron Gonzalez Solutions Consultant Office Server and Services MVP @haarongonzalez haarongonzalez@gmail.com
  3. 3. Modern Team Sites Modern Lists Modern Document Libraries Authoring Experience / OOB SPFx Web Parts SharePoint in your pocket
  4. 4. SharePoint Extensibility Principles
  5. 5. • Tools • Node.js • Yeoman • Gulp • Typescript • Visual Studio (Code) • Frameworks • React • Angular.js • Knockout • Etc. Open Source Tooling
  6. 6. Comparing tools with MS IIS Express VS Project  New  <Template> C#
  7. 7. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
  8. 8. npm – Node Package Manager https://www.npmjs.com/
  9. 9. Yeoman – Project Templates http://yeoman.io
  10. 10. gulp – Build process manager http://gulpjs.com/
  11. 11. Typescript is a typed superset of JavaScript that compiles to pure JavaScript Allows enterprise developers to create better JavaScript-intensive applications by introducing variable typing, classes and modules Typescript – Typed JavaScript https://www.typescriptlang.org/
  12. 12. Office UI Fabric – UI for SharePoint Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language Office IU Fabric is supported in SharePoint http://dev.office.com/fabric
  13. 13. Local development time experience Test your changes immediately even in offline mode SharePoint Workbench
  14. 14. Prepare your computer 1. Download and install Visual Studio Code - https://code.visualstudio.com 2. Download and install NodeJS - https://nodejs.org 3. Install the build tools for windows using the following command (run PowerShell as local admin): npm install --global --production windows-build- tools 5. Install Yeoman and Gulp using the following command: npm i -g yo gulp 6. Install Yeoman project template for SharePoint using the following command: npm i -g @microsoft/generator- sharepoint
  15. 15. Client-side Web Part Build Flow
  16. 16. Our first SPFx web part
  17. 17. Our first SPFx web part
  18. 18. Our first SPFx web part
  19. 19. Our first SPFx web part
  20. 20. Controls supported in the property pane Simple and dynamic property pane fields Lots of controls to simplify data entry For example: Text Boxes Check Boxes Drop Down Toggle
  21. 21. Controls supported in the property pane 1. Import the controls we need MyDemoSPFx.ts 2. Define the data structure of our property pane IMyDemoSPFxWebPartProps.ts 3. Optionally define default data in MyDemoSPFxWebpart.manifest.json
  22. 22. Controls supported in the property pane
  23. 23. Conceptual process – Checkout “JavaScript embed models” with add- in model implementations from PnP Learn used technologies – Web stack tooling Install node.js and cmd tooling for testing web stack development on your computer Learn webpack for bundling your applications Learn JavaScript Framework(s) Light-weight frameworks - Knockout, Handlebars etc. Fully-fledged frameworks – Angular, React, Ember etc. Get understanding on how they can be used and what the benefits are of using them Learn Office UI Fabric usage By default available for SP Framework customizations. Other UX frameworks can also be used How can you become a SPFx master?
  24. 24. Node.js and npm - www.nodejs.org Gulp – www.gulpjs.com TypeScript - https://www.typescriptlang.org Yeoman - www.yeoman.io Git - www.git-scm.com/ Office UI Fabric - dev.office.com/fabric Webpack - webpack.github.io React - facebook.github.io/react Angular - angularjs.org Knockout - knockoutjs.com Handlebars - handlebarsjs.com Resources
  25. 25. aka.ms/OfficeDevPnP

×