Hejto.pl
Dodaj post

Wpisz coś do wyszukania (minimum 2 znaki)

Wpis użytkownika Deykun w Programowanie

Lider

w Programowanie

28

Klient ma aplikacje w angularze, my mamy dość duży komponent w Reacie. React jest kompilowany do web componentu, web component jest lazy loadowany i osadzany w angularze (bardzo przyjemne rozwiązanie w package.json angulara pojawia się tylko 1 dependency i nie śmieci w angularze zależnościami do tego komponentu). W naszej aplikacji w Reakcie dodałem web worker (żeby liczył na osobnym wątku coś ciężkiego. Liczy to coś biblioteką napisaną chyba w C wykompilowaną do Wasm).

Przed chwilą udało mi się uruchomić logikę napisaną w C wykonwertowaną do Wasm w web workerze w web componecie wygenerowanym z aplikacji reacktowej osadzonym w angularze. WebComponent ma ładny typ w TS który mówi jakich propsów spodziewa się React.

I brzmi to strasznie ale wbrew pozorom bardzo zgrabnie to wszystko działa i ze sobą komunikuje, jest ładne separation of concerns i samo wywołanie zajmuje mniej niż 100 linii na poziomie angulara, a jak jesteśmy w reakcie to budujemy paczkę na wyjście.

Komentarze (15)

Sum0

@Deykun a jak ten komponent napisany w Reacie pojawia się na stronie? Skoro jest tylko dodany moduł w package.json i nie ma żadnych innych referencji nigdzie to brzmi, jakby appendował się do jakiegoś określonego DOM elementu czy macie to jakoś inaczej rozwiązane?

Sum1

@Deykun zgadzam się, angulara jebać prądem

Sum0

@Deykun a czyli to takie angularowe custom elements

Lider1

@potato_fairy

React jest kompilowany do web componentu,

Tego akurat nie czytałem ale jest tam sekcja ":rocket: Create your Web Component From your React Component" i to jest w sumie clue: https://techblog.skeepers.io/create-a-web-component-from-a-react-component-bbe7c5f85ee6 można wygenerować web component z aplikacji reactowej bez instalowania żadnych magicznych paczek.

W kodzie są dwa main.tsx i jeden do developmentu zwykły, i main-to-web-component.tsx który tworzy web component. Technicznie można potem sobie dać go w public zamiast w aplikacji reactowej, ale błędy w tak developowanej apce są gorsze i nie ma dobrego namiaru w map.js, więc lepiej mieć dwa osobne procesy.

A angular instaluje paczkę z web componentem który jest natywny dla JS i to jego osadzam.

Jak rozeznawałem się, to są jakieś inne rozwiązania, z dodatkowymi paczkami, niektóre wymagają instalacji "react" w angularze, ale to opisałem tu bardzo zgrabnie działa.

Create a Web Component from a React ComponentThe wonderful world that Web Component encapsulation offers you!Medium
Osobistość1

@Deykun nie macie dziś pożaru w burdelu z okazji https://www.stepsecurity.io/blog/ctrl-tinycolor-and-40-npm-packages-compromised? U mnie trochę przerwa w developmencie. xD

ctrl/tinycolor and 40+ NPM Packages Compromised - StepSecurityThe popular @ctrl/tinycolor package with over 2 million weekly downloads has been compromised alongside 40+ other NPM packages in a sophisticated supply chain attack dubbed "Shai-Hulud". The malware self-propagates across maintainer packages, harvests AWS/GCP/Azure credentials using TruffleHog, and establishes persistence through GitHub Actions backdoors - representing a major escalation in NPM ecosystem threats.Stepsecurity
Wirtuoz2

@serel Dej linka

Gruba ryba2

@Catharsis tru, dalej supportujemy jednego strupa na nodeJS 12.x xD co prawda nikt nam supply chainem nie wjedzie, ale i bez tego mamy setki podatności 9+ w CVSSv3

Osobistość6

@motokate To trzeba by jeszcze używać aktualnych paczek żeby być na takie coś narażonym xD.

Osobistość3

Przez takie akcje potem przychodzą ludzie od niskopoziomowych języków programowania i z wyższością piszą że webdev to patola jest xD.

Gruba ryba8

@Catharsis a nie jest? xD

Gruba ryba3

A można było wszystko w pehapie opędzić, elegancko by było, a nie taką ekwilibrystykę uprawiać ¯\\( ͡° ͜ʖ ͡°)/¯

Gruba ryba1

@serel
Teraz jak masz zużywać zasoby sprzętowe i prąd - rób to na maszynie klienta.

GURU2

Fajny ulep, ale tak to było pomyślane, żeby jednak działało na koniec, więc chyba wykonanie prawidłowe, skoro śmiga.