Sebastian Rosik: Architektura aplikacji przeglądarkowych w oparciu o lokalną komunikację pomiędzy wieloma dokumentami - RST CodeMeeting
•Download as PPTX, PDF•
0 likes•58 views
Prosty problem: sprawić by w przeglądarce wiele zakładek tego samego sklepu pokazywało faktyczną ilość produktów w koszyku niezależnie od tego w której zakładce klient dodał akurat produkt do koszyka. W jaki sposób możemy sprawić by stan w jednej zakładce był automatycznie synchronizowany z innymi? Jak to wpływa na architekturę aplikacji? Problem wydaje się dość prosty i jego różne formy możemy spotkać w wielu typach aplikacji. Ilość możliwych rozwiązań tego problemu jest bardzo duża, lecz każde z nich posiada oczywiście swoje plusy i minusy oraz koszta jak i zyski.
Sebastian Rosik: Architektura aplikacji przeglądarkowych w oparciu o lokalną komunikację pomiędzy wieloma dokumentami - RST CodeMeeting
- 1. Architektura aplikacji przeglądarkowych w oparciu o lokalną komunikację pomiędzy wieloma dokumentami (a.k.a. Muszę popracować nad tytułami)
- 2. HELLO!Sebastian Rosik If you’re reading this, you can tweet to me at @sebastianrosik
- 3. Czego się spodziewać? ● Przegląd możliwości przeglądarek ● Czym się różnią, jakie są ich mocne i słabe strony? ● Nie będę wchodził w szczegóły ● Nie będzie kodu ○ (no może jedna linia)
- 6. Co się z czym komunikuje? Legenda
- 7. frontend backend User 1 User 2 User 3
- 8. frontend backend User 1 User 2 User 3
- 9. frontend backend User 1 User 2 User 3
- 10. frontend backend User 1 User 2 User 3
- 12. 25 PLN 132 PLN 2,5 PLN 25 PLN 132 PLN 2,5 PLN Sklep 0 Problem z życia wzięty
- 13. Fajny ciuch #1 0 25 PLN Dodaj do koszyka Fajny ciuch #1 0 25 PLN Dodaj do koszyka Fajny ciuch #1 0 25 PLN Dodaj do koszyka25 PLN 132 PLN 2,5 PLN 25 PLN 132 PLN 2,5 PLN Sklep 0
- 14. Fajny ciuch #1 0 25 PLN Dodaj do koszyka Fajny ciuch #1 0 25 PLN Dodaj do koszyka 25 PLN 132 PLN 2,5 PLN 25 PLN 132 PLN 2,5 PLN Sklep 0 Fajny ciuch #1 0 25 PLN Dodaj do koszyka
- 15. Fajny ciuch #1 0 25 PLN Dodaj do koszyka Fajny ciuch #1 0 25 PLN Dodaj do koszyka 25 PLN 132 PLN 2,5 PLN 25 PLN 132 PLN 2,5 PLN Sklep 0 Fajny ciuch #1 1 25 PLN Dodaj do koszyka
- 16. Fajny ciuch #2 0 25 PLN Dodaj do koszyka Fajny ciuch #1 0 25 PLN Dodaj do koszyka 25 PLN 132 PLN 2,5 PLN 25 PLN 132 PLN 2,5 PLN Sklep 0 Fajny ciuch #1 1 25 PLN Dodaj do koszyka Fajny ciuch #2 0 25 PLN Dodaj do koszyka
- 17. Na ile sposobów możemy wysłać wiadomośc do innego dokumentu?
- 18. To zależy ● Od przeglądarek w jakie celujemy i czy dane rozwiązanie jest na nie dostępne. ● Od naszej potrzeby. ● Co akceptujemy jako poprawne rozwiązanie a co jako hack?
- 19. BACKEND
- 20. frontend backend C Wymiana wiadomości poprzez backend BA WebSocket
- 21. frontend backend Wymiana wiadomości poprzez backend CBA
- 23. Wymiana wiadomości poprzez backend ● Kwestia odpowiedzialności ○ Czy backend powinien wiedzieć o stanie UI? ● Koszta utrzymania infrastruktury
- 24. Rozwiązania backendowe Pros ● Elastyczne rozwiązanie ● Działa z każdą przeglądarką Cons ● Kosztuje nas pieniądze ● To może być overkill dla małych potrzeb
- 25. FRONTEND
- 27. window.postMessage Komunikacja pomiędzy dokumentami w relacji rodzic- dziecko, które mogą znajdować się pod różnymi domenami.
- 28. Document w relacji Referencja do innego dokumentu uzyskana przez window.open() lub poprzez osadzenie innego dokumentu w IFRAME. http://shop.com http://external.net http://shop.com Pop up Embedded document
- 29. window.postMessage ● Musimy sprawdzić pochodzenie każdej odebranej wiadomości. ● Problem bezpieczeństwa.
- 31. Channel Messaging API Komunikacja z pomiędzy dokumentami w tej samej lokacji (origin)
- 33. Channel Messaging API ● Musimy posiadać referencje do dokumentu ● Do dyspozycji dwa powiązane porty. Jeden transferujemy do drugiego okna. ● Tylko dwa dokumenty mogą ze sobą rozmawiać
- 35. Broadcast Channel API It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin
- 36. Broadcast Channel API http://shop.com my_channel http://shop.com Brak relacji pomiędzy dokumentami. Ten sam origin. my _channel my _channel my _channel
- 37. Broadcast Channel API ● pub/sub ● Jedna instancja to jeden kanał o konkretnej nazwie ● Tylko same-origin
- 41. Podsumowanie
- 42. Channel Messaging API ● Cross domain ● Tylko dokumenty z relacją rodzic-dziecko ● Transfer portów komunikacyjnych Broadcast Channel API ● Only same domain ● Full-duplex dla nasłuchujących na kanale dokumentów window.postMessage ● Cross domain ● Tylko dokumenty z relacją rodzic-dziecko ● Oparte na zdarzeniach, bez portów ● Wiadomości potencjalne niebezpieczne
- 43. Istnieją też inne rozwiązania* *są straszne. Brrrr.
- 44. LocalStorage Komunikacja poprzez zapis wiadomości do Storage. Pozostałe dokumentu otrzymują zdarzenie o zapisie do Storage i mogą odczytać wiadomość. Somewhat hackish solution™
- 45. LocalStorage ● Każdy załączony skrypt ma dostęp do LS co my ○ A więc może wyczyścić nam Storage ● Ograniczona przestrzeń współdzielona z innymi danymi ● Czy to jest jego odpowiedzialność?
- 47. localStorage
- 49. Ciastka! ● Dostępne w każdej przeglądarce ● Niestety mała przestrzeń ● Ale za to można też przesłać wiadomość do serwera… ● ...nie no, żartuję. To hackish, DON’T DO IT