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?
- Code Konventionen
- Automatisierende Tools
- 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?
- 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
JSCS
Jasmine
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
- 2,165