WebCast de JavaScript para Desarrolladores de SharePoint

1. JavaScript para Desarrolladores SharePoint
Adrián Díaz Cervera

2. 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 compra
en nuestra tienda online.
www.campusmvp.es
Síguenos y descubrirás los mejores trucos y recursos:
facebook.com/campusmvp twitter.com/campusmvp

3. 00
¿Quiénes somos?

4. Adrián Díaz Cervera
MVP SharePoint Server
SharePoint Architect en ENCAMINA
http://blogs.encamina.com/desarrollandosobresharepoint
http://geeks.ms/blogs/adiazcervera
adiaz@encamina.com
addiacer@gmail.com
@AdrianDiaz81

5. 01
Un poco de historia

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

8. 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

9. ¿Por qué no nos gusta JavaScript?

10. Motivos
Nombre: No tiene nada que ver con JAVA
Lenguaje débilmente tipado
Desconocimiento de JavaScript como POO
Muchos Framework y gran cantidad de
cambios

11. Beneficios

12. JavaScript: El lenguaje de programación

13. Ámbitos de las variables
– C#
• A nivel de bloque (for, if..)
• A nivel de función
• A nivel de clase
– JavaScript
• A nivel de función
http://jsfiddle.net/AdrianDiaz/u2mbnu9o/

14. Tipos de Variables
• 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
http://jsfiddle.net/AdrianDiaz/sbmqbwya/1/

15. Clausura
• Una línea de nuestro código solo puede acceder a variables que tengan un ámbito mayor o superior
al suyo propio.
• Concepto +Importante
http://jsfiddle.net/AdrianDiaz/rvb003fg/1/ http://jsfiddle.net/AdrianDiaz/wxcgah8v/

16. Clases y prototipos
• Clases como tal no existen pero …
http://jsfiddle.net/AdrianDiaz/pjtjtn9q/
• Prototipo:
– Propiedad especial en las funciones constructoras.
– Contiene métodos y propiedades que van a estar disponibles en todas las instancias de la “clase”
http://jsfiddle.net/AdrianDiaz/sbmqbwya/

17. Asíncrono
• 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 !!

18. Iteración en los bucles
• Diferencias respecto a C#
http://jsfiddle.net/AdrianDiaz/4hbv7bm5/1/
• Porque? Una propiedad en JS es lo mismo que un elemento de un array 

20. Que tiene SharePoint OOB

21. Javascript Object Model SharePoint
• 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 :
http://msdn.microsoft.com/en-us/library/office/jj245759.aspx
ExecuteOrDelayUntilScriptLoaded(myInitMethod, "sp.js");
– Version 2013
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

22. Javascript Object Model SharePoint (Example)

23. API Rest
• 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

24. API Rest
• Pero no estábamos hablando de JavaScript?
– Casi todos los FrameWorks JS están diseñados para tener una capa de Servicios

25. JSLINK
• 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

26. Ventanas Modales

27. Variables del Contexto (_spPageContextInfo)
• 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/

28. Frameworks JavaScript

30. Frameworks
• 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…

31. • 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

32. • 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

33. • 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 ?

34. • Generador de Formularios
• Tiene IDE propio Sencha Architect
• Posibilidad de desarrollo móvil.
• Inconvenientes:
– Difícil maquetación
– Curva de aprendizaje alta

35. • ¿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

36. Hay Multitud….

37. TypeScript

38. • 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

39. Herramientas

40. 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

41. ¿Preguntas?