Presentación Meetup MadPoint Construyendo WebParts con SPFx.

1. Construyendo WebParts con SPFX
Olga Martí y Mario Cortés
Twitter: @olgaamarti @mariocortesf

2. Agenda
 Introducción a SPFx
 Entorno de desarrollo
 Desarrollando WebParts con SPFx + React
 Obtener datos de SharePoint
 Testeando nuestra aplicación
 Despliegue

3. SharePoint Framework
• Client-side.
• Se ejecuta en el contexto del usuario.
• Puede utilizarse en páginas modernas y en páginas
clásicas.
• SharePoint Online y SharePoint 2016 con FP2.

4. Cambios respecto al desarrollo clásico

5. SharePoint Framework
Extender la interfaz y
añadir scripts.
Botónes cusmizados
en los menús de listas
Modifica el
renderizado de una
columna
Crear controles/bloques que aparecerán
dentro de una página de SharePoint.

6. SharePoint Framework - WebParts

7. SharePoint Framework - Extensions

8. Entorno de desarrollo

9. Office 365
NodeJS + npm
npm install -g yo gulp
VS Code
npm install -g @microsoft/generator-
sharepoint@latest
Entorno de desarrollo

10. Construyendo un WebPart con React

11. Estructura del proyecto

12. Desarrollo basado en componentes web con React
• Dividir la interfaz en componentes
atómicos.
• Cada componente es responsable de
implementar una funcionalidad.
• No conoce los componentes superiores
que lo encapsulan.
• Solo conoce los controles hijos.

13. Componentes
• Un componente equivaldría al concepto de función.
• Recibe una entrada y genera un elemento de React.

14. Composición de componentes
• Un componente puede contener a su
vez otros componentes.
• Crearemos una jerarquía de
componentes.

15. Interfaz basada en JSX
• Expresión que describe cómo se pintara la interfaz.
• Manejos de estos objetos mediante programación.

16. Render
• Genera el DOM del componente.
• Los elementos son inmutables, una vez que has creado un elemento no puedes modificarlo.
• Podemos bindear a objetos.

17. BaseClientSideWebPart.Render
• La clase BaseClientSideWebPart contiene un método render encargado de crear los elementos del
componente.

18. Propiedades (props)
• Las entradas de datos de un componente se realiza mediante
“propiedades”.
• this.props
• Las propiedades son de solo lectura.

19. Estado(state)
• Son como propiedades privadas al componente.
• Cada componente mantiene sus propio estado.
• State es de lectura/escritura.

20. Actualizar el state
• Solo se puede actualizar el estado de 2 formas:
• En el constructor
• Mediante el método setState()
• setState es asíncrono
• El flujo de información siempre es de
arriba hacia abajo en la jerarquía de
componentes.
• Un componente puede pasar su estado a
un hijo mediante propiedades.

21. Lifecycle
Inicialización
1. getDefaultProps
2. getInitialState
3. componentWillMount
4. Render
5. componentDidMount
Actualizacion de estado
1. shouldComponentUpdate
2. componentWillUpdate
3. Render
4. componentDidUpdate
Actualizacion de propiedades
1. componentWillReceiveProps
2. componentWillUpdate
3. Render
4. componentDidUpdate
Unmount
1. componentWillUnmount

22. Eventos
• Permite capturar eventos de nuestro
componentes.
• Mecanismo que utilizaremos para
pasar información hacia arriba.

23. Conectar con SharePoint

24. SPHttpClient
• Cliente que permite realizar peticiones REST en el contexto del usuario.

25. PnP JavaScript Core
• Librearía con utilidades para conectar con SharePoint de una forma más natural.
• No necesitamos conocer la estructura de REST de SharePoint.
npm install sp-pnp-js --save

26. Environment.type
Permite detectar en qué entorno nos encontramos (EnvironmentType):
• Test: el código se ejecuta desde un test unitario.
• Local: nos encontramos en un equipo de desarrollo donde estamos probando nuestro desarrollo.
• SharePoint: el framework se ha cargado en una página de SharePoint.
• ClassicSharePoint: el framework se ha cargado en una página basada en el modelo clásico de páginas de
SharePoint.

27. Office Fabric UI
• Librearía con componentes, estilos e iconos para crear interfaces similares al estándar.
• npm i office-ui-fabric-react --save

28. Testeando nuestra aplicación

29. gulp serve
Testear tu codigo

30. Debugger for Chrome
Con Visual Studio Code y la
extensión de Chrome “Debugger
for Chrome” podemos
engancharnos al proceso de
Chrome. De esta manera nos
permite depurar directamente
desde Visual Studio Code
mientras utilizamos el Workbench
desde Chrome.

31. Despliegue

32. gulp bundle –ship
gulp package-solution --ship
Despliega tu aplicación

33. Habilitar el CDN

34. App Catalog a nivel de colección de sitio
# create site collection app catalog
Add-SPOSiteCollectionAppCatalog -Site $site

35. https://dev.office.com/sharepoint
https://github.com/SharePoint/sp-dev-fx-extensions
https://github.com/olgamarti
https://geeks.ms/rockyouroffice365
Recursos

36. THANKS!
Twitter: @olgaamarti