Yderligere 9 projekter til at forfine dine Front-End færdigheder

Introduktion

Uanset om du er nybegynder inden for programmering eller en erfaren udvikler, er det essentielt at lære nye koncepter og sprog/frameworks for at følge med i tidens tendenser.

Tag for eksempel React — koden, som Facebook åbnede for kun fire år siden, er allerede blevet det foretrukne valg for JavaScript-udviklere over hele verden.

Vue og Angular har naturligvis også deres loyale følger. Og der er Svelte og andre universelle frameworks som Next.js eller Nuxt.js. Og Gatsby, Gridsome og Quasar… og meget mere.

Hvis du vil etablere dig som en erfaren JavaScript-udvikler, skal du have noget erfaring med forskellige frameworks og biblioteker — ud over at arbejde med den gode, gammeldags JS.

For at hjælpe dig med at blive en Front-End mester i 2020 har jeg samlet ni forskellige projekter, hver af dem dedikeret til forskellige JavaScript frameworks og biblioteker, som du kan oprette og tilføje til din portefølje. Husk, at intet hjælper dig mere end at skabe ting i praksis, så kom i gang, tænd dit sind og gør det muligt.

Artiklen er oversat med støtte fra EDISON Software, som skaber virtuelle prøverum til multibrand butikker, samt tester software.

Film søgeapp med React (med hooks)

Det første, du kunne begynde med, er at lave en film søgeapp med React. Nedenfor er et billede af, hvordan den endelige app vil se ud:

Hvad du vil lære
Ved at oprette denne app vil du forbedre dine React færdigheder ved at bruge det forholdsvis nye Hooks API. Projektet bruger React komponenter, mange hooks, en ekstern API og selvfølgelig lidt CSS-stil.

Teknisk stack og funktioner

• React med hooks
• create-react-app
• JSX
• CSS

Uden brug af klasser giver disse projekter dig en perfekt indgang til funktionel React og vil bestemt hjælpe dig i 2020. Du kan finde et eksempel på projektet her. Følg instruktionerne eller tilpas alt efter din egen smag.

Chatapp med Vue

Endnu et fantastisk projekt for dig — at lave en chatapp ved hjælp af mit yndlings JavaScript-bibliotek: VueJS. Appen vil se nogenlunde således ud:

Hvad du vil lære
Fra denne vejledning vil du lære, hvordan man laver en Vue-app fra bunden — opret komponenter, håndter tilstande, opret ruter, forbind til tredjepartstjenester og endda håndter autentificering.

Teknisk stack og funktioner

• Vue
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

Det er virkelig et godt projekt for at begynde at arbejde med Vue eller forbedre dine eksisterende færdigheder til at udvikle i 2020. Du kan finde vejledningen her.

Smuk vejrapp med Angular 8

Dette eksempel hjælper dig med at skabe en smuk vejrapp ved hjælp af Angular 8:

Hvad du vil lære
Dette projekt vil lære dig værdifulde færdigheder, når du opretter apps fra bunden — fra design til udvikling, helt til en klar til implementering app.

Teknisk stack og funktioner

• Angular 8
• Firebase
• Server-side rendering
• CSS med grid og Flexbox
• Mobilvenlig og responsiv
• Mørk tilstand
• Smukt interface

Hvad jeg virkelig godt kan lide ved dette omfattende projekt, er, at du ikke lærer ting isoleret. I stedet lærer du hele udviklingsprocessen — fra design til den endelige implementering.

To-Do app med Svelte

Svelte er som det nye barn i komponenttilgangen — i det mindste ligner det React, Vue og Angular. Og det er et af de hotteste nye værktøjer i 2020.

To-Do apps er ikke nødvendigvis det hotteste emne, men det vil virkelig hjælpe dig med at forfine dine Svelte-færdigheder. Det vil se således ud:

Hvad du vil lære
Fra denne vejledning vil du lære, hvordan man laver en app med Svelte 3, fra start til slut. Du vil bruge komponenter, styling og hændelseshåndterere.

Teknisk stack og funktioner

• Svelte 3
• Komponenter
• Styling med CSS
• ES 6 syntaks

Der er ikke mange gode startprojekter til Svelte, så jeg fandt denne gode mulighed for at komme i gang.

