Introducción al desarrollo orientado a WebComponents y Polymer, donde veremos como construir componentes y como integrarlos entre ellos, también veremos como afrontar el desarrollo de una aplicación Web y como integrarla con backEnd en nuestro caso Visual Studio.
Espero que os parezca interesante.
6. El problema de elegir un framework de desarrollo front-end
Front-end Choice Paralisis
@dvdchavarri
7. Por qué Web Components
Reutilización Encapsulación
Homogeneidad Composición
@dvdchavarri
8. “ Componentes Web es la tecnología que
permiten definir tus propias etiquetas HTML
personalizadas que incluyen una semántica,
un comportamiento funcional y una lógica
de presentación propia. ”
Recogido en el estándar W3C, 2011
Qué son los WebComponents?
@dvdchavarri
9. Custom element
Modelo de extensibilidad
que permite definir nuevas
etiquetas o redefinir las
etiquetas estándar HTML
W3C Web Component Especification
Import
Posibilidad de cargar
ficheros de código HTML
dentro de otros ficheros
permitiendo modularizar
elementos y
empaquetarlos.
Shadow Dom
Modelo de encapsulación
que permite aislar el
contenido interno del
componente.
Template
Modelo de renderización
basado en plantillas de
código HTML que sólo
son activadas cuando se
renderiza el componente
@dvdchavarri
Link plunker
39. Web API
TodoController.csnamespace PolymerApi.Controllers
{
[Route("api/[controller]")]
public class TodoController : Controller
{
static private List<Todo> todolist = new List<Todo>();
public TodoController()
{
if (todolist.Count == 0)
{ todolist.Add(new Todo { rid = 0, task = "Happy Polymer Coding", user = "Ruben Chavarri", time = "" }); }
}
// GET: api/values
[HttpGet]
public IEnumerable<Todo> Get()
{
return todolist;
}
// GET api/values/5
[HttpGet("{id:int}")]
public IActionResult Get ( int id)
{
return new ObjectResult(todolist[id]);
}
// PUT api/values/5
[HttpPut("{id:int}")]
public IActionResult Put ( int id, [FromBody] Todo todo)
{
var index = todolist.FindIndex(row => row.rid == id);
todolist[index] = todo;
return new ObjectResult(todo);
}
// POST api/values
[HttpPost]
public IActionResult Post( [FromBody] Todo todo)
{
todolist.Add(todo);
return new ObjectResult(todo);
}
// DELETE api/values/5
[HttpDelete("{id:int}")]
public IActionResult Delete (int id)
{
var index = todolist.FindIndex(row => row.rid == id);
todolist.RemoveAt(index);
return new HttpStatusCodeResult(200);
}
}
}
42. Implementación de WebComponents
Generadores y Plantillas
Es una buena práctica
partir de una plantilla
(a partir de Yeoman o
github seed-element)
Desarrollo
Diseño del
webcomponente
orientando a la
reutilización
Despliegue
Tras el desarrollo del
webcomponentes se
compacta con
gulp/grunt
(minify, resize img,
compile less/sass…).
Publicación
Se empaqueta y publica
en el catalogo de
webcomponentes
(public/privado) para la
posterior reutilización
@pekewake
43. Uso de WebComponents
Selección de
Webcomponents,
procedente de repositorios
públicos/privados.
Instalación/Descarga
Descarga de
components mediante
bower (gestor de
paquetes)
Uso de componentes
Se incluye import en la
aplicación y se utiliza
como otra etiqueta html
standar
@pekewake
Siguiendo en la línea de eventos relacionados con Front-End, tras la ultima charla de Ionic, hablamos con Luis para hablar del desarrollo web orientado a Webcomponents con VisualStudio, las herramientas que andamos familiarizados.
Comenzaremos con una introducción para situarnos y que es esto de los Webcomponents.
Aunque lo que nos interesa especialmente ver de forma práctica a través de ejemplos, costruiremos nuestro primer Webcomponents, veremos unos cuantos ejemplos de como se combinan y terminaremos viendo una aplicación.
Un poco de nuestras historia, que hemos aprendido por el camino
Participado en el framework de desarrollo de aplicaciones orientado a componentes dentro del Banco
Animados por aprender nuevos frameworks, asiduos frecuentes a meetups y hackathones
#DISCLAIMER
const talk = best ? fav_famework : react;
* No estamos aquí para decir que Webcomponents es el mejor, que es mejor que Angular, que React o Backbone.
* Lo way, lo que mola es observar y decidir que es lo mejor para tu producto. Hay que ser responsable.
Importante contar con una tecnología que tenga una comunidad detrás y que se esté implantando en clientes finales (Polymer en SalesForce, Github y por proyectos mas cercanos en ING y en otros principales bancos.
* Los frameworks intentan abarcar todo pero no son capaces de apretar en todas sus partes.
* Por situarnos: Webcomponents (librería) para cubrir necesidades especificas y Angular (es un framework)
- Pregunta para Google: Porque dos frameworks diferentes? AngularJS y Polymer. Porque realmetne no existe la formula perfecta!
- Angular? Es necesario adaptar toda la empresa para utilizar un framework.
* Preguntar a la gente en que desarrolla cada uno.
Todos estos frameworks tienen en común, que desarrollan sus propios componentes, a su manera.
Estaría fenomenal disponer de un estándar que especifique como implementar estos componentes y poder compartirlos entre ellos.
La construcción de componentes Reutilizables. Eje principal!
Encapsulación de funcionalidad y aspecto. Que estos componentes absorban la complejidad del diseño, capaces de adaptarse al espacio, dispositivo, etc. de forma transparente para el maquetador.
Desarrollo homogéneo en base al estándar. Construcción de interefaces homogenea, que facilita el uso de la tecnología (material design: modelo de look&feel, componentes)
Construcción de Aplicaciones Web por Composición por parte de los diseñadores reutilizando componentes con UX, lo que produce una aplicación con la Expereciencia de usuario coherente.
dnvm use -r clr -arch x86 1.0.0-rc1-update1
dnx web
Componentes Visuales + Componente Datos
Analisis de cada una de las piezas y como se comunican
Binding + Eventos