Ember y Semantic UI

Andrea Daniella Gaxiola Coronado |15130128

Abdel Ahiran Quiñonez Jaime |15130256
Juan Adolfo Ruiz Topete |15130258
 Ember
• EmberJS es un framework bajo el patrón MVC (Modelo-Vista-Controlador)
para JavaScript. Con él se pueden desarrollar aplicaciones por el lado del
cliente, apoyado en varias bibliotecas JavaScript como jQuery, una librería
muy conocida en el mundo del desarrollo, o Handlebars, una alternativa a
jQuery que crea plantillas HTML con datos en objetos en formato JSON.
 ¿Por qué es tan interesante utilizar un
framework Modelo-Vista-Controlador para el
diseño de aplicaciones?
• Porque será el marco de desarrollo quien se ocupe de sincronizar en cada
momento los cambios en el documento HTML con el DOM, gracias a la
información contenida en las variables de la Vista. Esto es posible por una
razón sencilla: el patrón MVC separa las aplicaciones en componentes
distintos de presentación, datos y lógica.
• El DOM es la estructura de objetos que genera el navegador cuando
se carga un documento y se puede alterar mediante Javascript para
cambiar dinámicamente los contenidos y aspecto de la página.
 Características
• EmberJS es un framework preparado para programar de forma sencilla y elegante,
lo que sus creadores definen como The Ember Way. Esto permite que se puedan
hacer grandes desarrollos con pocas líneas de código, siempre y cuando nos
adaptemos a las limitaciones del marco.
• EmberJS es un marco de desarrollo que se basa en el paradigma de programación
de software Convención sobre Configuración (CoC), que disminuye el número de
decisiones que debe tomar el desarrollador gracias a que el framework las adopta de
forma automática. Con ello se gana en simplicidad, pero se pierde en flexibilidad.
El programador solo tiene que especificar los aspectos no convencionales del
código de una aplicación porque EmberJS genera todo lo demás.
 Compatibilidad con Actualizaciones

Las actualizaciones de versiones principales de Ember eliminan las obsoletas,

pero agregan nuevas características con cambios que rompen las aplicaciones
con versiones anteriores.
 Estructura de la aplicación

Ember generará las partes necesarias de la aplicación si es que no fueron

explícitamente declaradas.Esto es en cierta forma una ventaja, para que todo
nuestro código tenga propósito más allá de necesidad del framework. Esta
inteligencia significa que nuestro proyecto tendrá tres archivos si eso es todo lo
que necesita, o tendrá doscientos si es eso lo que requerimos.
 Ventajas
• Automatiza la sincronización de los cambios en los datos.
• Plantillas dinámicas gracias a Hadlebars.js.
• Inyección de dependencias entre controladores.
• Dispone de una RESTfulAPI.
• Comunidad de desarrolladores altamente calificada.
• Muy sencillo de usar.
 Desventajas
• Se pierde flexibilidad.
• Usa demasiadas nomenclaturas difícil de familiarizarte.
• Necesitas entender varios conceptos que utiliza Ember.
• Entender cómo está distribuido.
• Cuenta con algunas limitaciones en cuanto a código.
• Una de las peores características de Ember es la poca información y recursos
para aprender y practicar que se pueden encontrar hoy en día actualizados y
de forma gratuita.
 Conceptos básicos
• Plantillas: una plantilla, escrita con Handlebars, describe la interfaz de usuario de la
aplicación. Cada plantilla está respaldada por un Modelo, y si el desarrollador
actualiza ese Modelo, la plantilla se modifica de forma automática. El HTML plano
de cada una de esas plantillas contiene:
• Expresiones: comandos que activan funcionalidades, por ejemplo, para definir vistas parciales e
incorporarlas a otras plantillas, procesos de renderización de vistas y plantillas
• Outlets: marcadores que conectan unas plantillas con otras.
• Componentes: elementos HTML personalizados que se usan para limpiar las plantillas
repetitivas o crear controles reutilizables.
 Conceptos básicos
• Router: se encarga de definir rutas anidadas, cada una de ellas respaldada por
un modelo de datos. Las plantillas y los modelos cambian con la navegación
del usuario, pero el comportamiento por defecto asociado a esas rutas
anidadas se mantiene inalterado.
 Conceptos básicos
