So werden Sie 2020 ein Full-Stack-Webentwickler

Full-Stack-Webentwickler sind das Schweizer Taschenmesser der Code-Welt. Mit dieser Bezeichnung können Sie End-to-End-Lösungen erstellen, die ein sehr marktfähiges und agiles Know-how darstellen. Aber was braucht es eigentlich, um diesen Status zu erreichen?

Egal, ob Sie neu, erfahren oder auf ein Ende des Stapels spezialisiert sind, hier gibt es viel zu verdauen. Fühlen Sie sich frei, von oben einzutauchen oder dorthin zu springen, wo Sie die meiste Unterstützung benötigen.

  • Was macht einen Entwickler wirklich zum Full Stack?
  • Bevor wir eintauchen, lassen Sie uns über diesen Fokus sprechen
  • Wo fangen wir an?
  • Vorderes Ende
  • Backend
  • DevOps und die Cloud
  • Was ist mit Design?
  • Andere Dinge, wenn Sie gerade erst anfangen
  • Andere Dinge, wenn Sie mehr suchen

Was macht einen Entwickler wirklich zum Full Stack?

Es macht Spaß und ist lebhaft zu sagen, dass jeder Front-End-Entwickler ein Full-Stack-Entwickler ist. Wenn Sie jedoch eine Website für Netlify bereitstellen können, erhalten Sie keinen Full-Stack.

Dies soll nicht entmutigend sein - nur realistisch, nur diese Erfahrung wird dieser Berufsbezeichnung in Ihrem nächsten Interview nicht gut standhalten. Während Sie Ihre Arbeit technisch von Anfang bis Ende erstellen und bereitstellen, bieten Ihnen Netlify, Zeit und andere Anbieter die Möglichkeit, dies mit ihren magischen Tools zu tun, die den Großteil der Stapeloperationen aus der Gleichung herausnehmen.

Das soll nicht von dem abbringen, was wir alle jetzt als Front-End-Entwickler erreichen können. Die zunehmende Tendenz, statische Websites zu kompilieren und bereitzustellen, hat diesen Prozess in der späteren Hälfte des Stapels vereinfacht und bietet allgemeine Vorteile.

Dank der Flexibilität von Tool-Optionen wie der Ausführung von JS auf einem Server können unsere Skillsets außerdem auf mehr Anwendungsfälle als je zuvor übertragen werden.

Woher wir kamen

Die Webentwicklungslandschaft hat sich rasant verändert. Wordpress ist seit einiger Zeit König CMS und repräsentiert mehr als ein Drittel der Websites, die ein CMS verwenden, und hilft PHP, an Popularität zu gewinnen. Andere arbeiteten jedoch an selbst entwickelten Lösungen.

Diese stellten einen traditionelleren Webstapel wie LAMP dar. In diesen Fällen hatten Sie Webserver, auf denen normalerweise eine Art Content-Management-System und eine serverseitige Sprache (wie PHP) ausgeführt wurden, die mit den Datenbanken verbunden war und den Code erzeugte, der letztendlich an den Browser übermittelt wurde.

Darüber hinaus verfügt Javascript möglicherweise über einige interaktive Funktionen, bei denen CSS die Anzeige der Seite verwaltet. In einigen Fällen reicht ein verwalteter Wordpress-Server für bestimmte Webhosts aus. Bei anderen größeren Standorten müsste jedoch ein anderes Team diese Dienste und die Bereitstellungspipeline verwalten, um den Code für die Produktion bereitzustellen.

Wo wir sind und wohin wir gehen

Während Wordpress nirgendwo hinführt, bauen die Serverless- und JAMstack-Architekturen an Dynamik auf. Für Unbekannte ist die Idee nicht, dass es buchstäblich keine Server gibt, sondern es geht eher darum, Server zu verwenden, die für Sie in der Cloud verwaltet werden.

Mit Services wie AWS Lambda können Sie eine „Funktion“ erstellen, die einfache Ein- und Ausgaben verarbeitet. Wenn Sie dies an API Gateway anhängen, haben Sie sofort einen Endpunkt, mit dem Sie eine Schnittstelle herstellen können, ohne jemals einen Server verwalten zu müssen.

Mit anderen wie S3 können Sie HTML, CSS, JS, Bilder und andere statische Elemente in den Speicher kopieren und die Site direkt von dort aus bereitstellen. Auf dem Server wird nichts verarbeitet, Sie liefern lediglich die statischen Dateien an den Client.

