Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción a SharePoint Framework

266 views

Published on

En esta sesión se introduce el nuevo paradigma de extensibilidad de SharePoint basado en Javascript y herramientas Open Source, el SharePoint Framework. Creditos a Luis Valencia @levalencia

Published in: Technology

Introducción a SharePoint Framework

  1. 1. Simposio SharePoint 2016 Microsoft México y la Comunidad de SharePoint México
  2. 2. Introducción a SharePoint Framework Haaron Gonzalez Consultor MVP en Servidores y Servicios de Office @haarongonzalez Vladimir Medina Mentor MVP | MCT | MCP @vladpoint Créditos: @levalencia MVP de Colombia
  3. 3. Antes que nada • ¿Cuántos manejan SharePoint On Premises? • ¿Cuántos manejan SharePoint Online? • ¿Cuántos son desarrolladores SharePoint? • ¿Cuántos son desarrolladores SharePoint 2010? 2013? 2007? • ¿Cuántos son desarrolladores .NET? • ¿Han visto las bibliotecas de documentos modernas? • ¿Han visto las listas mordernas? • ¿Han visto las paginas mordernas?
  4. 4. Listas modernas Bibliotecas modernas Páginas modernas Authoring canvas / OOB SPFx Web Parts UI responsiva SharePoint en tu bolsillo Vlad
  5. 5. Principios de extensibilidad de SharePoint
  6. 6. • Herramientas • Node.js • Yeoman • Gulp • Typescript • Visual Studio (Code) • Frameworks • React • Angular.js • Knockout • Etc. Herramientas típicas en SPFx
  7. 7. Herramientas web stack comparadas a MS IIS Express VS Project  New  <Template> C#
  8. 8. Node.js – Hosting en tiempo de desarrollo https://nodejs.org/en/
  9. 9. npm – Administrador de paquetes de Node https://www.npmjs.com/
  10. 10. Yeoman – Plantillas de Proyecto http://yeoman.io
  11. 11. gulp – Administration de tareas de compilación http://gulpjs.com/
  12. 12. 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 cuenta Typescript – Typed JavaScript https://www.typescriptlang.org/
  13. 13. Office UI Fabric – UI para SharePoint Fabric es responsive, mobile-first colección de estilos y componentes para utilizar en sus personalizaciones. Componentes listos para utilizar con estilo consistente para proveer consistencia a través de aplicaciones. Office UI Fabric soportado nativamente en SharePoint. http://dev.office.com/fabric
  14. 14. Experiencia de desarrollo en un ambiente local sin instalar SharePoint. Prueba tus cambios de inmediato en modo desconectado. Funciona localmente SharePoint Workbench
  15. 15. Instalar Node JS a. Instalar VS CODE. Descargar desde aquí b. Instalar nodejs LTS (Long Term Support) versión. Descargar desde aqu c. Instalar NPM Abra 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
  16. 16. Client-side Web Part Build Flow
  17. 17. Nuestro primer webpart
  18. 18. Nuestro primer webpart
  19. 19. Nuestro primer webpart
  20. 20. Nuestro primer webpart
  21. 21. Tipos de propiedades en el panel de configuración Por fin, paneles de configuración de web parts mucho mas ligeros, dinámicos y simplificados. Diversos controles para recopilar datos de configuración. Por ejemplo: Campos de Texto Normal y Multi-Linea Checkbox DropDown Toggle
  22. 22. Tipos de propiedades en el panel de configuración 1. Primero importamos en el código los controles archive HolaMundoWebPart.ts 2. Definimos la estructura de datos de nuestro panel de configuración en IHolaMundoWebPartProps.ts 3. Opcionalmente podemos definir los valores pre determinados de nuestros controles en el archive HolaMundoWebpart.manifest.json
  23. 23. Tipos de propiedades en el panel de configuración
  24. 24. Empaquetamiento
  25. 25. Crear cuenta de almacenamiento en Azure
  26. 26. Obtener clave de acceso y copiarla
  27. 27. Crear Azure CDN endpoint
  28. 28. Configurar despliegue a Azure CDN
  29. 29. Configurar despliegue a Azure CDN
  30. 30. Configurar despliegue a Azure CDN
  31. 31. Configurar despliegue a Azure CDN
  32. 32. Despliegue en Sharepoint
  33. 33. Despliegue en Sharepoint
  34. 34. Despliegue en Sharepoint
  35. 35. Despliegue en Sharepoint
  36. 36. Despliegue en Sharepoint
  37. 37. Despliegue en Sharepoint
  38. 38. Despliegue en Sharepoint
  39. 39. 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/fabric Webpack - webpack.github.io React - facebook.github.io/react Angular - angularjs.org Knockout - knockoutjs.com Handlebars - handlebarsjs.com Recursos
  40. 40. aka.ms/OfficeDevPnP

×