Frontend w architekturze mikrousługowej Allegro (aka Opbox od A do .de)

Slajdy z prezentacji na ATM 9, Toruń, 7 września 2016. https://www.youtube.com/watch?v=SKLSYMnmQSo

Transcript

1. 1 Opbox od A do .de czyli jak organizujemy frontend w architekturze mikrousługowej allegro Piotr Orłowski, Rafał Żukowski / Toruń / 7 września 2016
2. O czym opowiemy 2 Co to jest Opbox Frontend allegro przed Opbox Jakie problemy rozwiązujemy Architektura Demo Czego nie pokazaliśmy Zakończenie
3. Co to jest Opbox? 3
4. Frontend allegro przed Opbox 4
5. Architektura frontendu przed opboxem - Varnish + ESI 5 USŁUGA varnish`````````` varnish HTML + ESI <esi:include src="{{{header}}}" /> <esi:include src="{{{footer}}}" /> GET http://allegro.pl/... header-service footer-service HTML
6. Podstawowe korzyści 6 DRY Katalog komponentów Spójny wygląd Porównywalna analityka Uproszczona infrastruktura
7. Architektura Opbox-a 7
8. 8 Prototyp 1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "slots": [], "parameters": [ { "name": "offers", "type": { "typeName": "allegro.offersList" }, "description": "Offers list", "required": true } ], "nameRequired": true, "title": "Offers carousel", "description": "Carousel with offers list" } allegro.offers.carousel 1 2 3 4 5 6 7 8 9 10 11 12 13 { "name": "karuzela", "boxPrototypeId": "allegro.offers.carousel", "version": "1.0", "parameters": [ { "name": "offers", "sourceType": "DATASOURCE", "dataSourceAlias": "oferty" } ], "slots": [ ] } Box
9. 9 Komponent (web) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import handlebars from 'handlebars'; let mainTemplate = handlebars.compile(fileContent); module.exports = { render(props) { return mainTemplate(viewProperties); }, getAssets() { ... }, handledPrototype() { return { name: 'allegro.offers.carousel', version: '1.0' }; } }; allegro.offers.carousel
10. 10 Wyrenderowany komponent webowy
11. 11 Triada Opbox ;) allegro.title parameters: [text] tytuł1 text: “Allegro” Allegro Prototyp Box Komponent
12. 12 Skąd boxy biorą dane? A </> Url Wartość z requestu, path parameter lub query parameter Expression Wyrażenie w języku Opel Datasource Dane z usługi Instant value Gotowa wartość np. wpisana w admince
13. Edycja 13 opbox-admin opbox-core prototypy boxes datasources dataTypes
14. Renderowanie 14 opbox-web varnish opbox-web varnish opbox-core opbox-core GET http://allegro.pl/...
15. Renderowanie - opbox-web 15 request GET http://allegro.pl/... ciastka, nagłówki, url → GET /render/page?route=http://allegro.pl/...
16. Renderowanie 16 opbox-web varnish opbox-web varnish opbox-core opbox-core GET http://allegro.pl/... GET /render/page?route=http://allegro.pl/...
17. Renderowanie - opbox-core 17 routing page snapshot REST client GET /render/page?route=http://allegro.pl/... JSON repozytorium stron request render()
18. Renderowanie 18 opbox-web varnish opbox-web varnish opbox-core opbox-core GET http://allegro.pl/... GET /render/page?route=http://allegro.pl/... JSON
19. 19 request GET http://allegro.pl/... ciastka, nagłówki, url → GET /render/page?route=http://allegro.pl/... repozytorium komponentów (npm) JSON renderowanie HTML opbox-web - renderowanie
20. Renderowanie 20 opbox-web varnish opbox-web varnish opbox-core opbox-core GET http://allegro.pl/... GET /render/page?route=http://allegro.pl/... HTML JSON
21. Demo 2 1
22. 22 wiele gotowych do użycia komponentów mobile sdk warunkowe przekierowania, warunkowa strona 404 polityki slotów, sloty krytyczne parametry strony i metadane i inne... Czego nie pokazaliśmy...
23. 23 Opbox is everywhere...
24. Dziękujemy za uwagę 24 - Strona stworzona podczas demo: http://allegro.pl/zobacz/atm-2016 - Blog http://allegro.tech http://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html - Opel http://github.com/allegro/opel - Allegro Tech Talks Poznan #1, 29 września 2016, czwartek, Pixel http://www.meetup.com/allegrotech/events/233789258/