JavaScript para Desarrolladores SharePoint
-
Upload
jared-summers -
Category
Documents
-
view
80 -
download
8
description
Transcript of JavaScript para Desarrolladores SharePoint
![Page 1: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/1.jpg)
JavaScript para Desarrolladores SharePointAdrián Díaz Cervera
![Page 2: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/3.jpg)
¿Quiénes somos?
00
![Page 4: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/4.jpg)
Adrián Díaz Cervera
MVP SharePoint ServerSharePoint Architect en ENCAMINA
http://blogs.encamina.com/desarrollandosobresharepointhttp://geeks.ms/blogs/adiazcervera [email protected]@gmail.com @AdrianDiaz81
![Page 5: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/5.jpg)
Un poco de historia
01
![Page 6: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/6.jpg)
![Page 7: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/7.jpg)
Más de una década de evolución
2003 2007 2010 2013
User ControlWebPart,
Csom, SandBox
Apps, API REST
![Page 8: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/9.jpg)
¿Por qué no nos gusta JavaScript?
![Page 10: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/11.jpg)
Beneficios
![Page 12: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/12.jpg)
JavaScript: El lenguaje de programación
![Page 13: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/13.jpg)
– 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/
![Page 14: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/14.jpg)
• 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/
![Page 15: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/15.jpg)
• 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/
![Page 16: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/16.jpg)
• 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/
![Page 17: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/17.jpg)
• 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
![Page 18: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/18.jpg)
• 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/
![Page 19: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/19.jpg)
![Page 20: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/20.jpg)
Que tiene SharePoint OOB
![Page 21: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/21.jpg)
• 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
![Page 22: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/22.jpg)
Javascript Object Model SharePoint (Example)
![Page 23: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/23.jpg)
• 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
![Page 24: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/24.jpg)
• Pero no estábamos hablando de JavaScript?
– Casi todos los FrameWorks JS están diseñados para tener una capa de Servicios
API Rest
![Page 25: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/25.jpg)
• 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
![Page 26: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/26.jpg)
Ventanas Modales
![Page 27: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/27.jpg)
• 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)
![Page 28: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/28.jpg)
Frameworks JavaScript
![Page 29: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/29.jpg)
![Page 30: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/30.jpg)
• 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
![Page 31: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/31.jpg)
• 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
![Page 32: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/32.jpg)
• 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
![Page 33: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/33.jpg)
• 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 ?
![Page 34: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/34.jpg)
• Generador de Formularios
• Tiene IDE propio Sencha Architect
• Posibilidad de desarrollo móvil.
• Inconvenientes:– Difícil maquetación– Curva de aprendizaje alta
![Page 35: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/35.jpg)
• ¿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
![Page 36: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/36.jpg)
Hay Multitud….
![Page 37: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/37.jpg)
TypeScript
![Page 38: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/38.jpg)
• 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
![Page 39: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/39.jpg)
Herramientas
![Page 40: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/40.jpg)
• 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
![Page 41: JavaScript para Desarrolladores SharePoint](https://reader036.fdocuments.co/reader036/viewer/2022062408/568135da550346895d9d4b66/html5/thumbnails/41.jpg)
¿Preguntas?