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.
El artículo fue traducido con el apoyo de EDISON Software, que y .
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
- CSS
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 . 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
- CSS
Este es un gran proyecto para comenzar con Vue o mejorar sus habilidades existentes para comenzar el desarrollo en 2020. puedes encontrar .
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
- Firebase
- 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.
Pila tecnológica y características
- esbelta 3
- Компоненты
- Estilo con CSS
- Sintaxis ES6
No hay muchos buenos proyectos iniciales de Svelte, así que encontré .
Aplicación de comercio electrónico con Next.js
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 .
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
, 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
- React
- GraphQL
- Complementos y temas
- MDX/rebaja
- CSS de arranque
- Plantillas
Si alguna vez quisiste iniciar un blog, cómo hacerlo usando React y GraphQL.
No estoy diciendo eso WordPress es una mala elección, pero con Gatsby puedes crear sitios de alto rendimiento usando React, lo cual 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.
Pila tecnológica y características
- cuadriculado
- Vista
- GraphQL
- Reducción
- Netlify
Este ciertamente no es 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 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ías tener una instalación de Cordova funcionando con ella configurada. Android Studio/Xcode. Si no, la guía incluye un enlace al sitio web de Quasar donde muestran cómo configurarlo todo.
Pila tecnológica y características
- Quásar
- Vista
- Córdoba
- surfista de olas
- Componentes de la interfaz de usuario
, demostrando las capacidades de Quasar para crear aplicaciones móviles.
Fuente: habr.com
