Transcript JavaScript Frameworks

JavaScript Frameworks
Edin Kapić
Rubén Toribio
Indice
• Libreria / Framework
i. Significado
ii. Pros y Contras
iii. 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 / 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
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.
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.

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.
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.

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.
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 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.
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-withangular-js/contents

http://viralpatel.net/blogs/angularjs-introduction-hello-worldtutorial/
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