Scribd Logo
Upload

Welcome to Scribd!

  • 342 views

    SPFX

    Uploaded by

    Tataji

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    SPFX

    Uploaded by

    Tataji
    342 views10 pages

    Original Title

    SPFx.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    342 views10 pages

    SPFX

    Uploaded by

    Tataji

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 10

    Overview of the SharePoint Framework

     The SharePoint Framework (SPFx) is a page and web part model that provides full
    support for client-side SharePoint development

     Easy integration with SharePoint data

     Support for Open Source Tooling

     You can use modern web technologies and tools in your preferred development
    environment to build productive experiences and apps that are responsive and mobile-
    ready from day one

     The SharePoint Framework works for SharePoint Online and also for on-premises
    (SharePoint 2016 Feature Pack 2 and SharePoint 2019)

    Copyright of Shell International B.V. CONFIDENTIAL


    Key Features of SharePoint Framework

     It runs in the context of the current user and connection in the browser. There are no iFrames for the

    customization (JavaScript is embedded directly to the page).


     The controls are rendered in the normal page DOM, responsive and accessible by nature.
     It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize,

    configuration changes, and more


     It is framework-agnostic. You can use any JavaScript framework that you like: React, Handlebars,

    Knockout, Angular, and more.


     SPFx web parts can be added to both classic and modern pages.

    Copyright of Shell International B.V. CONFIDENTIAL


    Developer Tool chain
    SharePoint Solution SPFx
    Development
    Development Solution packages (wsp's) SharePoint Packages (sppkag)
    Artifacts Declarative files (xml) Web Assets (html, css, js)
    Web Assets (html, css, js)
    Compiled Assemblies
    Development Visual Studio Popular open source tools
    Environments Local SharePoint form in VM Any platform
    SharePoint workbench
    SP Developer Tenant

    Copyright of Shell International B.V. CONFIDENTIAL


    Developer Tool chain

     Node JS and NPM


     Yeoman
     Gulp
     Webpack

    Copyright of Shell International B.V. CONFIDENTIAL


    Developer Tool chain

    Node Package Manager (NPM): NPM is a command line interface program to manage node js libraries.

    Yeoman:
     Yeoman is SharePoint generator, developers are able to scaffold new client side solution to build package
    and deploy SP solutions
     The generator provides common build tools, boiler plate code and common playground.
     Yeoman is generator eco system, basically a plugin that can be run with 'yo' command to scaffold
    complete projects or useful parts.

    Copyright of Shell International B.V. CONFIDENTIAL


    Yeoman workflow
    This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can
    help developers quickly build beautiful web applications. We take care of providing everything
    needed to get started without any of the normal headaches associated with a manual setup.

    Yeoman workflow comprises three types of tools for improving productivity and satisfaction when
    building a web app.
    1 Scaffold yo yo scaffolds out a new application, writing your build configuration (e.g Gulpfile) and
    pulling in relevant build tasks and package manager dependencies (e.g npm) that
    you might need for your build.
    2 Build Tool Gulp or The Build System is used to build, preview and test your project. Gulp and Grunt are
    Grunt two popular options.
    3 Package Npm and The Package Manager is used for dependency management, so that you no longer
    manage Bower have to manually download and manage your scripts. npm and Bower are two popular
    options.

    Copyright of Shell International B.V. CONFIDENTIAL


    Web parts
    Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-
    side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and
    libraries to build them.

     No JavaScript framework
     React
     Knockout

     Go to One Note to see other options

    Copyright of Shell International B.V. CONFIDENTIAL


    Web parts structure

    Copyright of Shell International B.V. CONFIDENTIAL


    React

    React is a declarative, efficient, and flexible JavaScript library for building user
    interfaces. It lets you compose complex UIs from small and isolated pieces of code
    called “components”.

    Copyright of Shell International B.V. CONFIDENTIAL


    React life cycle

    Copyright of Shell International B.V. CONFIDENTIAL

    You might also like