Bester Einstieg in die Webentwicklung?

[Moe117]

Hallo Zusammen,

ich würde gerne eine kleine Webseite entwerfen mit der ich meine Bücher verwalten kann (mehr dazu siehe weiter unten). Das ganze Projekt soll eigentlich nur dazu dienen, dass ich etwas mehr über die Webentwicklung lerne und praktische Erfahrungen sammle.

Zu meiner Person:
ich arbeite seit 11 Jahre hauptberuflich als Embedded-Softwareentwickler, also programmieren ist mir jetzt nicht völlig fremd. Aber mal ehrlich... Embedded Programmierung und Webentwicklung sind doch zwei völlig verschiedene paar Schuhe ;-)
Ich habe früher etwas SQL programmiert, sowohl auf der Berufsschule als auch an der Uni.

Zum Hobby-Projekt:
Die Webseite soll die Bücher für verschiedenen Benutzer verwalten. Also ein Benutzer soll sich einloggen, neue Bücher anlegen, Bücher löschen oder sich einfach seine bisherigen Bücher angucken können (ohne Filterfunktion). Die Webseite sollte optisch modern sein und was hergeben. Also sie soll nicht wie eine stink normale HTML-Webseite aus den 90er aussehen ;-)

Meine Fragen:
1) Ich habe nach Schlagwörtern gesucht um das o.g. Projekt anzugehen und habe folgendes gefunden. Befinde ich mich damit auf dem richtigen Weg?

• Angular (Frontend)
• PrimeNG (Frontend)
• C#-Programmierung (Backend)
• ASP.NET (Backend)
• Azure Cloud (DB Hosting)
• MariaDB und MySQL (Datenbank)

2) Ist das Projekt zu ambitioniert für den Anfang?

3) Ich bin noch etwas überfordert damit den "Startpunkt" zu finden: Wie soll ich beginnen, was ist eure Empfehlung?


Falls ihr noch andere Schlagwörter habt, denen ich nachgehen sollte dann immer her damit!

Danke im Voraus für eure Antworten.

 

[madmax2010]

1) Ich habe nach Schlagwörtern gesucht um das o.g. Projekt anzugehen und habe folgendes gefunden. Befinde ich mich damit auf dem richtigen Weg?

• Angular (Frontend)
• PrimeNG (Frontend)
• C#-Programmierung (Backend)
• ASP.NET (Backend)
• Azure Cloud (DB Hosting)
• MariaDB und MySQL (Datenbank)

da du azure cloud dazwischen hast:
überleg dir mal zu erst ob du voll cloud native gehen willst, oder die Anwendung auf einem server laufen lassen willst.

SQLite zur Datenhaltung wird, wenn du den klassischen Weg gehst wohl am einfachsten sein. Das reicht auch noch bei ein paar hundert simultanen usern.
In welchen sprachen warst du bisher unterwegs?
Super easy für den Einstieg ist beispielsweise Django ->https://djangoforbeginners.com/introduction/
Bootstrap ist das Stichwort für hübsches responsive Interface.
So baust du damit ein formular: https://django-bootstrap5.readthedocs.io/en/latest/forms.html


Wenn es richrtung JS Full Stack gehen soll: https://www.educative.io/blog/fullstack-javascript-introduction
Den Artikel solltest du in jedem Fall lesen, da dort sehr viele Stacks und Technologien, die bei dir alle in irgend einer Form relevant sein können, besprochen werden

2) Ist das Projekt zu ambitioniert für den Anfang?

Nope. Gabs bei uns als HAusaufgabe in Woche 2 des Webentwicklungskurses an der Uni. ƒuur leute, die vor 3 Monaten zum ersten mal programmiert haben

Wenn du dann mal eine richtig geile performante DB willst: Postgres. Kein Oracle, kein M$
Aber da solltest du dir ein paar tage nehmen um sowas zu lernen.
Als Webserver vorne dran Nginx oder wenn du gleich auch da modern sein willst: Traefik oder envoy.

