Introduction
Que vous soyez novice en programmation ou développeur expérimenté, il est essentiel d'apprendre de nouveaux concepts ainsi que des langages/frameworks dans ce domaine pour rester à la pointe des tendances.
Prenons par exemple React - dont le code a été ouvert par Facebook il y a seulement quatre ans, qui est déjà devenu le choix numéro un pour les développeurs JavaScript à travers le monde.
Vue et Angular ont également leurs fidèles поклонников. Il existe aussi Svelte et d'autres frameworks polyvalents comme Next.js ou Nuxt.js. Et Gatsby, Gridsome, Quasar… et bien d'autres.
Si vous souhaitez vous affirmer en tant que développeur JavaScript expérimenté, vous devez avoir au moins une certaine expérience avec divers frameworks et bibliothèques - en plus de faire du bon vieux JS.
Pour vous aider à devenir un maître du front-end en 2020, j'ai rassemblé neuf projets différents, chacun dédié à divers frameworks et bibliothèques JavaScript comme stack technique, que vous pouvez créer et ajouter à votre portfolio. N'oubliez pas que rien ne vous aide plus que de créer des choses en pratique, alors allez-y, activez votre esprit et rendez cela possible.
Cet article a été traduit avec le soutien de la société EDISON Software, qui , ainsi que .
Application de recherche de films avec React (avec hooks)
La première chose que vous pourriez faire est de créer une application de recherche de films avec React. Voici une image de à quoi ressemblera l'application finale :
Ce que vous apprendrez
En créant cette application, vous améliorerez vos compétences en React en utilisant le nouvel API Hooks. Ce projet utilise des composants React, plusieurs hooks, une API externe et, bien sûr, quelques styles CSS.
Stack technique et fonctionnalités
- React avec hooks
- create-react-app
- JSX
- CSS
Sans utiliser de classes, ces projets vous offrent une excellente porte d'entrée dans React fonctionnel et vous aideront certainement en 2020. Vous pouvez trouver . Suivez les instructions ou faites-le à votre sauce.
Application de chat avec Vue
Un autre excellent projet à réaliser est de créer une application de chat en utilisant ma bibliothèque JavaScript préférée : VueJS. L'application ressemblait à peu près à ceci :
Ce que vous apprendrez
Dans ce guide, vous apprendrez à créer une application Vue depuis zéro — à créer des composants, à gérer les états, à créer des itinéraires, à vous connecter à des services externes et même à gérer l'authentification.
Stack technique et fonctionnalités
- projet Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
C'est vraiment un excellent projet pour commencer à travailler avec Vue ou améliorer vos compétences existantes pour vous impliquer dans le développement en 2020. Vous pouvez trouver .
Une belle application de prévisions météorologiques avec Angular 8
Cet exemple vous aidera à créer une belle application de prévisions météorologiques avec Angular 8 :
Ce que vous apprendrez
Ce projet vous apprendra des compétences précieuses pour créer des applications depuis le design jusqu'au développement, jusqu'à une application prête à être déployée.
Stack technique et fonctionnalités
- Angular 8
- Firebase
- Rendu côté serveur
- CSS avec Grid et Flexbox
- Adapté aux mobiles et réactif
- Mode sombre
- Une interface élégante
Ce que j'apprécie vraiment dans ce projet complet, c'est que vous n'étudiez pas les choses de manière isolée. Au lieu de cela, vous apprenez tout le processus de développement — de la conception au déploiement final.
Application To-Do avec Svelte
Svelte est comme le nouveau venu dans l'approche basée sur les composants — du moins comparable à React, Vue et Angular. Et c'est l'une des tendances les plus chaudes pour 2020.
Les applications To-Do ne sont peut-être pas le sujet le plus chaud, mais cela vous aidera vraiment à affiner vos compétences en Svelte. Cela ressemblera à ceci :
Ce que vous apprendrez
Ce tutoriel vous montrera comment créer une application avec Svelte 3, du début à la fin. Vous utiliserez des composants, du stylisme et des gestionnaires d'événements.
Stack technique et fonctionnalités
- Svelte 3
- Composants
- Stylisation avec CSS
- Syntaxe ES 6
Il n'y a pas tant de bons projets de démarrage pour Svelte, c'est pourquoi j'ai trouvé .
Приложение для электронной коммерции с помощью Next.js
Next.js est le framework le plus populaire pour créer des applications React qui prennent en charge le rendu côté serveur par défaut.
Ce projet vous montrera comment créer une application de commerce électronique qui ressemble à ceci :
Ce que vous apprendrez
Dans ce projet, vous découvrirez comment développer avec Next.js — créer de nouvelles pages et composants, extraire des données, et styliser et déployer l'application Next.
Stack technique et fonctionnalités
- Next.js
- Composants et pages
- Échantillonnage des données
- Stylisation
- Déploiement du projet
- SSR et SPA
Il est toujours bon d'avoir un exemple concret, comme une application de commerce électronique, pour apprendre quelque chose de nouveau. Vous pouvez .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js pour Vue, c'est comme Next.js pour React : un excellent framework pour combiner les capacités de rendu côté serveur et les applications à page unique.
La dernière application que vous pouvez créer ressemblera à ceci :
Ce que vous apprendrez
Dans ce projet, vous apprendrez à créer un site web complet en utilisant Nuxt.js — de la configuration initiale au déploiement final.
Il utilise de nombreuses fonctionnalités intéressantes que Nuxt peut offrir, telles que les pages et les composants, ainsi que le stylage avec SCSS.
Stack technique et fonctionnalités
- Nuxt.js
- Composants et pages
- Module Storyblock
- Mixins
- Vuex pour la gestion d'état
- SCSS pour le stylage
- Middleware Nuxt
, qui inclut de nombreuses fonctionnalités incroyables de Nuxt.js. J'adore personnellement travailler avec Nuxt, donc vous devriez l'essayer car cela vous fera également un excellent développeur Vue.
Blog avec Gatsby
Gatsby est un excellent générateur de sites statiques utilisant React et GraphQL. Voici le résultat du projet :
Ce que vous apprendrez
Dans ce guide, vous apprendrez à utiliser Gatsby pour créer un blog que vous pourrez utiliser pour écrire vos propres articles, en utilisant React et GraphQL.
Stack technique et fonctionnalités
- Gatsby
- React
- GraphQL
- Plugins et thèmes
- MDX/Markdown
- Bootstrap CSS
- Modèles
Si vous avez déjà voulu créer un blog, de comment le faire, en utilisant React et GraphQL.
Je ne dis pas que WordPress est un mauvais choix, mais avec Gatsby, vous pouvez créer des sites performants en utilisant React — ce qui est une combinaison incroyable.
Blog avec Gridsome
Gridsome pour Vue… Bon, nous avons déjà eu ça avec Next/Nuxt.
Mais il en va de même pour Gridsome et Gatsby. Les deux utilisent GraphQL comme couche de données, mais Gridsome utilise VueJS. C'est aussi un incroyable générateur de sites statiques qui vous aidera à créer d'excellents blogs :
Ce que vous apprendrez
Ce projet vous apprendra à créer un blog simple pour commencer avec Gridsome, GraphQL, et Markdown. Il explique également comment déployer l'application via Netlify.
Stack technique et fonctionnalités
- Gridsome
- projet Vue
- GraphQL
- Markdown
- Netlify
Ce n'est bien sûr pas le tutoriel le plus complet, mais il couvre les concepts fondamentaux de Gridsome et .
Lecteur audio similaire à SoundCloud, avec Quasar.
Quasar est un autre framework Vue qui peut être utilisé pour créer des applications mobiles. Dans ce projet, vous allez créer une application de lecteur audio, par exemple :
Ce que vous apprendrez
Alors que d'autres projets se concentrent principalement sur les applications web, celui-ci vous montrera comment créer une application mobile en utilisant Vue et le framework Quasar.
Vous devez déjà avoir Cordova fonctionnel avec Android Studio/Xcode configuré. Si ce n'est pas le cas, le guide contient un lien vers le site Web de Quasar, où ils montrent comment tout configurer.
Stack technique et fonctionnalités
- Quasar
- projet Vue
- Cordova
- WaveSurfer
- Composants UI
, démontrant les capacités de Quasar pour créer des applications mobiles.
Source : habr.com
