Cambiamos el chip y nos reciclamos, de nuevo, como otras tantas veces. No vaya a pasar que como siempre los de SharePoint siempre estemos a la última. Pues esta vez no, no nos vamos a quedar descolgados y si todos los demás dicen que ahora lo que mola es que todo sea código de cliente, pues sea, ¡tirémonos al volcán!.
Para ello nace el concepto de SharePoint Framework, que ahora es el nuevo paradigma de programación que pretende ser algo más que una alternativa a las apps, cuyo aparente rechazo generalizado hace que haya que reinventar la forma de programar para SharePoint.
Aclaro, esto no quiere decir para nada que las apps queden obsoletas ni se den de lado, se pueden seguir utilizando y están perfectamente soportadas. El motivo de no utilizar apps es que existe una ambiguedad con respecto a las apps de Azure que cubren, en esencia, lo que permiten hacer las de SharePoint, y que son preferibles a las de SharePoint a la hora de desarrollar apps, aunque este no es el tema que nos ocupa.
Esta tecnología está orientada a SharePoint Online, lo cual no quiere decir que no pueda implementarse on-premise, pero implica que debemos adaptar nuestra infraestructura on-premise al soporte de apps mediante tenants, que nos permita crear sitios de desarrollador y catálogo de aplicaciones.
Si necesitamos soporte para apps es porque una aplicación desarrollada con SharePoint Framework no deja de ser finalmente un fichero .app que subiremos a nuestra colección de sitios de catálogo de aplicaciones.
SharePoint Framework no es algo integrado que podamos instalarnos sin más, es un conjunto de tecnologías funcionando todas en paz y armonía para generar aplicaciones basadas en código de cliente.
Sin extendernos más, pasamos a explicar lo que necesitamos y cómo instalarlo en un entorno de PC y sin utilizar Visual Studio según nuestra experiencia.
Necesitaremos preparar nuestro entorno con los siguientes productos/herramientas:
Un editor de código, una consola de comandos, NPM, Node.js, Yeoman y Gulp, Yeoman SharePoint Generator, algunas librerías de JavaScript.
1. Editores de código, donde desarrollarás tus proyectos.
No más Visual Studio, al menos en cuanto a estos temas, necesitamos editores ligeros y nos sirve cualquiera de propósito general, por ejemplo Visual Studio Code:
Visual Studio Code
Puedes usar otros como:
Sublime
Atom
Webstorm
2. Una consola de comandos.
Aunque utilizar cmd en Windows nos sirve perfectamente, también podemos usar PowerShell o mejor aún, emuladores de consola como cmder que nos centraliza todo, el que nostros usamos para estos temas es Cmder:
Cmder
3. Node.js
Instalar Node.js.
Node es una entorno de ejecución de código abierto para JavaScript, cuyo propósito es desarrollar aplicaciones del lado del servidor pero con código de cliente, JavaScript. Está muy sinergizado con NPM (un instalador de paquetes cuyo equivalente sería NuGet que después veremos) y con ejecutores de tareas como gulp.
En Microsoftiano, diríamos que se trata de un IIS que incluye herramientas para simplificar la tarea del desarrollo.
Descargar Node.js
Siguiente, siguiente, siguiente...
Node se instalará en modo general para que cuando utilicemos nuestra consola de comandos favorita no tengamos nada más que teclear llamadas a node o npm sin acceder a ningún directorio específico.
4. NPM.
El desarrollo de aplicaciones de cliente para SharePoint recurrirá frecuentemente a NPM para descargar paquetes y depdencias que utilizaremos en nuestros desarrollos, como hacíamos con Visual Studio y NuGet.
Si todo va bien, después de instalar Node.js, también habrá sido instalado NPM, en cualquier caso, indicamos la forma de instalar NPM desde nuestra consola de comandos favorita. Nosotros utilizamos Cmder.
npm -g install npm@3
5. Instalar las windows-build-tools
Que instalarán Visual C++ Build Tools 2015, que servirán para poder compilar algunos módulos que vienen de forma nativa, también instalará Pyton 2.7 y configurarán tu entorno apropiadamente.
npm install --global --production windows-build-tools.
6. Yeoman y Gulp.
Yeoman es una forma de acceder a un conjunto de plantillas para proyectos de código de cliente, de forma que permita generar de forma rápida la estructura de los mismos, asímismo provee de herramientas y buenas prácticas que facilitarán al desarrollador la vida cuando utilice sus editores, como facilitar código repetitivo y sitios de pruebas (workbenchs en local para que no sea necesario probar nuestras apps en SharePoint Online directamente). Gulp realiza otras tareas como la minificación del código, compresión de imágenes, validación de sintaxis, etc... de forma que no sea necesario hacer estas cosas manualmente.
Yeoman
Gulp
El siguiente comando instalará ambos:
npm i -g yo gulp
7. Yeoman SharePoint Generator.
Esto instalará la plantilla Yeoman que nos creará fácilmente un proyecto de webpart de SharePoint ahorrándonos una enorme tarea manual:
npm i -g @microsoft/generator-sharepoint
8. Librerías de JavaScript.
Evidentemente, no pensabas lanzarte sin más aunque ya podrías,
Utilizaremos Yeoman para instalar las librerías y ya de paso tener un entorno preparado para generar proyectos enfocados a su uso.
Librerías en general para JavaScript, puedes elegir entre React, Knockout o Angular.
npm install -g generator-react-webpack
npm install -g grunt-cli bower yo generator-karma generator-angular
npm install generator-ko
Aunque para acceder a SharePoint recomendamos el uso de REST API, existen conectores de SharePoint, incluída la API JSOM de SharePoint.
npm install node-sharepoint-rest
npm install sharepoint-api
npm i sharepointconnector
nota: sharepointconnector sin probar.
Si todo ha ido bien, ya tenemos nuestro entorno preparado para crear nuestra primera webpart realizada enteramente en código de cliente según sugieren los nuevos tiempos.
Pero para construir una webpart, esperad al siguiente post.