Du wist halt ohnehin auch lernen müssen, wie man so etwas dann auch gescheit betreibt. Der coding Part ist relativ klein. Man schreibt ja nicht alles from-scratch sondern baut wo es geht, auf fertige Module.

 

[Aldjinn]

Ich werfe mal Python mit Django in den Ring: https://www.djangoproject.com/

Damit wirst du deutlich schneller und einfacher zum Ziel kommen als getrennt Frontend und Backend zu entwickeln. Was du als relationale DB nutzt, ist eigentlich egal, ich würde zu PostgreSQL tendieren.

 

[blablub1212]

Auf was willst du denn deinen Lernfokus setzen? Frontend oder Backend? Und wie „vanilla“ soll es denn sein? Mobile First, evtl. mit nativer oder progressive Web App?

Ich persönlich würde wohl den MEAN-Stack nutzen:

MongoDB -> Datenbank
ExpressJS -> Web-Framework
Angular -> Frontend
nodeJS -> Server

Dazu gibts Millionen an Tutorials und auch die Entwicklung geht easy von der Hand. Zusätzlich gibt es auch tausende Addons/Pakete/… die einem viel abnehmen, bspw. PassportJS für Login/Authentifizierung

 

[Moe117]

Auf was willst du denn deinen Lernfokus setzen? Frontend oder Backend?

Naja, war eigentlich angedacht, dass ich beides lerne. Du fragst aber so als müsste ich mich für eins von beiden entscheiden oder?

Mobile First, evtl. mit nativer oder progressive Web App?

Das ganze soll (zunächst) nicht für mobile Geräte optimiert sein. (hoffe das war deine Frage)

überleg dir mal zu erst ob du voll cloud native gehen willst

Okay, muss erst einmal schauen was "cloud native" bedeutet. Aber kommt mit auf die Schlagwort-Liste

 

[floq0r]

Ich empfehle möglichst viel vanilla, erstens lernt man die basics so besser und zweitens ist man nicht von der Funktionalität eines Frameworks abhängig.

 

[Joshinator]

Seh ich genauso, man muss nicht direkt mit SPAs auf Spatzen schießen.
Grad wenn du das Backend mit .net baust, MVC wirst du ja sowieso machen. Da kann man auch direkt mit Razor rendern und die Basics lernen.
Paar Forms, paar Links, wesentlich interaktiver wird so nen Projekt ja nicht.

Wenn du dann in HTML, CSS und JS die Basics kennst kannst du immernoch ne REST API für eine SPA drantackern.

 

[Moe117]

Also ich überlege ob ich mich nicht erst einmal voll auf das Frontend konzentriere. Wenn das erst einmal steht, dann würde ich den einzelnen Elementen des Frontends Funktionalitäten geben.

 

[madmax2010]

Wekches fertige backend willst du da nehmen?
Ohne Anwendung, kein Frontend

 

[BeBur]

Du kannst Web-Frameworks wie Django oder Ruby on Rails verwenden. Mit diesen Frameworks ist dein Hobbyprojekt nicht zu ambitioniert. Je mehr du von scratch bauen willst (z.B. authentifizierung oder authorisierung), desto "ambitionierter" wird dein Projekt bzw. desto unwahrscheinlicher, dass du am Ende was funktionierendes raus hast.

 

[DerDummePunkt]

Es gibt glaube ich eine unendliche Anzahl möglicher Kombinationen von Front- und Backend Frameworks, Toolkits und Sprachen, mit denen man einen Einstieg in die Webentwicklung wagen kann.

Grade das Thema der Javascript Frontend Entwicklung im Web Bereich ist unglaublich schnelllebig, da sprießen neue Frameworks, die neue Konzepte umsetzen, quasi wie Pilze aus dem Boden. Man muss aber ned immer dem letzten heißen Sch**ß hinteherlaufen.

