Folien mit Einführung und Usecases für eine NCA-Session. Wir beginnen mit einer Symfony Forms-Applikation für eine simple Event-Verwaltung und wandeln sie sukzessive um zu einer React-SPA, die eine Symony-API verwendet. Hier das Repository dafür: https://github.com/nevercodealone/ncaevent-remote-maerz-react

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

17. Da.nk/E
@stadolf