En la Cumbre de desarrolladores de Chrome de 2014, se trataron muchos temas y APIs nuevas sobresalientes, pero no todo se trata de lo nuevo y lo más brillante.
Si eres un desarrollador web nuevo o incluso un desarrollador experimentado que está a punto de comenzar a explorar nuevas APIs, lo más probable es que sigas estos tres pasos: aprender, compilar y, luego, iterar.
Matt Gaunt aborda los esfuerzos continuos por abordar estos problemas por parte del equipo de la plataforma para desarrolladores de Chrome.
Aprendizaje
Fundamentos de la Web es un conjunto de documentación basada en casos de uso que abarca una variedad de temas. El objetivo principal es que los desarrolladores tengan poco o ningún conocimiento para implementar las prácticas recomendadas lo más rápido posible.
Uno de los objetivos principales de Fundamentos de la Web es garantizar que, si eres nuevo en un tema, la guía reduzca la “parálisis de elección” tanto como sea posible. Addy Osmani cubre este tema a la perfección en Pastry Box.
Si detectas algún problema con el sitio o su contenido, o quieres que Web Fundamentals aborde un tema en particular, envíanos comentarios en GitHub.
Desarrollo
Para ayudarte a iniciar un nuevo proyecto web, creamos Web Starter Kit. Tiene todo lo que necesitas:
- Un proceso de compilación sólido
- HTML estándar
- Guía de estilo
Proceso de compilación
Para quienes no tienen experiencia en la compilación de procesos, la forma más fácil de pensar en un proceso de compilación es verlo como un programa que toma un conjunto de archivos, realiza ciertas tareas y genera versiones nuevas en una ubicación diferente. Las tareas optimizan los archivos para mejorar los tiempos de carga, verificar si hay posibles errores o controlar las tareas que se pueden automatizar.
En Web Starter Kit tenemos los siguientes procesos:
Reducemos y concatenamos CSS y JavaScript para que el navegador pueda recuperar el archivo rápidamente. El JavaScript también se ejecuta a través de JSHint para verificar las prácticas recomendadas y los errores de codificación comunes de JavaScript. Las imágenes se reducen con imagemin, y puedes obtener reducciones enormes en el tamaño del archivo si usas esto. También tenemos un proceso para crear las guías de estilo CSS.
Plantilla para HTML para múltiples dispositivos
El primer conjunto de HTML que escribes para una página nueva es bastante estándar y es probable que tengas alguna forma de obtener rápidamente un archivo HTML de stock que funcione bien en varios dispositivos y tamaños de pantalla.
En Web Starter Kit, queríamos agregar compatibilidad con cualquier función que desdibujara las líneas entre la plataforma y tu sitio, por lo que agregamos la compatibilidad con la función Agregar a la pantalla principal y las pantallas de presentación para Android, Windows Phone, iOS y Opera Coast.
Guía de estilo
La última pieza de Web Starter Kit es su guía de estilo.
Esto le proporciona a los proyectos nuevos un gran conjunto de estilos y componentes predeterminados que fomentan el desarrollo basado en estilos. Puedes modificar los diseños existentes de los elementos y agregar los tuyos.
En la próxima versión de WSK, que se lanzará a principios del próximo año, estamos trabajando arduamente para simplificar la manera en que se combina la guía de estilo y cambiar al diseño de Material Design. Mattmostró unamaqueta de cómo podría ser esto en la Chrome Dev Summit. Puedes ver un ejemplo a continuación.
Iteración
Una vez que comiences a poner en práctica tus nuevos conocimientos, te recomendamos usar las Herramientas para desarrolladores para depurar, mejorar y mantener tu trabajo.
Hay muchas funciones nuevas que llegan a Herramientas para desarrolladores, y Matt analiza las siguientes funciones nuevas.
Modo de dispositivo
El Modo de dispositivo es una nueva sección de Herramientas para desarrolladores que te permite ver rápidamente cómo funciona tu sitio en diferentes dispositivos móviles, a la vez que visualizas las consultas de medios en tu CSS.
Una de las excelentes funciones de Device Mode es la capacidad de limitar las velocidades de la red, lo que te permite simular la experiencia de un usuario con una conexión GPRS, EDGE, 3G, DSL o Wi-Fi.
Generador de perfiles de pintura
Si alguna vez abriste la pestaña de línea de tiempo y presionaste el botón de registro, es probable que hayas visto que ocurren algunos eventos de pintura en la cascada. Normalmente, sería un cuadro negro sin forma de saber por qué lo había hecho el navegador o qué estaba haciendo.
El generador de perfiles de pintura no te brinda más información sobre qué hace exactamente el navegador durante ese proceso.
Seguimiento de invalidación
Las Herramientas para desarrolladores ahora explican por qué se produjo una pintura o un diseño siempre que sea posible. Esto es útil para cualquier persona que esté aprendiendo sobre el cronograma y los comportamientos del navegador. Además, te permite optimizar el código para evitar problemas de rendimiento.
Vista de gráfico tipo llama
Esta es una forma muy diferente de ver la información disponible en el cronograma. Esto hace que sea mucho más fácil ver cómo se superponen las tareas y qué comportamiento del navegador se produjo como resultado de otras tareas.
Visualizador de marcos
En la vista de gráfico tipo llama, puedes seleccionar un marco específico y, dentro de este, podrás explorar qué elementos de la página se promovieron a una capa compuesta y por qué.
Aprenda. Cloud Build. Escribe una configuración Iteración
Estos son algunos de los esfuerzos del equipo de Chrome para ayudar a los desarrolladores a ponerse al día con el desarrollo web. Por lo tanto, asegúrate de consultar Fundamentos de la Web, Web Starter Kit y las funciones nuevas de Herramientas para desarrolladores de Chrome.