JavaScript Frameworks
Edin KapićRubén Toribio
Indice
• Libreria / Frameworki. Significadoii. Pros y Contrasiii. Ejemplos .Net , Jquery , etc …
• Javascript Frameworks Core• Javascript Frameworks UI • Patron MVVM , MVC• Javascript MV Knockout , Angular• Javascript Templates , Handlebars , Moustache• Javascript Mobile• SPA
Libreria / FrameworkFramework:
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
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.
Libreria / Framework
Ejemplos
Modelo de Objetos Sharepoint
.Net
JQuery
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.
Javascript Frameworks UI
Jquery UI 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
Patron Model-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
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 Presentation Foundation (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.
Javascript MVVMKnockout 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.
Knockout fue 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
Javascript MVVM
Knockout
Ejemplo
http://learn.knockoutjs.com/
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.
Javascript MVVM
Angular
Ejemplo
http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents
http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/
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/
JavaScript Templates
Data-binding en cliente (navegador)
Mayormente declarativo
Desacopla los datos de su presentación en HTML
Algunos frameworks lo llevan incorporado (KnockoutJs...)
JavaScript Templates (II)
Plantilla (HTML con binding)
Contexto de datos (JSON)
Resultado (HTML)
Handlebars
Plantillas definidas con {{ }} El data-binding se hace expresamente
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>
Handlebars (II)var context = {title: "My New Post", body: "This is my first post!"}var source = $("#entry-template").html();var template = Handlebars.compile(source);var html = 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/
Mustache
Parecido a Handlebars pero más sencillo y básico
Disponible en varios lenguajes (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>";
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/
JavaScript Mobile
JS optimizado para móviles Controles de UI
Tamaño mínimo
Velocidad de ejecución
Uso de recursos mínimo
Acceso a las API del teléfono
jQuery Mobile http://demos.jquerymobile.com/1.4.2/
Single-Page Application (SPA)
Una sóla página para la aplicación
Carga dinámica del resto de contenido
Uso de controllers
Enrutamiento y URLs especiales (#)
Frameworks para SPA AngularJs
Durandal
Breeze
http://jpapa.me/codecamper
Encuesta Iberian SharePoint Conference 2015
http://1drv.ms/SrXenQ