©2020 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Desarrollo Aplicaciones Polymer
Curso de desarrollo de aplicaciones web y Progressive Web Apps con la librería Polymer
Material disponible
Este curso te ofrecerá toda la base de conocimiento necesaria para realizar proyectos avanzados con Polymer, la librería de Google para el desarrollo frontend basada en Web Components.
Durante el curso enseñaremos a trabajar con Polymer en general, aunque centraremos principalmente en explicar aquellas características enfocadas en el desarrollo de aplicaciones web SPA (Single Page Application), con nuevas y asombrosas características de Firebase y las Progressive Web Apps: Animación, routing, autenticación, service workers, notificaciones push, trabajo offline y mucho más.
Objetivos del curso
En este nuevo curso de Polymer en EscuelaIT nos centramos principalmente en el desarrollo de apps, experimentando con muchas de las nuevas características que se engloban dentro del concepto de Progressive Web Apps. No solo aprenderás a desarrollar componentes con Polymer, sino a integrar funcionalidades que hasta hace poco eran ajenas a la web, como el trabajo offline o el envío de notificaciones a los usuarios, incluso sin tener abierta la página del sitio web que nos está notificando.
Es un curso de nivel intermedio a avanzado de Polymer, aunque se puede tomar incluso sin conocimientos previos de la librería, pues en el primer bloque de clases explicaremos las partes básicas del desarrollo con Polymer, de una manera resumida. Así, las personas que no conocen Polymer de antemano, tendrán la oportunidad de seguir el resto de clases en las que exploraremos características más avanzadas de la librería, su catálogo de componentes, así como las herramientas del ecosistema Polymer.
En el segundo bloque de clases del curso aprenderás a trabajar con las herramientas de línea de comandos de Polymer, crear tus propios layouts que se adaptan a todo tipo de pantallas y dispositivos, con las guías de Material Design. Aprenderás a configurar el sistema de routing y hacer lazy loading de componentes, así como a implementar animaciones y transiciones entre secciones de contenido.
En el siguiente bloque enseñaremos los componentes que nos permiten apoyarnos en Firebase para realizar autenticación y almacenamiento de datos en tiempo real. En el bloque final explicaremos cómo trabajar con otras características avanzadas de las Progressive Web Apps, como el almacenamiento en local, los Service Workers, trabajar en modo offline y emitir notificaciones push a los usuarios de las aplicaciones.
Clases y contenidos
Potencia de Polymer en el desarrollo de apps.
En esta clase se cubre la introducción a Polymer, Propiedades, Métodos, Ciclo de vida, DOM Local y composición con el Light DOM.
La segunda clase de repaso de características básicas de Polymer. Este es el contenido que nos quedó por ver la la primera unidad temática.
En este vídeo se explican: Eventos, eventos personalizados, el sistema de binding, observers y behaviors
En este vídeo corregimos los ejercicios propuestos en el primer bloque temático.
En esta clase practicamos sobre el ejemplo realizado en la clase en abierto, incorporando nuevos componentes. Además corregimos los ejercicios propuestos en el bloque II del repaso de Polymer
Trabajamos la parte del CRUD con un API Rest para obtener una referencia de cómo hacer el flujo de la administración de los datos de una aplicación
En esta clase vimos la segunda parte del CRUD basado en un API y además exploramos de manera práctica las Behaviors de Polymer
En esta clase abordamos el sistema de routing de Polymer, mediante ejemplos sencillos que nos permitan entender los dos componentes que Polymer nos ofrece para manejar las rutas de la aplicación.
Comenzamos viendo ejemplos sencillos del sistema de routing y luego incorporamos lazy loading de componentes y controlamos rutas profundas de la aplicación, personalizando el comportamiento del sistema a las necesidades concretas y comunes de aplicaciones profesionales.
En esta clase se explora el sistema de routing de Polymer y el lazy loading de elementos: "PRPL Pattern".
Polymer Starter Kit 2 incluye un sistema de routing y lazy load ya implementado, que sirve para hacer aplicaciones de una sola página (SPA) que además se encuentran optimizadas gracias al lazy load. En esta clase se explica cómo funciona y se construye desde cero, para acabar con todos los posibles secretos escondidos en este sistema.
El código de la clase se encuentra en dos versiones. En la pestaña de "Recursos" está el código que nos entregó Jorge una vez finalizada la clase. Pero al restaurar ese código hemos tenido problemas y no funciona como es debido. Debido a Ello Vicent Soriano nos ha proporcionado un código, que corresponde con el contenido de la clase, pero que funciona correctamente. Ese c´ódigo se ha enlazado desde la pestaña "Referencias". En cualquier caso, el código de Vicent está en Github en https://github.com/EscuelaIt/Routing-Polymer-EscuelaIT
Estudiamos a fondo el Polymer CLI y aprendemos a crear plantillas personalizadas instalables con "polymer init", para incorporar cualquier otro mecanismo que sea necesario para llevar a producción nuestras apps.
En esta clase tenemos una introducción a Firebase y Polymerfire. Además mostramos cómo realizar autenticación de usuarios mediante Firebase y guardar los perfiles de los usuarios que entran en la app.
En esta clase aprendimos a trabajar con los elementos firebase-document y firebase-query, para el acceso a los datos en tiempo real.
Repasamos CouchDB para profundizar en PouchDB como base de datos para hacer aplicaciones online y offline
Vemos asuntos avanzados sobre la organización del código mediante FirebaseBehavior
Clase dedicada a la accesibilidad y cómo Polymer permite crear páginas y aplicaciones acesibles.
En esta clase nos dedicamos a crear un layout desde cero, usando los componentes app-layout y luego iron-flex-layout para implementar flexbox y maquetar el contenido en nuestros propios componentes.
Neon Animation, animaciones con los elementos del catalogo y cómo crear nuestros propios elementos e incluir animaciones.
En esta clase abordamos las PWA. Analizamos todo lo que te ofrece Polymer para facilitar el proceso de build, los service workers, detección online/offline. Vemos cómo almacenar datos con local storage y persistir offline datos de Firebase.
En este vídeo trabajamos varios temas de las Progressive Web Apps con Polymer, desde cómo realizar el cacheo de solicitudes Ajax mediante el service worker de nuestra aplicación
En esta clase tratamos el tema de notificaciones, apoyándonos en el servicio cloud de Firebase.
Valoraciones
Erik Ramírez
Daniel
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.