Klient ma aplikacje w angularze, my mamy dość duży komponent w Reacie. React jest kompilowany do web componentu, web - Deykun

★GURU

w Programowanie 2025-09-17T16:55:29+02:00

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.

#programowanie

Komentarze (15)

Sweet_acc_pr0sa 2025-09-17T17:02:12+02:00

@Deykun nic nie rozumiem xD

Fly_agaric 2025-09-17T17:16:20+02:00

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

serel 2025-09-17T17:34:32+02:00

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

pierdonauta_kosmolony

★

2025-09-17T18:13:20+02:00

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

Catharsis 2025-09-17T18:20:54+02:00

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

serel 2025-09-17T18:27:58+02:00

@Catharsis a nie jest? xD

motokate 2025-09-17T19:42:42+02:00

@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 - StepSecurity

The 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

Catharsis 2025-09-17T21:23:58+02:00

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

serel 2025-09-17T21:42:08+02:00

@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

Knight 2025-09-17T23:03:55+02:00

@serel Dej linka

potato_fairy 2025-09-18T04:58:51+02:00

@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?

Deykun

★

2025-09-18T08:08:54+02:00

@potato_fairy

React jest kompilowany do web componentu,

Tego akurat nie czytałem ale jest tam sekcja " 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 Component

The wonderful world that Web Component encapsulation offers you!

Medium

potato_fairy 2025-09-18T09:12:32+02:00

@Deykun a czyli to takie angularowe custom elements

Deykun

★

2025-09-18T09:16:10+02:00

@potato_fairy nie wiem nie szanuję angulara ;d

potato_fairy 2025-09-18T09:18:29+02:00

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

Zaloguj się aby komentować