Ich würde dir empfehlen, dir erst mal ein paar fertige Demo Projekte anzusehen.
Ich finde, ein guter Anhaltspunkt ist realworld
Das ist im Prinzip ein vereinfachter Medium Clone, aber mit allem drum und dran, Einloggen, Usern, Persistenz in einer DB, etc.
Das coole ist, dass das ziemlich exakt durch spezifiziert ist, es gibt sowohl fürs Front- als auch Backend zahlreiche Implementierungen in eigentlich jeder gängigen Sprache, mit quasi jedem populären Framework. Die kannst du beliebig mit einander kombinieren. Dadurch bekommt man einen ganz guten Eindruck davon, wie sich die einzelnen Frameworks "anfühlen".

Falls du dich nur auf das Frontend konzentrieren willst und das Backend möglichst fertig haben willst empfehle ich supabase

 

[sandreas]

Da ich deine Vorgeschichte nicht 100% kenne, es sich aber so anhört, als würdest du grade mit allem starten, würde ich dir zur folgender Vorgehensweise raten:

• Mach dir erstmal grobe Skizzen, wie das ganze aussehen soll (so mit Stift und Papier) - pro Seite / Route ein DIN-A4 Blatt - nicht mehr als 8 Blätter
  • Nimm dir Zeit dafür... ruhig ne Stunde oder 2
  • Das verschafft dir einen ganz guten Überblick über die Anforderungen
  • Du kannst dich auf die Ideenfindung fokussieren und musst nicht gleichzeitig etwas "erlernen"
