Front-End

Code

Wege zu gutem

@drublic

Hans Christian Reinl

Front-End Entwickler, Köln

Wer bin ich?

Front-End

Code

Wege zu gutem

Schlechter Code
Guter Code
Mittel & Wege

+ mehr

Agenda

Schlechter Code

Flickr: User joeholmes, "Workspace in File Magazine"

$('.class-1').data('select', 1)
    .text('Select 1').hide();

$('.class-2').data('select', 2)
    .text('Select 2').hide();

$('.class-3').data('field', 'indication')
    .text('Select 3');

$('.class-4').data('field', 'indication')
    .text('Select 4').show();
div.gray-button.button-big.btn-big #link {
    color: #bada55;
}

section #form .button-big[type="submit"] {
    color: hotpink !important;
}
var ಠ_ಠ = ლ_ಠ益ಠ_ლ === ☃ ?
           (☃ + π == 0 ? "\u2603" : ß) :
           3.1415926535897931159979634685

Warum?

If it stinks, change it.

Kent Beck in "Refactoring: Improving the Design of Existing Code"

Guter Code

Was ist guter Code?

  • Eindeutig, elegant, effizient
  • Einfach und gradlinig
  • Menschlich

Guter Code macht das, was man erwartet.

Qualität beurteilen

Zugänglichkeit

Performance

Wartbarkeit

Testbarkeit

Flickr: User elmastudio, "Workspace @elmastudio"

Warum?

www.theregister.co.uk/2011/09/22/software_bug_fine/, 06.06.2015

http://dougseven.com/2014/04/17/knightmare-a-devops-cautionary-tale/, 06.06.2015

Wie erreicht man

guten Code?

  1. Code Konventionen
  2. Automatisierende Tools
  3. Dokumentation & Reviews

Coding Konventionen

Coding conventions are a set of guidelines for a specific programming language that recommend programming style, practices and methods for each aspect of a piece program written in this language.

Wikipedia, Coding Conventions, 07.06.2015

Teams

Wie?

Tools zur Automatisierung

JSHint

Beispiel

JSCS

Beispiel

Jasmine

Beispiel

Karma

+ Jasmine

Dokumentation & Reviews

Component Based Development

Component-based software engineering [...] is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system. It is a reuse-based approach to defining, implementing and composing loosely coupled independent components
into systems.

Wikipedia, Component-based software engineering, 07.06.2015

Wie nochmal?

Aufteilung der Zuständigkeiten

Schwache Verzahnung

Unabhängig

Wiederverwendbar

Front-end

Verschiede “Teile” einer Website

Ähnlich wie jQuery Plugins

Vorteile

Betrachtung ohne Kontext

Responsive

Bessere Verteilung innerhalb eines Teams

Schnellere Entwicklung

Leichtere Code-Updates

Components bauen

Herunterbrechen auf ein Minimum (?)

Flexibilität im Auge behalten

Aufbau

Struktur

Aussehen

Funktionalität

Danke!

Wege zu gutem Front-End Code

By Hans Christian Reinl

Wege zu gutem Front-End Code

  • 1,050
Loading comments...

More from Hans Christian Reinl