SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
Symfony & React
A live coded migration
@stadolf
Move all the things into the frontend
• Die Nutzer haben Rechner. Mit Prozessoren.
• Warum sollten unsere Server die ganze Arbeit machen?
• Lokale Applikationen sind viel schneller als Roundtrips
• Je weniger Server es gibt, desto weniger Server können kaputt gehen
• —> “Serverless” deployments & microservices
• Es lohnt sich, zu verstehen, wie das Frontend funktioniert!
@stadolf
React
• Vor 100 Jahren von Facebook erfunden
• Ursprung: der Messenger
• JSX: Komponenten-Markup in Javascript
• Virtual DOM
• “Shadow” DOM-Repräsentation in Javascript
• Komponenten
• State & Props
• Seit 16.8: Hooks
@stadolf
Vue
• Aus der OpenSource Community
• Best of Angular & React
• .vue template-Files
• Direktiven-Markup <v-if>
• Klassenkomponenten
• Methods, computeds, watchers
• v-model: two-way data binding
@stadolf
Svelte
• Benötigt keine Runtime
• Self contained components
• Kompiliert zu vanilla JS
• Fühlt sich an wie Vue
• .svelte-Template-Files
@stadolf
Was wir bauen werden
• API-getriebene SPA zum Erstellen von Online Events in React
• Frontend: Bootstrap
• Ausgehend von einer simplen Symfony Forms App / Twig
• 7 Iterationen
https://github.com/elmariachi111/nca-api/pulls
@stadolf
Iteration 0 (master)
• Klassische Symfony Forms-Applikation
• Events: Entitäten
• Sqlite / Doctrine ORM
• Jeder Request rendert Twig Views
• POST-Requests modifizieren die Entität
@stadolf
Iteration 1 (frontend)
• node-Tools: node, NPM, Yarn, NVM, Npx
• npx create-react-app spa
• Package.json: production build (-> public)
@stadolf
Iteration 2 (frontend basics)
• Install react-bootstrap
• bootstrap mit node-sass bauen
• Einfache Layout-Komponente
• Statische Daten
@stadolf
Iteration 3 (routing)
• @reach/router
• <Router>
• Pages unter <Router>
• Index
• Edit
• Breadcrumb-Links
@stadolf
Iteration 4 (editor)
• React Hooks
• Frontend Validation
• Bootstrap Feedback hints
•
@stadolf
Iteration 5 (forms)
• React Hooks
• Frontend Validation
• Bootstrap Feedback hints
•
@stadolf
Iteration 6 (form submission)
• Date picker
• Submit handlers
• Globaler initial / application state
@stadolf
Iteration 7 (PHP->API)
• Symfony: expose event entity as CRU(D) API
• Deprecate old routes
@stadolf
Iteration 8 (API im Frontend)
• Axios
• CORS (Symfony)
• SPA: Umgebungsvariablen
• Submit Changes to the API
@stadolf
Und nun?
• Next.js / Nuxt.js
• Sails / Nest.js / Strongloop (Backend)
• -> Javascript *everywhere* = massive code reuse
• Static Site generators
• -> Gatsby!
@stadolf
Da.nk/E
@stadolf

Weitere ähnliche Inhalte

Ähnlich wie Never Code Alone: Von Symfony Forms zu einer SPA auf APIs

Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
Virttoo org
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
dominion
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
Sandro Sonntag
 
OSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
OSMC 2014 | Icinga Web 2 kann mehr by Thomas GelfOSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
OSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
NETWAYS
 
Studiosdigital wieninternational.at
Studiosdigital wieninternational.atStudiosdigital wieninternational.at
Studiosdigital wieninternational.at
StudiosDigital GmbH
 

Ähnlich wie Never Code Alone: Von Symfony Forms zu einer SPA auf APIs (20)

Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer InfrastrukturContinuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
 
AdminCamp 14 - IBM Connections Deep Dive
AdminCamp 14 - IBM Connections Deep DiveAdminCamp 14 - IBM Connections Deep Dive
AdminCamp 14 - IBM Connections Deep Dive
 
Icinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga 2009 at Nagios Workshop
Icinga 2009 at Nagios Workshop
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
OSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
OSMC 2014 | Icinga Web 2 kann mehr by Thomas GelfOSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
OSMC 2014 | Icinga Web 2 kann mehr by Thomas Gelf
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep Dive
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfOSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
 
Studiosdigital wieninternational.at
Studiosdigital wieninternational.atStudiosdigital wieninternational.at
Studiosdigital wieninternational.at
 

Mehr von Stefan Adolf

Mehr von Stefan Adolf (20)

Blockchains - Technical foundations
Blockchains - Technical foundationsBlockchains - Technical foundations
Blockchains - Technical foundations
 
HOW TO SURVIVE A 2DAY HACKATHON?
HOW TO SURVIVE A 2DAY HACKATHON?HOW TO SURVIVE A 2DAY HACKATHON?
HOW TO SURVIVE A 2DAY HACKATHON?
 
