Einführung
Egal, ob Sie ein Anfänger in der Programmierung sind oder bereits ein erfahrener Entwickler, in dieser Branche ist das Lernen neuer Konzepte sowie Sprachen/Frameworks unerlässlich, um mit den Trends Schritt zu halten.
Nehmen wir zum Beispiel React – dessen Code Facebook vor gerade vier Jahren veröffentlicht hat. Es ist bereits die Nummer eins unter den JavaScript-Entwicklern weltweit geworden.
Vue und Angular haben natürlich auch ihre treue Fangemeinde. Dazu kommen Svelte und andere universelle Frameworks wie Next.js oder Nuxt.js. Gatsby, Gridsome, Quasar… und vieles mehr.
Wenn Sie sich als erfahrener JavaScript-Entwickler beweisen möchten, sollten Sie zumindest einige Erfahrungen mit verschiedenen Frameworks und Bibliotheken sammeln – zusätzlich zu Ihrer Arbeit mit dem bewährten alten JS.
Um Ihnen zu helfen, im Jahr 2020 ein Frontend-Meister zu werden, habe ich neun verschiedene Projekte zusammengestellt, die jeweils verschiedenen Frameworks und JavaScript-Bibliotheken als technischer Stack gewidmet sind, die Sie erstellen und Ihrem Portfolio hinzufügen können. Denken Sie daran, dass nichts mehr hilft, als Dinge praktisch zu kreieren, also legen Sie los, schalten Sie Ihren Verstand ein und machen Sie es möglich.
Der Artikel wurde mit Unterstützung der Firma EDISON Software übersetzt, die , sowie .
Film-Such-App mit React (mit Hooks)
Das erste, womit Sie beginnen könnten, ist, eine Film-Such-App mit React zu erstellen. Hier ist ein Bild davon, wie die fertige App aussehen wird:
Was Sie lernen werden
Indem Sie diese App erstellen, verbessern Sie Ihre React-Fähigkeiten und nutzen dabei den vergleichsweise neuen Hooks-API. Im Projektbeispiel werden React-Komponenten, zahlreiche Hooks, eine externe API und natürlich einige CSS-Stile verwendet.
Technischer Stack und Features
- React mit Hooks
- create-react-app
- JSX
- CSS
Ohne die Verwendung von Klassen bieten Ihnen diese Projekte einen idealen Einstieg in funktionales React und werden Ihnen definitiv im Jahr 2020 helfen. Sie können . Befolgen Sie die Anweisungen oder gestalten Sie alles nach Ihrem eigenen Geschmack.
Chat-App mit Vue
Ein weiteres großartiges Projekt für Sie ist die Erstellung einer Chat-App mit meiner Lieblings-JavaScript-Bibliothek: VueJS. Die Anwendung wird ungefähr so aussehen:
Was Sie lernen werden
Aus diesem Leitfaden erfahren Sie, wie Sie eine Vue-Anwendung von Grund auf erstellen – Komponenten erstellen, Zustände verwalten, Routen erstellen, sich mit externen Diensten verbinden und sogar die Authentifizierung verarbeiten.
Technischer Stack und Features
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Dies ist wirklich ein großartiges Projekt, um mit Vue zu beginnen oder Ihre vorhandenen Fähigkeiten zu verbessern, um im Jahr 2020 in die Entwicklung einzusteigen. Sie können das .
Schöne Wetter-App mit Angular 8
Dieses Beispiel hilft Ihnen, eine schöne Wetter-App mit Angular 8 zu erstellen:
Was Sie lernen werden
Dieses Projekt vermittelt Ihnen wertvolle Fähigkeiten beim Erstellen von Anwendungen von Grund auf – vom Design bis zur Entwicklung, bis hin zur bereiten Bereitstellung der Anwendung.
Technischer Stack und Features
- Angular 8
- Firebase
- Serverseitiges Rendering
- CSS mit Grid und Flexbox
- Mobilfreundlich und responsive
- Dunkelmodus
- Schönes Layout
Was mir an diesem umfassenden Projekt wirklich gefällt, ist, dass Sie die Dinge nicht isoliert lernen. Stattdessen lernen Sie den gesamten Entwicklungsprozess – vom Design bis zur endgültigen Bereitstellung.
To-Do-App mit Svelte
Svelte ist wie das neue Kind im Bereich der Komponentenansätze – zumindest ähnlich wie React, Vue und Angular. Und es ist eines der heißesten neuen Dinge für das Jahr 2020.
To-Do-Apps sind vielleicht nicht das spannendste Thema, aber es wird Ihnen wirklich helfen, Ihre Svelte-Fähigkeiten zu verfeinern. So wird es aussehen:
Was Sie lernen werden
In diesem Tutorial erfahren Sie, wie Sie eine Anwendung mit Svelte 3 von Anfang bis Ende erstellen. Sie werden Komponenten, Styling und Ereignis-Handler verwenden.
Technischer Stack und Features
- Svelte 3
- Komponenten
- Styling mit CSS
- ES 6 Syntax
Es gibt nicht viele gute Startprojekte für Svelte, daher habe ich .
Приложение для электронной коммерции с помощью Next.js
Next.js ist das beliebteste Framework zum Erstellen von React-Anwendungen, das von Haus aus serverseitiges Rendering unterstützt.
Dieses Projekt zeigt Ihnen, wie Sie eine E-Commerce-Anwendung erstellen, die folgendermaßen aussieht:
Was Sie lernen werden
In diesem Projekt lernen Sie, wie Sie mit Next.js entwickeln – neue Seiten und Komponenten erstellen, Daten abrufen sowie die Anwendung stilisieren und bereitstellen.
Technischer Stack und Features
- Next.js
- Komponenten und Seiten
- Datenauswahl
- Styling
- Projektbereitstellung
- SSR und SPA
Es ist immer großartig, ein praktisches Beispiel wie eine E-Commerce-Anwendung zu haben, um etwas Neues zu lernen. Sie können .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js für Vue ist das gleiche wie Next.js für React: ein großartiges Framework, das die Möglichkeiten des serverseitigen Renderings mit Single-Page-Anwendungen verbindet.
Die letzte Anwendung, die Sie erstellen können, wird folgendermaßen aussehen:
Was Sie lernen werden
In diesem Projektbeispiel erfahren Sie, wie Sie eine vollständige Website mit Nuxt.js erstellen — von der Ersteinrichtung bis zur endgültigen Bereitstellung.
Es nutzt viele interessante Funktionen, die Nuxt zu bieten hat, wie Seiten und Komponenten sowie Styling mit SCSS.
Technischer Stack und Features
- Nuxt.js
- Komponenten und Seiten
- Storyblock-Modul
- Mixins
- Vuex zur Zustandsverwaltung
- SCSS zum Styling
- Nuxt-Middleware
, das viele großartige Funktionen von Nuxt.js beinhaltet. Ich persönlich arbeite gerne mit Nuxt, also sollten Sie es ausprobieren, denn es wird Sie auch zu einem großartigen Vue-Entwickler machen.
Blog mit Gatsby
Gatsby ist ein großartiger Generator statischer Websites, der React und GraphQL verwendet. Das ist das Ergebnis des Projekts:
Was Sie lernen werden
In diesem Leitfaden erfahren Sie, wie Sie Gatsby verwenden, um einen Blog zu erstellen, den Sie für das Schreiben Ihrer eigenen Artikel verwenden werden, wobei Sie React und GraphQL nutzen.
Technischer Stack und Features
- Gatsby
- React
- GraphQL
- Plugins und Themen
- MDX/Markdown
- Bootstrap CSS
- Vorlagen
Wenn Sie jemals einen Blog starten wollten, dafür, wie man ihn mit React und GraphQL erstellt.
Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby können Sie leistungsstarke Websites mit React erstellen — was eine erstaunliche Kombination ist.
Blog mit Gridsome
Gridsome für Vue... Nun, das hatten wir bereits mit Next/Nuxt.
Aber dasselbe gilt für Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, aber Gridsome nutzt VueJS. Es ist auch ein großartiger Generator statischer Websites, der Ihnen hilft, herausragende Blogs zu erstellen:
Was Sie lernen werden
Dieses Projekt lehrt Sie, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Es wird auch erklärt, wie Sie die Anwendung über Netlify bereitstellen.
Technischer Stack und Features
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Das ist natürlich kein vollständiges Tutorial, aber es deckt die grundlegenden Konzepte von Gridsome und .
Ein Audio-Player, der SoundCloud ähnelt, mit Quasar
Quasar ist ein weiteres Vue-Framework, das zur Erstellung von mobilen Anwendungen verwendet werden kann. In diesem Projekt werden Sie eine Audioplayer-Anwendung erstellen, zum Beispiel:
Was Sie lernen werden
Während andere Projekte hauptsächlich auf Webanwendungen fokussiert sind, zeigt dieses Ihnen, wie Sie eine mobile Anwendung mit Vue und dem Quasar-Framework erstellen können.
Sie sollten bereits eine funktionierende Cordova mit eingerichtetem Android Studio/Xcode haben. Falls nicht, finden Sie im Handbuch einen Link zur Quasar-Website, auf der gezeigt wird, wie alles eingerichtet wird.
Technischer Stack und Features
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI-Komponenten
, das die Möglichkeiten von Quasar zur Erstellung mobiler Anwendungen demonstriert.
Quelle: habr.com
