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, React, and Office UI sps Silicon Valley

960 views

Published on

This session is about building client-side web parts, list-based and page-based applications on SharePoint. I'll show the workbench, web part, the list and pages based application, React and how to apply simple CSS styles for typography, color, icons, animations, and responsive grid layouts with Office UI Fabric.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

SharePoint Framework, React, and Office UI sps Silicon Valley

  1. 1. SharePoint Framework, React, and Office UI Fabric Sonja Madsen
  2. 2. Office Blog blogs.office.com
  3. 3. SharePoint Dev Kitchen
  4. 4. SharePoint Future Web parts, list-based, page-based applications • SharePoint on- premise • Office 365
  5. 5. Sonja Madsen @sonjamadsen dev@sonjasapps.com Sonja Madsen Microsoft MVP, SONJAsAPPS Best International Developer
  6. 6. SharePoint Farm Solutions Sandbox Solutions SharePoint apps/add-ins SharePoint Framework
  7. 7. No isolated app web No app domain
  8. 8. Development • Visual Studio Code, Visual Studio • TypeScript • React is a suggested framework • Office UI Fabric
  9. 9. Development & Visual Studio Code Visual Studio & WORKBENCH
  10. 10. DEMO
  11. 11. Web part Page-based application SharePoint Framework List-based application
  12. 12. Office UI Fabric
  13. 13. • dev.office.com/fabric/styles • Fonts, colors • Grid • Icons • Controls Office UI Fabric
  14. 14. The Grid
  15. 15. Office UI Fabric vs. Bootstrap • Bootstrap version 4 • Bootstrap theme • Bootstrap css and js • Office UI look and feel • Office controls • Out-of-box
  16. 16. What’s new • TypeScript –> JavaScript • LESS -> CSS • .spapp package • Hosting of js and other files • No cross-domain • No .aspx page with HTML
  17. 17. Why TypeScript context = new SP.ClientContext.get_current(); var contextvar context var context var context
  18. 18. JavaScript Patterns function getImages() { context = new SP.ClientContext.get_current(); var request = new SP.WebRequestInfo(); var url = rssurl; var account = getProperty("Account"); } var myApp = (function () { var getImages = function () { context = new SP.ClientContext.get_current(); var request = new SP.WebRequestInfo(); var url = rssurl; var account = getProperty("Account"); };
  19. 19. .spapp package No .wsp, no .js, no .css, no images
  20. 20. .spapp  SharePoint App Catalog
  21. 21. Microsoft Azure CDN point of presence (POP) locations
  22. 22. .js file on CDN .js file in Style Library .js file in the Scripts folder .js file in Style Library
  23. 23. Hosting on a CDN or remote server • Updates and versioning • Price • IP: Anonymous access to .js and .css files that are no longer within the app • CDN hosting and security: files that have access to your data • Reference my .js files - highjack functionality and design
  24. 24. DEMO
  25. 25. Reactjs • React is front end library developed by Facebook • Used for handling view layer for web and mobile apps • JSX − JSX is JavaScript syntax extension • Components − everything is a component • Unidirectional data flow and Flux − React implements one way data flow • Virtual DOM which is JavaScript object • Inline templating and JSX
  26. 26. Render with React public render(mode: DisplayMode, data?: IWebPartData) { this.domElement.innerHTML = ` <div class="Demowp"> <div class="Container"> <div class="ms- Grid-row ms-bgColor-themeDark ms- fontColor-white intro"> <div class="ms-Grid-col ms-u-lg10 ms-u- xl8 ms-u-xlPush2 ms-u-lgPush1"> <h1>Hello</h1> public render(mode: DisplayMode, data?: IWebPartData) { let e: any = React.createElement( demoreactwpComponent, { store: this._store, listTitle: this.properties.listTitle }); ReactDOM.render(e, this.domElement);
  27. 27. DEMO
  28. 28. List-based applications A list with custom list form pages Main page Any other page New item, Edit item, Display item
  29. 29. DEMO
  30. 30. Page-based applications Client side pages library Pages
  31. 31. DEMO
  32. 32. SharePoint Add-ins - Advantages • You can hide the lists from end-user • Both pages and an app part • .aspx page – HTML • Images, scripts, stylesheets hosted on SharePoint • Isolated is not always a bad thing
  33. 33. SharePoint Framework - Advantages • Responsive mobile friendly • No iframe • Dynamic properties • Webhooks • List-based and Page-based • No need for cross-domain library to access SharePoint resources
  34. 34. Summary
  35. 35. @sonjamadsen sp2013.blogspot.com dev@sonjasapps.com

×