Einleitung
Unabhängig davon, ob Sie neu in der Programmierung sind oder bereits ein erfahrener Entwickler, ist es in dieser Branche unerlässlich, neue Konzepte und Sprachen / Frameworks zu lernen, um mit den Trends Schritt zu halten.
Nehmen wir zum Beispiel React, dessen Code Facebook erst vor vier Jahren geöffnet hat, ist bereits die erste Wahl für JavaScript-Entwickler auf der ganzen Welt.
Vue und Angular haben natürlich auch ihre eigene legitime Fangemeinde. Und es gibt Svelte und andere universelle Frameworks wie Next.js oder Nuxt.js. Und Gatsby und Gridsome und Quasar ... und vieles mehr.
Wenn Sie sich als erfahrener JavaScript-Entwickler beweisen möchten, sollten Sie zumindest einige Erfahrungen mit verschiedenen Frameworks und Bibliotheken haben - zusätzlich zur Arbeit mit gutem alten JS.
Um Ihnen zu helfen, 2020 ein Front-End-Master zu werden, habe ich neun verschiedene Projekte zusammengestellt, von denen jedes verschiedenen JavaScript-Frameworks und -Bibliotheken als technischer Stack gewidmet ist, den Sie erstellen und Ihrem Portfolio hinzufügen können. Denken Sie daran, dass Ihnen nichts mehr hilft, als Dinge in der Praxis zu erschaffen. Machen Sie also weiter, machen Sie sich Gedanken und machen Sie es möglich
Dieser Artikel wurde mit Unterstützung von EDISON Software übersetzt, einem Unternehmen, das virtuelle Umkleidekabinen für Mehrmarkengeschäfte herstellt und auch Software testet .
Reagieren Sie auf die Filmsuch-App (mit Haken)
Das erste, mit dem Sie beginnen können, ist das Erstellen einer Filmsuch-App mit React. Unten sehen Sie ein Bild davon, wie die endgültige Anwendung aussehen wird:
Was lernst du?Durch das Erstellen dieser Anwendung verbessern Sie Ihre Reaktionsfähigkeiten mithilfe der relativ neuen API-Hooks. Das Beispielprojekt verwendet React-Komponenten, viele Hooks, eine externe API und natürlich einige CSS-Stile.
Technischer Stack und Features- Reagiere mit Haken
- create-react-app
- Jsx
- CSS
Ohne Unterricht bieten diese Projekte den perfekten Einstieg in das funktionale Reagieren und werden Ihnen im Jahr 2020 definitiv helfen.
Ein Beispielprojekt finden Sie
hier . Folgen Sie den Anweisungen oder machen Sie alles nach Ihrem Geschmack.
Chat-Anwendung mit Vue
Ein weiteres großartiges Projekt für Sie ist das Erstellen einer Chat-Anwendung mit meiner bevorzugten JavaScript-Bibliothek: VueJS. Die Anwendung sieht ungefähr so aus:
Was lernst du?In diesem Handbuch erfahren Sie, wie Sie eine Vue-Anwendung von Grund auf neu erstellen: Erstellen Sie Komponenten, verarbeiten Sie Status, erstellen Sie Routen, stellen Sie eine Verbindung zu Diensten von Drittanbietern her und verarbeiten Sie sogar die Authentifizierung.
Technischer Stack und Features- Vue
- Vuex
- Vue Router
- Vue CLI
- Drücker
- CSS
Dies ist ein wirklich großartiges Projekt, um mit Vue zusammenzuarbeiten oder Ihre vorhandenen Fähigkeiten zu verbessern, um 2020 mit der Entwicklung zu beginnen. Das
Tutorial finden Sie hier .
Eine schöne Anwendung zum Betrachten von Wetter mit Angular 8
Dieses Beispiel hilft Ihnen beim Erstellen einer schönen Anwendung zum Anzeigen des Wetters mit Angular 8:
Was lernst du?In diesem Projekt lernen Sie wertvolle Fähigkeiten beim Erstellen von Anwendungen von Grund auf - vom Entwurf über die Entwicklung bis hin zur Bereitstellung.
Technischer Stack und Features- Winkel 8
- Feuerbasis
- Serverseitiges Rendern
- CSS mit Grid und Flexbox
- Mobil freundlich und anpassungsfähig
- Dunkler Modus
- Schöne Oberfläche
Was ich an diesem umfassenden Projekt wirklich mag, ist, dass Sie die Dinge nicht isoliert studieren. Stattdessen untersuchen Sie den gesamten Entwicklungsprozess vom Entwurf bis zur endgültigen Bereitstellung.
To-Do-App mit Svelte
Svelte ist wie ein neues Kind in einem Komponentenansatz - zumindest ähnlich wie React, Vue und Angular. Und dies ist eines der heißesten neuen Produkte für 2020.
To-Do-Apps sind nicht unbedingt das heißeste Thema, aber sie helfen Ihnen wirklich dabei, Ihre Svelte-Fähigkeiten zu verbessern. Es wird so aussehen:
Was lernst du?Dieses Tutorial zeigt Ihnen, wie Sie mit Svelte 3 von Anfang bis Ende eine Anwendung erstellen. Sie verwenden Komponenten, Styling und Event-Handler
Technischer Stack und Features- Svelte 3
- Komponenten
- CSS-Styling
- ES 6 Syntax
Es gibt nicht viele gute Startprojekte für Svelte, daher fand ich
diese gute Option, um loszulegen .
E-Commerce-Anwendung mit Next.js.
Next.js ist das beliebteste Framework zum Erstellen von React-Anwendungen, die das serverseitige Rendern sofort unterstützen.
Dieses Projekt zeigt Ihnen, wie Sie eine E-Commerce-Anwendung erstellen, die folgendermaßen aussieht:
Was lernst du?In diesem Projekt lernen Sie, wie Sie mit Next.js entwickeln - neue Seiten und Komponenten erstellen, Daten extrahieren sowie die Next-Anwendung formatieren und bereitstellen.
Technischer Stack und Features- Next.js
- Komponenten und Seiten
- Datenabtastung
- Stilisierung
- Projektbereitstellung
- SSR und SPA
Es ist immer toll, ein reales Beispiel wie eine E-Commerce-Anwendung zu haben, um etwas Neues zu lernen. Das
Tutorial finden Sie hier .
Ein vollständiger mehrsprachiger Blog mit Nuxt.js
Nuxt.js für Vue, genau wie Next.js für React: Ein großartiges Framework zum Kombinieren von serverseitigen Rendering-Funktionen und Anwendungen für einzelne Seiten
Die letzte Anwendung, die Sie erstellen können, sieht folgendermaßen aus:
Was lernst du?In diesem Beispielprojekt erfahren Sie, wie Sie mit Nuxt.js eine vollständige Website erstellen - von der Ersteinrichtung bis zur endgültigen Bereitstellung.
Es verwendet viele interessante Funktionen, die Nuxt bieten kann, wie z. B. Seiten und Komponenten sowie das Styling mit SCSS.
Technischer Stack und Features- Nuxt.js
- Komponenten und Seiten
- Storyblock-Modul
- Mixins
- Vuex für das State Management
- SCSS für das Styling
- Nuxt Middleware
Dies ist ein wirklich cooles Projekt , das viele großartige Funktionen von Nuxt.js enthält. Ich persönlich liebe es, mit Nuxt zu arbeiten, deshalb sollten Sie es ausprobieren, da Sie dadurch auch ein großartiger Vue-Entwickler werden.
Gatsby Blog
Gatsby ist ein großartiger statischer Site-Generator, der React und GraphQL verwendet. Dies ist das Ergebnis des Projekts:
Was lernst du?In diesem Handbuch erfahren Sie, wie Sie mit Gatsby ein Blog erstellen, in dem Sie mit React und GraphQL eigene Artikel schreiben.
Technischer Stack und Features- Gatsby
- Reagiere
- GraphQL
- Plugins und Themes
- MDX / Markdown
- Bootstrap CSS
- Muster
Wenn Sie schon immer ein Blog starten wollten, ist
dies ein großartiges Beispiel dafür, wie Sie es mit React und GraphQL erstellen.
Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby können Sie mit React Hochleistungsseiten erstellen - eine erstaunliche Kombination.
Gridsome Blog
Gridsome for Vue ... Nun, das hatten wir bereits mit Next / Nuxt.
Gleiches gilt jedoch für Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, Gridsome verwendet jedoch VueJS. Es ist auch ein großartiger statischer Site-Generator, mit dem Sie großartige Blogs erstellen können:
Was lernst du?In diesem Projekt erfahren Sie, wie Sie ein einfaches Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Außerdem wird erläutert, wie Sie die Anwendung über Netlify bereitstellen.
Technischer Stack und Features- Gridsome
- Vue
- GraphQL
- Abschlag
- Netlify
Dies ist natürlich nicht das umfassendste Tutorial, aber es behandelt die Grundkonzepte von Gridsome und
Markdown und kann ein guter Ausgangspunkt sein .
SoundCloud-ähnlicher Audio-Player mit Quasar
Quasar ist ein weiteres Vue-Framework, mit dem Sie mobile Apps erstellen können. In diesem Projekt erstellen Sie eine Audio-Player-Anwendung, zum Beispiel:
Was lernst du?Während sich andere Projekte hauptsächlich auf Webanwendungen konzentrieren, zeigt Ihnen dieses, wie Sie eine mobile Anwendung mit Vue und dem Quasar-Framework erstellen.
Cordova sollte bereits mit konfiguriertem Android Studio / Xcode ausgeführt werden. Wenn nicht, enthält das Handbuch einen Link zur Quasar-Website, auf der gezeigt wird, wie alles eingerichtet wird.
Technischer Stack und Features- Quasar
- Vue
- Cordova
- Wave Surfer
- UI-Komponenten
Ein kleines Projekt , das die Fähigkeiten von Quasar zum Erstellen mobiler Anwendungen demonstriert.
Lesen Sie auch den Blog
EDISON Unternehmen:
20 Bibliotheken für
spektakuläre iOS-Anwendung