Das Geniale daran ist, dass es viel weniger Overhead gibt und es in der Regel viel billiger ist. In vielen Fällen erhalten Sie auch eine enorme Leistungssteigerung, bei der das Bereitstellen einer Site von s3 weniger Verarbeitung erfordert, um die erste Antwort an den Browser zu erhalten, was direkt einer verbesserten Benutzererfahrung gleichkommt.

Dies soll Sie nicht zum JAMstack bringen, sondern zeigen, dass sich das Full-Stack-Paradigma ändert und es sich lohnt, es sich anzusehen. Es gibt immer noch ein traditionelles Gefühl für den Unterschied in der Arbeit, aber es wird ein bisschen anders.

DevOps-Teams verwalten jetzt Cloud-Ressourcen und stellen sie bereit. Backend-Entwickler erstellen jetzt APIs und Code, die mithilfe von Tools wie Lambda-Funktionen mit Diensten verbunden sind. Front-End-Entwickler arbeiten hauptsächlich mit der Erstellung von React- oder Vue-Apps in Javascript, die sich an die Dienste wenden, die Ihre Back-End-Entwickler erstellt haben. Möglicherweise beinhaltet dies Dinge wie CSS oder auch nicht, aber das ist eine weitere Dose Würmer darüber, unter welchen Titel „offiziell“ funktioniert (Spoiler: hängt vom Team ab).

Während es immer noch ein gespaltenes Gefühl für Pflichten gibt, verschwimmt die Linie und macht es einfacher, Ihren Fokus zu verbreiten.

Bevor wir eintauchen, lassen Sie uns über diesen Fokus sprechen

Es kann ziemlich verlockend sein, direkt in das gesamte Spektrum eines Full-Stack-Entwicklers einzutauchen und es abzudecken, aber es gibt etwas zu sagen über den Fokus. Dies ist die Grundlage für den Ausdruck „Alleskönner, Meister des Nichts“, bei dem Sie versuchen, ein wenig von jedem Teil des gesamten Stapels zu lernen und nie wirklich etwas zu meistern.

Dies kann gefährlich sein, wenn Sie zunächst versuchen, Ihre Stärken als neuer Entwickler auszubauen. Versuchen Sie also zu bewerten, welcher Lerntyp Sie sind, und konzentrieren Sie sich darauf, wo es darauf ankommt. Wenn Sie mit einem verteilten Lehrplan zu kämpfen haben, hilft Ihnen dies möglicherweise nicht unbedingt dabei, die Erfahrung zu sammeln, die Sie benötigen, um den ersten Job oder den Traumjob zu bekommen, nach dem Sie streben.

Ein neuartiger Ansatz könnte zum Beispiel darin bestehen, einen individuellen Fokus zu haben, aber die Full-Stack-Fähigkeiten um diese Stärke herum aufzubauen. Dies könnte ein Front-End-Entwickler sein, der seine eigenen Web-Apps bereitstellen und weiterhin auf diesem grundlegenden Wissen aufbauen kann.

Darüber hinaus kann ein Teil des Full-Stack-Entwicklers nicht unbedingt sagen, dass Sie die Sprachen x, y und z kennen. Das Verständnis von Code- und Software-Designkonzepten sowie die Fähigkeit, alle anstehenden Herausforderungen zu bewältigen, sind das, was einen großartigen Entwickler ausmacht.

Unter dem Strich versuchen Sie herauszufinden, was für Sie am besten ist, und lassen Sie sich nicht von Ihrem hohen Ehrgeiz daran hindern, Ihre Reise zu meistern.

Wo fangen wir an?

Für die Zwecke dieses Artikels werden wir uns an die traditionellen Haltepunkte halten, die den Stapel auflösen (Front-End, Back-End usw.). Obwohl einige Leute sagen, dass es nicht mehr wirklich eine Sache ist, gibt es realistisch gesehen Unmengen von Jobs für Full-Stack-Entwickler und sie beziehen sich Tag für Tag auf die traditionellen Haltepunkte. "Full Stack Developer" geht definitiv nirgendwo hin.

Was den Stack angeht, werden wir uns auf die Serverless / JAMstack-Architekturen stützen, da diese einfach weiter wachsen werden. Und wenn Sie sie lernen, werden Sie nur mit der Anzahl der Jobs, die in der Umgebung auftauchen, marktfähiger.

Wie Sie weiter unten sehen werden, umfasst dies nicht alle Arten von Datenbanken und jede Art von Rendering-Lösung. Ein starker Entwickler sollte in der Lage sein, flexibel mit seinen Werkzeugen umzugehen, die Konzepte seiner Arbeit zu verstehen, anstatt zielstrebig zu sein und nur in einem Rahmen produktiv zu sein.

