Ytterligare 9 projekt för att finslipa dina Front-End-färdigheter

Introduktion

Oavsett om du är ny inom programmering eller en erfaren utvecklare är det nödvändigt i denna bransch att lära sig nya koncept och språk/ramverk för att hänga med i trenderna.

Låt oss ta React som exempel — koden för vilket Facebook släppte för bara fyra år sedan, och som redan blivit det främsta valet för JavaScript-utvecklare världen över.

Vue och Angular har förstås också sina trogna följare. Och sedan finns det Svelte och andra mångsidiga ramverk, som Next.js eller Nuxt.js. Både Gatsby, Gridsome, Quasar… och mycket mer.

Om du vill framstå som en erfaren JavaScript-utvecklare bör du ha åtminstone viss erfarenhet av olika ramverk och bibliotek – utöver att arbeta med den klassiska, gamla JS.

För att hjälpa dig att bli en frontendmästare 2020 har jag samlat nio olika projekt, var och en fokuserad på olika JavaScript-ramverk och bibliotek som teknisk stack, som du kan skapa och lägga till i din portfölj. Kom ihåg att inget hjälper dig mer än att praktiskt skapa saker, så gå framåt, aktivera ditt sinne och gör det möjligt.

Artikeln är översatt med stöd av företaget EDISON Software, som skapar virtuella provrum för multibrandsbutiker, samt testar mjukvara.

Filmsökningsapp med React (med hooks)

Det första steget kan vara att skapa en filmsökningsapp med React. Här är en bild av hur den slutliga appen kommer att se ut:

Vad du kommer att lära dig
Genom att skapa denna app kommer du att förbättra dina React-färdigheter genom att använda det relativt nya API:et Hooks. I exempelprojektet används React-komponenter, många hooks, ett externt API och naturligtvis några CSS-stilar.

Teknisk stack och funktioner

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

Utan att använda några klasser ger dessa projekt dig en perfekt ingångspunkt i funktionell React och kommer definitivt att hjälpa dig under 2020. Du kan hitta projekt exempel här. Följ instruktionerna eller gör allt efter eget tycke.

Chattapp med Vue

Ett annat utmärkt projekt för dig är att skapa en chattapp med hjälp av mitt favoritspråk för JavaScript: VueJS. Appen kommer att se ut ungefär så här:

Vad du kommer att lära dig
I den här guiden får du lära dig hur du skapar en Vue-applikation från grunden – 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
• Vue CLI
• Pusher
• CSS

Detta är verkligen ett utmärkt projekt för att börja arbeta med Vue eller förbättra dina befintliga färdigheter för att ge dig in i utveckling under 2020. Du kan hitta en handledning här.

En vacker väderapplikation med Angular 8

Detta exempel hjälper dig att skapa en vacker väderapplikation med Angular 8:

Vad du kommer att lära dig
Detta projekt kommer att lära dig värdefulla färdigheter när du skapar applikationer från grunden - från design till utveckling, ända till en redo för distribution-applikation.

Teknisk stack och funktioner

• Angular 8
• Firebase
• Server-rendering
• CSS med grid och Flexbox
• Mobilvänligt och responsivt
• Mörkt läge
• Vacker gränssnitt

Det jag verkligen gillar med detta omfattande projekt är att du inte lär dig saker i isolering. Istället lär du dig hela utvecklingsprocessen – från design till slutdistribution.

To-Do-applikation med Svelte

Svelte är som den nya ungen inom komponentmetoden – åtminstone liknande React, Vue och Angular. Och det är en av de hetaste nyheterna för 2020.

To-Do-applikationer behöver inte vara det mest spännande ämnet, men de hjälper dig verkligen att finslipa dina Svelte-färdigheter. Det kommer att se ut så här:

Vad du kommer att lära dig
I denna handledning får du lära 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 så många bra startprojekt för Svelte, så jag har hittat detta bra alternativ för att börja.

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

Next.js är det mest populära ramverket för att bygga React-applikationer som stöder server-rendering ur lådan.

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

Vad du kommer att lära dig
I det här projektet kommer du att lära dig att utveckla med Next.js - skapa nya sidor och komponenter, hämta data samt styla och distribuera Next-applikationen.

Teknisk stack och funktioner

• Next.js
• Komponenter och sidor
• Datahämtning
• Styling
• Distribution av projektet
• 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 en handledning här.

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

Nuxt.js för Vue, samma som Next.js för React: ett utmärkt ramverk för att kombinera funktionerna för server-side rendering och single-page applications.
Den senaste appen du kan skapa kommer att se ut så här:

Vad du kommer att lära dig

I det här projektet får du lära dig hur man skapar en fullständig webbplats med Nuxt.js — från initial inställning till slutlig distribution.

Den använder många intressanta funktioner som Nuxt kan erbjuda, som sidor och komponenter samt styling med SCSS.

Teknisk stack och funktioner

• Nuxt.js
• Komponenter och sidor
• Storyblok-modul
• Mixins
• Vuex för state management
• SCSS för styling
• Nuxt-mellanprogram

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

Blogg med Gatsby

Gatsby är en utmärkt generator för statiska webbplatser som använder React och GraphQL. Det här är resultatet av projektet:

Vad du kommer att lära dig

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

Teknisk stack och funktioner

• Gatsby
• React
• GraphQL
• Plugins och teman
• MDX/Markdown
• Bootstrap CSS
• Mallar

Om du någonsin har velat starta en blogg, är det här ett utmärkt exempel på 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 skapa högpresterande webbplatser med React — vilket är en fantastisk kombination.

Blogg med Gridsome

Gridsome för Vue... Okej, vi har redan haft detta med Next/Nuxt.
Men samma sak gäller för Gridsome och Gatsby. Båda använder GraphQL som ett datalag, men Gridsome använder VueJS. Det är också en fantastisk generator för statiska webbplatser som hjälper dig att skapa utmärkta bloggar:

Vad du kommer att lära dig

Detta projekt kommer att lära dig hur man skapar en enkel blogg för att börja arbeta med Gridsome, GraphQL och Markdown. Det beskriver också hur man distribuerar appen via Netlify.

Teknisk stack och funktioner

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Det här är förstås inte den mest omfattande handledningen, men den täcker de grundläggande koncepten för Gridsome och Markdown och kan bli en bra utgångspunkt.

En ljudspelare, liknande SoundCloud, med hjälp av Quasar.

Quasar — ett annat Vue-ramverk som kan användas för att skapa mobilapplikationer. I detta projekt kommer du att skapa en ljudspelarapp, till exempel:

Vad du kommer att lära dig

Medan andra projekt huvudsakligen fokuserar på webbapplikationer, kommer detta att visa dig hur du skapar en mobilapplikation med hjälp av Vue och Quasar-ramverket.
Du bör redan ha en fungerande Cordova med konfigurerad Android Studio/Xcode. Om inte, så finns det en länk i guiden till Quasars webbplats där de visar hur man ställer in allt.

Teknisk stack och funktioner

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Komponenter

Ett litet projekt, som visar Quasars möjligheter för att skapa mobilapplikationer.

Källa: habr.com