• Bau jetzt die Webseite anhand der Skizzen mit reinem HTML und CSS (kein JavaScript, kein C#, kein Node und keine Frameworks - auch nicht für CSS)
  • Selfhtml ist eine sehr gute Einsteiger-Resource (siehe unten)
  • Nimm für die Daten (z.B. eine Liste der Bücher) einfach FESTE Werte ins HTML mit rein, am besten erstmal eine Tabelle oder Liste
  • Ein Login kann man mit einem simplen HTML-Formular simulieren / mocken
  • So lernst du die absoluten Basics über Markup und Styles, ohne bereits daran zu scheitern, einen Webserver aufzusetzen - den brauchst du erstmal nicht.
• Wenn du fertig bist und meinst, dass du das drauf hast, fang mit vanilla JavaScript an (nimm ruhig ES5, es muss nicht gleich ein Framework oder TypeScript sein), die "Liste" der Bücher zu "dynamisieren"
  • Immernoch "statische" Daten (keine Datenbank, keine API, etc.), sondern ein festes JavaScript Array im Code, z.B.:
    • js var books = [{id:1, name:"Harry Potter", isbn13:"...", description:"Harry und Hagrid..."}, {id: 2, name:"Percy Jackson", isbn13: "...", description: "Percy in seinem neuesten Abenteuer"}]
  • Implementiere anhand des festen Arrays Funktionen zum Sortieren (nach beliebiger Spalte), Filtern/Suchen (ein input feld filtert auf die ganze liste) und Aufteilen in eine Seitennavigation (z.B. 5 Bücher pro Seite mit weiter und zurück)
    • nutze dabei document.createElement und weitere native Funktionen, statt innerHTML, um den DOM besser zu verstehen
• Kannst du deine Bücherliste sortieren, filtern und zwischen Seiten hin und her hüpfen, ist es Zeit für eine "API". Starte einen beliebigen Webserver (z.B. für Windows Xampp portable) auf deinem Rechner und lege den Inhalt der books variable in einer books.json ab
  • Du kannst auch eine Online API für mocking verwenden (z.B. https://jsonplaceholder.typicode.com/), allerdings versteht mans besser, wenn man ganz simpel anfängt
  • Lade den Inhalt der books.json via fetch, wirf das feste Array weg und finde via Dokumentation und ausprobieren heraus, wie fetch arbeitet (Stichwort async/await und Promises)
  • Probier damit ein bisschen rum und versuche, dein Login damit umzubauen, dass es statt einem Formular die fetch api verwendet

Wenn du das alles hast, komm gerne auf mich zu... dann gehts weiter :-) Achso: vielleicht noch ein paar nützliche Sachen, die du brauchen kannst:

• Selfhtml: https://wiki.selfhtml.org/wiki/Wie_fange_ich_an? (für HTML und CSS)
• JavaScript:
  • https://de.wikipedia.org/wiki/JavaScript (der deutsche Wiki Artikel ist wirklich hervorragend, den lohnt es, ganz zu lesen)
  • https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics (Die Mozilla JavaScript Referenz, was besseres gibts meiner Ansicht nach nicht)
• Entwicklungsumgebung (Software):
  • Notepad++ (unter Windows) - immer nützlich, einen schnellen leichtgewichtigen Editor zu haben
  • Visual Studio Code - der ist auf dem Vormarsch, ich persönlich mag ihn nicht so, aber viele schwören drauf
  • Netbeans IDE (Windows Installer) - kostenlose aber immernoch hervorragende IDE auch für HTML, JavaScript und CSS
    • Schnell, eine richtige IDE, aber nicht zu viele Features, die dich erschlagen - kannste ja mal ausprobieren

 

[sh.]

@sandreas Sehr gute Übersicht/Leerplan
Wie ist deine Meinung zu "Web Development Bootcamps" auf z.B. Udemy usw.?

 

[kieleich]

schau dir mal svelte / sveltekit an. mit vanilla, kann man einpacken. damit kommt man heute, nicht mehr weit. es ist einfach, alles viel zu komplex geworden.

 

[floq0r]

@kieleich Was ist denn zu komplex? Ich sehe Frameworks hauptsächlich dort sinnvoll wo man auf daily basis Unmengen an Sites betreuen muss und sich Schreibarbeit sparen möchte oder out of the box eine umfangreiche App erstellen will. Ein Framework zu nutzen weil es einem Dinge abnimmt die man selbst nicht versteht/kann halte ich für ungut.
Deine 3 Beistriche kannst du übrigens an die Bedürftigen spenden

 

[kieleich]

Allein das DOM aktuell zu halten, ist eine Sysiphusarbeit.

Vanilla bedeutet letztendlich du entwickelst dein eigenes Frame Work. Es ist sinnlose Zeitverschwendung. Man lernt auch nichts dabei.

Svelte nimmt dir genau diese Arbeit ab und du kannst dich aufs Wesentliche konzentrieren. Nämlich die Umsetzung deiner Idee / App.

 

[andy_m4]

Naja. Ob man ein Framework verwendet oder nicht hängt ja in erster Linie davon ab, was man konkret machen möchte. Wenn ich dazu kein passendes Framework finde und dann trotzdem eins nehme aber an vielen Stellen damit beschäftigt bin an der Framework-Logik vorbei irgendwas zu machen, hab ich ja trotzdem nicht viel gewonnen.

Vanilla bedeutet letztendlich du entwickelst dein eigenes Frame Work. Es ist sinnlose Zeitverschwendung. Man lernt auch nichts dabei.

Das würde ich so nicht sagen. Man lernt halt auch viel über die Technik die unter der Abstraktion deurchs Frameworks liegt. Das kann auch manchmal ganz hilfreich sein. Insbesondere bei Problemen mit dem Framework selbst. Und spätestens wenn das Ziel (da sind wir wieder bei: was will man machen) ist ein eigenes Webframework zu erstellen, dann musst Du das kennen was darunter ist.

Die ganze Argumentation a- la "man lernt nix dabei" bzw. "ist sinnlos" hat einen viel zu engen Blickwinkel darauf.

Ein Framework zu nutzen weil es einem Dinge abnimmt die man selbst nicht versteht/kann halte ich für ungut.

Wobei das hast Du ja an vielen Stellen. Und das Spiel kannst Du auch beliebig weit treiben. Du kannst auch sagen: Wenn man Javascript benutzen will ist es wichtig zu verstehen wie ein Javascript-Interpreter/Compiler funktioniert. Wer einen Compiler benutzen will sollte ein bisschen was von Informatik verstehen und außerdem wissen wie CPUs funktionen. Wer wissen will wie CPUs funktionieren sollte Ahnung von Elektronik haben. Wer Elektronik benutzen will sollte Ahnung von Strom haben usw.

Insofern ist die Argumentation nicht unproblematisch. :-)

 