Während Sie möglicherweise in React arbeiten und sich in Ihrem aktuellen Job damit wohl fühlen (das ist in Ordnung!), Könnte Ihr nächster Job Vue oder "Überraschung" schwer machen! Ihr Teamleiter möchte die App in Svelte neu schreiben. Versuchen Sie zu verstehen, warum Sie überhaupt ein UI-Framework verwenden und wie es Ihnen bei der Lösung des vorliegenden Problems hilft.

Jetzt lasst uns loslegen ...

Vorderes Ende

Das Front-End einer Website oder Anwendung ist normalerweise die Benutzeroberfläche, mit der die Person, die Ihren Dienst nutzt, interagiert. Der größte Sprachspieler im Spiel ist Javascript, bei dem Sie sich normalerweise auf UI-Bibliotheken wie React oder Vue stützen, um die Komponenten Ihres Projekts zu verwalten.

Mit diesen UI-Frameworks können Sie „Komponenten“ erstellen, im Wesentlichen Codeblöcke, die am Ende HTML erzeugen und Interaktionen und dynamische Zustände direkt mit Ihrem Code erstellen können. Dies wird wirklich mächtig, und obwohl es vielleicht eine kleine Kurve gibt, um zu beginnen, wird es ziemlich angenehm, damit zu arbeiten, sobald Sie den Dreh raus haben.

Unabhängig davon, ob Sie neu auf dem Gebiet oder erfahren sind, werden Sie möglicherweise auf jQuery stoßen. Obwohl es seine Vorzüge hat und der Community gute Dienste geleistet hat, sind die nativen Funktionen von Javascript wirklich gewachsen und haben weniger Nachfrage nach den Funktionen erzeugt, die jQuery bereitstellen konnte. Jetzt stützen sich Entwickler stattdessen auf die UI-Frameworks und das native Javascript.

Es ist also gut zu verstehen, was jQuery ist, aber ich empfehle nicht, sich an dieser Stelle die Zeit zu nehmen, um es zu lernen. Das Gute ist, wenn Sie einen Job bekommen, der ihn verwendet, können Sie direkt zusammen mit jQuery natives Javascript schreiben. Das Erlernen von Vanille-Javascript selbst ist also die richtige Antwort.

Was soll ich also lernen?

Wenn Sie wirklich ein Anfänger sind, nehmen Sie sich Zeit, um grundlegendes HTML und CSS zu lernen. Es mag nicht so unterhaltsam und attraktiv sein, wie sich direkt mit Javascript zu beschäftigen, aber auf den Grundlagen dessen aufzubauen, was das Web ausmacht, wird der Schlüssel sein, um auf dem richtigen Fuß zu beginnen.

Als nächstes lernen Sie Javascript. Es wird auf absehbare Zeit König bleiben. Javascript bildet die Grundlage für jedes Framework oder jede Bibliothek, auf der Sie aufbauen. Wenn Sie also verstehen, wie die Teile der Sprache selbst funktionieren, können Sie sich auf Ihrem Weg zum Erlernen der Front-End-Seite der Dinge weiterentwickeln.

Dies erleichtert Ihnen auch das Leben, wenn Sie versuchen, die Komplexität verschiedener Muster und die Konzepte hinter den von Ihnen verwendeten Frameworks zu verstehen.

In Bezug auf Frameworks sind React und Vue aufgrund ihrer Beliebtheit wahrscheinlich die besten Kandidaten. React ist das beliebteste Produkt und wird einfach weiter wachsen. Das Team arbeitet ständig daran, das Framework zu entwickeln und APIs zu erstellen, mit denen moderne, schnelle Web-Apps erstellt werden können.

Wenn Sie mit Create React App oder Gatsby beginnen, können Sie sogar ganz einfach eine React App starten und sofort an eine Position gelangen, an der Sie im Code herumbasteln können.

Während es Vorteile bringen würde, CSS-Präprozessoren und -Tools wie Sass aufzurufen, gibt es jetzt eine Menge Lösungen für CSS, einschließlich CSS-in-JS.

Obwohl das Einfügen von CSS in JS einige Vor- und Nachteile hat, lohnt es sich nicht unbedingt, darauf hinzuweisen, was als bestimmte Richtung zu verwenden ist, da es wirklich teamabhängig sein wird.

