Inleiding
Ongeacht of u een beginner in programmeren bent of al een ervaren ontwikkelaar, het is essentieel om nieuwe concepten en talen/frameworks te leren om bij te blijven met de trends in deze sector.
Neem bijvoorbeeld React — de code waarvan Facebook vier jaar geleden heeft vrijgegeven, het is al de nummer één keuze voor JavaScript-ontwikkelaars over de hele wereld.
Vue en Angular hebben natuurlijk ook hun legitieme aanhang. En dan is er Svelte en andere veelzijdige frameworks zoals Next.js of Nuxt.js. En Gatsby, Gridsome, Quasar… en nog veel meer.
Als u zich wilt onderscheiden als een ervaren JavaScript-ontwikkelaar, moet u ten minste enige ervaring hebben met verschillende frameworks en bibliotheken — naast het werken met goed, oud JS.
Om u te helpen een front-end expert te worden in 2020, heb ik negen verschillende projecten samengesteld, elk gewijd aan verschillende JavaScript-frameworks en -bibliotheken als technische stack, die u kunt bouwen en aan uw portfolio kunt toevoegen. Vergeet niet dat niets helpt beter dan dingen praktisch maken, dus ga ervoor, zet uw geest aan het werk en maak het mogelijk.
Dit artikel is vertaald met de ondersteuning van EDISON Software, dat , evenals .
Filmzoek-app met React (met hooks)
Het eerste waarmee u zou kunnen beginnen, is het creëren van een filmzoek-app met React. Hieronder staat een afbeelding van hoe de uiteindelijke app eruit zal zien:
Wat u zult leren
Door deze app te bouwen, zult u uw React-vaardigheden verbeteren door gebruik te maken van de relatief nieuwe Hooks API. Dit projectvoorbeeld gebruikt React-componenten, veel hooks, een externe API en, natuurlijk, een beetje CSS-styling.
Technische stack en functies
- React met hooks
- create-react-app
- JSX
- CSS
Zonder het gebruik van enige klassen, geven deze projecten u de perfecte instap in functioneel React en zullen ze u zeker helpen in 2020. U kunt een . Volg de instructies of maak er uw eigen twist aan.
Chat-app met Vue
Een ander geweldig project voor u is om een chat-app te creëren met mijn favoriete JavaScript-bibliotheek: VueJS. De app zal er ongeveer zo uitzien:
Wat u zult leren
In deze handleiding leer je hoe je een Vue-applicatie vanaf nul doet – componenten maakt, toestanden beheert, routes opzet, verbinding maakt met externe diensten en zelfs authenticatie afhandelt.
Technische stack en functies
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Dit is echt een geweldig project om te beginnen met Vue of om je bestaande vaardigheden te verbeteren voor webontwikkeling in 2020. Je kunt .
Mooie weersvoorspellingsapplicatie met Angular 8
Dit voorbeeld helpt je een mooie weersvoorspellingsapplicatie te maken met Angular 8:
Wat u zult leren
Dit project leert je waardevolle vaardigheden bij het maken van applicaties vanaf nul – van ontwerp tot ontwikkeling, tot een kant-en-klare applicatie.
Technische stack en functies
- Angular 8
- Firebase
- Server-side rendering
- CSS met grid en Flexbox
- Mobielvriendelijk en responsief
- Donkere modus
- Prachtige interface
Wat ik echt heel leuk vind aan dit uitgebreide project, is dat je dingen niet in isolatie studeert. In plaats daarvan leer je het hele ontwikkelproces – van ontwerp tot de uiteindelijke implementatie.
To-Do-applicatie met Svelte
Svelte is als de nieuwe jongen in de componentbenadering – op zijn minst vergelijkbaar met React, Vue en Angular. En het is een van de heetste nieuwtjes van 2020.
To-Do-applicaties zijn misschien niet het heetste onderwerp, maar ze helpen je echt om je Svelte-vaardigheden te verfijnen. Het zal er als volgt uitzien:
Wat u zult leren
In deze tutorial leer je hoe je een applicatie maakt met Svelte 3, van begin tot eind. Je zult componenten, styling en eventhandlers gebruiken.
Technische stack en functies
- Svelte 3
- Componenten
- Styling met CSS
- ES6-syntaxis
Er zijn niet veel goede startprojecten voor Svelte, dus ik heb .
Приложение для электронной коммерции с помощью Next.js
Next.js is het populairste framework voor het bouwen van React-applicaties die server-side rendering out of the box ondersteunen.
Dit project laat je zien hoe je een e-commerceapplicatie kunt maken die er als volgt uitziet:
Wat u zult leren
In dit project leer je hoe je ontwikkelt met Next.js – nieuwe pagina's en componenten maakt, gegevens ophaalt en de Next-applicatie stylet en implementeert.
Technische stack en functies
- Next.js
- Componenten en pagina's
- Gegevenssampling
- Styling
- Project implementeren
- SSR en SPA
Het is altijd geweldig om een echt voorbeeld te hebben, zoals een e-commerce applicatie, om iets nieuws te leren. Je kunt .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js voor Vue, hetzelfde als Next.js voor React: een geweldige framework voor het combineren van server-side rendering capaciteiten en single-page applicaties
De laatste applicatie die je kunt maken, ziet er als volgt uit:
Wat u zult leren
In dit projectvoorbeeld leer je hoe je een volledige website kunt maken met Nuxt.js — van de initiële opzet tot de uiteindelijke uitvoering.
Het maakt gebruik van veel interessante functies die Nuxt te bieden heeft, zoals pagina's en componenten, evenals styling met SCSS.
Technische stack en functies
- Nuxt.js
- Componenten en pagina's
- Storyblok-module
- Mixins
- Vuex voor state management
- SCSS voor styling
- Nuxt middlewares
, dat veel geweldige mogelijkheden van Nuxt.js omvat. Persoonlijk hou ik ervan om met Nuxt te werken, dus je moet het zeker proberen, want het zal je ook een geweldige Vue-ontwikkelaar maken.
Blog met Gatsby
Gatsby is een geweldige static site generator die React en GraphQL gebruikt. Dit is het resultaat van het project:
Wat u zult leren
In deze gids leer je hoe je Gatsby kunt gebruiken om een blog te maken dat je zult gebruiken om je eigen artikelen te schrijven, met behulp van React en GraphQL.
Technische stack en functies
- Gatsby
- React
- GraphQL
- Plugins en thema's
- MDX/Markdown
- Bootstrap CSS
- Sjablonen
Als je ooit een blog hebt willen beginnen, van hoe je dit kunt doen met React en GraphQL.
Ik zeg niet dat WordPress een slechte keuze is, maar met Gatsby kun je high-performance sites bouwen met React — wat een geweldige combinatie is.
Blog met Gridsome
Gridsome voor Vue… Goed, we hebben dit al gehad met Next/Nuxt.
Maar hetzelfde geldt voor Gridsome en Gatsby. Beide gebruiken GraphQL als datalaag, maar Gridsome gebruikt VueJS. Het is ook een geweldige static site generator die je helpt om geweldige blogs te maken:
Wat u zult leren
Dit project leert je hoe je een eenvoudige blog kunt maken om aan de slag te gaan met Gridsome, GraphQL en Markdown. Het legt ook uit hoe je de applicatie kunt implementeren via Netlify.
Technische stack en functies
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Dit is zeker geen complete tutorial, maar het behandelt de basisprincipes van Gridsome en .
Audio speler, vergelijkbaar met SoundCloud, met behulp van Quasar
Quasar is weer een Vue-framework dat gebruikt kan worden voor het maken van mobiele applicaties. In dit project ga je een audioplayer-app maken, bijvoorbeeld:
Wat u zult leren
Terwijl andere projecten zich voornamelijk richten op webapplicaties, laat dit je zien hoe je een mobiele applicatie kunt maken met Vue en het Quasar-framework.
Je moet al een werkende Cordova met ingestelde Android Studio/Xcode hebben. Als dat niet het geval is, dan is er in de handleiding een link naar de Quasar-website waar ze uitleggen hoe alles ingesteld kan worden.
Technische stack en functies
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Componenten
, dat de mogelijkheden van Quasar voor het maken van mobiele applicaties demonstreert.
Bron: habr.com
