9 projekt till för att finslipa dina front-end-kunskaper

Inledning

Oavsett om du är ny på programmering eller en erfaren utvecklare, är att lära dig nya koncept och språk/ramverk ett måste i den här branschen för att hänga med i trenderna.

Ta till exempel React, som Facebook öppnade för bara fyra år sedan och som redan har blivit det första valet för JavaScript-utvecklare runt om i världen.

Vue och Angular har naturligtvis också sin egen legitima fanbas. Och så finns det Svelte och andra universella ramverk som Next.js eller Nuxt.js. Och Gatsby, och Gridsome, och Quasar... och mycket mer.

Om du vill bevisa dig själv som en erfaren JavaScript-utvecklare bör du ha åtminstone viss erfarenhet av olika ramverk och bibliotek – förutom att arbeta med gamla goda JS.

För att hjälpa dig att bli en frontend-mästare 2020 har jag satt ihop nio olika projekt, vart och ett med fokus på ett annat JavaScript-ramverk och bibliotek som en teknisk stack du kan bygga och lägga till i din portfölj. Kom ihåg att ingenting hjälper dig mer än att faktiskt skapa saker, så gå vidare, använd ditt sinne och få det att hända

Artikeln översattes med stöd av EDISON Software, som gör virtuella provrum för flermärkesbutikerOch testar mjukvara.

Filmsökningsapp med React (med krokar)

Det första du kan börja med är att skapa en filmsökningsapp med hjälp av React. Nedan är en bild på hur den slutliga ansökan kommer att se ut:

Vad lär du dig
Genom att bygga den här appen kommer du att förbättra dina React-färdigheter genom att använda det relativt nya Hooks API. Exempelprojektet använder React-komponenter, massor av krokar, ett externt API och naturligtvis lite CSS-styling.

Teknisk stack och funktioner

• Reagera med krokar
• skapa reagera-app
• JSX
• CSS

Utan att använda några klasser ger dessa projekt dig den perfekta ingången till funktionella React och kommer definitivt att hjälpa dig under 2020. du kan hitta exempel på projekt här. Följ instruktionerna eller gör den till din egen.

Chattapp med Vue

Ett annat bra projekt för dig att göra är att skapa en chattapp med mitt favorit JavaScript-bibliotek: VueJS. Applikationen kommer att se ut ungefär så här:

Vad lär du dig
I den här handledningen kommer du att lära dig hur du gör en Vue-app från början - skapa komponenter, hantera tillstånd, skapa rutter, ansluta till tredjepartstjänster och till och med hantera autentisering.

Teknisk stack och funktioner

• Vue
• vuex
• Vue router
• CLI -vy
• Pusher
• CSS

Det här är ett riktigt bra projekt för att komma igång med Vue eller förbättra dina befintliga färdigheter för att komma in i utvecklingen 2020. du kan hitta handledning här.

Vacker väderapp med Angular 8

Det här exemplet hjälper dig att skapa en vacker väderapp med Angular 8:

Vad lär du dig
Detta projekt kommer att lära dig värdefulla färdigheter i att bygga applikationer från grunden - från design till utveckling, hela vägen till en implementeringsklar applikation.

Teknisk stack och funktioner

• Vinkel 8
• Firebase
• Rendering på serversidan
• CSS med Grid och Flexbox
• Mobilvänlig och anpassningsförmåga
• Mörkt läge
• Vackert gränssnitt

Det jag verkligen älskar med detta allomfattande projekt är att man inte studerar saker isolerat. Istället lär du dig hela utvecklingsprocessen, från design till slutlig implementering.

Att göra-applikation med Svelte

Svelte är som den nya killen på det komponentbaserade tillvägagångssättet - åtminstone liknar React, Vue och Angular. Och det här är en av de hetaste nya produkterna för 2020.

Att göra-appar är inte nödvändigtvis det hetaste ämnet, men det hjälper dig verkligen att finslipa dina Svelte-kunskaper. Det kommer att se ut så här:

Vad lär du dig
Denna handledning visar dig hur du skapar en applikation med Svelte 3, från början till slut. Du kommer att använda komponenter, styling och händelsehanterare

Teknisk stack och funktioner

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

Det finns inte många bra Svelte-startprojekt, så jag hittade detta är ett bra alternativ att börja med.