[floq0r]

@andy_m4 Die Argumentation geht auch in die andere Richtung: Wer nicht coden will soll sich einfach einen Webdev anstellen der das für einen erledigt
Letztlich läuft es auf das requirement hinaus: Wenn ich den ganzen Tag nur Häuser aus Duplo bauen möchte (im Detailgrad) wäre es blöd dafür Lego oder ein Modellbaukit oder einen 3D-Drucker zu verwenden. Sobald es aber komplizierter wird habe ich entweder keine Möglichkeit oder keine Ahnung es umzusetzen weil ich bisher nur Duplo gespielt habe.

@kieleich
Was heißt man lernt nichts dabei? Du lernst beispielsweise genau das was du kritisiert: Die Interaktion mit dem DOM, oder den Datenaustausch zwischen Front- und Backend oder die Funktionsweise und Erweiterung von Plugins für Leaflet.

 

[Joshinator]

Wenn man Javascript benutzen will ist es wichtig zu verstehen wie ein Javascript-Interpreter/Compiler funktioniert.

Man versteht schon worauf du hinaus willst, aber es gibt einen großen Unterschied zwischen "wer JS nutzten will muss Assembly können" und "bevor du zu SPA-Frameworks greifst lern erstmal wie man den DOM per Vanilla JS manipuliert".

Denn das hat sich in der Webentwicklung die letzten Jahre immer mehr eingefahren. Jede noch so statische Info/Blog-Seite kommt mit Megabytes an SPA Frameworks.
Einfach weil viele einen Hammer besitzen und jetzt jede stumpfe Website wie ein Nagel aussieht.

Trend von Meta-Frameworks geht zwar wieder in die Richtung (SSR/SSG/partial Hydration/Island), aber wenn wir auf React/Vue/Svelte jetzt noch ein Abstaktionslayer draufwerfen macht es das ganze für Anfänger auch nicht besser.

Ist definitiv nichts falsch dran so eine einfache Bücherverwaltung erstmal mit Vanilla interaktiv zu machen.
Dann kann man das ganze immer noch in eine SPA portieren und die Vor/Nachteile ins Verhältnis setzen.

 

[andy_m4]

Duplo, Lego

Ja. Das macht meine Argumentation ja nicht kaputt egal welche Analogie man wählt.
Letztlich muss man gucken in welcher Domäne man sich bewegt und was man dafür alles abdecken muss bzw. sollte. Das ist ja auch das, was ich in meinem Posting darstellen wollte.
Sobald man das grenzenlos macht so a-la "man könnte dies&das mal brauchen" läuft man wieder in diese infinite Sache rein.

Denn das hat sich in der Webentwicklung die letzten Jahre immer mehr eingefahren. Jede noch so statische Info/Blog-Seite kommt mit Megabytes an SPA Frameworks.
Einfach weil viele einen Hammer besitzen und jetzt jede stumpfe Website wie ein Nagel aussieht.

Da bin ich völlig bei Dir.
Mich wundert Deine Einlassung auch ein wenig, weil genau das ich ja in meinem Posting auch zum Ausdruck gebracht hab. Aber vielleicht kam das ja nicht so rüber.

Ist definitiv nichts falsch dran so eine einfache Bücherverwaltung erstmal mit Vanilla interaktiv zu machen.
Dann kann man das ganze immer noch in eine SPA portieren und die Vor/Nachteile ins Verhältnis setzen.

Kann man so sehen.
Ich wollte eigentlich auch nur so diesen extremen Ansichten entgegen treten a-la "Frameworks sind Mist" bzw. "Ohne Frameworks gehts nicht". Das war mir einfach zu pauschal da man beides (und auch ne Mischung aus beiden) gut begründen kann.