Introductie
Of je nu nieuw bent in programmeren of een doorgewinterde ontwikkelaar bent, het leren van nieuwe concepten en talen/frameworks is in deze branche een must om op de hoogte te blijven van trends.
Neem bijvoorbeeld React, dat Facebook pas vier jaar geleden open source maakte en nu al de nummer één keuze is geworden voor JavaScript-ontwikkelaars over de hele wereld.
Vue en Angular hebben uiteraard ook hun eigen legitieme schare fans. En dan zijn er nog Svelte en andere universele raamwerken zoals Next.js of Nuxt.js. En Gatsby, en Gridsome, en Quasar... en nog veel meer.
Als je jezelf als ervaren JavaScript-ontwikkelaar wilt bewijzen, moet je op zijn minst enige ervaring hebben met verschillende frameworks en bibliotheken - naast het werken met de goede oude JS.
Om je te helpen een front-end master te worden in 2020, heb ik negen verschillende projecten samengesteld, elk gericht op een ander JavaScript-framework en een andere bibliotheek als een tech-stack die je kunt bouwen en toevoegen aan je portfolio. Onthoud dat niets je meer helpt dan daadwerkelijk dingen creëren, dus ga vooruit, gebruik je verstand en zorg ervoor dat het gebeurt
Het artikel is vertaald met de steun van EDISON Software, dat En .
Filmzoek-app met React (met hooks)
Het eerste waarmee u kunt beginnen, is een filmzoek-app maken met React. Hieronder ziet u een afbeelding van hoe de uiteindelijke toepassing eruit zal zien:
Wat ga je leren
Door deze app te bouwen, verbeter je je React-vaardigheden door de relatief nieuwe Hooks API te gebruiken. Het voorbeeldproject gebruikt React-componenten, veel hooks, een externe API en natuurlijk wat CSS-stijl.
Tech-stack en functies
- Reageer met haken
- maak-reageer-app
- JSX
- CSS
Zonder gebruik te maken van klassen bieden deze projecten u het perfecte toegangspunt tot functionele React en zullen ze u zeker helpen in 2020. je kunt vinden . Volg de instructies of maak er uw eigen van.
Chat-app met Vue
Een ander geweldig project dat je kunt doen is het maken van een chat-app met behulp van mijn favoriete JavaScript-bibliotheek: VueJS. De applicatie zal er ongeveer zo uitzien:
Wat ga je leren
In deze zelfstudie leert u hoe u een Vue-app helemaal opnieuw kunt maken: componenten maken, de status afhandelen, routes maken, verbinding maken met services van derden en zelfs de authenticatie afhandelen.
Tech-stack en functies
- Vue
- vuex
- Vue-router
- CLI-weergave
- Pusher
- CSS
Dit is echt een geweldig project om aan de slag te gaan met Vue of om je bestaande vaardigheden te verbeteren om in 2020 in ontwikkeling te komen. je kunt vinden .
Mooi weer-app met Angular 8
Dit voorbeeld helpt u een mooi weer-app te maken met Angular 8:
Wat ga je leren
Dit project leert u waardevolle vaardigheden bij het vanaf het begin bouwen van applicaties - van ontwerp tot ontwikkeling, helemaal tot een applicatie die klaar is voor gebruik.
Tech-stack en functies
- Hoekig 8
- Firebase
- Rendering aan de serverzijde
- CSS met Grid en Flexbox
- Mobielvriendelijk en aanpassingsvermogen
- Donkere modus
- Mooie interface
Wat ik zo leuk vind aan dit allesomvattende project, is dat je de dingen niet geïsoleerd bestudeert. In plaats daarvan leer je het hele ontwikkelingsproces, van ontwerp tot uiteindelijke implementatie.
To-Do-applicatie met Svelte
Svelte is als de nieuweling op het gebied van de componentgebaseerde aanpak - in ieder geval vergelijkbaar met React, Vue en Angular. En dit is een van de populairste nieuwe producten voor 2020.
To-Do-apps zijn niet per se het populairste onderwerp, maar het zal je echt helpen je Svelte-vaardigheden aan te scherpen. Het zal er als volgt uitzien:
Wat ga je leren
Deze tutorial laat je zien hoe je een applicatie maakt met Svelte 3, van begin tot eind. Je gebruikt componenten, styling en gebeurtenishandlers
Tech-stack en functies
- Slanke 3
- Onderdelen
- Stijlen met CSS
- ES 6-syntaxis
Er zijn niet veel goede Svelte-startprojecten, zo ontdekte ik .
E-commerce-app met Next.js
Next.js is het populairste raamwerk voor het bouwen van React-applicaties die kant-en-klare weergave op de server ondersteunen.
Dit project laat zien hoe u een e-commercetoepassing maakt die er als volgt uitziet:
Wat ga je leren
In dit project leert u hoe u met Next.js kunt ontwikkelen: nieuwe pagina's en componenten maken, gegevens extraheren en een Next-toepassing vormgeven en implementeren.
Tech-stack en functies
- Next.js
- Componenten en pagina's
- Gegevensbemonstering
- stilisatie
- Projectimplementatie
- SSR en SPA
Het is altijd geweldig om een voorbeeld uit de praktijk te hebben, zoals een e-commerce-app, om iets nieuws te leren. Jij kan .
Volwaardige meertalige blog met Nuxt.js
Nuxt.js is voor Vue, wat Next.js is voor React: een geweldig raamwerk voor het combineren van de kracht van server-side rendering en applicaties van één pagina
De uiteindelijke toepassing die u kunt maken, ziet er als volgt uit:
Wat ga je leren
In dit voorbeeldproject leert u hoe u een volledige website kunt maken met Nuxt.js, van de eerste installatie tot de uiteindelijke implementatie.
Het maakt gebruik van veel van de coole functies die Nuxt te bieden heeft, zoals pagina's en componenten, en styling met SCSS.
Tech-stack en functies
- Nuxt.js
- Componenten en pagina's
- Verhaalblokmodule
- Hagfish
- Vuex voor staatsbeheer
- SCSS voor styling
- Nuxt middlewares
, die veel geweldige Nuxt.js-functies bevat. Persoonlijk werk ik graag met Nuxt, dus je moet het eens proberen, want het zal je ook een geweldige Vue-ontwikkelaar maken.
Bloggen met Gatsby
Gatsby is een uitstekende statische sitegenerator die React en GraphQL gebruikt. Dit is het resultaat van het project:
Wat ga je leren
In deze zelfstudie leert u hoe u Gatsby kunt gebruiken om een blog te maken die u kunt gebruiken om uw eigen artikelen te schrijven met React en GraphQL.
Tech-stack en functies
- Gatsby
- Reageren
- GraphQL
- Plug-ins en thema's
- MDX/Markdown
- Bootstrap-CSS
- templates
Als je ooit een blog hebt willen beginnen, over hoe u het kunt maken met React en GraphQL.
Ik zeg niet dat WordPress een slechte keuze is, maar met Gatsby kun je krachtige websites bouwen met React - wat een geweldige combinatie is.
Bloggen met Gridsome
Gridsome voor Vue... Oké, dit hadden we al met Next/Nuxt.
Maar hetzelfde geldt voor Gridsome en Gatsby. Beiden gebruiken GraphQL als gegevenslaag, maar Gridsome gebruikt VueJS. Dit is ook een geweldige statische sitegenerator waarmee je geweldige blogs kunt maken:
Wat ga je leren
Dit project leert je hoe je een eenvoudige blog kunt maken om aan de slag te gaan met Gridsome, GraphQL en Markdown. Het behandelt ook hoe u een applicatie via Netlify kunt implementeren.
Tech-stack en functies
- Rasterwerk
- Vue
- GraphQL
- Markdown
- Netlify
Dit is zeker niet de meest uitgebreide tutorial, maar het behandelt de basisconcepten van Gridsome en .
SoundCloud-achtige audiospeler met Quasar
Quasar is een ander Vue-framework dat kan worden gebruikt om mobiele applicaties te maken. In dit project maak je een audiospeler-applicatie, bijvoorbeeld:
Wat ga je leren
Terwijl andere projecten zich vooral richten op webapplicaties, laat dit je zien hoe je een mobiele applicatie kunt maken met behulp van Vue en het Quasar-framework.
Cordova zou al moeten draaien met Android Studio/Xcode geconfigureerd. Zo niet, dan bevat de handleiding een link naar de Quasar-website waar ze laten zien hoe je alles instelt.
Tech-stack en functies
- Quasar
- Vue
- Cordova
- golfsurfer
- UI-componenten
, waarmee Quasar's mogelijkheden voor het creëren van mobiele applicaties worden gedemonstreerd.
Bron: www.habr.com