Hilfe, wir brauchen ein Frontend
•
0 likes•575 views
Klassische serverseitige Frameworks wie JSF oder Spring MVC haben ausgedient. Heute schreibt man Frontends in Angular, React oder Vue.js, ist doch klar… Aber warum eigentlich? Was bedeuten rein clientseitige Ansätze für die Architektur einer Webanwendung? Und wann sollte man lieber auf die klassischen Frameworks zurückzugreifen? Diese und weitere Fragestellung werden in der Session behandelt.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Hilfe, wir brauchen ein Frontend
Similar to Hilfe, wir brauchen ein Frontend (20)
More from OPEN KNOWLEDGE GmbH
More from OPEN KNOWLEDGE GmbH (20)
Recently uploaded
Recently uploaded (20)
Hilfe, wir brauchen ein Frontend
- 1. Hilfe! Wir brauchen ein Frontend Sven Kölpin - open knowledge GmbH @dskgry @_openknowledge #wissenteilen
- 5. The SPA-Framework is just one of many decisions…
- 7. Server-side rendering GET /index.xhtml Generate HTML html, css, js,… 1 2 3
- 8. Client-side rendering GET /index.html html, css + JavaScript 1 2 Generate HTML 3 Generate JSON GET /data.json [data] 4Generate HTML …
- 9. SSR Time to interactive Time to interactive CSR
- 10. SSR Time to interactive Server == DOM Time to interactive Server == Data CSR
- 11. SSR Time to interactive Server == DOM Web Page • Request amount • Request weight Time to interactive Server == Data App • Less requests • Cheaper requests CSR
- 13. Facts There will be a LOT of (Java | Type)Script Code
- 14. Facts There will be a LOT of (Java | Type)Script Code State management is complex
- 15. Facts There will be a LOT of (Java | Type)Script Code State management is complex Your framework choice is wrong
- 16. A lot of code DDD & Clean architecture High cohesion, Low coupling tweet/ tweet.view.js tweet.js tweet.repository.js tweetCreate.service.js likes/ tweetLike.service.js tweetLike.view.js user/ user.view.js user.js user.repository.js
- 17. State management Most complex part of SPAs Think about Lifetime Dependencies Sources App B CA Global state Local state URL state Derived state UI state Domain state
- 18. Sustainable apps Libraries / Pattern will change → Library management Components will stay → Web Components https://twitter.com/ThePracticalDev/status/715623065078644738
- 19. Data Exchange
- 20. Let‘s just use our RESTful API
- 21. [ { "tweet": "I love the web!", "timeOfTweet": "2019-04-24T08:40:27.5633", "_links": { "self": { "href": "http://localhost:8080/tweets/113" }, "author": { "href": "http://localhost:8080/tweets/113/author" }, "likes": { "href": "http://localhost:8080/tweets/113/likes" } } } ] GET /tweets *API generated with Spring Data Rest
- 22. A SPA needs a Use-Case-Centric API
- 23. Backend For Frontend (BFF) „Every frontend has it‘s own backend“ Use-case specific APIs Frontend is owner Device specific APIs BFF-Web BFF-IOSBFF-Android Microservice A Microservice N Server Monolith
- 24. BFF – Simple Version Monotlih Public API SPA API
- 25. BFF – Advanced Version BFF-Web Service A Service B Universal JS SSR your SPA
- 26. Query your API Use-case specific queries GraphQL REST queries GET /tweets/?fields=author:(name),tweet,likes { tweets(page:0,size:10) { tweet, likes, author { name } } }
- 27. What about - i18n - Validation - Logging
- 28. Data that‘s needed before rendering GET /index.html html, css + JavaScript Generate HTML i18n ? User settings ? …
- 29. Data that‘s needed before rendering SSR data into HTML Use local storage / indexedDB / HTTP-Cache / Service Workers <body> <script> const i18n = JSON.parse('{"lang":"DE_DE","main.welcome":"Willkommen"}'); const settings = JSON.parse('{"decimal_format":"##.#"}'); ... </script> </body>
- 30. Validation Never ever trust the client
- 31. Validation: Universal JS Sharable validation rules
- 32. Logging What‘s happening on the client?
- 34. Authentication Client-side „session“ via JWT Where to store JWT? credentials JWT JWT Browser Server
- 35. Authorization CSR based on roles Menu A Menu B AdminMenu A Menu B { roles: ["user", "admin"] } { roles: ["user"] }
- 36. Authorization The client is never safe Never put sensitive data in JavaScript Implications Server based authorization SPA uses code splitting Menu A Menu B { roles: ["user", "admin"] } Admin 401 Hack!
- 37. Conclusion
- 38. Frameworks & Tools USE THIS!!! Or yarn Helps a lot Must have Cool Cool Underdog Future Keep an eye on
- 39. Decision for SPA / CSR Developer team? Who will use it? Mobile / Offline / PWA?
- 40. When choosing the SPA path SPAs are not „just frontends“ Modern !== CSR e.g. github Consider compile-to frameworks e.g. vaadin SPA
- 41. It‘s ok not to build an SPA in 2k19