9 proyectos más para mejorar tus habilidades de front-end
introducción
Ya sea que sea nuevo en la programación o que ya sea un desarrollador experimentado, en esta industria, aprender nuevos conceptos y lenguajes/marcos es imprescindible para mantenerse al día con las tendencias.
Tomemos, por ejemplo, React, que solo fue de código abierto por Facebook hace cuatro años y ya se ha convertido en la opción número uno para los desarrolladores de JavaScript en todo el mundo.
Vue y Angular, por supuesto, también tienen su base de fans legítima. Y luego están Svelte y otros marcos de trabajo de propósito general como Next.js o Nuxt.js. Y Gatsby, Gridsome, Quasar... y mucho más.
Si desea demostrar que es un desarrollador de JavaScript experimentado, debe tener al menos algo de experiencia con varios marcos y bibliotecas, además de hacer un buen trabajo antiguo de JS.
Para ayudarlo a convertirse en un maestro de front-end en 2020, he reunido nueve proyectos diferentes, cada uno de los cuales se enfoca en diferentes marcos y bibliotecas de JavaScript como una pila tecnológica que puede construir y agregar a su cartera. Recuerda que nada te ayuda más que poner las cosas en práctica, así que adelante, enciende tu mente y hazlo posible.
Aplicación de búsqueda de películas con React (con ganchos)
Lo primero con lo que podría comenzar es crear una aplicación de búsqueda de películas con React. A continuación se muestra una imagen de cómo se verá la aplicación final:
Que aprenderás
Al crear esta aplicación, mejorará sus habilidades de React utilizando la relativamente nueva API de Hooks. El proyecto de muestra usa componentes React, muchos ganchos, una API externa y, por supuesto, algunos estilos CSS.
Pila tecnológica y características
Reaccionar con ganchos
crear-reaccionar-aplicación
Jsx
CO
Sin usar ninguna clase, estos proyectos le brindan el punto de entrada perfecto para React funcional y definitivamente lo ayudarán en 2020. puedes encontrar proyecto de muestra aquí. Siga las instrucciones o hágalo usted mismo.
Aplicación de chat con Vue
Otro gran proyecto para usted es crear una aplicación de chat usando mi biblioteca de JavaScript favorita: VueJS. La aplicación se verá algo como esto:
Que aprenderás
En este tutorial, aprenderá a crear una aplicación Vue desde cero: cree componentes, maneje estados, cree rutas, conéctese a servicios de terceros e incluso maneje la autenticación.
Pila tecnológica y características
Vista
Vuex
Enrutador Vue
Vista CLI
Pusher
CO
Este es un gran proyecto para comenzar con Vue o mejorar sus habilidades existentes para comenzar el desarrollo en 2020. puedes encontrar tutoría aquí.
Hermosa aplicación meteorológica con Angular 8
Este ejemplo lo ayudará a crear una hermosa aplicación meteorológica con Angular 8:
Que aprenderás
Este proyecto le enseñará habilidades valiosas en la creación de aplicaciones desde cero, desde el diseño hasta el desarrollo, hasta llegar a una aplicación lista para implementar.
Pila tecnológica y características
Angular 8
Base de fuego
Representación del lado del servidor
CSS con Grid y Flexbox
Compatible con dispositivos móviles y adaptabilidad
Modo oscuro
Hermosa interfaz
Lo que realmente me gusta de este proyecto integral es que no estudias las cosas de forma aislada. En su lugar, aprende todo el proceso de desarrollo, desde el diseño hasta la implementación final.
Aplicación de tareas pendientes con Svelte
Svelte es como el chico nuevo en el enfoque de componentes, al menos similar a React, Vue y Angular. Y este es uno de los mejores productos nuevos para 2020.
Las aplicaciones de tareas pendientes no son necesariamente el tema más candente, pero realmente te ayudarán a perfeccionar tus habilidades Svelte. Se verá así:
Que aprenderás
Este tutorial le mostrará cómo crear una aplicación utilizando Svelte 3, de principio a fin. Utilizará componentes, estilos y controladores de eventos.
Next.js es el marco más popular para crear aplicaciones React que admitan la representación del lado del servidor de manera inmediata.
Este proyecto le mostrará cómo crear una aplicación de comercio electrónico que se vea así:
Que aprenderás
En este proyecto, aprenderá cómo desarrollar con Next.js: crear nuevas páginas y componentes, recuperar datos y diseñar e implementar una aplicación Next.
Pila tecnológica y características
Next.js
Componentes y páginas
Muestreo de datos
Estilo
Implementación del proyecto
RSS y SPA
Siempre es bueno tener un ejemplo de la vida real como una aplicación de comercio electrónico para aprender algo nuevo. Puede encontrar tutorial aquí.
Blog multilingüe completo con Nuxt.js
Nuxt.js es para Vue, como Next.js es para React: un excelente marco para combinar la representación del lado del servidor y las aplicaciones de una sola página
La última aplicación que puede crear se verá así:
Que aprenderás
En este proyecto de muestra, aprenderá a crear un sitio web completo con Nuxt.js, desde la configuración inicial hasta la implementación final.
Aprovecha muchas de las características geniales que Nuxt tiene para ofrecer, como páginas y componentes, y estilo con SCSS.
Pila tecnológica y características
Nuxt.js
Componentes y páginas
módulo de bloque de historia
mezclas
Vuex para la gestión estatal
SCSS para peinar
Middleware de Nuxt
Este es un proyecto realmente genial., que incluye muchas de las excelentes características de Nuxt.js. Personalmente, me encanta trabajar con Nuxt, así que deberías intentarlo, ya que también te convertirá en un gran desarrollador de Vue.
Blog con Gatsby
Gatsby es un excelente generador de sitios estáticos que utiliza React y GraphQL. Este es el resultado del proyecto:
Que aprenderás
En este tutorial, aprenderá a usar Gatsby para crear un blog que usará para escribir sus propios artículos usando React y GraphQL.
Pila tecnológica y características
Gatsby
Reaccionar
GraphQL
Complementos y temas
MDX/rebaja
CSS de arranque
Plantillas
Si alguna vez quisiste iniciar un blog, Este es un gran ejemplo cómo hacerlo usando React y GraphQL.
No digo que WordPress sea una mala elección, pero con Gatsby puedes crear sitios web de alto rendimiento usando React, que es una combinación increíble.
Blog con Gridsome
Gridsome para Vue... Vale, ya lo teníamos con Next/Nuxt.
Pero lo mismo es cierto para Gridsome y Gatsby. Ambos usan GraphQL como su capa de datos, pero Gridsome usa VueJS. También es un increíble generador de sitios estáticos para ayudarte a crear excelentes blogs:
Que aprenderás
Este proyecto le enseñará cómo crear un blog simple para comenzar con Gridsome, GraphQL y Markdown. También explica cómo implementar una aplicación a través de Netlify.
Reproductor de audio similar a SoundCloud usando Quasar
Quasar es otro marco de Vue que se puede usar para crear aplicaciones móviles. En este proyecto, creará una aplicación de reproductor de audio como:
Que aprenderás
Mientras que otros proyectos se centran principalmente en aplicaciones web, este le mostrará cómo crear una aplicación móvil utilizando Vue y el marco Quasar.
Ya debería tener un Cordova en funcionamiento con Android Studio/Xcode configurado. Si no, el manual tiene un enlace al sitio web de Quasar donde le muestran cómo configurar todo.
Pila tecnológica y características
Quásar
Vista
Córdoba
surfista de olas
Componentes de la interfaz de usuario
pequeño proyecto, demostrando las capacidades de Quasar para crear aplicaciones móviles.