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 Saturday Zurich 2017 - SharePoint Framework the new development way

189 views

Published on

Sharepoint Framework is the new way to develop solution totally safe for your SharePoint environment and like a plus we have a new tool chain that the developers can use also on other operative systems.
Now we have the possibility to use Typescript and other popular client side framework like Angular, React and Knockout.
In this session I would like to show, how to move the first steps with SharePoint Framework.

Published in: Software
  • Be the first to comment

  • Be the first to like this

SharePoint Saturday Zurich 2017 - SharePoint Framework the new development way

  1. 1. SharePoint + CRM Saturday Zurich 2017 SharePoint Framework the new development way Giuliano De Luca / @giuleon #Spszurich #crmsaturday
  2. 2. www.delucagiuliano.com SharePoint + CRM Saturday Zurich May 13, 2017
  3. 3. • SharePoint Framework • Toolchain • Office UI Fabric • SharePoint Framework Considerations • Resources
  4. 4. Already available on SharePoint Online In the future also for SharePoint On-Prem 2016
  5. 5. • Tooling • Node.js • Yeoman • Gulp • TypeScript • Visual Studio (Code) • Frameworks – Choose yours • React • Angular.js • Knockout • Etc. SharePoint Framework Toolchain
  6. 6. IIS Express VS Project  New  <Template>
  7. 7. Tasks Purpose gulp serve Serving the local development environment (--nobrowser is optional) gulp build Builds the project (transpiling)  check “lib” folder gulp test Runs the unit tests if you have written any gulp bundle | gulp Build project in DEBUG mode  check “dist” folder gulp bundle --ship | gulp --ship Build project in SHIP mode / ready for distribution  check “temp” folder gulp package-solution Packages the DEBUG solution as an app package  check “sharepoint” folder gulp package-solution --ship Packages the production ready solution  check “sharepoint” folder gulp deploy-azure-storage Add the files to your Azure CDN gulp clean Cleans the project from build artifacts (remove previous builds) gulp trust-dev-cert Add a developer certificate to your client  necessary for local development gulp untrust-dev-cert
  8. 8. Demo Hello Word Web Part
  9. 9. "Keep calm and use Office UI Fabric“ - Satya Nadella Ohh Nooo ! I’m not a designer Wait a minute Giuliano, I never said this….
  10. 10. 708 Icons available
  11. 11. Fabric JS Lightweight and simple components in vanilla Javascript Fabric IOS Native iOS styling and components written in Swift AngularJS Community-driven project for Angular apps React Fabric’s robust, up-to-date components are built with React
  12. 12. Class Name Range Breakpoint ms-u-smxx 320px - 479px Small ms-u-mdxx 480px - 639px Medium ms-u-lgxx 640px - 1023px Large ms-u-xxx 1024px - 1365px Extra Large ms-u-xxxx 1366px - 1919px Extra Extra Large ms-u-xxxxx 1920px and up Extra Extra Extra Large
  13. 13. Demo
  14. 14. Azure CDN SharePoint Online CDN
  15. 15. https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>/
  16. 16. SPFx solutions are running in the context of user
  17. 17. SPFx • Solutions are deployed centrally as a tenant admin • JavaScript is executed with the permissions of end user Add-ins • Isolated functionalities hosted either in iframe or outside of the SharePoint Script editor web part • Scripts are added on the pages by end users • Scripts can be hosted anywhere • Same with content editor web part Script embedding • Embedding scripts with Usercustomactions or JSLink • JavaScript files can be added by site owners using API • JS files hosted in the site Characteristics Centralized approval Permissions model Works on ‘no-script’ sites
  18. 18. So I'll write my code in typescript and do I have to debug in javascript ? That's not really comfortable. Of course not, you will go in debug using ever typescript.
  19. 19. https://goo.gl/iRZZd7 https://goo.gl/SEUflx https://goo.gl/Y46vkA https://goo.gl/NmRG7j https://goo.gl/uXnZJd https://goo.gl/SJ1VHW https://dev.office.com/fabric http://www.delucagiuliano.com

×