• Componentes: son elementos HTML personalizados, implementados con
lenguaje JavaScript y con las plantillas como interfaz gráfica.
• Modelos: un modelo es un objeto que almacena datos de forma persistente a
lo largo del tiempo. Las plantillas son las responsables de mostrar cada uno
de esos Modelos al usuario al convertirlos en HTML
• Ruta: son los objetos responsables de decirle a la plantilla qué modelo de
datos debe usar y mostrar a cada usuario.
• Controlador: facilita, al igual que el modelo, propiedades a la plantilla.
 Instalación
• Descargar las dependencias de EmberJS: es necesario para programar una
aplicación en EmberJS disponer primero de las librerías JavaScript jQuery y
Handlebars. La primera se descarga aquí : http://jquery.com/ y la segunda, aquí :
http://handlebarsjs.com/.
• El segundo paso sería la instalación de Node.js.
• Luego en la consola (CLI) ejecutar el siguiente comando npm install -g ember-
cli.
• El cuarto es la instalación de Bower, un gestor de dependencias para front-end que
mantiene actualizadas todas las librerías para el proyecto. Es necesario utilizar el
comando npm install -g bower.
 Semantic UI
• Semantic UI es un framework para crear el diseño de interfaces de manera
responsive utilizando HTML/CSS legible. Empezó su andadura en 2013 y
actualmente va por la versión 2.5. Viene integrado con otros frameworks o
librerías como son Angular, React, Ember o Meteor.
• De manera más especifica es una biblioteca de componentes de interfaz de
usuario implementada utilizando un conjunto de especificaciones diseñadas
alrededor de un lenguaje natural.
¿Porque se dice que es para todo desarrollador?

• Se dice que es para cualquier desarrollador ya sea desde novato hasta

avanzado ya que es semántico y al ser semántico utiliza un lenguaje natural
que es fácil de entender, por lo que lo hace extremadamente intuitivo además
de que todas las clases que se crean o se adoptan son totalmente reutilizables.
 Semantic UI vs Boostrap

Una de las grandes diferencias con el resto de frameworks es la utilización de la sintaxis

para crear los componentes de manera legible. Las clases usan la sintaxis de los lenguajes
naturales como las relaciones sustantivo/modificador, orden de las palabras, y la
pluralidad para vincular conceptos intuitivamente. Lo veremos claro con un ejemplo.
 Característica Principal
• Tiene alrededor de 45 componentes prediseñados, que son útiles para el
desarrollo, ya que no tienes que integrar componentes adicionales.

• https://www.udemy.com/css-con-semantic-ui-un-framework-para-
personas/
 Características
• Su principal característica es capacitar desarrolladores mediante el uso de
lenguaje natural e intuitivo.
• Desarrollar aplicaciones interactivas.
• Desarrollar aplicaciones web.
• Desarrollar aplicaciones ligeras.
• Soporte demasiado amplio.
 Ventajas
• Componentes individuales.
• Facil de usar.
• Capacidad de mezclar y organizar diferentes frameWorks.
• Posee el mejor soporte para la responsividad que otros frameWorks.
• Bien estructurado.
• Sumamente ligero.
 Desventajas
• No tiene tantas características como otros frameworks.
• No es recomendado para desarrollar proyectos demasiados grandes.
Instalación
 Categorías
¿Adiós boostrap?
UI Element: un bloque de construcción básico. Puede aparecer solo o en
grupo. Por ejemplo, un botón puede ser independiente o puede estar dentro de
un grupo de botones.
UI Collection: es un grupo de diferentes tipos de elementos que son inter-
dependientes. Por ejemplo, un formulario web puede tener botones, inputs,
checkboxes, iconos etc.
UI View: representa una pieza común de contenido del sitio web. Por ejemplo,
una sección de feeds o comentarios.
UI Module: es un componente con funcionalidad interactiva basada en
JavaScript, como son los accodions, modales etc.
UI Behaviour: es un componente que no puede existir de forma independiente,
sino que se utiliza para inyectar funcionalidad en otros componentes.
 Componentes prediseñados

Dispone de más de 50 componentes prediseñados que en otros frameworks no

disponemos, como son feed, comentarios o cards (tarjetas), y que nos hacen la
vida más fácil a la hora de diseñar dichos componentes.