Najpopularniejszy framework front-end świata zmienia model zarządzania. React będzie rozwijany pod nadzorem nowo powołanej React Foundation, działającej przy wsparciu Linux Foundation oraz szeregu globalnych firm technologicznych. Decyzja oznacza formalne przekazanie kontroli nad projektem przez...
#hejto #hejtocontent #programowanie #makingofhejto
Dzień dobry!
Ostatnio w pracy debatowaliśmy nad pewnym problemem z formularzami - zdarzało się, że zaczynały mocno lagować, szczególnie wtedy, kiedy
a) w formularzu występowało wiele inputów,
b) zmiany na jednym inpucie wpływały na wartość w innym (np. zmiany w polu "Title" wpływały na wartości w polu "Id").
Stack jaki tam aktualnie mamy to Formik + Yup. Z uwagi na fakt, że problem ten był już wcześniej łatany z różnym skutkiem to teraz padła decyzja na zmianę biblioteki obsługującej formularze - nowy stack to react-hook-form + zod.
Ta sytuacja przypomniała mi, że na hejto również korzystamy z Formik + Yup – może więc i u nas przydałaby się zmiana?
Chciałbym zapytać się:
1. Programistów #webdev #frontend #react - czy macie jakieś doświadczenia/przemyślenia w tym temacie?
2. Wszystkich Użytkowników - czy zdarzyło się Wam zauważyć, że formularze na hejto czasem potrafią się przycinać albo działać wolniej? (o problemie w działaniu formularza dodawania komentarza, kiedy jest sporo komentarzy już wiem i jak to ogarnę to będzie o tym osobny wpis
@kris Z formik i react-hook-form nie korzystałem bardzo długo, ale z zod'a korzystam regularnie i jest super. Z takich swoich doświadczeń, to mi przy dużych formularzach pomagało wywalanie state skąd tylko się da. Kiedy każdy input ma swój state, to zaczyna to trochę mulić, a wszystko na dobrą sprawę w submit można wyciągnąć z FormData. Jeżeli chodzi o czyszczenie formularza, to przydaje się zmiana `key`, wtedy każdy input wraca do `defaultValue`. No ale wiem, że nie zawsze się tak da.
@renkeri ja właśnie o zod też wiele dobrego słyszałem, na pewno lepiej waliduje url bo yup przy poprawnym (trochę dziwnym ale jednak poprawnym) linku wywalał błąd a zod go przepuszczał. Rzeczywiście modyfikacja stanu może wpływać negatywnie na performance, szczególnie jak stan jest zadeklarowany w parencie z wieloma childrenami (co może występować u nas właśnie przy dużej ilości komentarzy) - na pewno sprawdzę ten trop
Rozwalającą się składnie posta przy edycji byście naprawili. Cytat przeskakuje zawsze na kolejny akapit.
@lurker_z_internetu podrzucisz jakieś screeny z przykładem niepoprawnego działania?
@kris No generalnie najprościej jest nie przechowywać niczego z formularza w React state, wtedy formularz nie laguje bo nie rerenderuje go całego przy każdym inpucie. Mantine w swoich formularzach ma np. opcje "uncontrolled mode" i dosłownie maja napisane: "Controlled mode is not recommended for large forms". Nie wiem jak to u was wygląda w tej bibliotece bo nigdy z niej nie korzystałem. Ogólnie nie jestem też jakimś expertem Reacta żeby nie było xD. https://mantine.dev/form/uncontrolled/
@Catharsis co do formularzy z inputami w trybie uncontrolled - raczej ich do tej pory nie używałem a to głównie dlatego, że poniekąd wymuszały to biblioteki, z których korzystałem. react-hook-form jest pod tym względem trochę inny bo wewnętrznie właśnie obsługuje inputy jako "uncontrolled" przez co automatycznie ogranicza liczbę renderów ale przy tym ma metody na dobranie się do aktualnej wartości wypełnionego pola - chyba dlatego w moim osobistym rankingu wygrywwa z formikiem
Zaloguj się aby komentować
@Deykun - multiplatformowe frameworki do pisania aplikacja mobilnych się w korpo nie przyjęły
@koszotorobur znaczy w sumie nic złego, korpo mają budżety żeby przepalać je na 3 zespoły do natywnych apek, a multiplatformowe rozwiązania są dobre w projektach gdzie jest kilku devów i lepiej żeby klepali jedną logikę biznesową i poprawiali punktowo na końcówkach niż żeby implementowali końcówki osobno.
Zaloguj się aby komentować
Cześć, zapraszam na botowego strima o 21:00.
. Będzie trochę o NestJS, trochę o TypeORM.
Tag do śledzenia: #programujzpasterzem
#programujzwykopem #programowanie #naukaprogramowania #programista15k #programista25k #javascript #react #nodejs
Zaloguj się aby komentować
Wkurza Cię nowy front vikop i postanowiłeś przejść na hejto? Nic nie działa tam jak trzeba? To dobrze się składa bo w ramach nauki #frontend przygotowuję serię streamów w których spróbujemy napisać własnego klienta i pokazać, że, w co trudno uwierzyć, może być jeszcze gorzej ( ͡° ͜ʖ ͡°) Pokażę Wam jak używać wykopAPI v3 i AntDesign oraz pogadamy o życiu.
https://www.youtube.com/watch?v=stEWW7UVD4Y
Zapraszam na stream o 21:37
Tag do czarnolistowania #programujzpasterzem
#frontend #webdev #naukaprogramowania #programowanie #react #javascript #programista15k #programista20k #wykopapi
Kuzwa dlaczego? Czemu chcesz to sobie zrobić i jeszcze wciągasz w to innych
@Sheppard30 otaguj to odpowiednio #2137
@Sheppard30 poszło do zakładek, może kiedyś se obejrzę
Zaloguj się aby komentować
Hej, zapraszam na strima o 20:00. Piszemy w #react i gadamy o #it #pracait
Nie chcesz widzieć tego typu postów? Dodaj tag #programujzpasterzem na czarną listę.
https://www.youtube.com/watch?v=UaqDg_qlLPk
#programowanie #naukaprogramowania #javascript #webdev #programista15k #frontend #backend
Zaloguj się aby komentować
Opowiadając na łamach bloga o reaktywności graficznych interfejsów użytkownika, wyjaśniłem, czym jest wzorzec obserwator i jak go implementujemy. Później do układanki dodałem, że implementacje obserwatora możemy centralizować i podobny mechanizm wykorzystuje się „pod maską” w programowaniu...
Cześć!
Dzisiaj jeszcze garść krótkich ciekawostek o #react a później już zaczniemy może coś bardziej technicznego
ReactJS: 7 Ciekawostek:
Początki w Facebook
Pierwsze publiczne przedstawienie
To nie jest framework!
Virtual DOM – bohater (bardzo) niewidzialny
Inspiracja wzięta z XHP
React Native - brat bliźniak
A w sumie, to dlaczego "React"?
Zostaw piorun, komentarz albo ... cokolwiek
#reactjs #programowanie #javascript #typescript #frontend
#programystic <- tag do obserwowania lub "czarnolisto-wania"
Zaloguj się aby komentować
Cześć Wam!
Wracamy do gry, po burzliwym okresie w PL
Ostatnio pastwiliśmy się nad wadami Virutal DOM
Dziś przyszedł czas na jego zalety. Jedną z nich poznaliśmy 2 posty wcześniej, lecz to tylko "liźnięcie" tematu.
Wirtualny DOM, to Świety Graal Frontendu?
ps jeśli chcesz się podzielić INNYMI doświadczeniami na w/w, to zapraszam do komentowania
#react #reactjs #programowanie #javascript #typescript #frontend
Zaloguj się aby komentować
Właśnie zrobiłem upgrade bibliotek projektu w React, chociaż jestem backendowcem głównie, ale ogólnie orkiestrą.
Wyje@#% yarn'a i dałem NPM'a. Kiedyś yarn miał sens, ale npm rowniez jest szybki lub nawet szybszy
Jako to ze npm install && npm update jest czysty, to może bun'a zaciągne dla nich, by Ci/CD był szybszy.
Nie wiem jakim cudem wczesniej yarn install działał ale npm install nie. Były locki między bibliotekami, ale yarn ma to w d⁎⁎ie?! ni wiem. Po⁎⁎⁎⁎ne narzędzie, npm lepszy, bo prosty i ładniej pokazuje zależności i błędy. Yarn czasem działał jak wywalilem npm_modules
Upgrade nodeJS z 16lts na 18lts
Z 50 paczek co były updatetowane, tylko 6 nie jest najnowszych, z powodu że locki na reacie 17 są
Frontend team miał wyjebane na to od 3 lat
A to wszystko w 1 dniówkę.
TypeScript działa jak powinien. Dzięki TS upgrade dla mnie był możliwy i łatwy. Ale też ma swoje błędy (np react-google-recaptcha robiła mnie w konia przez zły import statement)
Odchudziłem projekt z wielu bibliotek, które nie były wykorzystywane
Poustawiałem rygorystyczne eslinty, depchecki itp by nie zostawiali po sobie syfu
Ustawiłem sbom by ich ganiać jak jest jakiś security bug w bibliotekach w przyszłości, że ponad 50 bilbiotek ma security bug xD
Zostaje jeszcze przeniesienie material-ui na wersję 5, ale tego na razie nie tykam.
Krzyczeli że nie możliwe, a wystarczyło usiąść po prostu do tego i na spokjnie ogarnąć bez złego nastawienia.
Czuje dobrze człowiek dzisiaj. #react #programowanie #nodejs #typescript #frontend #backend
@Klopsztanga Ja mega lubię podbijać biblioteki i rozwiązywać problemy, które powodują. Jak wszystko zacznie działać, to jest mega satysfakcja. Gorzej jak wychodzi po miesiącu, że coś zjebało się mega specyficznego, na produkcji XD
Co do yarna to jednak moim zdaniem działa szybciej od npma i lokalnie zawsze używamy yarna, ale wszystko na ci/cd leci na npmie.
Frontendowcy to tak mają, że coś się nie da zrobić, do tego narzekają, że coś tam brzydko i jeszcze nieczytelnie piszą kod ;x
@HmmJakiWybracNick na CI/CD widać różnicę, i to sporo. około 25% szybszy jest NPM.
Jak ogarniasz yarna i npm na raz z ich venodr lockami?
Co to satysfakcji - to prawda, spoko robota. Po prostu zabijasz "muchy" po kolei
@Klopsztanga
Nie miałem nigdy problemu z mieszaniem yarna i npma, ale znalazłem, że yarn-locka można zrobić na podstawie package-locka, więc jakby były jakieś problemy, to można uderzyć w tym kierunku - https://classic.yarnpkg.com/blog/2018/06/04/yarn-import-package-lock/
Ale faktycznie, od jakiegoś czasu npm jest dużo szybszy, niż był jakiś czas temu. Pamiętam, że jak kiedyś dodawałem nową libkę, to yarn całość robił w 15 sekund, a npm potrafił mielić przez 3-4 minuty, jakby wszystko przerzucał od początku, a nie tylko tą jedną dodawaną libkę.
Mam w planach podbić jeszcze yarn classic (1.x.x), na tego nowego 3.x.x, może pod koniec roku będzie przestój jakiś, to się zrobi, bo ciekawy jestem czy będzie szybszy.
@wombatDaiquiri @Klopsztanga
Wygląda ciekawie, ale może przetłumaczcie na język osobnika którego szczytem kodzenia jest jeżeli w jeżeli w jeżeli w jeżeli w jeżeli w jeżeli. xlsx
@Marchew generalnie kolega zrobił "sprzątanie", tzn. zaktualizował wersje paczek z których korzystają (to jak byś miał zewnętrzne arkusze np. z innego działu), wymienił narzędzia żeby szybciej rzeczy działały, ustawił wymagania tego jak pisać kod, żeby mógł być wdrożony do głównej gałęzi. Generalnie "ogarnął" środowisko pracy o którym jak rozumiem koledzy mówili że "się nie da".
@Klopsztanga na froncie pokazujemy prącie, stąd te problemy.
Zaloguj się aby komentować
Cześć Wam
Dzisiaj ciekawostka o ReactJs numer #3
> Wirtualny DOM (Virtual DOM) w ReactJS przynosi wiele korzyści, lecz ma również wady! Jakie?
ps te ciekawostki nie omawiają tematów dogłębnie, mają jedynie zachęcić osoby do przyglądnięcia się reactjs
pss jeśli chcesz podzielić się doświadczeniami na w/w to śmiało, zapraszam
#react #reactjs #programowanie #javascript #typescript #frontend
Zaloguj się aby komentować
Cześć Wam
Dzisiaj wrzucam ciekawostkę #2 o ReactJs!
TL;DR: ...zamiast przekształcać całą stronę za każdym razem, kiedy chcemy coś zmienić, dokonujemy tylko niezbędnych zmian.
Jeśli macie jakieś doświadczenia z Virtual Dom, to podzielcie się. Najlepsze będą te negatywne
#react #reactjs #programowanie #javascript #typescript
Jutro pojawi się nowy wpis dot. wad Virutal Dom, bo nigdy nie może być "perfekcyjnie", stay tuned!
Komentarz usunięty
cześć Wszystkim, wczoraj pojawił się nowy post. Tym razem o wadach "wirtualdoma", zapraszam! https://www.hejto.pl/wpis/czesc-wam-wave-dzisiaj-ciekawostka-o-reactjs-numer-3-wirtualny-dom-virtual-dom-w
Zaloguj się aby komentować
Cześć! Tak jak obiecałem wrzucam ciekawostkę związaną z #ReactJs!
Jeszcze wspomnę, że posty będą się składać 1-3 zdań. Zdecydowałem się na taką formę, bo te max 3 zdania jest w stanie przeczytać każdy. Dłuższych postów, nie. Dlatego kogo dany temat zainteresuje, może kliknąć w linka po “więcej”. Zaczynamy! Na Pierwszy strzał idzie twórca Reacta.
TL;DR: React został stworzony przez Jordana Walke, programistę z Facebooka, jako narzędzie do ulepszania interfejsów użytkownika na stronach Facebooka i Instagrama.
ps czy taka forma "ciekawostek" się Wam podoba?
#react #programowanie #javascript
wjechał właśnie nowy post, zapraszam!
https://www.hejto.pl/wpis/czesc-wam-wave-dzisiaj-wrzucam-ciekawostke-2-o-reactjs-tl-dr-zamiast-przeksztalc
Zaloguj się aby komentować
Cześć Wam!
Od dziś chciałbym dzielić się z Wami informacjami o ReactJS - ale! nie tylko technicznymi.
Bardziej bym się skupił na tematach jak:
...i wiele więcej!
Posty będą idealne dla tych, którzy są ciekawi Reacta, ale niekoniecznie są w nim ekspertami.
Czytelniku! Jeśli czujesz, że React przyciąga Cię, ale jeszcze nie podjąłeś decyzji, by się w nim zainteresować na poważnie – te treści są właśnie dla Ciebie.
Chciałbym dać Ci młotek
Dzięki za przeczytanie tego posta!
~~ programystic
ps komentarze, propozycje zmian, uwagi i wszystko co to jest feedbackiem (to chyba po polsku karmiące-plecy?
#programowanie #react #javascript #reactjs
@programystic Jako programista siedzący bardziej w backendzie .NET to React jest dla mnie paskudny do nauczenia. Angular u mnie nie wywołuje nawet takich negatywnych emocji. Mam wrażenie, jakby kod w React był jednym wielkim bajzlem.
jasne! React ma swoją specyfikę i dla osób ze świata .NETa może wydawać się chaotyczny. Angular, z bardziej zintegrowanym podejściem i może wydawać się łatwiejszy w odbiorze. Jedni lubią ogórki kiszone ze śmietaną a inni ziemniaki z czekoladą. Wszystko ma plusy i minusy. Gdzie kucharek 6 tam nie ma co jeść i tak dalej...
@Thereforee Angular rozdziela kod html od javascriptu, React je łączy poprzez JSX. Do tego Angular trzyma się OOP, a React w pewnym momencie poszedł w functional programming.
Także wydaje się to zupełnie normalne, że wolisz Angulara. Angular ma być przyjazny backendowcom (stąd np. w standardzie korzysta z typescripta). React ma zupełnie inną filozofię pisania kodu.
@programystic - w moim sercu tylko Svelte
@koszotorobur no i super
@programystic wołaj jak coś wrzucisz
@zgrzyt wołaaaam!
Zaloguj się aby komentować
Zaloguj się aby komentować
Ejejejejej. Pochwalcie się co ciekawego ostatnio znaleźliście na temat #programowanie - jakąś bibliotekę?
Może jakiś fajny AI model co można uruchomić lokalnie?
Może jakiś zajeb%@#% serwis?
Albo coś fajnego self hosted?
Mam wolny wieczór, chętnie o czymś ciekawym poczytam.
#sztucznainteligencja #js #javascript #react #aws #google #python #php #golang #rust #react
ostatnio sporo siedzę w tematach virtio służbowo, ale chyba to mało dla Ciebie interesujące.
@dotevo co uzywasz do wirtualizacji, i jakiego typu to jest wirtualizacja ? Serwerowa czy użytkownikowa ?
Aby zrozumieć dlaczego virtio jest fajnym rozwiązaniam trzeba się najpierw zagłębić w to jak w ogóle wygląda postawienie systemu np. Androida na urządzeniu. Każdy telefon jest trochę inny. W inne miejsce może być podpięta pamięć, serial itd. Dlatego zawsze kilka tygodni zajmuje pokonfigurowanie kernela. Potem trzeba napisać HAL, który tłumaczy androidowi jak np. używać GPS. To znów wymaga czasu. Każda aktualizacja androida wymaga dopasowania tego co już jest. Często więc dużo czasu i pieniędzy wymaga takie coś - jest też Treble, ale mniejsza z tym teraz.
Konkluzja jest taka:
Różne systemy operacyjne odpalane na czymś w stylu telefonu. Jest system linux host, który przez virtio przekazuje wszystko do guesta (usb, bt, wifi itd) np. Androida i dzięki temu działa od razu bez zabawy w drivery po stronie androida.
To jest o tyle fajne, że jeśli się przyjmie na szeroką skalę to aktualizacja systemu będzie możliwa na dowolnym urządzeniu. Wymiana systemu na dowony inny używający virtio też nie będzie problemem. Może rynek telefonów zacznoe przypominać rynek PC, gdzie możesz sobie podmoenić system i wszystko śmiga.
@Klopsztanga Ostatnio zacząłem się interesować troche fizyką kwantową i okazuje się, że IBM u siebie na stronie ma darmowe narzędzie do budowy obwodów kwantowych - https://quantum-computing.ibm.com/composer/files/new
Niestety póki co nic z tego nie rozumiem
@radler i za szybko nie potestujesz
poznając dalej rusta pocisnąłem tutoriala tokio https://tokio.rs/tokio/tutorial a teraz dalej juz sam sobie implementuje własnego redisa, plcm
Zaloguj się aby komentować
#programowanie #flutter #webdev #react #angular #vue
React to nie framework. Ale zaznaczyłem go, bo używam Next.js, które bazuje na React.
@marmot a to ciekawe. Dlaczego uważasz, że react to nie framework ?
@Gitler Bo React nie daje Ci pełnego stacku, a jedynie obsługę tworzenia reaktywnych komponentów. Możesz bez problemu używać takiego React jak kiedyś używało się jQuery (co zresztą w dawnych czasach robiło się podczas migrowania appek z jQuery na React). Do tego, nawet na stronie Reacta masz: "The library for web and native user interfaces", a jak wejdziesz w https://react.dev/learn/start-a-new-react-project to dopiero listę frameworków, które bazują na Reakcie. To, że ChatGPT twierdzi jedno, to nie znaczy, że tak jest
Laravel ?
Komentarz usunięty
Zaloguj się aby komentować
sa tu jacys frontendowcy/koderzy? mam kilka luznych pytan
#programowanie #frontend #kodowanie #javascript #react #it
React jest w zasadzie tylko biblioteką do renderowania elementów i JavaScript jest w nim kluczowym językiem programowania. W wielu firmach używa się już TypeScriptu, ale myślę, że warto skupić się teraz na czystym JS, żebyś później docenił TS i nie błaźnił się na przyszłych interview.
Co do sensu używania JS to chodzi tu przede wszystkim o automatyzację. Jak wyobrażasz sobie stworzenie takiego portalu jak chociażby Hejto tylko w HTML i CSS? Użytkownicy będą pisać do ciebie maila z komentarzami, a ty będziesz to skrzętnie osądzał pod każdym postem? No chyba nie bardzo. JavaScript obsługuje interakcje z użytkownikiem i komunikuje się z serwerem na którym przechowywanie są wszystkie dane. Te dane później są pobierane przez front-end i renderowane (np. z pomocą Reacta) w przeglądarce. React pozwala na upakowanie treści/logiki w niezależne komponenty np. komentarz pod wpisem. Dużo by się rozwodzić.
Do JavaScriptu polecam stronę MDN (angielski zalecany):
https://developer.mozilla.org/en-US/docs/Learn
Do Reacta oficjalna dokumentacja daje radę na start:
@Jayes spoko tylko srednio zrozumiales o co pytam, bo te zdanie o hejto w html/css jest zdeczka smieszne
anyway rozumiem ze pracujesz jako frontendowiec - nie wydaje ci sie obecnie ten tech rozjebany jeszcze bardziej niz zwykle? pure html/css, do niego x frameworkow, ale jednoczesnie w calosci mozna pisac wszystko w reakcie do ktorego jest jeszcze x bzdur, oprocz reacta vue/angular i inne pierdoly
@blablator Jeszcze jest Svelte i SvelteKit. Polecam sprawdzić, bo to najbliższe czystego html + css + js.
Dodatek od Svelte to pewna reaktywność, binding, store i składnia list generowanych z tablicy. Tak z grubsza. Reszta to czysty html+css+js.
A React i ten jego virtual dom, i cuda typu CSS-in-JS, to nieco przekombinowane. No ale popularne...
Zaloguj się aby komentować
Podstawowe logowanie błędów do małej aplikacji w #javascript nie za miliony monet? Ma wyświetlić ładną stronę błędu po stronie serwera lub klienta, wysłać mi error ze stack trace, idealnie prawdziwym. Słucham propozycji.
Miałem sentry, ale do małego projektu to overkill, a w wersji darmowej resursów wystarczyło na tydzień.
Stack: #react #prisma #node #nextjs #pm2, trochę #testowanieoprogramowania
Firebase Crashlytics możesz sobie sprawdzić. Sentry to klasyczek, ale po przekroczeniu limitu to monety uciekają z portfela.
Zaloguj się aby komentować
