Introducción
Ya sea que seas un principiante en programación o un desarrollador experimentado, en esta industria es fundamental aprender nuevos conceptos y lenguajes/frameworks para mantenerte al día con las tendencias.
Tomemos, por ejemplo, React, cuyo código fue liberado por Facebook hace solo cuatro años; 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 legítima de seguidores. Y luego están Svelte y otros frameworks universales, como Next.js o Nuxt.js. Gatsby, Gridsome, Quasar… y muchos más.
Si deseas destacarte como un desarrollador experimentado de JavaScript, debes tener al menos algo de experiencia trabajando con diferentes frameworks y bibliotecas, además de ejecutar trabajos con el buen viejo JS.
Para ayudarte a convertirte en un maestro del frontend en 2020, he recopilado nueve proyectos diferentes, cada uno dedicado a diferentes frameworks y bibliotecas de JavaScript como stack técnico, que puedes crear y añadir a tu portafolio. Recuerda, nada te ayuda más que crear cosas en la práctica, así que adelante, activa tu mente y hazlo posible.
Este artículo fue traducido con el apoyo de EDISON Software, que , así como .
Aplicación de búsqueda de películas con React (con hooks)
Lo primero que podrías hacer 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:
Qué aprenderás
Al crear esta aplicación, mejorarás tus habilidades en React utilizando el relativamente nuevo API de Hooks. El ejemplo del proyecto utiliza componentes de React, múltiples hooks, una API externa y, por supuesto, algunos estilos CSS.
Stack técnico y características
- React con hooks
- create-react-app
- JSX
- CSS
Sin usar ninguna clase, estos proyectos te ofrecen un punto de entrada perfecto al React funcional y definitivamente te ayudarán en 2020. Puedes encontrar . Sigue las instrucciones o hazlo a tu manera.
Aplicación de chat con Vue
Otro gran proyecto para ti es crear una aplicación de chat utilizando mi biblioteca de JavaScript favorita: VueJS. La aplicación se verá algo así:
Qué aprenderás
En esta guía aprenderás a crear una aplicación Vue desde cero: crear componentes, gestionar estados, configurar rutas, conectarte a servicios externos e incluso manejar autenticación.
Stack técnico y características
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Este es un gran proyecto para comenzar a trabajar con Vue o para mejorar tus habilidades existentes en desarrollo en 2020. Puedes encontrar .
Una hermosa aplicación para ver el clima con Angular 8
Este ejemplo te ayudará a crear una hermosa aplicación para ver el clima usando Angular 8:
Qué aprenderás
Este proyecto te enseñará habilidades valiosas al construir aplicaciones desde cero, desde el diseño hasta el desarrollo, hasta una aplicación lista para desplegar.
Stack técnico y características
- Angular 8
- Firebase
- Renderizado del lado del servidor
- CSS con Grid y Flexbox
- Amigable para móviles y responsividad
- Modo oscuro
- Interfaz atractiva
Lo que realmente me gusta de este proyecto integral es que no aprendes cosas de manera aislada. En cambio, aprendes todo el proceso de desarrollo, desde el diseño hasta el despliegue final.
Aplicación To-Do con Svelte
Svelte es como el nuevo chico en el enfoque de componentes, al menos similar a React, Vue y Angular. Y es una de las novedades más destacadas en 2020.
Las aplicaciones To-Do no son necesariamente el tema más candente, pero realmente te ayudarán a perfeccionar tus habilidades en Svelte. Se verá así:
Qué aprenderás
En este tutorial aprenderás a crear una aplicación usando Svelte 3, de principio a fin. Utilizarás componentes, estilización y controladores de eventos.
Stack técnico y características
- Svelte 3
- Componentes
- Estilización con CSS
- Sintaxis ES 6
No hay muchos buenos proyectos iniciales para Svelte, así que encontré .
Приложение для электронной коммерции с помощью Next.js
Next.js es el framework más popular para construir aplicaciones React que soportan renderizado del lado del servidor de manera nativa.
Este proyecto te mostrará cómo crear una aplicación de comercio electrónico que se vea así:
Qué aprenderás
En este proyecto aprenderás a desarrollar usando Next.js: crear nuevas páginas y componentes, extraer datos y estilizar y desplegar la aplicación Next.
Stack técnico y características
- Next.js
- Componentes y páginas
- Muestreo de datos
- Estilización
- Despliegue del proyecto
- SSR y SPA
Siempre es genial tener un ejemplo real, como una aplicación de comercio electrónico, para aprender algo nuevo. Puedes .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js para Vue es como Next.js para React: un excelente framework que combina el potencial del renderizado en el servidor con aplicaciones de una sola página.
La última aplicación que puedes crear se verá así:
Qué aprenderás
En este proyecto aprenderás a construir un sitio web completo usando Nuxt.js, desde la configuración inicial hasta el despliegue final.
Utiliza muchas características interesantes que Nuxt puede ofrecer, como páginas y componentes, así como estilos con SCSS.
Stack técnico y características
- Nuxt.js
- Componentes y páginas
- Módulo de Storyblock
- Mixins
- Vuex para el manejo de estado
- SCSS para estilos
- Middleware de Nuxt
, que incluye muchas características destacadas de Nuxt.js. Personalmente, me encanta trabajar con Nuxt, así que deberías probarlo, 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:
Qué aprenderás
En esta guía aprenderás a usar Gatsby para crear un blog que podrás utilizar para escribir tus propios artículos, usando React y GraphQL.
Stack técnico y características
- Gatsby
- React
- GraphQL
- Plugins y temas
- MDX/Markdown
- Bootstrap CSS
- Plantillas
Si alguna vez has querido tener un blog, de cómo hacerlo usando React y GraphQL.
No estoy diciendo que WordPress sea una mala opción, pero con Gatsby puedes crear sitios de alto rendimiento utilizando React, lo cual es una combinación asombrosa.
Blog con Gridsome
Gridsome para Vue… Bien, ya hemos hablado de esto con Next/Nuxt.
Pero lo mismo es cierto para Gridsome y Gatsby. Ambos utilizan GraphQL como capa de datos, pero Gridsome usa VueJS. También es un generador de sitios estáticos impresionante que te ayudará a crear grandes blogs:
Qué aprenderás
Este proyecto te enseñará a crear un blog simple para comenzar a trabajar con Gridsome, GraphQL y Markdown. También se explica cómo desplegar la aplicación a través de Netlify.
Stack técnico y características
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Este no es, por supuesto, el tutorial más completo, pero cubre los conceptos básicos de Gridsome y .
Reproductor de audio similar a SoundCloud, usando Quasar.
Quasar es otro marco de Vue que se puede utilizar para crear aplicaciones móviles. En este proyecto, crearás una aplicación de reproductor de audio, por ejemplo:
Qué aprenderás
Mientras que otros proyectos se centran principalmente en aplicaciones web, este te mostrará cómo crear una aplicación móvil utilizando Vue y el marco Quasar.
Ya deberías tener Cordova funcionando con Android Studio/Xcode configurado. Si no, hay un enlace en la guía al sitio web de Quasar donde muestran cómo configurarlo todo.
Stack técnico y características
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componentes de UI
, demostrando las capacidades de Quasar para crear aplicaciones móviles.
Fuente: habr.com