Digitale Selbstbestimmung mit Hilfe dezentraler Technologien
Digitale Selbstbestimmung mit Hilfe dezentraler TechnologienDigitale Selbstbestimmung mit Hilfe dezentraler Technologien
Digitale Selbstbestimmung mit Hilfe dezentraler Technologien
 
Digitale Selbstbestimmung | Anwendungsfälle der Dezentralität
Digitale Selbstbestimmung | Anwendungsfälle der DezentralitätDigitale Selbstbestimmung | Anwendungsfälle der Dezentralität
Digitale Selbstbestimmung | Anwendungsfälle der Dezentralität
 
Decentralized technology: a (short) survey
Decentralized technology: a (short) surveyDecentralized technology: a (short) survey
Decentralized technology: a (short) survey
 
Productive web applications that run only on the frontend
Productive web applications that run only on the frontendProductive web applications that run only on the frontend
Productive web applications that run only on the frontend
 
DePA - die dezentrale Patientenakte (29.1. FU Berlin)
DePA - die dezentrale Patientenakte (29.1. FU Berlin)DePA - die dezentrale Patientenakte (29.1. FU Berlin)
DePA - die dezentrale Patientenakte (29.1. FU Berlin)
 
DePA - die dezentrale Patientenakte
DePA - die dezentrale PatientenakteDePA - die dezentrale Patientenakte
DePA - die dezentrale Patientenakte
 
Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?
 
Decentralize all the things
Decentralize all the thingsDecentralize all the things
Decentralize all the things
 
Indexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The GraphIndexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The Graph
 
Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019
 
A micro service story
 A micro service story A micro service story
A micro service story
 
Api Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformApi Platform: the ultimate API Platform
Api Platform: the ultimate API Platform
 
Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)
 
Testing API platform with Behat BDD tests
Testing API platform with Behat BDD testsTesting API platform with Behat BDD tests
Testing API platform with Behat BDD tests
 
Hack it like its hot!
Hack it like its hot!Hack it like its hot!
Hack it like its hot!
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platform
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 

Never Code Alone: Von Symfony Forms zu einer SPA auf APIs

  • 1. Symfony & React A live coded migration @stadolf
  • 2. Move all the things into the frontend • Die Nutzer haben Rechner. Mit Prozessoren. • Warum sollten unsere Server die ganze Arbeit machen? • Lokale Applikationen sind viel schneller als Roundtrips • Je weniger Server es gibt, desto weniger Server können kaputt gehen • —> “Serverless” deployments & microservices • Es lohnt sich, zu verstehen, wie das Frontend funktioniert! @stadolf
  • 3. React • Vor 100 Jahren von Facebook erfunden • Ursprung: der Messenger • JSX: Komponenten-Markup in Javascript • Virtual DOM • “Shadow” DOM-Repräsentation in Javascript • Komponenten • State & Props • Seit 16.8: Hooks @stadolf
  • 4. Vue • Aus der OpenSource Community • Best of Angular & React • .vue template-Files • Direktiven-Markup <v-if> • Klassenkomponenten • Methods, computeds, watchers • v-model: two-way data binding @stadolf
  • 5. Svelte • Benötigt keine Runtime • Self contained components • Kompiliert zu vanilla JS • Fühlt sich an wie Vue • .svelte-Template-Files @stadolf
  • 6. Was wir bauen werden • API-getriebene SPA zum Erstellen von Online Events in React • Frontend: Bootstrap • Ausgehend von einer simplen Symfony Forms App / Twig • 7 Iterationen https://github.com/elmariachi111/nca-api/pulls @stadolf
  • 7. Iteration 0 (master) • Klassische Symfony Forms-Applikation • Events: Entitäten • Sqlite / Doctrine ORM • Jeder Request rendert Twig Views • POST-Requests modifizieren die Entität @stadolf
  • 8. Iteration 1 (frontend) • node-Tools: node, NPM, Yarn, NVM, Npx • npx create-react-app spa • Package.json: production build (-> public) @stadolf
  • 9. Iteration 2 (frontend basics) • Install react-bootstrap • bootstrap mit node-sass bauen • Einfache Layout-Komponente • Statische Daten @stadolf
  • 10. Iteration 3 (routing) • @reach/router • <Router> • Pages unter <Router> • Index • Edit • Breadcrumb-Links @stadolf
  • 11. Iteration 4 (editor) • React Hooks • Frontend Validation • Bootstrap Feedback hints • @stadolf
  • 12. Iteration 5 (forms) • React Hooks • Frontend Validation • Bootstrap Feedback hints • @stadolf
  • 13. Iteration 6 (form submission) • Date picker • Submit handlers • Globaler initial / application state @stadolf
  • 14. Iteration 7 (PHP->API) • Symfony: expose event entity as CRU(D) API • Deprecate old routes @stadolf
  • 15. Iteration 8 (API im Frontend) • Axios • CORS (Symfony) • SPA: Umgebungsvariablen • Submit Changes to the API @stadolf
  • 16. Und nun? • Next.js / Nuxt.js • Sails / Nest.js / Strongloop (Backend) • -> Javascript *everywhere* = massive code reuse • Static Site generators • -> Gatsby! @stadolf