Sobre la certificación Mobile Web Specialist de Google

Algunas y algunos de vosotros, me habéis preguntado estos días sobre cuál la mejor forma para prepararse el examen de ‘Mobile Web Specialist’ que ofrece Google dentro de su catálogo de certificaciones especializadas. Como hacer un hilo de Twitter iba a ser algo aburrido, he decidido escribir un post que pueda ser útil a cualquiera que busque por Internet.

Antes de empezar a explicar cómo, cuándo y por qué decidí realizar esta certificación, quería hacer un inciso para exponer una idea que quizá te ayude seguir leyendo el post sin agobios; No creo que sacarse una certificación (ya sea esta o cualquiera) sea una demostración bastante importante sobre el conocimiento que tiene una persona en una materia determinada.

Sacarse una certificación puede suponer un reto personal, puede ayudarnos a cumplir con una condición secundaria en la empresa a la que queremos optar o puede ser una buena forma de estudiar por periodos de tiempos acotados (luego hablaré más sobre esto), pero nunca deberíamos planteárnoslo estudiar una certificación como una forma de llegar a ser un mejor profesional o no debería suponernos una presión auto-impuesta para llegar a ser alguien “importante” en el sector.

Es un pequeño plus que suma, pero que no supone un salto cualitativo. Así que si decides leer un poco sobre de qué va todo esto – ya sea por saber del salseo – o porque realmente estás interesado o interesada en conseguir la certificación, adelante, disfrutemos un rato de ello 🙂

Read More

Anuncios

VueJS: Testeando nuestros stores

broken-clay-close-up-838981.jpg

Hemos visto cómo configurar nuestro proyecto para que pueda ser testeado, hemos creado nuestro primeros test sobre componentes de VueJS y hemos jugado con diferentes tipos de componentes y complejidades, desde componentes que tenían dependencias hasta componentes que solo eran visuales.

Nos queda para terminar esta sería, ver cómo somos capaces de testear nuestros stores. Si recordamos, los stores son aquellas piezas de código que configuraban vuex  y que nos permitían gestionar el estado global de nuestra aplicación en pequeños estancos bien modularizados y abstraídos.

Tenemos que ver las aproximaciones que podemos llevar a cabo y cómo probar cada uno de los elementos. Vayamos al lío:

Read More

VueJS: Configurando Webpack para SSR

34293013000_52d6908d85_o.jpg

Foto de portada de Chris Garcia

Una vez que tenemos claros los conceptos básicos, es hora de trabajar para que nuestro proyecto se adapte a las necesidades del SSR. Empezaremos la adaptación configurando la build.

La forma en la que vamos a empaquetar nuestra aplicación variará debido a las necesidades de ejecutar código de vue en servidor y en cliente de forma indistinta. Necesitamos que el código de nuestra aplicación sea universal y para ello vamos a apoyarnos en Webpack para conseguir este tipo de empaquetados.

Más tarde veremos cómo adaptar el resto del proyecto, pero por ahora centrémonos en este punto: Configurar Webpack a esta nueva situación:

Read More

VueJS: Introducción a Server-Side Rendering

Tenemos todas las herramientas necesarias para desarrollar aplicaciones con VueJS. Hemos aprendido a crear componentes, a renderizarlos e interaccionar con ellos. Hemos aprendido a escalar nuestras aplicaciones mediante vue-router y vuex e incluso hemos aprendido a crear una build con Webpack para empaquetar nuestras aplicaciones.

Puede que todo esto sea suficiente para la mayoría de proyectos y puede que haya un número concreto de proyectos, en los que los tiempos de respuesta sean críticos para conseguir una masa suficiente de clientes, y que necesitemos nuevas herramientas para conseguir este plus de carga y eficiencia.

VueJS no abandona a estos desarrolladores y ha creado una librería que se basa en lo que llamamos “Renderizado en la parte servidor”. A lo largo de los próximos capítulos estudiaremos este nuevo concepto que se está poniendo tan de moda en frameworks como Vue o React, aunque nos sean harto conocidos para los que hemos trabajado en proyectos con ASPX o JSP.

Veamos:

Read More

Webpack: Caching, Shimming & Splitting

Con lo trabajado hasta ahora podríamos tirar sin problemas. Sin embargo, Webpack presentan un potencial mayor al de solo crear empaquetados. Webpack es una herramienta que se preocupa mucho por la optimización de nuestros estáticos.

Está bastante sensibilizado con aquellos proyectos que necesitan reducir hasta el más mínimo byte para hacer que la aplicación cargue en nuestro navegador lo más rápido posible. No olvidemos que los desarrolladores Web hemos creado un sistema sobre un protocolo (HTTP) que no estaba pensado para este envío masivo de información.

Por tanto, es bueno saber que con una sola herramienta vamos a poder hacer estas pequeñas mejoras que nos distanciarán con el resto de webs en cuanto a tamaño de ficheros y tiempo de carga.

Hoy, para terminar la serie de Webpack, hablaremos de 3 conceptos avanzados muy orientados a mejorar estos aspectos de optimización: el Caching, el Shimming y el Splitting.

Veamos:

Read More

Webpack: Configurando nuestra primera build

Los conceptos básicos están bien. Ayudan a asentar el conocimiento que necesitamos para desarrollar cosas más complicadas. Pero sin un caso real donde aplicar esos conocimientos, es difícil aprender de forma consistente.

Como no es lo mismo contarlo que vivirlo, hoy vamos a crear una build que podría pasar por la de un proyecto real  de tamaño pequeño-medio. A lo largo de los diferentes pasos a seguir para configurar nuestra build, iremos descubriendo nuevos conocimientos sobre Webpack que nos salvarán de más de un apuro.

El proceso que vamos a seguir es uno de los miles que podríamos hacer. Que yo lo haga así, no significa que sea prioritario que se haga así. De hecho, no significa que lo esté haciendo del todo bien. El post es una forma práctica de seguir aprendiendo conceptos, pero el flujo puede varias según vuestras necesidades.

Empecemos:

Read More

Webpack: Conceptos básicos

27230523630_37fcfdf7c4_o.jpg

Foto de portada de Fritzchens Fritz

Nos detenemos por un momento en el camino de vue y nos ponemos manos a la obra en entender Webpack. Aunque lo parezca, no nos hemos desviado de nuestra trayectoria.

Como pudimos ver en el capítulo donde estudiamos vue-cli, vimos que la plantilla nos generó una serie de ficheros donde ya se encontraba la construcción de nuestra aplicación de una forma mágica, sin que nosotros tuviésemos que desarrollar o crear nada, simplemente ejecutando un comando.

Estos ficheros se encontraban creados con Webpack y hacían todo lo necesario para no tener que mancharnos las manos nosotros. Cómo no vamos a basar el destino de un proyecto en la magia y los fuegos artificiales, es hora de que nos atemos los machos y entendamos qué estaba haciendo vue-cli por nosotros.

Puede ser que algún día necesitemos incluir algo en la configuración que no viene por defecto y que estos conocimientos nos sean muy útiles. Así que vamos al lío:

Read More