JavaScript para Desarrolladores SharePointAdrián Díaz Cervera

15% de descuento en el curso de SharePoint y los libros de SharePoint 2013 de principio a fin y Todo sobre Aplicaciones para SharePoint, Office y Office 365

(en todos los formatos).

Sólo hasta el 31de Diciembre de 2014.

Introduce el cupón SUGES2014 al realizar tu compraen nuestra tienda online.

Síguenos y descubrirás los mejores trucos y recursos:

facebook.com/campusmvp twitter.com/campusmvp

www.campusmvp.es

¿Quiénes somos?

00

Adrián Díaz Cervera

MVP SharePoint ServerSharePoint Architect en ENCAMINA

http://blogs.encamina.com/desarrollandosobresharepointhttp://geeks.ms/blogs/adiazcervera adiaz@encamina.comaddiacer@gmail.com @AdrianDiaz81

Un poco de historia

01

Más de una década de evolución

2003 2007 2010 2013

User ControlWebPart,

Csom, SandBox

Apps, API REST

JavaScript cada vez más presente

• SharePoint cada vez se adapta a los estándares Web.

• Mejoras en CSOM.• API REST en casi cualquier artefacto

¿Por qué no nos gusta JavaScript?

Motivos

Nombre: No tiene nada que ver con JAVA

Lenguaje débilmente tipado

JavaScript como lenguaje de copy-paste

Desconocimiento de JavaScript como POO

Muchos Framework y gran cantidad de cambios

Beneficios

JavaScript: El lenguaje de programación

– C# • A nivel de bloque (for, if..)• A nivel de función• A nivel de clase

– JavaScript• A nivel de función

Ámbitos de las variables

http://jsfiddle.net/AdrianDiaz/u2mbnu9o/

• Todos los objetos son Object (pero se pueden saber de que tipo son)

• Undefined == Null en .NET

• Null es una variable sin valor

• Una variable puede ser integer, boolean y string según nos interese

• Al ser un lenguaje dinámico podemos ir creando propiedades o variables dependiendo de las necesidades

• Todas las funciones devuelven algo aunque no pongamos un return

Tipos de Variables

http://jsfiddle.net/AdrianDiaz/sbmqbwya/1/

• Una línea de nuestro código solo puede acceder a variables que tengan un ámbito mayor o superior al suyo propio.

• Concepto +Importante

Clausura

http://jsfiddle.net/AdrianDiaz/rvb003fg/1/ http://jsfiddle.net/AdrianDiaz/wxcgah8v/

• Clases como tal no existen pero …

• Prototipo: – Propiedad especial en las funciones constructoras. – Contiene métodos y propiedades que van a estar disponibles en todas las instancias

de la “clase”

Clases y prototipos

http://jsfiddle.net/AdrianDiaz/pjtjtn9q/

http://jsfiddle.net/AdrianDiaz/sbmqbwya/

• Cambio de pensamiento en nuestros desarrollos– Esperamos que termine un método para continuar con la lógica– No esperamos que se ejecuten varias funciones a la vez

• Provoca código “spaghetti”, poco legible e inmantenible

• Se puede solucionar… PROMISE !!

Asíncrono

• Diferencias respecto a C#

• Porque? Una propiedad en JS es lo mismo que un elemento de un array

Iteración en los bucles

http://jsfiddle.net/AdrianDiaz/4hbv7bm5/1/

Que tiene SharePoint OOB

• En la versión 2010 fue una de las grandes novedades

• Casi mismas operaciones SSOM = + Acciones http://msdn.microsoft.com/es-es/library/office/jj193034(v=office.15).aspx

– Social– Taxonomy– Search– Flujos de Trabajo– Datos empresariales

• No mucha documentación

• PRINCIPAL FALLO: Asegurar que están las librerías JS cargadas

– Versión 2010 :

– Version 2013

Javascript Object Model SharePoint

ExecuteOrDelayUntilScriptLoaded(myInitMethod, "sp.js"); 

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

http://msdn.microsoft.com/en-us/library/office/jj245759.aspx

Javascript Object Model SharePoint (Example)

• Importante:– Accesible desde cualquier plataforma (Android, IOS, W8) => EveryWhere