Приложение для электронной коммерции с помощью Next.js

Next.js er det mest populære framework til at bygge React-apps, som understøtter server-side rendering ud af boksen.

Dette projekt vil vise dig, hvordan man laver en e-handelsapp, der ser således ud:

Hvad du vil lære
I dette projekt vil du lære, hvordan man udvikler med Next.js – opretter nye sider og komponenter, henter data samt styler og implementerer en Next-app.

Teknisk stack og funktioner

• Next.js
• Komponenter og sider
• Data udvælgelse
• Styling
• Implementering af projektet
• SSR og SPA

Det er altid godt at have et reelt eksempel, som en e-handelsapp, for at lære noget nyt. Du kan finde tutorialen her.

Полноценный мультиязычный блог с Nuxt.js

Nuxt.js for Vue er ligesom Next.js for React: et fantastisk framework til at kombinere server-side rendering og single-page applications.
Den sidste app, du kan oprette, vil se sådan ud:

Hvad du vil lære

I dette projekt lærer du, hvordan du opretter en fuldgyldig hjemmeside ved hjælp af Nuxt.js – fra den indledende opsætning til den endelige implementering.

Den bruger mange interessante funktioner, som Nuxt kan tilbyde, såsom sider og komponenter samt styling med SCSS.

Teknisk stack og funktioner

• Nuxt.js
• Komponenter og sider
• Storyblok-modul
• Mixins
• Vuex til tilstandshåndtering
• SCSS til styling
• Nuxt middleware

Dette er virkelig et cool projekt, som inkluderer mange fremragende funktioner i Nuxt.js. Jeg elsker personligt at arbejde med Nuxt, så du bør prøve det, da det også vil gøre dig til en fantastisk Vue-udvikler.

Blog med Gatsby

Gatsby er en fantastisk statisk site-generator, der bruger React og GraphQL. Her er resultatet af projektet:

Hvad du vil lære

I denne vejledning vil du lære, hvordan du bruger Gatsby til at oprette en blog, som du kan bruge til at skrive dine egne artikler ved hjælp af React og GraphQL.

Teknisk stack og funktioner

• Gatsby
• React
• GraphQL
• Plugins og temaer
• MDX/Markdown
• Bootstrap CSS
• Skabeloner

Hvis du nogensinde har ønsket at starte en blog, er dette et glimrende eksempel på, hvordan man gør det ved hjælp af React og GraphQL.

Jeg siger ikke, at WordPress er et dårligt valg, men med Gatsby kan du bygge højtydende sites ved hjælp af React – hvilket er en fantastisk kombination.

Blog med Gridsome

Gridsome for Vue... Nå, vi har allerede haft det med Next/Nuxt.
Men det samme gælder for Gridsome og Gatsby. Begge bruger GraphQL som datalag, men Gridsome bruger VueJS. Det er også en fantastisk statisk site-generator, der hjælper dig med at oprette fremragende blogs:

Hvad du vil lære

Dette projekt vil lære dig, hvordan du opretter en simpel blog for at komme i gang med Gridsome, GraphQL og Markdown. Det beskriver også, hvordan man implementerer appen via Netlify.

Teknisk stack og funktioner

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Dette er naturligvis ikke den mest omfattende tutorial, men den dækker de grundlæggende begreber i Gridsome og Markdown, og det kan være et godt udgangspunkt..

En lydafspiller, der ligner SoundCloud, ved hjælp af Quasar.

Quasar er endnu et Vue-framework, der kan bruges til at oprette mobile applikationer. I dette projekt vil du skabe en lydafspiller-app, f.eks.:

Hvad du vil lære

Mens andre projekter primært fokuserer på webapplikationer, vil dette vise dig, hvordan du opretter en mobilapplikation ved hjælp af Vue og Quasar-frameworket.
Du skal allerede have en fungerende Cordova med konfigureret Android Studio/Xcode. Hvis ikke, så er der et link i vejledningen til Quasar's hjemmeside, hvor de viser, hvordan man sætter alt op.

Teknisk stack og funktioner

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Komponenter

Et lille projekt, der demonstrerer mulighederne med Quasar til oprettelse af mobile applikationer.

Kilde: habr.com