Wenn Sie die Grundlagen und Funktionen von CSS kennen und wissen, wie Sie es in Vanilleform verwenden, können Sie sich unabhängig vom Framework auf die Verwendung vorbereiten.

Ressourcen

  • freecodecamp.org Responsive Web Design-Zertifizierung //www.freecodecamp.org/learn
  • „Javascript ablegen: Zuerst HTML und CSS lernen“ //www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/
  • MDN-Einführung in Javascript //developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • Nur Javascript E-Mail-Kurs //justjavascript.com/
  • JSRobot-Lernspiel //lab.reaal.me/jsrobot/
  • reactjs.org Einführung in React //reactjs.org/tutorial/tutorial.html
  • gatsbyjs.org Tutorials //www.gatsbyjs.org/tutorial/

Backend

In der JAMstack-Welt bezieht sich das Back-End im Allgemeinen auf die APIs, mit denen unser Front-End dynamische Interaktionen durch Interaktion mit Endpunkten des Clients erstellt (wie in CRUD-APIs). Wenn Sie diese Anforderungen vom Client stellen können, müssen Sie diese Verarbeitung nicht mehr ausführen, bevor die Seite an den Browser gesendet wird.

Obwohl Sie nicht das Gefühl haben sollten, immer nur in einer Sprache codieren zu können, bietet die Möglichkeit, in Javascript zu schreiben, hier einen schönen Vorteil, da Sie in die Grundlagen der Arbeit mit dem Back-End von Dingen mit einer vertrauten Sprache (oder) einsteigen können umgekehrt mit dem Frontend).

NodeJS ist eine gängige Laufzeit, die Sie in den meisten Cloud-Umgebungen als Option finden und die Ihnen eine ähnliche Erfahrung bietet, wie Sie es von einem Browser erwarten würden. Der Hauptunterschied besteht darin, dass Sie weder Zugriff auf bestimmte Browser-APIs haben noch ein windowObjekt und die damit verbundenen APIs vorhanden sind.

Allerdings ist Python auch eine andere beliebte Sprache und wächst, insbesondere aufgrund seiner Beliebtheit in der Data Science- und Engineering-Community. PHP und Ruby sind zwar gültig und bieten Ihnen Optionen auf dem Arbeitsmarkt, scheinen jedoch nicht so beliebt und insgesamt nicht so stark im Aufwärtstrend zu sein wie Javascript und Python.

Mit der Sprache Ihrer Wahl lernen Sie am besten, wie Sie Cloud-Dienste erstellen, mit denen Ihre Anwendungen eine Schnittstelle herstellen können.

Wenn Sie ein einfaches Lambda erstellen, mit dem Sie herumspielen können, egal ob in AWS, Netlify oder einem anderen Cloud-Anbieter, erhalten Sie eine gute Erfahrung darüber, was Sie bei der Arbeit vor Ort erwarten können.

Und selbst wenn Sie sich in dem Job, den Sie finden, möglicherweise nicht direkt in einem Lambda entwickeln, können Sie sich mit Konzepten vertraut machen, die für die Arbeit mit dem Backend von grundlegender Bedeutung sind. Letztendlich werden Sie diese Funktionen verwenden, um eine Verbindung mit anderen Diensten und Datenbanken herzustellen und Ihre eigenen dynamischen Dienste zu erstellen.

Was soll ich also lernen?

Wenn Sie bereits daran arbeiten, Javascript vom Frontend aus zu lernen, verwenden Sie weiterhin Javascript für Ihr Backend. Starten Sie ein Lambda mit Netlify-Funktionen, bei denen Sie sich nur auf den Code konzentrieren müssen und Netlify sich um den Rest kümmert (z. B. um Ihre Funktion tatsächlich zu erstellen und bereitzustellen).

Versuchen Sie mit der Sprache Ihrer Wahl und der ersten Funktion, mit anderen Diensten in Ihrem Code zu arbeiten, um Erfahrungen mit APIs von Drittanbietern zu sammeln.

Erstellen Sie möglicherweise einen Endpunkt, der mithilfe der Twitter-API einen Tweet senden kann (aber missbrauchen Sie ihn nicht). Erfahren Sie, wie Sie eine Datenbank erstellen und Ihre Funktion so einrichten, dass sie in einem CRUD-Muster mit ihr verbunden ist. Dadurch erhalten Sie einen realistischeren Anwendungsfall für die Interaktion einer typischen App mit einem Backend.

