Este documento resume una presentación sobre SPFx que tendrá lugar el 20 de mayo de 2017 en Madrid. La presentación se titula "SPFx - JS Patterns Applied to a Real World Example" y será impartida por Ángel-Rubén Yui y Javier Segura. La presentación introducirá SPFx, las herramientas principales como TypeScript y Gulp, y mostrará un ejemplo práctico aplicando patrones de TypeScript.

1. May 20th, 2017
SharePoint Saturday
Madrid
SPFX - JS Patterns Applied to a Real World
Example
Ángel-Rubén Yui - Javier Segura

2. Angel-Rubén Yui
Senior Consultant SharePoint/Office365
angelrubenyui
Consultor senior de Office365 / SharePoint.
Trabaja en Altran España, consultora Gold Partner Microsoft.
Miembro de la junta directiva de SUG.CAT.
ALTRAN
Javier Segura
SharePoint Applications Architect
@xavi_segcri
Office365 / SharePoint consultant working for PlanB GmbH, a
German Gold Partner consultancy company.
SharePoint Applications Architect at KPMG in Berlin.
Member of SUG.CAT.
Plan-B Gmbh

3. Gold sponsors ______________
Silver sponsors
Bronze sponsors
Collaborate
Platinum sponsor

4. Please, fill your SPS Madrid
passport if you want to
participate.
You can win one of these gifts:
Raffle
10
9
8
Odor Odor@winterfell.com

5. Índice
1. Introducción SPFx
2. Lo más importante a saber de las SPFx Toolchain
3. ¿Qué es TypeScript?
4. Patrones TypeScript
5. Demo Real world
6. Q & A

7. ¿Qué es?
FX
Nuevo modelo de
desarrollo que nos
permite crear
componentes del lado
cliente
Características :
Personalizaciones ejecutadas en el contexto
de la página actual, no en un contexto de
Iframe como los Add-Ins.
Empaquetar y desplegar código cliente igual
que las versiones previas (WSP y Add-Ins).
Experiencia de desarrollo: herramientas web
actuales. Yeoman , Gulp, NodeJS, NPM, VS
Code / Sublime.

8. Presente y futuro
Webparts compatibles solo con las
Modern Pages. Classic WebPart
Pages y Publishing Pages en el
roadmap. Es decir, van a cuidar el
Legacy.
MS usa el mismo modelo que
nosotros, SPFx, para desarrollar
nuevas funcionalidades en
SharePoint.

9. Roadmap
4 Mayo
Early Adopoters updates
May Ago Nov Ene Feb Jun JulAbr May Ago Sep Oct Nov Dic
Anuncio SPFx
Agosto - Noviembre
Release candidate
9 Enero
Generally available
Client side webparts
23 febrero

10. Roadmap
•
•
•
•

11. •Modelo de ejecución del
lado cliente.
•Se renderiza y ejecuta en
el contexto de la página
actual.
•Es la única forma
(soportada por MS) para
customizar modern pages.
•Herramientas Open Source
& Cross Plattform.
•Responsive, accessible &
mobile friendly.
•Scoped to tenant (las
customizaciones estan
disponibles en todos los
sitios dentro de un tenant).
•Limitado a Client side web
parts.
•Usan API lado cliente
(CSOM, REST).
•El contexto de ejecución
está externalizado de SP
(en un IFRAME).
•Normalmente se desarrolla
con VS en Windows,
aunque existe la
posibilidad de usar
diferentes teconologías en
diferentes plataformas.
•El scope máximo es tenant
y site collection.
•Permite desarrollar
webparts, WF y mas.
•Modelo de ejecución lado
cliente.
•API lado cliente.
•Te permite desarrollar con
cualquier entorno /
herramientas.
•El scope máximo es una
página SharePoint.
•Desarrollado manualmente
y sin tener deployment
automático.
Características SPFx vs Modelo de desarrollo en
SharePoint
•Modelo de ejecución del
lado servidor.
•API completamente server
side.
•Solamente soportadas en
entornos onpremise.
•Desarrolladas con Visual
Studio en Windows.
•La solucion tiene un scope
máximo de Farm.
•Permite desarrollar
webparts, timerjobs, event
receivers, feature receivers,
etc.

12. Introducción SPFx

14. Lo mas importante
de la Toolchain SPFx

15. NodeJS
• Es un runtime que permite la ejecución de
Server-side JS.
• Esta basado en el V8 JSVM Chromium Proyecto
Open Source.
• Provee una API para acceder a las típicas
funcionalidades de lado servidor (acceso a la
maquina local, file input / output,
funcionalidades de red, etc.).
Nota : Importante instalarse la versión LTS (Long
Term Support): La mayor parte de empresas la usa y
MS también la recomienda por su estabilidad

