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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

  5. IIS Express
    Project Templates

    View full-size slide

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

    View full-size slide

  7. SPFx Extensions
    Application Customizers
    Field Customizers
    Command Sets

    View full-size slide

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

    View full-size slide

  9. Danke!
    Feedback

    View full-size slide

  10. 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 full-size slide