Ihr Ziel hierbei sollte es sein, Dienste zu erstellen, mit denen Ihr Front-End über einen Endpunkt interagiert, um Vorgänge für die Person auszuführen, die Ihre App verwendet. Die gute Nachricht erhält den Schwung der Cloud. Sie haben eine Menge Optionen und kostenlose Optionen oder Ebenen, mit denen Sie herumspielen können.

Ressourcen

  • "Super einfacher Start zu Serverless" //kentcdodds.com/blog/super-simple-start-to-serverless
  • „Erstellen serverloser CRUD-Apps mit Netlify-Funktionen und FaunaDB“ //www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/

DevOps und die Cloud

DevOps ergibt sich aus der Notwendigkeit, Lösungen erstellen zu können, die den Prozess des Abrufs von Code von den Personen, die ihn in einen bereitgestellten Zustand schreiben, glätten und beschleunigen.

Diese Arbeit kann von vielen Aufgaben bis zu einigen reichen, unabhängig davon, ob Bash-Skripte für eine benutzerdefinierte Lösung oder eine CloudFormation-Vorlage geschrieben werden, die alle Ressourcen erstellt, die für die Ausführung einer App erforderlich sind.

Dies ist normalerweise Teil einer größeren Orchestrierung von CI / CD-Workflows, die den Erstellungs- und Bereitstellungsprozess automatisieren.

Und das ändert sich ständig! Angesichts des Serverlosen-Booms tauchte das Serverless-Framework auf, das vieles für Sie einfacher verwaltet und AWS sogar dazu veranlasste, eine eigene SAM-Lösung zu erstellen. Tools wie Jenkins gibt es schon seit einiger Zeit für den CI / CD-Teil, aber jetzt bieten Github, Gitlab und andere Anbieter von Quellcodeverwaltung ihre eigenen Lösungen und Tools wie CircleCI an, die sich direkt in Ihr Projekt einfügen.

Es ist auch noch nicht perfekt - das Schreiben von CloudFormation-Vorlagen ist entmutigend. Das Schreiben von Automatisierungsskripten macht auch nicht viel Spaß, obwohl es sehr lohnend ist, wenn es funktioniert!

Aber dies wird immer besser. Hier passen Produkte wie Netlify und Zeit ins Spiel. Während sie eher auf der statischen Hosting-Seite basieren, wo Sie Ihre App kompilieren und in den Speicher ablegen, wachsen ihre Angebote, wie die Funktionen von Netlify wirklich nur AWS Lambdas, die einfacher einzurichten und auf einem voll funktionsfähigen Endpunkt bereitzustellen sind (es ist wirklich super einfach).

Was soll ich also lernen?

Wenn Sie diese Art von Dingen zum ersten Mal einrichten, beginnen Sie mit Netlify. Richten Sie eine React-App oder auch nur eine einfache HTML-Datei in einem Github-Repository ein, verbinden Sie sie mit einem neuen Netlify-Konto und beobachten Sie die Bereitstellung.

Von dort aus oder wenn Sie bereits ein wenig Erfahrung haben, werden Sie neugierig, was sich hinter den Kulissen abspielt. Netlify nimmt wahrscheinlich Ihren Code, führt die von Ihnen eingerichteten Befehle (wie yarn build) in einer virtuellen Umgebung aus, speichert die im Speicher integrierten Dateien wie S3 und legt ein CDN wie CloudFront davor, um von einem Endpunkt aus zu dienen.

Versuchen Sie dies zunächst manuell von Ihrem Computer aus mithilfe der AWS-Konsole und ihrer CLI. Schreiben Sie dann ein Skript, um den gesamten Prozess zu automatisieren, der in Circle CI in Ihr Github-Projekt integriert wird, anstatt Netlify, um es tatsächlich für AWS bereitzustellen.

Wenn Sie dies in den Griff bekommen, müssen Sie Dienste hochfahren, mit denen Ihr Back-End möglicherweise verbunden ist. Haben Sie eine Datenbank, die Ihre Dienste verwenden? Sie können das Hochfahren dieser Datenbank mithilfe von CloudFormation- oder Bash-Skripten automatisieren.

Wenn Sie Ihre Infrastruktur als Code mit verfügbaren, leicht wiederherstellbaren Ressourcen behandeln, werden Sie und Ihre Projekte flexibler und können im Fehlerfall besser hochfahren.

Und das alles gilt für jeden Cloud- oder CI / CD-Anbieter, nicht nur für AWS und Circle CI. Wählen Sie Ihr bevorzugtes Cloud- und Workflow-Tool aus und führen Sie es aus. Der Punkt ist, beginnen Sie, die Anforderungen Ihres Projekts zu untersuchen und zu untersuchen, was tatsächlich in den automatisierten Teilen des Stapels passiert. Dies wird Ihnen helfen, mehr zu lernen und einfallsreicher für die Anforderungen Ihres Projekts zu werden.

