Kategorien
Linklove

Instacode

Instacode – lines with styles

Kategorien
Code Webentwicklung

Wie sollte man Prototypen bauen?

Konzept: Von der Skizze zum Prototypen

Wir gehen in diesem Artikel davon aus, dass für ein neues Projekt Skizzen bestehen, die zeigen, wie die fertige (Web-)Anwendung etwa aussehen und sich verhalten soll. Basierend auf diesen Skizzen möchte der Kunde sehen, wie sich das “anfühlt”, wenn man es im Browser bedient. Wir gehen im folgenden davon aus, dass der Prototyp keinerlei Datenverbindungen oder serverseitige Entwicklung benötigt, also ein reiner “Klick-Dummy” ist.

Grundüberlegungen

Bevor die erste Code-Zeile entsteht sollte man sich schon über einige Dinge Gedanken gemacht haben:

  1. Code-Organisation / Ordnerstrukturen
  2. Zu verwendende Libraries und deren Lizenzen

Was davon in der Entwicklung davon übrig bleibt, ist egal, aber ein Plan sollte vorhanden sein. Mit am wichtigsten ist, dass alle “Screens” auf Atomisierbarkeit gecheckt werden:

  • Habe ich oft gleiche Strukturen?
  • Kann ich die kombinieren?

Dabei sind z.B. Dinge wie immer wiederkehrende Dinge wie Tabellen mit gleichem Aufbau. Hier lohnt sich unter Umständen recht schnell der Einsatz einer Templating-Engine wie Handlebarsjs oder Mustache.

Weitere Dinge: Welche Präprozessoren / DRY-Tools benutze ich, z.B. LESS, SASS und/oder Ajax (um Teile der Oberfläche nachzuladen).

Umsetzung: Was sollte bei der Entwicklung des Prototypen beachtet werden?

[red_box]Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle, Versionskontrolle![/red_box]

Man kann es gar nicht oft genug sagen. Jeder nachvollziehbare Schritt ist ein sinnvoller Schritt in die richtige Richtung. Insbesondere, wenn mehrere Personen am gleichen Code arbeiten, ist ein SCM-Tool richtig wichtig.

Der Code sollte dabei im Code selbst gut dokumentiert sein, zusätzliche Dokumentation in einem Wiki oder ähnlichem wäre optimal. Nutzt eine Toolchain wie Grunt.js um Produktionsreifen Code zu erzeugen:

  1. Minifying
  2. Compressing
  3. Entkommentarisierung 😉

Request-Lagging

Wenn im Klick-Dummy Requests simuliert werden, die im Prototyp nicht oder lokal stattfinden, verzögert Sie im Prototypen mit JavaScript-

Diskussion: quick’n’dirty vs. Produktionsreife

Wieviel produktionsreifen Code soll eurer Meinung ein Prototyp enthalten? Werdet euch mit den Kunden einig darüber, was ihr unter einem Prototyp versteht und was der Übergang vom Prototypen zur “live”-Version bedeutet. Je nachdem sollten natürlich auch unterschiedliche Aufwände in den Prototypen gesteckt werden.

Kategorien
Linklove

Explore and Master Chrome DevTools

Explore and Master Chrome DevTools

Ein kostenloser Kurs von Code School und Google.

Kategorien
Code Webentwicklung

Warum man bei dynamischen Elementen auf feste IDs verzichten sollte

Wenn man ein Plugin beispielsweise für jQuery entwickelt, welches die Oberfläche einer Webanwendung modifiziert, wie beispielsweise jQuery.FancySelect, dann sieht man häufig, dass Entwickler mit IDs arbeiten. Das ist prinzipiell auch nicht schlecht, da die ID-basierte Selektor-Performance in JavaScript und CSS immer noch die beste ist.

Kategorien
Webentwicklung

Der nächste Browserkrieg

Ich schrieb ja schon über den nächsten Browserkrieg. Nund gibt es Neuigkeiten: Opera stellt auf WebKit um, bzw. (wie jetzt herauskam) auf die zukünftige Google-Engine “Blink”, die ein Fork von WebKit ist. Google baut mit Blink einfach sein eigenes Ding; Samsung und Mozilla bauen zusammen die neue Engine “Servo”, die “eines Tages” die Gecko-Engine ablösen soll und Microsoft kocht sein Süppchen weiter. Das wird sehr spannend, denn es verschwindet eine kleine, feine (Operas Presto-Engine), dafür werfen zwei große Player mit Marktanteil neue Engines in den Ring.