Frontend Development
für Backend Developer
Die Transformation in ein modernes Zeitalter
Christoph Hautzinger <c.hautzinger...
Hautzi – WTF!?
• Nerd
• Web since 2ooo
STIMME.NET
diginights.com
100 Days Software Projects
Zend Technologies
Frank und Fr...
www.conspecton.com
• Toolkit für Medizintechnikfachplaner
• Applikation zur Krankenhausplanung
• Produktdatenportal für Me...
Meine Motivation
• Sauberer Code
• Codestyles
• Objektorientierung
• Sauberes Design
• Kohärente Klassen
• Pattern
• Domai...
Softwarequalität!?
http://www.enzyklopaedie-der-wirtschaftsinformatik.de/lexikon/is-management/Systementwicklung/Managemen...
Informatik ist angewandte Philosophie
"Prof. Dominikus Herzberg"
Software ist Kunst
Sauberer Code ist ästhetisch
Reduktion...
„Frontend“ war „früher“ in der Form
nicht möglich
• HTML / CSS -> Designer
• Browserinkompatibilität
• CSS from scratch, k...
Modernes Frontend Zeitalter
• Frontend muss halt jeder machen
• Node
• SPA
• Es entstehen permanent Unmengen an neuen Libr...
Mein "Frontend Stack" fühlt sich
"überaltert" an
• "Full Page Reload" Anwendung, mit JQuery "hier und da“
• Inline-JavaScr...
Moderner Frontend Stack FTW!
• Assetic rauswerfen! Ersetzt durch grunt/gulp! BAM!
• Assets über Bower eingebunden! BAM!
• ...
jQuery ist einfach scheiße
für moderne
Webentwicklung!
...Selbst mit jQuery-Modules
Angular funktioniert (für uns) nicht
weil...
• Nicht wirklich dafür gedacht was anderes außer einer SPA zu machen
• Friss ...
Hautzi + React = <3
• Unglaublich einfach (nur "state" und "props")
• View Rendering über Virtual DOM
• Javascript und JSX...
FLUX
• Sauberes Softwaredesign
• State Container als zentrales Datenhaltungskonzept
• Unidirectional Data Flow
• "Undo" at...
Benefits
• Sukzessive Anwendung modern machen trotz Full Page Reloads
• Moderner Stack
 Aquise
 Spass an der Freude
Dat waars!
• Danke fürs Aufpassen
• Q&A
• Evtl. Live Demo
Frontend Development für Backend Developer
Frontend Development für Backend Developer
Frontend Development für Backend Developer
Frontend Development für Backend Developer
Nächste SlideShare
Wird geladen in …5
×

Frontend Development für Backend Developer

50 Aufrufe

Veröffentlicht am

Die Transformation in ein modernes Zeitalter

Veröffentlicht in: Ingenieurwesen
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
50
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Hint auf Tests

    ANEKDOTE SIMON ERZÄHLEN!!!

    „Ich schreib richtig geilen Code und dann kommt der Chef und will ne Änderung haben und die kann man da nicht mehr“
  • „Sunicon“ „donnerstagbox“
  • Frontend Development für Backend Developer

    1. 1. Frontend Development für Backend Developer Die Transformation in ein modernes Zeitalter Christoph Hautzinger <c.hautzinger@conspecton.com>
    2. 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. 3. www.conspecton.com • Toolkit für Medizintechnikfachplaner • Applikation zur Krankenhausplanung • Produktdatenportal für Medizingeräte • Planungsleistung / CAD Modelle
    4. 4. Meine Motivation • Sauberer Code • Codestyles • Objektorientierung • Sauberes Design • Kohärente Klassen • Pattern • Domain Driven Design
    5. 5. Softwarequalität!? http://www.enzyklopaedie-der-wirtschaftsinformatik.de/lexikon/is-management/Systementwicklung/Management-der- Systementwicklung/Software-Qualitatsmanagement/Qualitatsmerkmale-von-Software/index.html
    6. 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. 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. 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. 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. 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. 11. jQuery ist einfach scheiße für moderne Webentwicklung! ...Selbst mit jQuery-Modules
    12. 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. 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
    14. 14. FLUX • Sauberes Softwaredesign • State Container als zentrales Datenhaltungskonzept • Unidirectional Data Flow • "Undo" at no cost • "Time Travel“ • „Hot Reloading“
    15. 15. Benefits • Sukzessive Anwendung modern machen trotz Full Page Reloads • Moderner Stack  Aquise  Spass an der Freude
    16. 16. Dat waars! • Danke fürs Aufpassen • Q&A • Evtl. Live Demo

    ×