Website frickeling

So in der Art eines Gedächtnisprotokolls. Wie komme ich schnell, günstig zu einer eigenen Website die gut aussieht und ein wenig Funktion bietet. Nun bin ich kein Designer, also gehen wir klauen. Es gibt genug wunderschöne Designs für den bezahlten oder kostenlosen Download im Web die nie 100%tig passen. Im Ergebnis rund 5h Evaluierung. Dann Adaptierung auf ASP.NET. Hier beginnt meist schon das frickeling, weil die HTML Designer wenig Rücksicht auf die Belange von Masterpage und co nehmen. Am Ende ist die Wahl auf etwas gefallen, was Twitter Bootstrap implementiert, Jquery und dann noch ca 7-10 Effekte für die jeweilige Plugins verwendet wurden. Mit ein paar HTML Kniffen einen Eingriff dort und da in die CSS, sieht's dann so aus wie es sein soll. Wir stellens live und fassen nur mehr das HTML an.

Über ein Jahr später soll eine neue Funktion eingebaut werden. Im konkreten Fall SignalR. Im funktionierenden Prototypen rund 30 Zeilen Code (für alles).

In das finale Web Projekt reinkopiert. Geht nicht. Update für Jquery auf 2.0.3 ist nötig. Nun ist Jquery faktisch das Verstecken von Unzulänglichkeiten der Sprache JavaScript und den Programmierkonzepten. Also Frickeling. Das JQuery Update wird erfolgreich mit Nuget in Visual Studio durchgeführt. Nun müssen die Script Referenzen im HTML per Hand ausgetauscht werden.

Da die verwendete Bootstrap Version nicht mit der Jquery Library kompatibel ist, wird diese auch upgedated. Damit ist das Design mal fürs erste hinüber.

Wenden wir uns den 5 verblieben Effekten zu. Ein Eingabefilter (kein Jquery Plugin) wirft ne Exception. Nach einiger Recherche entscheide ich mich die Browserweiche rauszunehmen, weil offensichtlich Jquery eine Methode gestrichen hat.

Cycle Plugin, braucht auch ein Update. Das Update von Nuget ist aber älter. Auf der Suche im Web nach einem aktuellen bin ich auch fündig geworden und habs per Hand in das Script Verzeichnis kopiert.

Dazwischen immer brav F5 gedrückt und geschaut was die Website nach jeder Veränderung so treibt. Nicht nur im IE sondern auch im Chrome.

Weiter gehts mit Isotope. Nicht nur das ich jetzt erkennen muss, das die Lizenz im Download des Templates wohl keine Isotope Lizenz enthalten hat, es gibt auch keinerlei Nuget Paket und keine Hinweise, wie man mit Jquery 2 umgeht. Darüber hinaus findet sich in Isotope ein Verweis auf Modernizr. Achja noch zu erwähnen, zwischendrin immer brav Fiddler an auf der Suche nach 404 um fehlende CSS und JavaScript Referenzen im Keim zu ersticken. Gründübel des Konzepts, sind Fehlermeldung von Funktionen, dessen Ursprung man nicht  mit Goto Definition lösen kann.

Nachdem ich nun Isotope gelernt habe und sein 1400 Quelloffene Codezeilen durchforstet habe, kann ich sagen – müsste gehen. Also nochmal Prototyp gebaut. Geht. F**k.

Spaßeshalber die Istope Referenz ans Ende der Masterpage gesetzt und plötzlich gehts wieder.

So ungefähr läuft das. Waren in Summe 20h Arbeit.

Was ist das Grundübel.

1) JavaScript ist für lange Codesequenzen schwer zu pflegen

2) Da kein Compiler existiert muss per Trial and Error vorgegangen werden

3) Solange es klappt ist das Jquery Frickelding sehr nett, wenn ein Fehler auftritt extrem schwierig.

3a) schwer zu debuggen

3b) schwer zu lesen, da uneinheitliche Programmierstile

3c) unklare Abhängigkeiten

4) um die Not zu lindern, wird einfach maximale Library in die Website gepackt, was keine gute Performance zur Folge haben kann.

5) Die Reihenfolge und das Timing von HTML, CSS und JavaScript ist essentiell

Kann das behoben werden? Nein. Ich denke JavaScript ist für effizientes Programmieren nicht geeignet. Erschwerend hinzu kommt das Bibliothek Chaos. Nun ist aber eine Sprache im Browser für alle Cloud Anbieter immens wichtig.

Lösung: eine virtuelle Schicht über JavaScript legen und damit vor dem Gros der Entwickler verstecken (und mir). Damit landen wir bei TypeScript. Wobei aktuell TypeScript einige Dinge aus .NET nicht kann, weil es die Sprache JavaScript schlicht (noch) nicht hergibt (interfaces, Get, Set..).

Aber auch Typescript löst nur einen Teil der Problematik. Es müsste ein komplettes Library Framework auf TypeScript konvertiert werden, mit einheitlichen Coding Guidlines, Versionierung, Abhängigkeiten Reduziert werden. Ein Compiler der unused Code entfernt. Ein brauchbarer WYSIWYG Editor für die Design Seite. Eine Menge Arbeit um funktionell den Stand zu haben, den heute Silverlight oder WPF bietet.

Mein Fazit in diesem Projekt ist, das bei zwei der Jquery plugins, es vermutlich schneller und schlanker gewesen wäre den Effekt selbst zu programmieren und damit die Abhängigkeiten raus zu haben.

Das wichtigste zum Schluss, ich hatte keinen Spass daran.

Pingbacks and trackbacks (1)+

Kommentare sind geschlossen