JavaScript y la importancia dentro del desarrollo en SharePoint/Office365/AppsAdrián Díaz CerveraSeptember 26th, 2015

Barcelona

Thanks to our Sponsors

Adrián Díaz Cervera

Email : addiacer@gmail.comTwitter : AdrianDiaz81Blog blogs.encamina.com/desarrollandososharepoint/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.

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

Evolución en el desarrollo de SharePoint

Introducción

Click to insert photo.

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

2003 2007 2010 2013- 2016

User ControlWebPart,

Csom, SandBox

Apps, API REST, Display Templates, JSLink

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

Factores del auge de JavaScript en SP Arquitectura SOFEA

Escalabilidad. Baja latencia. Interoperabilidad Separación de responsabilidades Prototipos

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

¿Por qué JavaScript?

JavaScript es el demonio o eso parece..

Motivos

Nombre: No tiene nada que ver con JAVA

Lenguaje débilmente tipado

JavaScript como lenguaje de copy-paste

Desconocimiento de JavaScript como POOMuchos Framework y gran cantidad de cambios

Beneficios

Click to insert photo.

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

• 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

• 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

• 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

Click to insert photo.Mucho JavaScript … Pero estamos en SharePoint

Pero estamos en 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

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/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

• 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 Legibilidad del código

JSLINK

• Aprovechar al máximo las capacidades de búsqueda

• Templates similar al JavaScript

Display Templates

Ventanas Modales

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

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

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

Click to insert photo.

DEMO TIME

Transpiladores:

TypeScriptCoffeScript

WebSharper

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

• 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

DEMO TIME

• JavaScript es un lenguaje de programación

• Los tiempos evoluciona

• Microsoft más alineado con estándar

• Futuro en la nube

Conclusión

Q & A

MUCHAS GRACIAS

@AdrianDiaz81

https://github.com/AdrianDiaz81/SharePointSaturdayBarcelona