Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

SharePoint FrameWork: Entendiendo la solución

Una vez tenemos listo el entorno (sino leer el articulo anterior) vamos a entender cada parte que tiene la solución. Para ello en primer lugar vamos a abrir la carpeta donde se ha descargado la solución mediante yeoman. Para estas demos utilizaré Visual Studio Code, pero puedes elegir tu IDE  preferido (Visual Studio, Brackets, etc..)
SolucionNuevoFramework

El primer fichero de los importantes es el fichero gulpfile.js. Por si no lo conocéis este es el fichero de configuración para poder ejecutar Gulp.

¿Qué es gulp?

 Es “Task Runner”  de tareas Open Source para Javascript. En Gulp podemos ejecutar casi cualquier tarea que puedas hacer de forma manual: compilar ficheros SASS, compilar typescript, ejecutar test, publicar ficheros, verificación de la sintaxis del html, javascript, etc … De tal forma que tener una serie de procesos Gulp nos pueden ahorrar mucha tiempo en nuestro desarrollo día a día.

Dentro de este Framework, el equipo de producto ha implementado unas tareas predeterminadas, falta documentación sobre todas las tareas que hay disponibles. A continuación, comentaremos las imprescindibles para la utilización del framework.

La primea de las tareas que hacemos uso es la de  unificar todos el JavaScript en un único fichero y levantar un servidor en local para poder depurar. Para hacer esto debemos de poner la siguiente instrucción  gulp serve.

Otra de las tareas que tiene el FrameWorkd es la de generar la App. Para ello  hay que ejecutar la siguiente instrucción gulp package-solution. Al ejecutar este comando dentro de nuestra solución crea una carpeta “sharepoint” y dentro de la misma esta el fichero con extensión .sapp. Una cuestión de este comando genera el paquete pero no “Compila” la solución, es decir, si previamente no hemos ejecutado gulp serve nuestra solución estará vacía porque no hay ningún fichero javascript.

Por último, otra de las tareas que tiene es como subir los ficheros javascript a un CDN de Azure (en los siguientes artículos ya comentaremos cuando y porque utilizar estos CDN) . Para ello dentro de la carpeta config disponemos de un fichero deploy-azure-storage.json (en dicho fichero ponemos la configuración de nuestro blob storage de Azure). Una vez tenemos configurado esto ejecutamos las siguientes intrucciones:  gulp –ship (que se encarga de compilar y minimizar la solución) y gulp deploy-azure-storage.

Carpeta SRC

Dentro de la carpeta “src” se dispone de nuestro desarrollo, en el interior de esta carpeta hay otra carpeta WebParts, en la que a su vez hay una carpeta donde por cada WebPart que hay en la solución.

Cada Webpart esta formado por :

  • Un fichero .manifest (en el que estás algunos aspectos de configuración como el icono del WebPart, el nombre del mismo y la ubicación dentro de la carpeta de agregar Webparts)

esquemaFramework

  • Una Interfaz I{nombredelwebpart}Props.ts en el que se indican las propiedades que se van a poder configurar en el WebPart
  • Un fichero {nombredelWebpart}.ts en el que esta la implementación del WebPart. Esta clase extiende la clase  BaseClientSideWebPart<{Interfaz de Propiedades}> En esta clase añadiremos el comportamiento que va a tener nuestro desarrollo. Como mínimo debemos de implementar un método Render en el que sera el punto de entrada de nuestro desarrollo.
  • Tiene una carpeta Loc, que son los recursos de la aplicación para ello por un lado tiene una interfaz en la que definimos los elementos que se van a ver traducidos y por otro lado tendremos un fichero .js por cada idioma que tiene nuestra aplicación con la resolución de los recursos.
  • Otras carpetas: dependiendo de la elección del Framework en el que queremos desarrollar tendremos más o menos carpetas. Por ejemplo si hacemos uso de ReactJS tendremos una carpeta Components en la que estarán el/los componente/es que se van a utilizar. También cada WebPart tiene una carpeta Test en la que podremos los test que se van a utilizar en nuestra aplicación (con la instalación del SPFX te instala PhantomJS)

Carpeta Config

En esta carpeta estás todas las configuraciones que tenemos en nuestro desarrollo. Por defecto tenemos estas configuraciones en ficheros de extensión json:

  • serve.json -> En el mismo tenemos el puerto que va a tener el servidor y la ruta de la pantalla de inicio.
  • tslint.json -> Aquí se configura que reglas queremos que se verifiquen al compilar nuestra aplicación
  • config.json-> La configuración de nuestro webpart (dependencias, ubicación del directorio de recursos, etc…)
  • otros ficheros de configuración para la compilación de la solución.

Otras carpetas

Por último tenemos dos carpetas que no debemos de modificar bajo ningún contexto. Son las carpetas siguientes carpetas:

  • node_modules. Aquí se descargan todos los módulos JavaScript que necesita nuestro Framework (sin esta carpeta no funciona la aplicación)
  • typings -> En esta carpeta estás las definiciones TypeScript de las librerías JavaScript para poder utilizarlas dentro de la solución. Sin esta carpeta de Typings nuestras solución tampoco funcionaria.

Otras consideraciones

Como seguro que os habéis dado cuenta ahora el entorno de desarrollo es algo distinto al entorno tradicional de cualquier desarrollador de SharePoint, ahora se debe de conocer herramientas como NodeJS, TypeScript, etc…  Un archivo que tambien es muy importante en la configuración es el archivo package.json. En el mismo se configuran las dependencias con los paquetes npm que son necesarios en esta solución y una vez los ejecutemos automáticamente los instalará dentro de la carpeta node_modules.

 

 

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en Office 365, typescript y etiquetada como , . Enlace permanente .
ENCAMINA, piensa en colores