Frontend Development für Backend Developer
- 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
- 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