Upload
haaron-gonzalez
View
172
Download
0
Embed Size (px)
Citation preview
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
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 PM7
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/
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 PM8
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/
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 PM9
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
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 PM10
gulp Administration de tareas de compilacin
> gulp serve
Provee automatizacin para sus tareas de compilacin.Similar 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.12/2/2016 3:32 PM11
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 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 PM12
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
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 PM13
Experiencia de desarrollo en un ambiente local sin instalar SharePoint.Prueba tus cambios de inmediato en modo desconectado.Funciona localmente
SharePoint 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.12/2/2016 3:32 PM14
Ambiente de desarrollo
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 PM15
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
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 PM16
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.12/2/2016 3:32 PM17
Nuestro primer webpart
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 PM18
Nuestro primer webpart
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 PM19
Nuestro primer webpart
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 PM20
Nuestro primer webpart
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 PM21
Nuestro primer webpart
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 PM22
Tipos de propiedades
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 PM23
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
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 PM24
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
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 PM25
Tipos de propiedades en el panel de configuracin
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 PM26
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.12/2/2016 3:32 PM27
Nuestros artefactos debern ser implementados en un CDN, lista SharePoint o sitio Azure
Empaquetamiento
PackageSharePointCDNManifest FileProvisioning LogicJavaScriptResources
28
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.12/2/2016 3:32 PM29
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.12/2/2016 3:32 PM30
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.12/2/2016 3:32 PM31
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.12/2/2016 3:32 PM32
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.12/2/2016 3:32 PM33
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.12/2/2016 3:32 PM34
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.12/2/2016 3:32 PM35
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.12/2/2016 3:32 PM36
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.12/2/2016 3:32 PM37
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.12/2/2016 3:32 PM38
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.12/2/2016 3:32 PM39
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.12/2/2016 3:32 PM40
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.12/2/2016 3:32 PM41
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.12/2/2016 3:32 PM42
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
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 PM44
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.12/2/2016 3:32 PM45