JavaScript Frameworks

1. JavaScript Frameworks Edin Kapić Rubén Toribio

2. Indice • Libreria / Framework • Significado • Pros y Contras • Ejemplos .Net , Jquery , etc … • Javascript Frameworks Core • Javascript Frameworks UI • Patron MVVM , MVC • Javascript MV Knockout , Angular • Javascript Templates , Handlebars , Moustache • Javascript Mobile • SPA

3. Libreria / Framework Framework: Puede ser todo lo que usa en el desarrollo de aplicaciones. Puede ser una biblioteca, una colección de muchas bibliotecas, una colección de scripts, o cualquier herramienta de software necesites para crear tu aplicación. Librería: Se trata de una colección de objetos / funciones / métodos (dependiendo de su lenguaje) Se trata básicamente de un archivo que contiene código reutilizable que por lo general se puede compartir entre varias aplicaciones

4. Libreria / Framework • Reduce el tiempo y la energía en el desarrollo de software. • Ofrece un sistema de trabajo a través del cual el usuario puede desarrollar el módulo de aplicación deseada o la aplicación completa en lugar de desarrollar los detalles de nivel inferior. • Los desarrolladores pueden dedicar más tiempo en desarrollar el requisito de software, no en la preparación del entorno y las herramientas de desarrollo de aplicaciones. • Tienes que seguir la convención de codificación que hace que el código sea limpio y extensible. • Separa la lógica empresarial de la interfaz de usuario que hace que el código sea modular y extensible. • Ayudan a desarrollar el proyecto con rapidez. • Para el usuario principiante, es más difícil de utilizar de forma rápida, ya que es grande y complejo, abstracto y usuario tiene que pasar más tiempo para evaluarlo en función de sus usos en el desarrollo del programa. • Otra desventaja es que un genérico "talla única para todos" no funciona de manera eficiente para cualquier software específico. • No esta pensado para los pequeños proyectos, ya que en un proyecto muy simple de código customizado funcionará más rápido que la creación de un framework.

5. Libreria / Framework • Ejemplos • Modelo de Objetos Sharepoint • .Net • JQuery

6. Javascript Frameworks Core JQuery • http://jquery.com/ • JQuery es una biblioteca de JavaScript rápida y concisa, para ayudar en el manejo de documentos HTML, manejo de eventos, animación, y las interacciones Ajax para el desarrollo web rápido. Sin lugar a dudas, JQuery sigue siendo una de las bibliotecas de JavaScript más populares. Es utilizado por miles de sitios web de todo el mundo. MooTools • http://mootools.net/ • MooTools es un sistema modular, framework de JavaScript compacto, orientado a objetos utilizados para el intermedio al avanzado desarrollo de JavaScript. Mediante el uso de MooTools es fácil escribir potente cross-browser, el código en su estilo elegante. Prototype • http://www.prototypejs.org/ • Prototype se está convirtiendo rápidamente en uno de los frameworks de JavaScript más utilizados disponibles. El objetivo final de Prototype es facilitar el desarrollo de aplicaciones web dinámicas. Adoptado por una serie de empresas de medios de comunicación y las organizaciones grandes, Prototype permite el desarrollo rápido de aplicaciones web complejas.

7. JavascriptFrameworks UI JqueryUI • http://jqueryui.com/ • Es un conjunto de interacciones con la interfaz de usuario, efectos, widgets y temas incorporados desarrollados con biblioteca de JavaScript jQuery. Si estas construyendo aplicaciones web altamente interactivas. Modernizr • http://modernizr.com/ • Da un mayor control sobre la experiencia a través de la detección de características impulsado por JavaScript, es importante seguir utilizando las mejores prácticas a través de su proceso de desarrollo. Bootstrap • http://getbootstrap.com • El más popular para el desarrollo de proyectos web y mobile

8. PatronModel-View-Controller (MVC) •  Es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones. • Para ello MVC propone la construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir, por un lado define componentes para la representación de la información, y por otro lado para la interacción del usuario • Ejemplo ASP.Net MVC

9. Patrón Model-View-ViewModel ( MVVM) • Es un patrón que se originó a partir de Microsoft como una especialización del patrón de diseño modelo de presentación introducida por Martin Fowler. • En gran parte basada en el patrón modelo-vista-controlador (MVC), MVVM es una implementación específica dirigida a plataformas de desarrollo de interfaz de usuario que soportan la programación orientada a eventos en Windows PresentationFoundation (WPF) y Silverlight en las plataformas. NET usando XAML y. NET. Técnicamente diferente, pero similar, los patrones de diseño de la presentación de modelos están disponibles en HTML5 a través AngularJS, KnockoutJS.

