Introducción a SharePoint Framework

Simposio SharePoint 2016

Simposio SharePoint 2016Microsoft Mxico y la Comunidad de SharePoint Mxico

Introduccin a SharePoint FrameworkHaaron GonzalezConsultorMVP en Servidores y Servicios de Office@haarongonzalezVladimir MedinaMentorMVP|MCT | MCP@vladpoint

Crditos: @levalenciaMVP de Colombia

2

Antes que nadaCuntos manejan SharePoint On Premises?Cuntos manejan SharePoint Online?Cuntos son desarrolladores SharePoint?Cuntos son desarrolladores SharePoint 2010? 2013? 2007?Cuntos son desarrolladores .NET?Han visto las bibliotecas de documentos modernas?Han visto las listas mordernas?Han visto las paginas mordernas?

Demo

Listas modernasBibliotecas modernasPginas modernasAuthoring canvas / OOB SPFx Web PartsUI responsivaSharePoint en tu bolsillo Vlad

Office Developer Platform 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.12/2/2016 3:32 PM4

Principios de extensibilidad de SharePointConstruir a largo plazo, servicios de valor agregado para la movilidad empresarialProveer un marco de desarrollo de aplicaciones que se alinee con lo que el cliente requiere y con lo que los proveedores pueden ofrecerConstruir soluciones On Prem y en la nube utilizando tecnolgicas cliente lideres en el mercado.Mostrar los potenciales de Sharepoint y Office Graph en cualquier dispositivo.

Principios

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.12/2/2016 3:32 PM5

HerramientasNode.jsYeomanGulpTypescriptVisual Studio (Code)Frameworks ReactAngular.jsKnockout Etc.

Herramientas tpicas en SPFx

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 JavaScript6

Herramientas web stack comparadas a MSIIS Express

VS Project New

C#MS Build


Node.js Hosting en tiempo de desarrollo

Ambiente local de ejecucin en Javascript.Puede ser considerado como un IIS Express en el stack tpico de Microsoft.Tambin puede ser utilizado como un sistema back end con cdigo del lado del servidor si es necesario.https://nodejs.org/en/


npm Administrador de paquetes de Node

> npm install typescript --save-dev

Npm es un administrador de paquetes para Javascript.Similar a NUGET.Utilizado al lado de Node.js para el desarrollo local JavaScriptSe utiliza para consumir bibliotecasde terceros.Usted tambin puede compartir sus propios paquetes en NPM para el beneficio de los demshttps://www.npmjs.com/


Yeoman Plantillas de Proyecto

> yo office

Herramienta para generacin de cdigo de proyectos de desarrollo.Utilizado para generar las plantillas de cdigo necesarias para SharePoint Framework.Se instala utilizando npm mediante lnea de comandoshttp://yeoman.io


gulp Administration de tareas de compilacin

> gulp serve

Provee automatizacin para sus tareas de compilacin.Similar a MS Build.http://gulpjs.com/


Typescript es un superset tipado de JavaScript, que compila a Javascript.Lenguaje de desarrollo para las plantillas base de SharePoint Framework.Usted puede utilizar Javascript nativo.En estos tiempos, es necesario que lo aprendas por tu cuentaTypescript Typed JavaScript

> tsc

https://www.typescriptlang.org/


Office UI Fabric UI para SharePointFabric es responsive, mobile-first coleccin de estilos y componentes para utilizar en sus personalizaciones.Componentes listos para utilizar con estilo consistente para proveer consistencia a travs de aplicaciones. Office UI Fabric soportado nativamente en SharePoint.http://dev.office.com/fabric


Experiencia de desarrollo en un ambiente local sin instalar SharePoint.Prueba tus cambios de inmediato en modo desconectado.Funciona localmente

SharePoint Workbench


Ambiente de desarrollo


Instalar Node JSInstalar VS CODE.Descargar desde aqu

Instalar nodejs LTS (Long Term Support) versin.Descargar desde aqu

Instalar NPMAbra consola o powershell y pega: npm -g install npm@next

c. Si est utilizando Windows instalar este paquete:npm install --global --production windows-build-tools

e. Instalar Yeoman y gulp. Abrir y ejecutar CMD npm i -g yo gulp

f. Instalar Yeoman Sharepoint generador.npm i -g @microsoft/generator-sharepoint nt


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


Nuestro primer webpart










Tipos de propiedades


Tipos de propiedades en el panel de configuracin

Por fin, paneles de configuracin de web parts mucho mas ligeros, dinmicos y simplificados.

Diversos controles para recopilar datos de configuracin.

Por ejemplo:

Campos de Texto Normal y Multi-LineaCheckboxDropDownToggle


Tipos de propiedades en el panel de configuracin 1. Primero importamos en el cdigo los controles archive HolaMundoWebPart.ts2. Definimos la estructura de datos de nuestro panel de configuracin en IHolaMundoWebPartProps.ts3. Opcionalmente podemos definir los valores pre determinados de nuestros controles en el archive HolaMundoWebpart.manifest.json


Tipos de propiedades en el panel de configuracin


Despliegue en Sharepoint


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

Empaquetamiento

PackageSharePointCDNManifest FileProvisioning LogicJavaScriptResources

28

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 usedRuta de entrenamiento Como volverme un Master en SPF?

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


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


Introducción a SharePoint Framework

Technology

Transcript of Introducción a SharePoint Framework