16. NPM – Package
Manager para NodeJS
Permite adquirir y gestionar las dependencias de
paquetes en los proyectos. Permitiendo instalar
herramientas basadas en Nodejs. Ejemplos:
Instalar Yeoman
• npm install -g yo
Instalar Gulp
• npm install -g gulp
Instalar TypeScript
• npm install –g typescript
Nota : Es importante verificar que estamos
utilizando la versión de npm 3 o superior.

17. Yeoman - THE WEB'S
SCAFFOLDING TOOL
FOR MODERN
WEBAPPS
Es una herramienta que permite crear plantillas de
proyectos para generar la estructura de los
proyectos. En Microsoft han creado una serie de
plantillas para lo que consideran que son las
mejores prácticas para iniciar un componente de
SPFx, por lo que no tienes que preocuparte por la
configuración de carpetas, y las estructuras de
nombres.

18. Para crear un nueva solución de webparts de SharePoint se deberá ejecutar el
siguiente comando :
yo @microsoft/sharepoint

19. Gulp
Gulp es un conjunto de herramientas que ayudan a
automatizar diversas tareas que consumen mucho
tiempo en el flujo de trabajo de desarrollo. Es una
plataforma agnóstica, las integraciones están
integradas en todos los IDE principales .NET,
Node.js, Java y otras plataformas.

20. Gulp
SPFx utiliza Gulp para ejecutar los
siguientes procesos :
• Bundle and minify JavaScript and CSS
files.
• Run tools to call the bundling and
minification tasks before each build.
• Compile LESS or SASS files to CSS.
• Compile TypeScript files to JavaScript.
Siempre tendremos que tener las
siguientes tareas de SPFx
• gulp clean
• gulp build
• gulp bundle –ship
• gulp dev-deploy
• gulp deploy-azure-storage
• gulp package-solution --ship
• gulp deploy-azure-storage
• gulp serve
• gulp trust-dev-cert

21. Demo SPFx

23. ¿Qué es TypeScript?
Proyecto Open Source
mantenido por Microsoft
que está basado y sigue
la sintaxis de ES6.
Características :
Mas fácil organizar el código base para
aplicaciones a gran escala gracias a los
módulos, namespaces y soporte OOP.
Static typing, código escrito mas predecible y
generalmente mas fácil de debugar.
Paso de compilación a JavaScript: maneja
todos los posibles errores antes que
alcancen runtime y genere errores por
definición de variables, por ejemplo.
El FW Angular 2 esta escrito en TypeScript,
recomendando también usar el lenguaje en los
proyectos que lo usen.

24. Tipos de Datos
DatosBásicos
• String
• Number
• Boolean
• Any
• Array
• Enum
Objetos
• Clases
• Constructor
• Interfaces
• Shapes
• Decorators
• Generic

25. Demo TypeScript

27. ¿Qué son los Patrones?

28. Facade
Organiza subsistemas y provee una interfaz unificada a
alto nivel.
En JS (y por supuesto en TypeScript), tenemos que usar
módulos para organizar el código, ya que, entre otros:
• Hace que los proyectos sean mantenibles.
• Clean Code: ayuda a identificar interconexiones
entre funcionalidades.
• Escalabilidad e Interdependencia: Si el proyecto
crece o es referenciado por otros, es necesario
tener una “API” a alto nivel que exponga solo
ciertos métodos (los que importan para la
funcionalidad que referencia).

29. Factory
El patrón Factory se usa normalmente cuando una
determinada clase no puede prever exactamente que
objetos crear, o algunas subclases necesitan extender
versiones de estos objetos.
Un Factory method es un método que crea objetos, y
puede depender de otros métodos Factory para
instanciar un determinado objeto.
Provee cierta flexibilidad aportando una complejidad
razonable. Permite ser extendido mediante el override
de Factory methods específicos.

30. Observer
Patrón en el cual un objeto, llamémoslo “server”,
mantiene una lista de observadores, llamémosles
“clients”, y es capaz de automáticamente notificarles un
cambio en cualquier estado, normalmente mediante
una llamada a uno de sus métodos.
Es usado en la mayoría de arquitecturas MV*.
Normalmente hace un decouple de la vista / UI y la
lógica de negocio : un cambio en la lógica puede ser
notificado a múltiples vistas.

31. Singleton
Existen ciertos escenarios donde debe existir una sola
instancia de una determinada clase.
Algunos lo consideran un anty-pattern, otros dicen que
es mejor usarlo como reemplazo de las clases static, las
cuales pueden tener problemas de dependencias. Para
MS, es un patrón .
Ejemplos: Elecciones, cola de reservas, …