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

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?

• Best Practices analysieren
• bestehende Guidelines nutzen
  (airbnb, Google, Idiomatic JS, jQuery, CSS by @mdo, Idiomatic CSS)
• Coding Guidelines aufschreiben oder übernehmen

Tools zur Automatisierung

JSHint

Beispiel

JSCS

Beispiel

scss-lint

Beispiel

How To Start

Jasmine

Beispiel

Karma

+ Jasmine

CI Tooling

Travis CI

Circle CI

Codeship

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

CSS Modal