Die Transformation in ein modernes Zeitalter

1. Frontend Development
für Backend Developer
Die Transformation in ein modernes Zeitalter
Christoph Hautzinger <c.hautzinger@conspecton.com>

2. Hautzi – WTF!?
• Nerd
• Web since 2ooo
STIMME.NET
diginights.com
100 Days Software Projects
Zend Technologies
Frank und Freunde
Glamour Village
wetter.com
ampya.com
Fressnapf
Schreiber und Freunde
conspecton

3. www.conspecton.com
• Toolkit für Medizintechnikfachplaner
• Applikation zur Krankenhausplanung
• Produktdatenportal für Medizingeräte
• Planungsleistung / CAD Modelle

4. Meine Motivation
• Sauberer Code
• Codestyles
• Objektorientierung
• Sauberes Design
• Kohärente Klassen
• Pattern
• Domain Driven Design

5. Softwarequalität!?
http://www.enzyklopaedie-der-wirtschaftsinformatik.de/lexikon/is-management/Systementwicklung/Management-der-
Systementwicklung/Software-Qualitatsmanagement/Qualitatsmerkmale-von-Software/index.html

6. Informatik ist angewandte Philosophie
"Prof. Dominikus Herzberg"
Software ist Kunst
Sauberer Code ist ästhetisch
Reduktion von Komplexität durch Abstraktion
Wenn Code auch noch Probleme löst, doppelt geil!

7. „Frontend“ war „früher“ in der Form
nicht möglich
• HTML / CSS -> Designer
• Browserinkompatibilität
• CSS from scratch, keine Standards
• Prototype / jQuery Wurstelcode
• Es gab keine guten Leute die HTML/CSS gemacht haben
• Aus dieser Not sind outsourcing Firmen entstanden

8. Modernes Frontend Zeitalter
• Frontend muss halt jeder machen
• Node
• SPA
• Es entstehen permanent Unmengen an neuen Libraries / Frameworks
• Toolchain
 Grunt / Gulp
 SASS / LESS
• CSS Frameworks (Twitter Bootstrap FTW, Foundation, etc.)

9. Mein "Frontend Stack" fühlt sich
"überaltert" an
• "Full Page Reload" Anwendung, mit JQuery "hier und da“
• Inline-JavaScript
• Assets eingecheckt in Versionsverwaltung (WYSIWYG *urgh*)
• Twitter Bootstrap als CSS eingebunden
• Assetic stinkt zum Himmel

10. Moderner Frontend Stack FTW!
• Assetic rauswerfen! Ersetzt durch grunt/gulp! BAM!
• Assets über Bower eingebunden! BAM!
• Twitter Bootstrap aus SASS compilieren lassen! BAM!
• Font Awesome aus SASS compilieren lassen! BAM!
• ...aber immer noch "Full Page Reload" mit Inline JQuery :/

11. jQuery ist einfach scheiße
für moderne
Webentwicklung!
...Selbst mit jQuery-Modules

12. Angular funktioniert (für uns) nicht
weil...
• Nicht wirklich dafür gedacht was anderes außer einer SPA zu machen
• Friss oder stirb Ansatz (Full Stack)
• Two Way Data Binding ist eigentlich nur so mittel
• Lernkurve viel zu steil

13. Hautzi + React = <3
• Unglaublich einfach (nur "state" und "props")
• View Rendering über Virtual DOM
• Javascript und JSX (ES6)
• Komponentenbasiert, Komponenten bestehen aus Komponenten (und noch
mehr Komponenten)
• Anwendung Schritt für Schritt von innen nach außen assimilieren
• Nachteil: Setup seeeeeehr aufwändig, Lizenz

17. FLUX
• Sauberes Softwaredesign
• State Container als zentrales Datenhaltungskonzept
• Unidirectional Data Flow
• "Undo" at no cost
• "Time Travel“
• „Hot Reloading“

19. Benefits
• Sukzessive Anwendung modern machen trotz Full Page Reloads
• Moderner Stack
 Aquise
 Spass an der Freude

20. Dat waars!
• Danke fürs Aufpassen
• Q&A
• Evtl. Live Demo