Ressourcen

  • "Eine Schritt-für-Schritt-Anleitung: Bereitstellung auf Netlify" //www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
  • "Einrichten einer statischen Website" //docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
  • "AWS Certified Cloud Practitioner Training 2019 - Ein kostenloser 4-stündiger Videokurs" //www.freecodecamp.org/news/aws-certified-cloud-practitioner-training-2019-free-video-course/
  • Siehe Javascript-Ressourcen im Frontend oben

Was ist mit Design?

Ja, Sie sollten die Designgrundlagen verstehen. Nein, Sie müssen kein Designer sein.

Es gibt viele Aspekte des Designs, die Ihre Fähigkeiten als Entwickler beschleunigen. Obwohl wir alle wissen, dass die visuellen und UX-Designer Magie erzeugen, kann ein grundlegendes Verständnis verhindern, dass Ihre Anwendung zu einer großen Enttäuschung wird.

Jeder im Entwicklungsprozess arbeitet auf ein Ziel hin, das einen Endbenutzer auf die eine oder andere Weise beeinflusst. Wenn Sie verstehen, welche Anforderungen Ihre Arbeit zu lösen versucht und wie sich dies auf die Benutzer auswirkt, kann das gesamte Team eine umfassendere Endlösung entwickeln.

Stellen Sie sich einen Back-End-Entwickler vor, der eine API erstellt, damit jemand Benutzer in einer App verwalten kann. Die Anforderungen der API sind ziemlich schlank und enthalten nur den Namen des Benutzers. Es ist für die meisten möglicherweise nicht die intuitivste Lösung, dies als einzelnes "Name" -Feld anstelle von "first" und "last" bereitzustellen. Es könnte jedoch ein Versehen sein, das die Darstellung des Front-End-Entwicklers in der Benutzeroberfläche erschwert, was die Anzeige für den Entwickler schwierig oder für den Endbenutzer verwirrend machen würde.

Darüber hinaus kann sich das Design direkt auf die Konvertierung auswirken. Wenn Sie im E-Commerce-Bereich arbeiten, kann eine Schaltfläche, die nicht wie eine Schaltfläche aussieht, verhindern, dass Personen ein Produkt in ihren Warenkorb legen. Dies verhindert natürlich einen Kauf, bei dem Einnahmen verloren gehen. Wenn Sie verstehen, wie Sie die Benutzeroberfläche auch nur in einem grundlegenden Sinne humanisieren können, können Sie mit Ihrem Projekt buchstäblich mehr Geld verdienen oder einfach jemandem helfen, es einfacher zu verwenden.

Und was noch wichtiger ist, Sie möchten, dass Ihre Website zugänglich ist. Viele Menschen haben unterschiedliche Bedürfnisse, unabhängig davon, ob sie nicht die gleichen Farben sehen oder die von Ihrer App erzeugten Geräusche nicht hören können. Sie möchten die Bedürfnisse anderer erkennen und versuchen, das Design so zu gestalten, dass Ihre App für alle nutzbar ist.

Was soll ich also lernen?

Ich erwarte zwar nicht, dass Sie einen ganzen Kurs dafür belegen, aber versuchen Sie, aufmerksam und neugierig zu sein. Und vielleicht überspringen Sie beim nächsten Mal nicht den Designartikel, den Sie auf dem freeCodeCamp-Twitter gesehen haben.

Stellen Sie sich beim Erstellen von Lösungen vor, wie Ihre Arbeit verwendet wird. Was benötigen die anderen Entwickler in Ihrem Team von Ihrer API? Was benötigen die Benutzer Ihrer App von Ihrer Benutzeroberfläche?

Sie können auch versuchen, sich von dem inspirieren zu lassen, was andere in Ihrem Raum tun. Wie würde eine App aussehen, wenn sie ähnliche Funktionen bereitstellt? Dies ist keine Lizenz zum Kopieren oder Stehlen, aber Sie sollten verstehen, welche Anforderungen die Lösung löst. Überlegen Sie, warum die Schaltfläche "In den Warenkorb" so groß ist, warum Benutzer ein Produktfoto vergrößern können oder wie Sie ein Tischdesign etwas benutzerfreundlicher gestalten können.

