Feedback gewünscht Ein erstes kleines MVC Projekt, Ratschläge zur Umsetzung

[Chronos]

Hallo Forum,

ich bin gerade auf der Suche nach Möglichkeiten zur Umsetzung einer Oberfläche für ein kleines Freizeitprojekt von mir.

Grundsätzlich geht es um ein Canvas auf das ich zwei kurze Wörter platziere.
Es gibt verschiedene Layouts wie bspw. LinksOben_RechtsUnten, MitteOben_MittUnten und ähnliches.
Desweiteren lade ich verschiedene Webfonts die ich auf diese Texte anwende, ebenso kann ich die Farben jeweils setzen.
Das ganze habe ich, auch für mich eine Premiere, in JavaScript in OoP-Manier umgesetzt.
Sprich habe setter und getter, die die oben genannten Eigenschaften und weitere wie die Schriftart, x- und y-Position und so weiter setzen.

Aussehen würde das in etwa so:

Ganz oben zu sehen zwei Checkboxen, ich möchte entweder nur das eine oder andere Wort oder eben beide gleichzeitig bearbeiten (das betrifft nur 1. und 2., Layout gilt eh erst mal für beide)

Die große Frage die mich jetzt dabei beschäftigt ist, wie bekomme ich das alles in Einklang mit einer Oberfläche? Klar ich könnte alle statisch machen wie bspw. ein Dropdown mit den Schriftarten vorgeben aber das kann ja nicht das wahre sein. Ich könnte auch alles dynamisch ins DOM hängen mit jQuery aber das ist jetzt auch nicht sooo toll.

Ein paar Vorüberlegungen noch von mir:

Ich möchte ja auch die Möglichkeiten geben über einen Farbwähler (einen eigenen, nicht den HTML-Colorpicker) die Farben setzen zu können, mit einer kleinen Vorschau wie die Farbe aussieht. Allein die Vorschau der Farbe würde (wenn ich es nach OoP mache) etwa so aussehen: ich ändere rot, grün und blau des Objekts und sobald das geändert wurde, wird eine Methode aufgerufen, die ins Dom die Aktualisierung
übernimmt, in dem Falle eben ein DIV z. B.

Nun gibt es ja eine ganze Reihe an MVC Frameworks und Ahnung habe ich von keinem. Desweiteren ist das was ich da mache nun auch nicht soooo komplex als das sich das lohnen würde.

Daher habe ich etwas geforscht und bin auf React gestoßen was, wenn ich es richtig in Erinnerung habe oft als die View genutzt wird.

Wie kann ich mir das vorstellen, macht das Sinn in dem Fall React zu nutzen? Was könnte ich noch tun?


Hoffe das ganze ist nicht all zu Vage, habe auch ein paar kleinere Sachen die ich für unwichtig halte außen vor gelassen. Danke für jeden Tipp und Ratschlag

Mit freundlichen Grüßen

Tony

Edit: ein Bild mit zwei Texten sähe z. B. so aus:

 

[Tronjer]

Die erste Überlegung ist die Wahl des Frameworks; nur Masochisten tun sich OOP mit Vanilla JS an. ReactJS ist weit verbreitet. Allerdings kann ich wenig dazu sagen, weil ich auf der Angular-Schiene bin.Die zweite ist die Wahl der UI (Bootstrap, Foundation & Co.), welche Grid-Layout und Standardelemente liefert und natürlich SASS. Anschließend fügt man bedarfsweise noch eine Testsuite hinzu und strickt aus dem ganzen mittels Taskrunner (Grunt oder Gulp) eine Toolchain. Außerdem wäre zu überlegen, ob und in welcher Form man ein Backend (möglichst per REST API) für Datenoperationen anbinden will. Ich nehme da gerne BaaS Provider wie Firebase.

Wenn das alles steht, erstellst du eine Skeleton App mit den gewünschten Routen, Controllern und Views. Auf dem Stand hast du dann auch bereits einen groben Überblick, welche Möglichkeiten dein Framework, zum Erzeugen von HTML-Objekten aus dem Controller und automatischen DOM-Updates bietet.

 

[Chronos]

Sorry für die späte Antwort,

hm das mit dem OoP und dem Masochismus ist so eine Sache, ich habe wirklich nichts komplexes.
Es gibt quasi nur die eine Klasse / das Object welches eben Setter wie diesen hat:

this.setFontSize = function(fontSize) {
    if (fontSize !== this.fontSize) {
        this.fontSize = fontSize;
        this.messureTextWidth();
    }
};

und eben primitive Getter.
Die komplizierteste Methode ist die Layout-Funktion die die Texte richtig platziert.

Was Bootstrap usw. angeht: das ist mir klar aber auch für mein "Problem" erst mal nicht weiter relevant.
Wie das aussieht ist erstmal sekundär - bspw. würde ich aber wohl gern dies hier nutzen:
https://getmdl.io/components/index.html#sliders-section (sieht mir aber auch nach sehr viel zusätzlichen Bibliotheken aus).


Dinge wie Sass habe ich glücklicherweise schon länger in meinen Workflow integriert, ebenso Browser-Sync.
Das läuft beides über Gulp und ist sehr angenehm. Was ich noch nicht habe ist so etwas zum Dateien zusammenfassen, minifizieren und dergleichen.
Ist aber auch erst mal egal.

Eine Testsuite wäre auch mal sehr interessant, kenne nur vom Namen her ein paar aber das war es auch.

Firebase ist mir auch bekannt aber das ich eigentlich alle Daten nur über API-Ajax Calls bekomme muss ich auch nichts vorhalten oder speichern.
Die Texte sind die Titel zufällig ausgewählter Wiki-Artikel, das Bild ist ein zufälliges von Imgur (aus von mir bestimmten Tags).

Was die Sache mit den Views betrifft: viele werden das wohl nicht, die Hauptseite mit dem Canvas mit einem Hauptmenü und einen Bearbeitungsmenü.
Ich schätze also ich bin mit React ganz gut beraten? Ist nur eben schwer sich da reinzufinden bzw. das ganz überhaupt einzuschätzen was ich brauche.

Das nur mal so als eine Zusammenfassung meiner Gedanken dazu ^^. Vielen danke für deine Antwort.

 

[Tronjer]

Wie gesagt, ich habe mit ReactJS keine Erfahrungen, aber Slider für RGB-Farben gibt es bei Angular Material out-of-the-box.
https://material.angularjs.org/latest/demo/slider