Presentación que realice en el SharePoint Saturday en Barcelona, sobre el desarrollo en JavaScript sobre SharePoint/Office 365

1. JavaScript y la importancia dentro del
desarrollo en SharePoint/Office365/Apps
Adrián Díaz Cervera
September 26th, 2015
Barcelona

2. Thanks to our Sponsors

3. Adrián Díaz Cervera
Email : addiacer@gmail.com
Twitter : AdrianDiaz81
Blog
blogs.encamina.com/desarrollandosos
harepoint/
geeks.ms/blogs/adiazcervera
Es Microsoft Value Profesional de SharePoint Server desde 2014.
Miembro de varias comunidades técnicas como SUGES, Office 365 y
Valencia NET. Lleva desarrollando con tecnologías Microsoft más de
10 años y desde hace 5 años está centrado en el desarrollo software.
Actualmente trabaja en el departamento de desarrollo
de ENCAMINA una consultora informática de Valencia que se
destaca por realizar soluciones basadas en Tecnología Microsoft,
principalmente en SharePoint, SharePoint, Office 365 y Azure.

4. Agenda
 Evolución en el desarrollo de SharePoint
 ¿Por qué JavaScript?
 JavaScript: El Lenguaje de Programación
 Como utilizarlo en SharePoint/Office 365
 Frameworks: AngularJS
 Transpiladores: TypeScript
 Q & A

5. Introducción

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. Factores del auge de JavaScript en SP
 Arquitectura SOFEA
 Escalabilidad.
 Baja latencia.
 Interoperabilidad
 Separación de responsabilidades
 Prototipos

10. Factores del auge de JavaScript en SP
 Es el lenguaje estándar Web
 Posibilidad de utilizar las últimas herramientas
 No posible con tecnología .NET:
 Razor,
 vNext
 WebAPI
 Como anillo al dedo con la tendencia al CLOUD
 Mayor número de desarrolladores

12. JavaScript es el demonio o eso parece..

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

14. Beneficios

16.  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/

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

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

19. • Clases como tal no existen hasta ES6 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

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

21. • Diferencias respecto a C#
Iteración en los bucles

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

25. Javascript Object Model SharePoint
(Example)

26. • Importante:
 Accesible desde cualquier plataforma (Android, IOS, W8/W10) => 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

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

28. • 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
 Legibilidad del código
JSLINK

29. • Aprovechar al máximo las capacidades de búsqueda
• Templates similar al JavaScript
Display Templates

30. Ventanas Modales

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

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

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

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

37. Hay Multitud….

40. • es un tipo de compilador que toma el
código fuente de un programa escrito
en un lenguaje de programación como
entrada y produce el código fuente
equivalente en otro lenguaje de
programación
¿Qué es un Transpilador?

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

43. • JavaScript es un lenguaje de programación
• Los tiempos evoluciona
• Microsoft más alineado con estándar
• Futuro en la nube
Conclusión

44. https://github.com/AdrianDiaz81/SharePointSaturdayBarcelona