Flask: Websiten-Logik in JavaScript?

[earloop]

Hallo,
ich würde gerne die Webapp des folgenden Repos anpassen: https://github.com/adeept/Adeept_AWR
Die einzige html-Datei, die ich gefunden habe ist diese: https://github.com/adeept/Adeept_AWR/bl ... index.html
Aber wenn ich das richtig verstehe, wird die Logik und das Erscheinungsbild durch diese JavaScript Dateien bestimmt: https://github.com/adeept/Adeept_AWR/tr ... er/dist/js
Diese Datei https://github.com/adeept/Adeept_AWR/bl ... 5fd0a94.js besteht im Wesentlichen aus einer einzigen unglaublich langen Zeile. Ist das autogeneriert? Wer soll das denn programmiert haben und wer soll das verstehen?

[__blackjack__]

@earloop: Das ging offensichtlich durch einen „minifier“. Das ist nicht nur in einer Zeile, da sind auch Namen durch kurze, nichtssagende ersetzt.

[earloop]

Warum macht man sowas? Um zu verhindern, dass das später ein Mensch verstehen und anpassen kann?

[noisefloor]

Hallo,

Warum macht man sowas? Um zu verhindern, dass das später ein Mensch verstehen und anpassen kann?

Kann ein Grund sein, wobei es für "Code Obfuscation" auch spezielle Tools gibt. Der Hauptgrund, einen Minifier einzusetzen, ist den Code kürzer (=weniger Bytes) zu machen. Man man eine Webseite zehntausende oder hunderttausende Mal ausliefert, spart das a) Bandbreite und b) wird die Seite schneller geliefert.

Für Hobbyprojekte und "normal" frequentierte Seite ist das eher unerheblich, aber bei stark frequentierten Seiten kann das schon Sinn machen.

Die Entwickler haben natürlich noch den "langen", lesbaren Code, einen Minifier lässt man in der Regel erst drüber laufen, wenn der Code getestet und bereit für den Einsatz ist.

Gruß, noisefloor

[Sirius3]

Das minifizieren ist Teil des Build-Prozesses. Dort werden dann viele einzelne JavaScript-Module in eine Datei zusammengefasst und gleichzeitig unnötige Bytes gelöscht.
Um die Dateien trotzdem Debuggen zu können, gibt es ja auch das passende map-File, das die unminifizierte Version der Dateien und andere Informationen enthält.

[earloop]

Um die Dateien trotzdem Debuggen zu können, gibt es ja auch das passende map-File, das die unminifizierte Version der Dateien und andere Informationen enthält.

meinst Du das hier: https://github.com/adeept/Adeept_AWR/bl ... a94.js.map
das ist auch nicht viel lesbarer...

[__blackjack__]

@earloop: Wenn man die Daten da raus holt schon. Da sind ja Zeilenumbrüche in den Quelltexten, nur das die selbst als Zeichenketten in einem JSON-Dokument stehen.

[nezzcarth]

meinst Du das hier: https://github.com/adeept/Adeept_AWR/bl ... a94.js.map
das ist auch nicht viel lesbarer...

Das ist auch nicht dazu gedacht, dass du das lesen kannst. Das ist als Information für Entwicklertools wie z.B. den Debugger im Browser gedacht, um die ursprüngliche Form zu rekonstruieren und dir Debugging von JavaScript unter Live-Bedingungen zu ermöglichen. Weder die Minifizierte Datei noch die Source-Map sind irgendwas, was dich beim Entwickeln groß belasten muss. Du schreibst und liest "normales" JavaScript mit Einrückungen, Zeilenvorschüben und so weiter. Die anderen Dateien sind nur für das Tooling drumherum so wie das Deployment relevant; du musst die weder schreiben noch lesen noch dich sonstwie inhaltlich damit auseinander setzen.

[earloop]

Die anderen Dateien sind nur für das Tooling drumherum so wie das Deployment relevant; du musst die weder schreiben noch lesen noch dich sonstwie inhaltlich damit auseinander setzen.

Wie kann ich das Aussehen und die Funktion der Website anpassen, wenn nicht durch diese Dateien?

[__blackjack__]

@earloop: Durch die Quelldateien aus denen das erstellt wurde. Das müsstest Du wohl den Autor fragen wo die sind/ob Du die bekommen kannst.

[Sirius3]

@earloop: gar nicht. In der map-Datei stehen zwar die Sourcen zu den Javascript-Dateien

Code: Alles auswählen

with open('app.85fd0a94.js.map', 'rb') as file:
    data = json.load(file)

for filename, content in zip(data['sources'], data['sourcesContent']):
    if filename.startswith('webpack:///src') or filename.endswith('.js'):
        path = pathlib.Path(filename[11:])
        path.parent.mkdir(exist_ok=True, parents=True)
        path.writetext(content)

für die Styles (außerhalb der vue-Dateien) gilt das aber nicht, da gibt es kein map-file.
Ebenso fehlen die ganzen Dateien, die zum Bauen nötig sind. Läßt sich zwar mit ein wenig Mühe alles rekonstruieren, wenn man sich aber mit webpack und vue nicht auskennt, ist das einiges an Einarbeitung.
Wie viel Aufwand Du treiben willst, mußt Du selbst wissen. Einfacher wäre es wohl, beim Author der Datein nachzufragen, ob er auch die Sourcen bereitstellen kann,