PWA: Conceptos básicos sobre Service Workers

pexels-photo-213399.jpeg

Foto de portada de FOX

Continuamos con PWA. Creo que ya tenemos una idea de lo que nos enfrentamos en esta serie, por tanto, centrémonos en apartados más técnicos para poder cumplir con los objetivos que Google nos aconseja tener.

Durante algunas semanas nos centraremos en una de las API que quieren revolucionar la forma en la que entendemos el front y en cómo gestionamos y administramos los recursos de nuestro navegador: Los Workers.

En nuestro caso los Workers que más nos interesan son los Service Workers. En el posts de hoy, aprenderemos a diferenciar los tipos de Workers que existen, en qué nos puede ayudar cada uno y cómo les podemos sacar provecho para crear aplicaciones Web que le den guerra a las aplicaciones nativas.

Read More

Anuncios

PWA: Los patrones App Shell y PRPL

pexels-photo-629168.jpeg

Foto de Eberhard

Hola de nuevo. Terminamos con este post la introducción a PWA. Por ahora, lo único que PWA nos está aportando es un lenguaje nuevo y una manera de clasificar todo aquello que un buen equipo front debería tener en cuenta en sus desarrollos.

Una cosa que me gusta de PWA y de lo que está haciendo Google es que está creando un repositorio de funcionalidades transversales que muchas veces, desde negocio, no se dan como importantes por no centrarse en el dominio, pero que pueden afectar mucho a que un producto sea un éxito y que atraiga a más usuarios.

En el post de hoy nos centraremos en solucionar otro punto del checklist. En esta ocasión solucionaremos este:

La primera carga de nuestra aplicación es rápida hasta con 3G

Para solucionarlo, necesitamos explicar qué son el modelo App Shell y el patrón PRPL. Dos términos nuevos que explican algo que, quizá, no nos sea es tan nuevo 🙂

Veamos:

Read More

PWA: El manifiesto de nuestra aplicación

pexels-photo-618915.jpeg

En el post anterior explicamos qué es lo que define a una PWA según Google, nos quitamos un poco de fatiga al ver que el concepto no viene a revolucionar el desarrollo Web y enumeramos una serie de funcionalidades que sí o sí una aplicación tiene que incluir para ser considerada PWA.

Sin embargo, nos quedamos mucho en la teoría y lo abstracto, y no explicamos por dónde tenemos que empezar para que nuestra aplicación empiece a cumplir con el ckecklist de Google.

En el post de hoy, vamos a centrarnos en resolver uno de los requisitos que se nos pedía:

Nuestra aplicación se debe poder incluir en el menú de inicio del dispositivo

¿Cómo podemos hacer esto? Bastante más fácil de lo que a simple vista parece. Veamos:

Read More

PWA: Una nueva forma de ofrecer experiencias de usuario en la Web

Hola de nuevo. Tengo esto un poco abandonado, pero estoy de vuelta :). Empieza una nueva serie en El Abismo. Dejamos por unos meses VueJS para adentrarnos en lo que se conoce como Progressive Web Apps.

Como siempre, mejor que no nos pongamos un número determinado de posts a esta serie y nos centremos en dedicar el tiempo necesario a cada concepto que encontremos en esta nueva filosofía de desarrollar aplicaciones Web.

Desde el principio de esta serie, podrás encontrar el posts en su manual de Gitbook correspondiente: ‘Desarrolla Progressive Web Apps‘, por si te es más cómodo leer la serie de esta forma.

Sin más preámbulo, empecemos.

Read More

Historia de una charla

37088229296_dfa5fbd7e7_o.jpg

Fotografía de Jon Ander

Ayer tuvo lugar la 4ª Jornada de Codenares, la comunidad en la que participo. Tuve la suerte de que la comunidad me permitiese hablar durante 40 minutos sobre cómo empezar con VueJS.

Como Cristina Fernández siempre me esta animando para que escriba sobre el proceso que sigo sobre diferentes tareas que llevo a cabo (ya sea sobre cómo escribí el manual de VueJS, o cómo llevo el blog) he decidido hablar un poco sobre cómo fue el proceso de preparación de esta charla.

En la anterior jornada Rubén Fernández (juro que no son hermanos XD) hizo una retrospectiva parecida y el resultado fue bastante inspirador, así que sin entretenerme más, os cuento un poco cómo es la forma en la que me gusta hacer presentaciones.

Read More

VueJS: El sistema reactivo

32161531614_de543d116e_o.jpg

Ultimo post sobre Vue. Tenía pensado escribir sobre TypeScript con Vue y de Testing con Vue pero creo que es mejor que dediquéis el tiempo al gran trabajo que está haciendo Alex Jover justamente en estos dos apartados 🙂

Dedicamos el último post a entender el sistema interno reactivo de Vue y a cómo funciona su auténtica magia. Como un cambio de un dato por parte del usuario, puede suponer un cambio en la interfaz sin que yo como desarrollador tenga que indicar esta acción directamente.

Read More

VueJS: Diferentes formas de reutilizar código

28005407566_d887d45bea_o.jpg

Foto de Zh. B

Una de las promesas que nos hacen cuando nos venden los frameworks orientados a componentes es que el nivel de reutilización de código es muy alto. No vamos a negar que las arquitecturas en componentes son un gran aliciente para tener código más utilizable, pero lo que muchas veces nos pasa es que no sacamos todo el partido que un framework nos proporciona y nos quedamos en esa visión de componente visual.

Es decir, está muy bien que podamos encapsular nuestro HTML, CSS y JS en piezas aisladas que pueda usar en diferentes contextos, pero aun existe un mayor número de funcionalidad que tiene que ver más con la lógica de nuestra aplicación, que también puede ser reutilizable y refactorizada en componentes más genéricos.

El post de hoy trata de exponer todas las posibilidades que nos ofrece Vue a la hora de hacer un código menos repetitivo y más genérico. No solo nos centraremos en la visión de componentes, sino que también hablaremos de cómo crear funcionalidad mucho más transversal o de poder extraer lógica que pueda ser útil para más de un componente.

Read More