Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SPFx Hands-on | Global Office 365 Developer Bootcamp Berlin/Saarbrücken

SPFx Hands-on | Global Office 365 Developer Bootcamp Berlin/Saarbrücken

Presentation with basics of SPFx fundamentals for my SPFx Hands-on workshop at the Global Office 365 Developer Bootcamp event in Berlin.

Daniel Lindemann

November 08, 2018
Tweet

More Decks by Daniel Lindemann

Other Decks in Technology

Transcript

  1. SharePoint-Framework
    Hands-on Workshop
    Daniel Lindemann @daniellindemann
    /in/daniel-lindemann

    View Slide

  2. Agenda
    Was ist das SharePoint Framework?
    Entwicklungsumgebung vorbereiten
    Der erste WebPart
    SharePoint-Inhalte abfragen
    Deployment, Update und Betrieb

    View Slide

  3. SharePoint Framework
    “The SharePoint Framework (SPFx) is a
    page and extension model that enables
    client-side development for building
    SharePoint experiences. It facilitates easy
    integration with the SharePoint data
    and provides support for open source
    tooling development.”
    More information: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

    View Slide

  4. Open source tooling
    SharePoint Framework leverages an open source, Node.js based toolchain
    and embraces all web frameworks + code editors
    Build Process & Tooling
    • Yeoman Templates
    • Gulp (task runner)
    • Node.js
    • NPM (package manager)
    • SystemJS
    • Webpack
    • SASS
    • TypeScript
    Web Frameworks
    • React
    • Angular
    • Knockout
    • jQuery
    • … and more… your choice!
    Code Editors
    • Visual Studio Code
    • Atom
    • Sublime
    • Webstorm
    • … and more… your choice!

    View Slide

  5. View Slide

  6. IIS Express
    Project Templates

    View Slide

  7. Let’s get it started!
    Let’s get it started in here!

    View Slide

  8. SPFx Extensions
    Application Customizers
    Field Customizers
    Command Sets

    View Slide

  9. Office 365 PnP
    Beispiele
    Tools
    Erweiterungen
    https://aka.ms/officedevpnp

    View Slide

  10. Danke!
    Feedback

    View Slide

  11. Mehr mehr mehr
    Get an introduction to the SharePoint Framework (Ignite 2016)
    https://channel9.msdn.com/events/Ignite/2016/BRK2114-TS
    Introducing SharePoint Framework (TechDays 2016 The Netherlands)
    https://channel9.msdn.com/events/TechDays/Techdays-2016-The-
    Netherlands/Introducing-SharePoint-Framework
    PnP Web Cast - Preparing for SharePoint Framework - What should I learn?
    https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Preparing-for-
    SharePoint-Framework-What-should-I-learn
    Understanding the SharePoint Framework and how it affects your JavaScript
    customizations
    https://channel9.msdn.com/events/Ignite/Microsoft-Ignite-Orlando-2017/THR1031
    SharePoint Framework do's and don'ts
    https://channel9.msdn.com/Events/TechDays/Techdays-2016-The-
    Netherlands/SharePoint-Framework-dos-and-donts
    Office Dev Center
    http://dev.office.com/sharepoint
    SharePoint Framework Tutorials auf YouTube
    https://www.youtube.com/playlist?list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq
    SharePoint Developer Community – PnP auf YouTube
    https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w
    Introducing open-source PnP SPFx Yeoman generator
    https://developer.microsoft.com/en-us/office/blogs/introducing-open-source-pnp-
    spfx-yeoman-generator/
    Visual Studio extension for SharePoint Framework projects
    https://github.com/SharePoint/sp-dev-fx-vs-extension
    SharePoint Framework Script Check
    https://rencore.com/sharepoint-framework/script-check/

    View Slide