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

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. 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. 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. 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. 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. 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. 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. 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. 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. ¿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. Herramientas web stack comparadas a MS
IIS Express
VS Project 
New  <Template>
C#

12. Como se construye un webpart de SharePoint Framework

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. SharePoint Workbench
•Experiencia de desarrollo
en un ambiente local sin
instalar SharePoint.
•Prueba tus cambios de
inmediato en modo
desconectado.
•Funciona localmente

15. Empaquetamiento

16. Despliegue en Sharepoint

17. Despliegue en Sharepoint

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. aka.ms/OfficeDevPnP