Post on 02-Jan-2016
description
JavaScript para Desarrolladores SharePointAdrián Díaz Cervera
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.
Síguenos y descubrirás los mejores trucos y recursos:
facebook.com/campusmvp twitter.com/campusmvp
www.campusmvp.es
¿Quiénes somos?
00
Adrián Díaz Cervera
MVP SharePoint ServerSharePoint Architect en ENCAMINA
http://blogs.encamina.com/desarrollandosobresharepointhttp://geeks.ms/blogs/adiazcervera adiaz@encamina.comaddiacer@gmail.com @AdrianDiaz81
Un poco de historia
01
Más de una década de evolución
2003 2007 2010 2013
User ControlWebPart,
Csom, SandBox
Apps, API REST
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
¿Por qué no nos gusta JavaScript?
Motivos
Nombre: No tiene nada que ver con JAVA
Lenguaje débilmente tipado
JavaScript como lenguaje de copy-paste
Desconocimiento de JavaScript como POO
Muchos Framework y gran cantidad de cambios
Beneficios
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
http://jsfiddle.net/AdrianDiaz/sbmqbwya/1/
• Una línea de nuestro código solo puede acceder a variables que tengan un ámbito mayor o superior al suyo propio.
• Concepto +Importante
Clausura
http://jsfiddle.net/AdrianDiaz/rvb003fg/1/ http://jsfiddle.net/AdrianDiaz/wxcgah8v/
• 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”
Clases y prototipos
http://jsfiddle.net/AdrianDiaz/pjtjtn9q/
http://jsfiddle.net/AdrianDiaz/sbmqbwya/
• 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
http://jsfiddle.net/AdrianDiaz/4hbv7bm5/1/
Que tiene SharePoint OOB
• 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) => 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
JSLINK
Ventanas Modales
• 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/
Variables del Contexto (_spPageContextInfo)
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
• 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
• 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 ?
• Generador de Formularios
• Tiene IDE propio Sencha Architect
• Posibilidad de desarrollo móvil.
• Inconvenientes:– Difícil maquetación– Curva de aprendizaje alta
• ¿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….
TypeScript
• 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
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
Herramientas
¿Preguntas?