10. Javascript MVVM Knockout • http://knockoutjs.com/ Una clara separación entre los datos de dominio, ver los componentes y los datos que se mostrarán La presencia de una capa claramente definida de código para gestionar las relaciones entre los componentes de vista Este último aprovecha las funciones de gestión de eventos nativos del lenguaje JavaScript. Estas características racionalizar y simplificar la especificación de las relaciones complejas entre ver los componentes, que a su vez hacen que la pantalla sea más sensible y la experiencia de usuario más rica. Knockoutfue desarrollado y es mantenido por Steve Sanderson, un empleado de Microsoft. El autor hace hincapié en que este es un proyecto de código abierto de personal, y no una producción Microsoft

11. Javascript MVVM • Knockout • Ejemplo • http://learn.knockoutjs.com/

12. Javascript MVVM Angular • https://angularjs.org/ • Apoyado por Google • Características • Disociar la manipulación DOM desde la lógica de la aplicación. Esto mejora la capacidad de prueba del código. • Pruebas de aplicaciones Regard como iguales en importancia a la escritura de la aplicación. • Prueba dificultad se ve afectada dramáticamente por la forma en que el código está estructurado. • Disociar el lado cliente de una aplicación desde el lado del servidor. Esto permite que el trabajo de desarrollo para avanzar en paralelo, y permite la reutilización de los dos lados. • Guiar a los desarrolladores a través de todo el camino de la construcción de una aplicación: desde el diseño de la interfaz de usuario, a través de la escritura de la lógica del negocio, de la prueba.

13. Javascript MVVM • Angular • Ejemplo • http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents • http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/

14. Javascript MVVM • Angular vs Knockoutjs • Angular tiene soporte de Google • Angular tiene mas funcionalidades • Knockout es mas simple y perfecto para templating • Knockout esta muy difundido en los entornos de Trabajo Microsoft • http://todomvc.com/

15. JavaScriptTemplates • Data-binding en cliente (navegador) • Mayormentedeclarativo • Desacopla los datos de supresentación en HTML • Algunosframeworks lo llevanincorporado (KnockoutJs...)

16. JavaScriptTemplates (II) • Plantilla (HTML con binding) • Contexto de datos (JSON) • Resultado (HTML)

17. Handlebars • Plantillasdefinidas con {{ }} • El data-binding se haceexpresamente • http://handlebarsjs.com/ <script id="entry-template" type="text/x-handlebars-template"> • <div class="entry"> • <h1>{{title}}</h1> • <div class="body"> • {{body}} • </div> • </div> </script>

18. Handlebars (II) • var context = {title: "My New Post", • body: "This is my first post!"} • var source = $("#entry-template").html(); • var template = Handlebars.compile(source); • varhtml = template(context); • <div class="entry"> • <h1>My New Post</h1> • <div class="body"> • This is my first post! • </div> • </div> http://jsfiddle.net/epz7d/1/

19. Mustache • Parecido a Handlebarsperomássencillo y básico • Disponible en varioslenguajes (no solo JS), incluso en el lado servidor • http://mustache.github.io/ • var template = "<div class='entry'><h1>{{title}}</h1> • <div class='body'>{{body}}</div></div>";

20. Mustache (II) • var context = {title: "My New Post", • body: "This is my first post!"} • var html = Mustache.to_html(template, context); • <div class="entry"> • <h1>My New Post</h1> • <div class="body"> • This is my first post! • </div> • </div> http://jsfiddle.net/Xf4LQ/3/

21. JavaScript Mobile • JS optimizado para móviles • Controles de UI • Tamañomínimo • Velocidad de ejecución • Uso de recursos mínimo • Acceso a las API del teléfono • jQueryMobile http://demos.jquerymobile.com/1.4.2/

22. Single-Page Application (SPA) • Una sólapágina para la aplicación • Carga dinámica del resto de contenido • Uso de controllers • Enrutamiento y URLsespeciales (#) • Frameworks para SPA • AngularJs • Durandal • Breeze http://jpapa.me/codecamper

23. Encuesta http://svy.mk/SUR4wh

24. EncuestaIberian SharePoint Conference 2015 http://1drv.ms/SrXenQ