SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Frontend Development
für Backend Developer
Die Transformation in ein modernes Zeitalter
Christoph Hautzinger <c.hautzinger@conspecton.com>
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
www.conspecton.com
• Toolkit für Medizintechnikfachplaner
• Applikation zur Krankenhausplanung
• Produktdatenportal für Medizingeräte
• Planungsleistung / CAD Modelle
Meine Motivation
• Sauberer Code
• Codestyles
• Objektorientierung
• Sauberes Design
• Kohärente Klassen
• Pattern
• Domain Driven Design
Softwarequalität!?
http://www.enzyklopaedie-der-wirtschaftsinformatik.de/lexikon/is-management/Systementwicklung/Management-der-
Systementwicklung/Software-Qualitatsmanagement/Qualitatsmerkmale-von-Software/index.html
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!
„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
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.)
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
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 :/
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 oder stirb Ansatz (Full Stack)
• Two Way Data Binding ist eigentlich nur so mittel
• Lernkurve viel zu steil
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
FLUX
• Sauberes Softwaredesign
• State Container als zentrales Datenhaltungskonzept
• Unidirectional Data Flow
• "Undo" at no cost
• "Time Travel“
• „Hot Reloading“
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

Weitere ähnliche Inhalte

Andere mochten auch

React + mobx分享(黄英杰)
React + mobx分享(黄英杰)React + mobx分享(黄英杰)
React + mobx分享(黄英杰)kkxx1254
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React NativeTadeu Zagallo
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react nativeModusJesus
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Anna Dahlström
 
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der Praxis
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der PraxisMehrere Apps, ein Backend: Windows Azure Mobile Services in der Praxis
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der PraxisJan Hentschel
 

Andere mochten auch (6)

MobX
MobX MobX
MobX
 
React + mobx分享(黄英杰)
React + mobx分享(黄英杰)React + mobx分享(黄英杰)
React + mobx分享(黄英杰)
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der Praxis
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der PraxisMehrere Apps, ein Backend: Windows Azure Mobile Services in der Praxis
Mehrere Apps, ein Backend: Windows Azure Mobile Services in der Praxis
 

Ähnlich wie Frontend Development für Backend Developer

Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und TestsDaniel Fisher
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015AboutYouGmbH
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen....NET User Group Rhein-Neckar
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Community ITmitte.de
 
Architectures for .Net Core Applications
Architectures for .Net Core ApplicationsArchitectures for .Net Core Applications
Architectures for .Net Core ApplicationsRobin Sedlaczek
 
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampWerner Keil
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtChristoph Reinartz
 
.NET Core Architecture (UI)
.NET Core Architecture (UI).NET Core Architecture (UI)
.NET Core Architecture (UI)Robin Sedlaczek
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 

Ähnlich wie Frontend Development für Backend Developer (20)

Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
 
Architectures for .Net Core Applications
Architectures for .Net Core ApplicationsArchitectures for .Net Core Applications
Architectures for .Net Core Applications
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCamp
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
.NET Core Architecture (UI)
.NET Core Architecture (UI).NET Core Architecture (UI)
.NET Core Architecture (UI)
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 

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
  • 14.
  • 15.
  • 16.
  • 17. FLUX • Sauberes Softwaredesign • State Container als zentrales Datenhaltungskonzept • Unidirectional Data Flow • "Undo" at no cost • "Time Travel“ • „Hot Reloading“
  • 18.
  • 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

Hinweis der Redaktion

  1. 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“
  2. „Sunicon“ „donnerstagbox“