JavaScript para Desarrolladores 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 compraen 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 2003 2007 2010 2013 Apps, API REST WebPart, Csom, SandBox User Control

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 JavaScript como lenguaje de copy-paste 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 • + Developers Interfaz rápida Cloud Office365 Estándar Web

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 • Nulles 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 … • 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/pjtjtn9q/ 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# • Porque? Una propiedad en JS es lo mismo que un elemento de un array http://jsfiddle.net/AdrianDiaz/4hbv7bm5/1/

20. Que tiene SharePoint OOB

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

22. JavascriptObjectModelSharePoint (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 estalogado • 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 (MinimalDownloadStrategy)  • UnitTesting • 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 SenchaArchitect • 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 Sourcehttp://typescript.codeplex.com/ • Creado por AndersHejlsberg, 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 Bracketshttp://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 (RestConsole) • Mozilla + Firebug

41. ¿Preguntas?