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.

SharePoint Framework, paso a paso

32 views

Published on

Esta sesión es introductoria y le servirá para comprender lo que se necesita para construir web parts para las páginas modernas de SharePoint Online

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SharePoint Framework, paso a paso

  1. 1. SharePoint Framework paso a paso Haaron Gonzalez Consultor SharePoint & Office 365 https://blogs.msmvps.com/splatin/ https://twitter.com/helpdsp http://www.youtube.com/c/HelpDeskSharePoint https://github.com/helpdsp
  2. 2. PROXIMOS EVENTOS, CONFERENCIAS Y ACTIVIDADES enfocada única y específicam ente a la solución de Comunicaci ones Microsoft Sábado 10 de Noviembre en Oficinas de Microsoft México Office 365 Develooper Bootcam, conozca como pasar de ser desarrollador SharePoint a desarrollador Office 365 Viernes 26 de Octubre en UPIICSA http://get-cslatam.com/ https://developer.microsoft. com/en-us/office/events Articulo sobre programación multi idioma en SharePoint Framework http://www.compartimoss.com
  3. 3. Herramientas y Terminología Que herramientas de desarrollo ocupamos para programar SharePoint Framework Ejemplo paso a paso Conoceremos mediante ejemplo paso a paso los elementos que constituyen a un spfx webpart Desarrollo Programaremos un spfx webpart que da la bienvenida al día y numero de semana Producción Implementaremos nuestro spfx webpart en producción y probaremos su funcionamiento
  4. 4. Plantillas de proyectos y generador de código Automatización de tareas de compilación Lenguaje de programación Editor de código Librerías JavaScript y APIs Herramientas y Terminología Servidor de desarrollo, ambiente de ejecución
  5. 5. NODE.JS - Hosting en tiempo de desarrollo O N D E Instalador de Node incluye NPM Ambiente local de ejecución en JavaScript Puede ser considerado como un IIS Express en el stack típico de Microsoft También puede ser utilizado como un sistema back end con código del lado del servidor si es necesario https://nodejs.org/en/
  6. 6. npm – Administrador de paquetes de Node P N M Puedes compartir sus propios paquetes en NPM para el beneficio de los demás npm es un administrador de paquetes para JavaScript Utilizado al lado de Node.js para el desarrollo local JavaScript Se utiliza para consumir bibliotecas de terceros, cientos y miles de librerías disponibles https://www.npmjs.com
  7. 7. Yeoman – Plantillas de Proyecto O Y Puedes compartir sus propios paquetes en NPM para el beneficio de los demás Herramienta para generación de código de proyectos de desarrollo Utilizado para generar las plantillas de código necesarias para SharePoint Framework. Se instala utilizando npm mediante línea de comandos http://yeoman.io
  8. 8. gulp – Administration de tareas de compilación U G L P Muy conveniente porque simplifica nuestro proceso de pruebas Provee automatización para sus tareas de compilación Automáticamente compila basado en cambios recientes Se invoca mediante comando Gulp Serve http://gulpjs.com/
  9. 9. Typescript – Typed JavaScript En estos tiempos, es necesario que lo aprendas por tu cuenta Typescript es un superset tipado de JavaScript, que compila a JavaScript Lenguaje de desarrollo para las plantillas base de SharePoint Framework Se puede utilizar JavaScript nativo https://www.typescriptlang.org/
  10. 10. ¿COMO PROGRAMAMOS ENTONCES? Soy desarrollador SharePoint, utilizo C# para construir soluciones del lado servidor ¿Que pasara si no actualizo mis conocimientos técnicos? ¿Va a desaparecer lo que ya conozco? ¿No se les hace que es demasiado?
  11. 11. Herramientas web stack comparadas a MS IIS Express VS Project  New  <Template> C#
  12. 12. Como se construye un webpart de SharePoint Framework
  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. SharePoint Workbench •Experiencia de desarrollo en un ambiente local sin instalar SharePoint. •Prueba tus cambios de inmediato en modo desconectado. •Funciona localmente
  15. 15. Empaquetamiento
  16. 16. Despliegue en Sharepoint
  17. 17. Despliegue en Sharepoint
  18. 18. Recursos y Enlaces • Node.js and npm - www.nodejs.org • npm - https://www.npmjs.com • 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 • Github - https://github.com • Use the Office 365 content delivery network with SharePoint Online - https://docs.microsoft.com/en- us/office365/enterprise/use-office-365-cdn-with-spo
  19. 19. aka.ms/OfficeDevPnP

×