Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

Frontend Coding GuidelinesEin Baustein zur Qualitätssicherung

Michael Kühnel• Macht Internet seit Netscape 4.7• Frontend Developer bei der SMA Solar Technology AG• Twitter: @mkuehnel• Website: www.michael-kuehnel.de

Frontend Coding Guidelines

Frontend Coding Guidelines• Markup (HTML)• CSS• JavaScript

Frontend Coding Guidelines

Frontend Coding Guidelines• Für wen?

Frontend Coding Guidelines• Für wen?• Warum?

Frontend Coding Guidelines• Für wen?• Warum?• Was sollte enthalten sein?

Frontend Coding Guidelines• Für wen?• Warum?• Was sollte enthalten sein?• Tools zur Überprüfung

Sinnvoll für

Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird:

Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen

Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen

Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen• Übergabe von Projekten an Kunden

Warum?

Warum?• Qualität fördern:

Warum?• Qualität fördern: • Webstandards

Warum?• Qualität fördern: • Webstandards • Barrierefreiheit

Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit

Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit

Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit • Vereinheitlichung über Projektgrenzen

Inhalte (Allgemein)

Inhalte (Allgemein)• Encoding von Dateien

Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)

Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)• Einrückungen

Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)• Einrückungen• Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)

Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)• Einrückungen• Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)• Verpﬂichtung zur Validierung

Inhalte (Allgemein)• Encoding von Dateien • Code-Beispiele (Dos and Don’ts)• Line endings (Unix vs. Mac vs. Windows)• Einrückungen• Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)• Verpﬂichtung zur Validierung

Inhalte (Allgemein)• Encoding von Dateien • Code-Beispiele (Dos and Don’ts)• Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices• Einrückungen• Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)• Verpﬂichtung zur Validierung

Inhalte (Allgemein)• Encoding von Dateien • Code-Beispiele (Dos and Don’ts)• Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices• Einrückungen • ggf. Deﬁnition der zu• Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen)• Verpﬂichtung zur Validierung

Inhalte (Allgemein)• Encoding von Dateien • Code-Beispiele (Dos and Don’ts)• Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices• Einrückungen • ggf. Deﬁnition der zu• Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen) • ggf. Merging von Dateien• Verpﬂichtung zur Validierung

Inhalte (HTML)

Inhalte (HTML)• Validierung nach welchem Standard?

Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)

Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design

Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design• IDs vs. Klassen

Inhalte (HTML)• Validierung nach • Spans vs. Divs welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design• IDs vs. Klassen

Inhalte (HTML)• Validierung nach • Spans vs. Divs welchem Standard? • Semantisches HTML• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design• IDs vs. Klassen

Inhalte (CSS)

Inhalte (CSS)• Inline CSS verbieten

Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen

Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen• Hinweis auf den Umgang mit dem Internet Explorer

Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen• Hinweis auf den Umgang mit dem Internet Explorer• Schreibweise von Selektoren, Eigenschaften und Werten

Inhalte (CSS)• Inline CSS verbieten • Kommentare• Vor !important warnen• Hinweis auf den Umgang mit dem Internet Explorer• Schreibweise von Selektoren, Eigenschaften und Werten

Inhalte (CSS)• Inline CSS verbieten • Kommentare• Vor !important warnen • Verwendung von CSS3• Hinweis auf den Umgang mit dem Internet Explorer• Schreibweise von Selektoren, Eigenschaften und Werten

Inhalte (CSS)• Inline CSS verbieten • Kommentare• Vor !important warnen • Verwendung von CSS3• Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren• Schreibweise von Selektoren, Eigenschaften und Werten

Inhalte (CSS)• Inline CSS verbieten • Kommentare• Vor !important warnen • Verwendung von CSS3• Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren• Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten

Inhalte (CSS)• Inline CSS verbieten • Kommentare• Vor !important warnen • Verwendung von CSS3• Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren• Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten • ggf. Umgang mit mobilen Endgeräten

Inhalte (JavaScript)

Inhalte (JavaScript)• Schreibweisen

Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes

Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare

Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement

Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement• Zu verwendende Vergleichsoperatoren

Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement• Zu verwendende Vergleichsoperatoren

Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen • Zu verwendende Scopes Frameworks• Standards für Kommentare• JS Code Placement• Zu verwendende Vergleichsoperatoren

Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen • Zu verwendende Scopes Frameworks• Standards für • ggf. Infos zu Kommentare jQuery.noConﬂict()• JS Code Placement• Zu verwendende Vergleichsoperatoren

Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen • Zu verwendende Scopes Frameworks• Standards für • ggf. Infos zu Kommentare jQuery.noConﬂict()• JS Code Placement • Fehlervermeidung (JSHint vs. JSLint)• Zu verwendende Vergleichsoperatoren

Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen • Zu verwendende Scopes Frameworks• Standards für • ggf. Infos zu Kommentare jQuery.noConﬂict()• JS Code Placement • Fehlervermeidung (JSHint vs. JSLint)• Zu verwendende Vergleichsoperatoren • ggf. Anhang mit Best Practices

Tools• JSHint: http://www.jshint.com/about• Sonar: http://www.sonarsource.org• PMD: http://pmd.sourceforge.net• Checkstyle: http:// checkstyle.sourceforge.net

Das wars ; )Fragen?Twitter: @mkuehnelE-Mail: mail@michael-kuehnel.de

http://dom-blogs.net	104
http://lanyrd.com	12
https://si0.twimg.com	3

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

by Michael Kühnel on Jul 30, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 119

Statistics

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung Presentation Transcript