JavaScript FrameworksEdin 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 CoreJQuery 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 MVVMAngular 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

http://svy.mk/SUR4wh

Encuesta Iberian SharePoint Conference 2015

http://1drv.ms/SrXenQ