sharepoint saturday barcelona. la importancia de javascript en nuestros desarrollos
Post on 08-Jan-2017
560 Views
Preview:
TRANSCRIPT
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
top related