Versuchen Sie, die Grundlagen der Barrierefreiheit zu erlernen. Es stehen immer mehr Ressourcen zur Verfügung, um die Bedürfnisse anderer zu verstehen. Versuchen Sie zu verstehen, welche Behinderungen es gibt und wie sie sich auf die Nutzung Ihrer App auswirken können. Schauen Sie sich vielleicht ein paar gängige Muster an, wie Sie diese Bedenken angehen können.

Meistens ist es nicht allzu schwer zu integrieren, und wenn Sie es sich von Anfang an zur Gewohnheit machen, werden Sie beim nächsten Erstellen einer App nicht einmal darüber nachdenken.

Ressourcen

  • Design für Entwickler //thoughtbot.com/upcase/design-for-developers
  • Hack Design //hackdesign.org
  • Design für Hacker //designforhackers.com/
  • Einführung in die Barrierefreiheit im Internet //webaim.org/intro/

Andere Dinge, wenn Sie gerade erst anfangen

In vielen Artikeln dieses Artikels wird davon ausgegangen, dass Sie einige der Grundlagen kennen, z. B. das Verstehen von Git und Quellcodeverwaltung oder einfach das Einrichten Ihres Code-Editors. Wenn Sie wirklich gerade erst anfangen, möchten Sie zumindest ein einfaches Verständnis dieser Konzepte haben, da sie ohne sie schnell schwieriger werden.

Es gibt auch etwas zu sagen über das Erlernen der Verwendung Ihres Terminals. Es kann überwältigend sein, keine GUI zu verwenden, wenn Sie neu sind, aber sobald Sie sich bewegen, werden Sie schnell feststellen, dass Sie durch die Verwendung eines Terminals produktiver sind und viele Projekte ohnehin die Verwendung von Terminals erfordern.

Was soll ich also lernen?

Richten Sie zuerst Ihren Code-Editor ein. Visual Studio Code liegt derzeit voll im Trend, aber es gibt andere, die Ihnen je nach Ihren Vorlieben wie Atom oder Sublime Text gute Dienste leisten. Sie finden sogar Cloud-basierte IDEs wie Repl.it oder Sie können einfach mit einer niedrigeren Eintrittsbarriere beginnen, indem Sie in CodePen oder JSFiddle herumspielen.

In jedem Fall möchten Sie, sobald Sie bereit sind, die Codierung zu erhalten, verstehen, was Quellcodeverwaltung ist, bei der Git derzeit der größte Player ist. Git ist ein leistungsstarkes Tool, mit dem Sie Änderungen am Code verfolgen und in Zusammenarbeit mit anderen Entwicklern produktiver arbeiten können.

Sie sollten sich mit einigen grundlegenden Befehlen von git vertraut machen, z. B. dem Hinzufügen neuer Änderungen sowie den Zweigen und deren Verwendung. Git ist eine riesige Welt, Sie müssen sie nicht sofort beherrschen, Sie werden schnell lernen, dass es auf Ihrem Weg zur Beherrschung Ihres Git Fu unendlich viele neue Dinge zu lernen gibt.

Für viele Tools, die Sie verwenden, gibt es GUIs wie GitKraken, aber Sie werden immer noch ein wenig eingeschränkt sein, was Sie tun können. Wenn Sie sich mit den Standardterminals auf Ihrem Computer vertraut machen oder andere Optionen wie iterm2 (meine Präferenz) oder Xterm.js herunterladen, ist dies die beste Wahl. Bonus: Sie werden sich jedes Mal wie ein Filmhacker fühlen, wenn Sie ihn verwenden (oder bin das nur ich?).

Ressourcen

  • Erste Schritte mit Visual Studio Code //www.codecademy.com/articles/visual-studio-code
  • Git-Ressourcen von Github //try.github.io/
  • Lerne Git, indem du das Spiel //learngitbranching.js.org/ verzweigst.
  • Einführung in die Mac-Befehlszeile //blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line

Andere Dinge, wenn Sie mehr suchen

Es gibt so viel mehr, mit dem man schnell ein Kaninchenloch hinuntergehen kann. Denken Sie daran, Ihren Fokus nicht zu verbreiten und sich nicht zu überwältigen. Aber wenn Sie sich ziemlich gut fühlen, wo Sie sind, gibt es einige andere Konzepte, die nur helfen, wenn Sie Herausforderungen in der realen Welt angehen.

Testen und die verschiedenen Methoden

