UI Composition for microservices

As an agile alternative to server side includes, Arek Czarnik and I together with our Team developed a solution to handle a coperate design over multiple sites and teams with Tests always in mind.

We hold that talk at Javaland 2016

Transcript

1. UI Composition Arkadiusz Czarnik - Software Engineer Alwin Mark - Software Engineer An agile Alternative to Server Side Includes
2. REWE digital 2 Mitarbeiterentwicklung Vision Wir steigern die Lebensqualität unserer Kunden, weil sie bei uns alle Dinge des täglichen Bedarfs bekommen - einfach, jederzeit und überall. Mission Durch die Nutzung digitaler Möglichkeiten erleichtern wir den alltäglichen Einkauf über alle Kanäle.
3. Architecture 2015
4. Agile INDIVIDUALS AND INTERACTIONS OVER PROCESS AND TOOLS WORKING SOFTWARE OVER COMPREHENSIVE DOCUMENTATION CUSTOMER COLLABORATION OVER CONTRACT NEGOTIATION RESPONDING TO CHANGE OVER FOLLOWING A PLAN
5. Individuals and Interactions vs. processes todo doing done use Kanban try Kanban tool learn about Kanban get a white Board
6. Individuals and Interactions vs. processes inspect limit measure improve
7. Individuals and Interactions vs. processes inspect measure improve limit? Keine Zeit!
8. Individuals and Interactions vs. processes Inspect scale measure improve
9. Inspect - Process Dec 2015 PO & UI/UX Feature Teams [1] https://www.flickr.com/photos/magia3e/4391050388
10. Inspect - Process Dec 2015
11. Why X-functional Teams [1] http://www.wordclouds.com/ A Team is able to implement a feature on their own more efficient predictable higher innovation
12. Inspect - Process Dec 2015 UI/UX Frontend developing UI/UX Concept Implementing HTML Prototype
13. Inspect - Process Dec 2015 Frontend Backend Implement Controller and Models Transform to JSPs
14. Inspect - Process Dec 2015 Backend & Frontend QA Browser and Explorative Testing Implement Concept
15. Inspect - Process Dec 2015 QA PO, UI / UX, Developers Change concept Filing bugs
16. Lessons learned
17. Conclusion - Product Owner Slow Feedback loops Bad time to market
18. Conclusion - UI/UX Slow Feedback loops Unfinished concepts
19. Conclusion - Frontend Developer prototyping waste
20. Conclusion - Backend Developer frequent code restructuring Waste and Time pressure bad code
21. Conclusion - QA Late Testing [1] https://upload.wikimedia.org/wikipedia/commons/1/16/Bundesarchiv_Bild_183-1987-0402-006,_Getr%C3%A4nkekombinat_Magdeburg,_Flie%C3%9Fband,_Industriearbeiterin.jpg manual effort
22. Frontend architecture 1.0 new: old:
23. Requirements - Part I • AB - testing • performance • time to market
24. Requirements - Part II • No more oneway templates • early testing • compatible with microservices
25. UI-Service 1.0
26. Frontend Architecture 2.0
27. In the meantime - Microservice
28. Modularisation [1] http://atomicdesign.bradfrost.com/ [2] https://vimeo.com/109130093
29. Living Style Guide
30. Used Technologies
31. How to bring modules together Page Organisms Molecules Atoms A C B D E D E D E A B C D E Bower
32. How to bring modules together [1] http://images.clipartpanda.com/page-clip-art-paper-01.png Template Package main.js Template page.js Javascript style.css Styling page.json Meta A B C D E GRUNT
33. How to bring modules together DEV Backend Frontend
34. Testing frequency integration Level Dev Integration Prod BDD TDD Contracts µBenchmarks Performance Monitoring Browser Tests
35. Big Picture
36. Catalan
37. Single Responsibility UI-Kompostion & Kommunikation mit Services
38. Leitlinien Reaktiv Widerstandsfähig: Das System bleibt selbst bei Ausfällen von Hard- oder Software antwortbereit. Antwortbereit: Das System antwortet unter allen Umständen zeitgerecht, solange dies überhaupt möglich ist. Elastisch : Das System bleibt auch unter sich ändernden Lastbedingungen antwortbereit. Nachrichtenorientiert: Das System verwendet asynchrone Nachrichtenübermittlung zwischen seinen Komponenten zur Sicherstellung von deren Entkopplung und Isolation sowie zwecks Übermittlung von Fehlern an übergeordnete Komponenten.
39. Fast-Rendering &
40. Zero-Copy Bytes werden zwischen Kernel- und User-Space kopiert. (schlechte Leistung)
41. Zero-Copy Kernel behandelt das Kopieren. Keine CPU Load Wenig Load auf dem Bus-System Kein Kopieren zwischen Kernelspace und Userspace
42. Zero-Copy
43. Zero-Copy
44. Zero-Copy
45. Big-Pipe
46. Big-Pipe ...to cut into pieces... rewe-shop...
47. Big-Pipe < Header Menu > < TimeSlot < Produkte Aktionen >
48. Big-Pipe 1. Http-Request 2. Einfacher Response 3. Flush Response 4. Generiere die Pagelets 5. Flush die Pagelet im Response 6. Führe Javascript aus. Request Response chunk 1: template chunk 2: produkte chunk 3: timeslots chunk x: <pagelet x> Http 1.1: Request -> Response stream chunked
49. Big-Pipe Javascript Positionierung rendered main template chunk 2: produkte chunk 3: timeslots chunk 4: header chunk 5: aktionen
50. Big-Pipe
51. Big-Pipe & =
52. Verständliche DSL <product.tpl>
53. Konfiguration zur Laufzeit HTTP-POST:/admin/route
54. Isomorphic Templating ?
55. Big-Pipe + = Context-Switches: Bei 1.000 Request belastet 2% der CPU. 3-4 ms Latenzzeit bei 1.000 Request
56. Isomorphic Templating
57. bidirektionale Kommunikation
58. bidirektionale Kommunikation
59. Monitoring live timeline
60. 60 …WE ARE HIRING.
61. 61 Referenzen: Kontakt: arek.czarnik@rewe-digital.com alwin.mark@rewe-digital.com https://speakerdeck.com/sdeleuze/isomorphic-templating-with-spring-boot-nashorn-and-react http://www.reactivemanifesto.org http://reactivex.io http://patternlab.io