• Casi cualquier endpoint tiene un acceso Rest– Search– Social– List– Web

• Algunos aspectos “curiosos”– Acceso a datos persona, taxonomía– No tiene todos los tipos de campos

• En Office 365 mejoras– Tamaño del JSON dependiendo de necesidades

API Rest

• Pero no estábamos hablando de JavaScript?

– Casi todos los FrameWorks JS están diseñados para tener una capa de Servicios

API Rest

• Una “nueva” propiedad que permite inyectar JS en los formularios de listas

• Beneficios:

– Personalización más simple de Formularios

– Adaptar la interfaz a los estándares web

• Contras:

– Dificil unir dos listas => Problemas de rendimiento => SP no Relacional

JSLINK

Ventanas Modales

• Nos proporciona información muy valiosa:– ID de usuario– Url del sitio– Url del Web– Lenguage dl sitio

• Evita realizar llamadas extra como por ejemplo usuario que estal ogado

– http://blogs.encamina.com/desarrollandosobresharepoint/2014/01/28/sharepoint-datos-del-contexto-haciendo-uso-de-csom-de-javascript/

Variables del Contexto (_spPageContextInfo)

Frameworks JavaScript

• Hay multitud de FrameWorks/ librerías de diferentes proveedores

• ¿Qué debemos de mirar en el FrameWork?

– Nuestras necesidades• ¿Vamos a utilizar todo lo que nos proporciona?

– Bindings• Mapeo de los datos que se muestran en la Vista contra nuestros modelo de

datos

– Templates• Tener plantilla para poder renderizar nuestros datos

– Route• En Aplicaciones SPA indicar que pagina/contenido se va a mostrar • SharePoint es una SPA (Minimal Download Strategy)

– Unit Testing• Mocha, Jasmine, etc…

Frameworks

• Librería + Popular

• Abstracción del DOM

• Se puede utilizar en la gran mayoría de casos

• OJO!! Cuidado el Acceso al DOM– Ralentizar tu Aplicación– Cuelgue del Navegador– Bugs

• Principales problemas– UI depende del código– Código Espagueti + Boloñesa– Aplicaciones sin Estructura– Poca Escalabilidad

• Soluciones

– Generar Namespaces

– Orden del código

– Combinarlo con alguna librería• Templates:

– Mustache– Knockout

– Utilizar algún framework más completo• Obliga un cierto patrón/ logica

• Solo sirve para generar plantillas

• Casi un estándar => muchos frameworks lo utilizan

• Funcionamiento muy simple– Separa lógica de aplicación de UI– Reutilizable

• DisplayTemplates ?

• Generador de Formularios

• Tiene IDE propio Sencha Architect

• Posibilidad de desarrollo móvil.

• Inconvenientes:– Difícil maquetación– Curva de aprendizaje alta

• ¿Por qué es el FrameWork de Moda?

– Renderizado más rápido

– Clara separación entre las partes MVC

– Extendiendo el HTML => Incluso de forma intrusa

– Inconveniente• Amplio conocimiento sobre el Frameworks• Desarrollado por Google

Hay Multitud….

TypeScript

• Pretende ayudar a los equipos de programación a definir interfaces entre componentes de software

• Reducir los conflictos de nomenclatura mediante la organización del código en módulos que se pueden cargar de forma dinámica

• TypeScript es un proyecto Open Source http://typescript.codeplex.com/ – Creado por Anders Hejlsberg, Turbo Pascal, C# y Delphi

• Genera JavaScript

• Beneficios:- Código más homogéneo y mantenible- Comprobación estática de tipos- Interfaces- Módulos

Herramientas

• Visual Studio 2013 – WebEssentials => JSHINT (validador de JavaScript, minimizar js)

• WebStorm o Brackets http://brackets.io/

• Bower (Actualización de las librerías JS)

• Grunt (puede estar integrado con Visual Studio)– Quita Console.log, debugger– Verificación sintaxis JavaScript, CSS y HTML

• Herramientas de desarrollo– Internet Explorer– Chrome + Apps (Rest Console)– Mozilla + Firebug

Herramientas

¿Preguntas?