SharePoint Framework at a glance
-
Upload
haaron-gonzalez -
Category
Technology
-
view
49 -
download
2
Transcript of SharePoint Framework at a glance
SansPUG Meeting
San Diego SharePoint User Group Monthly Meeting
SharePoint Framework at a glanceHaaron GonzalezSolutions ConsultantOffice Server and Services MVP@[email protected]
2
Demonstration
Modern Team SitesModern ListsModern Document LibrariesAuthoring Experience / OOB SPFx Web PartsSharePoint in your pocket
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM3
SharePoint Extensibility PrinciplesBuild long-term, value-added services for enterprise mobilityTo provide an Application Development Framework that aligns 1st and 3rd partiesTo build industry leading client side solutions On-Premises and in the CloudUnlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device
Principles
En los ltimos aos, la evolucin de Office 365, el desarrollo de soluciones de SharePoint ha detectado un nuevo conjunto de desafos: mientras por un lado TI y administradores de arrendatario requiere un nuevo conjunto de herramientas para controlar cmo obtener acceso y se consumen en contratos de arrendamiento de datos , los desarrolladores, por el contrario, quieren controlar de forma automtica todo el ciclo de vida de las capacidades, experiencia y acceso a los datos de un sitio.
Desafortunadamente, los desarrolladores hoy en da se encuentran restriccin torno a la construccin de aplicaciones partes como resultado de iFrames, un conjunto reducido de APIs, y no hay integracin con Office 365 cruz cargas de trabajo. Esto a su vez limita su capacidad para desarrollar portales de gran alcance que se extienden de SharePoint.
El marco de desarrollo en el cliente entregar capacidades que ayudarn a los desarrolladores de los dos primeros partidos y de terceros crear aplicaciones potentes, ricos y proporcionar una experiencia web agradable en Office 365 para usuarios finales que son a la vez intuitiva y fcil de consumir.
2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM4
ToolsNode.jsYeomanGulpTypescriptVisual Studio (Code)Frameworks ReactAngular.jsKnockout Etc.
Open Source Tooling
SharePoint will also support open source tooling to drive greater efficiencies when developing Parts and Apps. These tools should not be considered a replacement of an organizations traditional tools, but rather an extension of those, providing new opportunities to quickly get up and running with SharePoint development. If youre familiar with Visual Studio development with SharePoint, this tools carry a lot of similarities with the tools you may already be familiar with for example:
Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.
yo scaffolds out a new application, writing your build configuration (e.g Gruntfile, Gulpfile) and pulling in relevant build tasks and package manager dependencies (Bower, npm) that you might need for your build. This is similar to Project Scaffolding in Visual Studio.
Gulp
Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformationsSimple - By providing only a minimal API surface, gulp is easy to learn and simple to use
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
event driven JavaScript runtime, Node is designed to build scalable network applications similar to
VS SharePoint development: Gulp = MSBuild, NodeJS = IIS (Express), YeoMan = project scafolding in VS, TypeScript= typed superset of JavaScript5
Comparing tools with MSIIS Express
VS Project New
C#MS Build
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM6
Node.js Open-source, cross-platform JavaScript runtime environment
JavaScript runtime environment that can work locallyAllows us to build JavaScript applicationsthat run outside the scope of the browserwhich means you could run JavaScript either locallyon your laptop or in a large cluster on the CloudAllows the creation of Web servers to run server side codeNode.js works across platforms.It is lightweight, fast and the node package manager, npm,gives us access to the largest sourceof open source libraries in the world.https://nodejs.org/en/
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM7
npm Node Package Manager
> npm install typescript --save-dev
Npm is a NodeJS package manager, you can use it to install node programsSimilar a NUGET.Command line utility to install Node.js packages, do version management and dependency management of Node.js packages.https://www.npmjs.com/
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM8
Yeoman Project Templates
> yo office
Code generation tool for development projectsYou can install it using NPM commandsThere is a Microsoft Yeoman generator for SharePoint Framework that allow quickly set up a new client-side web part project - @microsoft/generator-sharepoint http://yeoman.io
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM9
gulp Build process manager
> gulp serve
Gulp is a JavaScript task runner that lets you automate tasksSimilar a MS Build.http://gulpjs.com/
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM10
Typescript is a typed superset of JavaScript that compiles to pure JavaScriptAllows enterprise developers to create better JavaScript-intensive applications by introducing variable typing, classes and modulesTypescript Typed JavaScript
> tsc
https://www.typescriptlang.org/
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM11
Office UI Fabric UI for SharePoint
Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design LanguageOffice IU Fabric is supported in SharePointhttp://dev.office.com/fabric
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM12
Local development time experienceTest your changes immediately even in offline modeSharePoint Workbench
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM13
Development Environment
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM14
Prepare your computer1. Download and install Visual Studio Code - https://code.visualstudio.com 2. Download and install NodeJS - https://nodejs.org 3. Install the build tools for windows using the following command (run PowerShell as local admin): npm install --global --production windows-build-tools5. Install Yeoman and Gulp using the following command: npm i -g yo gulp 6. Install Yeoman project template for SharePoint using the following command: npm i -g @microsoft/generator-sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM15
Client-side Web Part Build FlowInstall SharePoint GeneratorScaffold SharePoint Web Part ProjectBuild Web Part CodeTestLocalUAT / Pre-production
Package/DeployAvailable on Classic and Client-Side PagesPackage/Deploynap install generator-sharepoint -gyo sharepointCodegulp serveworkbenchgulp package-solutiongulp upload-cdnShip?Release using app catalog*manual upload of the app
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM16
Our first SPFx web part
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM17
Our first SPFx web part
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM18
Our first SPFx web part
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM19
Our first SPFx web part
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM20
Our first SPFx web part
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM21
Property Pane
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM22
Controls supported in the property pane
Simple and dynamic property pane fields
Lots of controls to simplify data entry
For example:Text BoxesCheck BoxesDrop DownToggle
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM23
Controls supported in the property pane1. Import the controls we need MyDemoSPFx.ts2. Define the data structure of our property pane IMyDemoSPFxWebPartProps.ts3. Optionally define default data in MyDemoSPFxWebpart.manifest.json
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM24
Controls supported in the property pane
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM25
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM26
Nuestros artefactos debern ser implementados en un CDN, lista SharePoint o sitio Azure
Empaquetamiento
PackageSharePointCDNManifest FileProvisioning LogicJavaScriptResources
27
Crear cuenta de almacenamiento en Azure
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM28
Obtener clave de acceso y copiarla
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM29
Crear Azure CDN endpoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM30
Configurar despliegue a Azure CDN
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM31
Configurar despliegue a Azure CDN
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM32
Configurar despliegue a Azure CDN
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM33
Configurar despliegue a Azure CDN
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM34
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM35
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM36
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM37
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM38
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM39
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM40
Despliegue en Sharepoint
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM41
Conceptual process Checkout JavaScript embed models with add-in model implementations from PnPLearn used technologies Web stack toolingInstall node.js and cmd tooling for testing web stack development on your computerLearn webpack for bundling your applicationsLearn JavaScript Framework(s)Light-weight frameworks - Knockout, Handlebars etc.Fully-fledged frameworks Angular, React, Ember etc.Get understanding on how they can be used and what the benefits are of using themLearn Office UI Fabric usageBy default available for SP Framework customizations. Other UX frameworks can also be usedHow can you become a SPFx master?
Node.js and npm - www.nodejs.org Gulp www.gulpjs.com TypeScript - https://www.typescriptlang.org Yeoman - www.yeoman.io Git - www.git-scm.com/ Office UI Fabric - dev.office.com/fabricWebpack - webpack.github.ioReact - facebook.github.io/reactAngular - angularjs.orgKnockout - knockoutjs.comHandlebars - handlebarsjs.comResources
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM43
aka.ms/OfficeDevPnP
https://github.com/OfficeDev/PnPhttps://github.com/OfficeDev/PnP-Sites-Corehttps://github.com/OfficeDev/PnP-PowerShellhttps://github.com/OfficeDev/PnP-Toolshttps://github.com/OfficeDev/PnP-JS-Corehttps://github.com/OfficeDev/PnP-Guidancehttps://github.com/OfficeDev/PnP-Transformationhttps://github.com/OfficeDev/PnP-OfficeAddInshttps://github.com/OfficeDev/PnP-Provisioning-Schema
https://aka.ms/OfficeDevPnPVideoshttps://aka.ms/OfficeDevPnPMSDNhttps://aka.ms/OfficeDevPnPYammerhttps://aka.ms/OfficeDevPnPPartnerPack
@OfficeDevPnP
https://aka.ms/OfficeDevPnPCall
https://docs.com/OfficeDevPnP
Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.2/15/2017 11:53 AM44