E-handelsapp med Next.js

Next.js är det mest populära ramverket för att bygga React-applikationer som stöder rendering på serversidan direkt.

Detta projekt kommer att visa dig hur du skapar en e-handelsapplikation som ser ut så här:

Vad lär du dig
I det här projektet kommer du att lära dig hur du utvecklar med Next.js – skapa nya sidor och komponenter, extrahera data och stil och distribuera en Next-applikation.

Teknisk stack och funktioner

• Next.js
• Komponenter och sidor
• Datasampling
• stilisering
• Projektinstallation
• SSR och SPA

Det är alltid bra att ha ett verkligt exempel som en e-handelsapp för att lära sig något nytt. Du kan hitta handledningen här.

Fullfjädrad flerspråkig blogg med Nuxt.js

Nuxt.js är för Vue, vad Next.js är för React: ett utmärkt ramverk för att kombinera kraften i server-side rendering och ensidiga applikationer
Den sista applikationen du kan skapa kommer att se ut så här:

Vad lär du dig

I det här exempelprojektet får du lära dig hur du skapar en komplett webbplats med Nuxt.js, från den första installationen till den slutliga implementeringen.

Den drar nytta av många av de coola funktionerna som Nuxt har att erbjuda, som sidor och komponenter och styling med SCSS.

Teknisk stack och funktioner

• Nuxt.js
• Komponenter och sidor
• Storyblock-modul
• Hagfish
• Vuex för statlig förvaltning
• SCSS för styling
• Nuxt mellanvaror

Det här är ett riktigt coolt projekt, som innehåller många fantastiska Nuxt.js-funktioner. Jag personligen älskar att arbeta med Nuxt så du borde prova det eftersom det också kommer att göra dig till en fantastisk Vue-utvecklare.

Blogga med Gatsby

Gatsby är en utmärkt statisk webbplatsgenerator som använder React och GraphQL. Detta är resultatet av projektet:

Vad lär du dig

I den här handledningen kommer du att lära dig hur du använder Gatsby för att skapa en blogg som du kommer att använda för att skriva dina egna artiklar med hjälp av React och GraphQL.

Teknisk stack och funktioner

• Gatsby
• Reagera
• GraphQL
• Plugins och teman
• MDX/Markdown
• Bootstrap CSS
• mallar

Om du någonsin har velat starta en blogg, det här är ett bra exempel om hur man gör det med React och GraphQL.

Jag säger inte att WordPress är ett dåligt val, men med Gatsby kan du bygga högpresterande webbplatser med hjälp av React – vilket är en fantastisk kombination.

Blogga med Gridsome

Gridsome för Vue... Okej, vi hade redan det här med Next/Nuxt.
Men detsamma gäller för Gridsome och Gatsby. Båda använder GraphQL som sitt datalager, men Gridsome använder VueJS. Detta är också en fantastisk statisk webbplatsgenerator som hjälper dig att skapa fantastiska bloggar:

Vad lär du dig

Det här projektet kommer att lära dig hur du skapar en enkel blogg för att komma igång med Gridsome, GraphQL och Markdown. Den täcker också hur man distribuerar en applikation via Netlify.

Teknisk stack och funktioner

• Gridsomt
• Vue
• GraphQL
• Markdown
• nätifiera

Detta är förvisso inte den mest omfattande handledningen, men den täcker de grundläggande begreppen Gridsome och Markdown kan vara en bra utgångspunkt.

SoundCloud-liknande ljudspelare med Quasar

Quasar är ett annat Vue-ramverk som kan användas för att skapa mobilapplikationer. I det här projektet kommer du att skapa en ljudspelarapplikation, till exempel:

Vad lär du dig

Medan andra projekt huvudsakligen fokuserar på webbapplikationer, kommer detta att visa dig hur du skapar en mobilapplikation med Vue och Quasar-ramverket.
Du bör redan ha Cordova igång med Android Studio/Xcode konfigurerad. Om inte, har manualen en länk till Quasar-webbplatsen där de visar hur du ställer in allt.

Teknisk stack och funktioner

• kvasar
• Vue
• Cordova
• WaveSurfer
• UI-komponenter

Litet projekt, som visar Quasars kapacitet för att skapa mobila applikationer.

Källa: will.com