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


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/


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/


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


gulp Build process manager

> gulp serve

Gulp is a JavaScript task runner that lets you automate tasksSimilar a MS Build.http://gulpjs.com/


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 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


Local development time experienceTest your changes immediately even in offline modeSharePoint Workbench


Development Environment


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


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


Our first SPFx web part










Property Pane


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


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


Controls supported in the property pane


Despliegue en Sharepoint


Nuestros artefactos debern ser implementados en un CDN, lista SharePoint o sitio Azure

Empaquetamiento

PackageSharePointCDNManifest FileProvisioning LogicJavaScriptResources

27

Crear cuenta de almacenamiento en Azure


Obtener clave de acceso y copiarla


Crear Azure CDN endpoint


Configurar despliegue a Azure CDN






















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


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


Technology

SharePoint Framework at a glance