Das Schreiben von Code ist eine Sache, aber die Möglichkeit, effektive Tests einzurichten, hilft dabei, Ihren Code zu härten und zu verhindern, dass Fehler auftreten. Sie möchten Ihre zukünftige Zeit nicht verschwenden oder Ihr Produkt Geld kosten, wenn die Website ausfällt. Das Erlernen des Schreibens von Tests und der verschiedenen Ansätze ist wichtig, um Ihren Code zu festigen.

Browser-Tools wie Chrome DevTools

Eines der leistungsfähigsten Tools, die Sie beim Debuggen haben können, ist meiner Meinung nach das Debuggen Ihrer Anwendung im Browser.

Egal, ob Sie sich ansehen, wie das DOM gerendert wird, mit dem CSS spielen oder Ihre Netzwerkanforderungen debuggen, Sie werden schnell lernen, wie Sie Zeit sparen und leichter erkennen können, woher der Fehler kommt.

HTTP und Debuggen von Anforderungen im Netzwerkfenster

Da das Web auf dem Internet basiert, stellt Ihre Anwendung letztendlich Anforderungen an andere Server. In diesem Fall können Sie anhand des Verständnisses der Anforderungs-Chokepoints oder der Art und Weise, wie eine Anforderung gestellt wird, besser verstehen, warum Ihre Anwendung verzögert erscheint oder warum die Schaltfläche zum Speichern nicht funktioniert.

Ein grundlegendes Verständnis der Funktionsweise von Anforderungen und ihrer Visualisierung für das Debuggen ist ein wichtiger Schritt auf Ihrem Weg.

Open Source Software und Paketmanager

Dies ist nicht so sehr eine Fähigkeit oder ein Werkzeug, um so viel zu lernen, wie es eine Art und Weise ist, wie Software verteilt wird. Wenn Sie mit der Erstellung von Codelösungen beginnen, werden Sie feststellen, dass sich viele von uns auf Open Source-Pakete stützen. Meistens ist es bis npm, wenn Sie Javascript schreiben, was uns hilft, produktiver zu werden, ohne das Rad jedes Mal neu erfinden zu müssen.

Nehmen Sie sich etwas Zeit, um das Open-Source-Konzept zu verstehen, und überlegen Sie sogar, etwas zurückzugeben, indem Sie zu Ihrem Lieblingsprojekt beitragen. Das Ausleihen einer Hand wird normalerweise sehr geschätzt, hilft Ihnen dabei, Erfahrungen zu sammeln, und Sie können möglicherweise sogar bei Ihrer ersten genehmigten Pull-Anfrage einen kostenlosen Swag erzielen! Sei einfach respektvoll da draußen, es gibt auch eine echte Person auf der anderen Seite der Anfrage.

Was sonst?

Diese Liste kann für immer weitergehen, da die Welt des Codierens so viel zu bieten hat. Was ist Ihrer Meinung nach noch wichtig auf dem Weg zum Entwicklungsmeister? Schicken Sie mir einen Tweet oder DM, wenn Sie denken, dass mir etwas Wichtiges fehlt!

Du brennst! Alles zusammenziehen

Angesichts all der Erfahrungen, die Sie mit den oben genannten Informationen gesammelt haben, sollten Sie in der Lage sein, eine gesamte App von Anfang bis Ende selbst zu erstellen. Verstehst du die Macht, die du hast?

Hier beginnt der Spaß. Versuchen Sie, eine neue App zu erstellen - egal was es ist, erstellen Sie einfach etwas. Das Beste, was Sie zum Lernen tun können, ist, auf diese Weise Erfahrungen zu sammeln. Es spielt keine Rolle, ob es sich um eines der Millionen Aufgaben-Tutorials handelt, die Sie finden, oder ob Sie sich das Codieren beibringen, indem Sie eines der größten sozialen Netzwerke wie den Schöpfer von Instagram aufbauen.

Von hier aus sollten Sie in der Lage sein:

  • Ein Web-App-Frontend, das im Browser ausgeführt wird
  • Backend-Dienste, an die Ihre Web-App über Endpunkte Anforderungen stellen kann
  • Schreiben Sie ein Skript zum Einstecken in ein CI / CD-Tool, um Ihren Erstellungs- und Bereitstellungsprozess zu automatisieren
  • Bonus: Treffen Sie gute Entscheidungen darüber, wie Ihre Benutzeroberfläche aussieht, damit die Benutzer sie tatsächlich verwenden können!

Geh hinaus und baue! Teilen Sie uns Ihre Entwicklungsreise auf Twitter mit dem Hashtag #codejourney. Wir würden gerne mehr darüber erfahren, wo Sie waren und was Sie gebaut haben oder wohin Sie gehen und was Sie bauen möchten.

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an