Einführung
Egal, ob Sie neu in der Programmierung sind oder bereits ein erfahrener Entwickler, in dieser Branche ist es unerlässlich, neue Konzepte sowie Programmiersprachen und Frameworks zu lernen, um mit den Trends Schritt zu halten.
Nehmen wir zum Beispiel React — dessen Code Facebook vor nur vier Jahren veröffentlicht hat, es ist bereits die erste Wahl für JavaScript-Entwickler weltweit geworden.
Vue und Angular haben natürlich auch ihre treue Anhängerschaft. Dann gibt es noch Svelte und andere universelle Frameworks wie Next.js oder Nuxt.js. Und 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 haben — zusätzlich zur Arbeit mit dem bewährten alten JS.
Um Ihnen dabei zu helfen, im Jahr 2020 ein Meister im Frontend zu werden, habe ich neun verschiedene Projekte zusammengestellt, die sich auf unterschiedliche JavaScript-Frameworks und -Bibliotheken als Technologiestack konzentrieren, die Sie erstellen und Ihrem Portfolio hinzufügen können. Denken Sie daran, dass nichts mehr hilft, als Dinge praktisch zu erstellen. Also legen Sie los, schalten Sie Ihren Kopf ein und machen Sie es möglich.
Der Artikel wurde mit Unterstützung von EDISON Software übersetzt, einem Unternehmen, das , sowie .
Filmsuche-App mit React (mit Hooks)
Ein guter Einstieg wäre die Erstellung einer Filmsuche-App mit React. Unten sehen Sie, wie die endgültige App aussehen wird:
Was Sie lernen werden
Durch die Erstellung dieser App verbessern Sie Ihre React-Fähigkeiten mit dem relativ neuen Hooks-API. Im Projektbeispiel werden React-Komponenten, zahlreiche Hooks, eine externe API und natürlich einige CSS-Stile verwendet.
Technologischer Stack und Funktionen
- React mit Hooks
- create-react-app
- JSX
- CSS
Ohne Verwendung von Klassen bieten Ihnen diese Projekte einen perfekten Einstieg in funktionales React und werden Ihnen definitiv im Jahr 2020 helfen. Sie können hier ein . Folgen Sie den Anweisungen oder gestalten Sie alles nach Ihrem eigenen Geschmack.
Chat-Anwendung mit Vue
Ein weiteres großartiges Projekt für Sie – erstellen Sie eine Chat-Anwendung mit meiner Lieblings-JavaScript-Bibliothek: VueJS. Die Anwendung wird ungefähr so aussehen:
Was Sie lernen werden
In diesem Leitfaden lernen Sie, wie Sie eine Vue-Anwendung von Grund auf neu erstellen – Komponenten erstellen, Zustände verwalten, Routen erstellen, sich mit Drittanbieterdiensten verbinden und sogar die Authentifizierung abwickeln.
Technologischer Stack und Funktionen
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Dies ist ein wirklich großartiges Projekt, um mit Vue zu beginnen oder Ihre bestehenden Fähigkeiten zu verbessern, um 2020 in die Entwicklung einzusteigen. Sie können das .
Schöne Wetteranwendung mit Angular 8
Dieses Beispiel hilft Ihnen, eine schöne Wetteranwendung mit Angular 8 zu erstellen:
Was Sie lernen werden
Dieses Projekt wird Ihnen wertvolle Fähigkeiten beim Erstellen von Anwendungen von Grund auf vermitteln – vom Design bis zur Entwicklung, bis hin zur einsatzbereiten Anwendung.
Technologischer Stack und Funktionen
- Angular 8
- Firebase
- Server-Side Rendering
- CSS mit Grid und Flexbox
- Mobilfreundlich und responsiv
- Dunkelmodus
- Schönes Interface
Was mir an diesem umfassenden Projekt wirklich sehr gefällt, ist, dass Sie die Dinge nicht isoliert lernen. Stattdessen lernen Sie den gesamten Entwicklungsprozess – von der Planung bis zur endgültigen Bereitstellung.
To-Do-Anwendung mit Svelte
Svelte ist wie das neue Kind im komponentenbasierten Ansatz – zumindest ähnlich wie React, Vue und Angular. Und es ist eines der heißesten neuen Tools des Jahres 2020.
To-Do-Anwendungen sind vielleicht nicht das spannendste Thema, aber sie helfen Ihnen wirklich, 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, Stile und Ereignis-Handler verwenden.
Technologischer Stack und Funktionen
- Svelte 3
- Komponenten
- Stilgestaltung mit CSS
- ES6-Syntax
Es gibt nicht viele gute Starter-Projekte für Svelte, also habe ich .
Приложение для электронной коммерции с помощью Next.js
Next.js ist das beliebteste Framework zum Erstellen von React-Anwendungen, das serverseitiges Rendering sofort unterstützt.
Dieses Projekt zeigt Ihnen, wie Sie eine Anwendung für den E-Commerce erstellen, die folgendermaßen aussieht:
Was Sie lernen werden
In diesem Projekt lernen Sie, wie man mit Next.js entwickelt – neue Seiten und Komponenten erstellt, Daten abruft sowie eine Next-Anwendung gestaltet und bereitstellt.
Technologischer Stack und Funktionen
- Next.js
- Komponenten und Seiten
- Datenauswahl
- Styling
- Projekteinführung
- SSR und SPA
Es ist immer toll, ein reales 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 Äquivalent zu Next.js für React: ein großartiges Framework, um die Möglichkeiten von serverseitigem Rendering und Single-Page-Anwendungen zu kombinieren.
Die letzte Anwendung, die Sie erstellen können, wird so aussehen:
Was Sie lernen werden
In diesem Projektbeispiel erfahren Sie, wie Sie eine vollständige Website mit Nuxt.js erstellen – von der anfänglichen Einrichtung bis zur endgültigen Bereitstellung.
Es nutzt viele interessante Funktionen, die Nuxt zu bieten hat, wie Seiten und Komponenten sowie Styling mit SCSS.
Technologischer Stack und Funktionen
- Nuxt.js
- Komponenten und Seiten
- Storyblock-Modul
- Mixins
- Vuex zur Verwaltung des Zustands
- SCSS zum Styling
- Nuxt-Middleware
, der viele großartige Funktionen von Nuxt.js enthält. Ich arbeite persönlich gerne mit Nuxt, also sollten Sie es ausprobieren, denn das wird Sie auch zu einem großartigen Vue-Entwickler machen.
Blog mit Gatsby
Gatsby ist ein hervorragender Generator für statische Websites, der React und GraphQL nutzt. 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 Ihre eigenen Artikel nutzen können, unter Verwendung von React und GraphQL.
Technologischer Stack und Funktionen
- Gatsby
- React
- GraphQL
- Plugins und Themen
- MDX/Markdown
- Bootstrap CSS
- Vorlagen
Wenn Sie jemals einen Blog starten wollten, dafür, wie Sie es mit React und GraphQL umsetzen können.
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 schon mit Next/Nuxt.
Aber das Gleiche gilt für Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, aber Gridsome nutzt VueJS. Das ist ebenfalls ein großartiger Generator für statische Websites, der Ihnen hilft, hervorragende Blogs zu erstellen:
Was Sie lernen werden
Dieses Projekt zeigt Ihnen, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Es wird auch erläutert, wie man die Anwendung über Netlify bereitstellt.
Technologischer Stack und Funktionen
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Das ist zwar nicht das umfassendste Tutorial, aber es deckt die grundlegenden Konzepte von Gridsome und .
Ein Audio-Player, ähnlich wie SoundCloud, mit Quasar.
Quasar ist ein weiterer Vue-Framework, der zur Erstellung von mobilen Anwendungen verwendet werden kann. In diesem Projekt erstellen Sie eine Audio-Player-App, wie z.B.:
Was Sie lernen werden
Während sich andere Projekte hauptsächlich auf Webanwendungen konzentrieren, zeigt dieses, wie man eine mobile Anwendung mit Vue und dem Quasar-Framework erstellt.
Sie sollten bereits über eine funktionierende Cordova mit installiertem Android Studio/Xcode verfügen. Wenn nicht, gibt es im Handbuch einen Link zur Quasar-Website, auf der gezeigt wird, wie alles eingerichtet wird.
Technologischer Stack und Funktionen
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI-Komponenten
das die Möglichkeiten von Quasar zur Erstellung mobiler Anwendungen demonstriert.
Quelle: habr.com
