Hejto.pl
Dodaj post

Wpisz coś do wyszukania (minimum 2 znaki)

#react

Osobistość

w Hydepark

15

Najpopularniejszy framework świata zmienia właściciela. Meta uwalnia React

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

Tytan

w Programowanie

26


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 - 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 :slightly_smiling_face:)

Sum5

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

FormData - Web APIs | MDNThe FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to "multipart/form-data".MDN Web Docs
Tytan3

@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

Gruba ryba2

Rozwalającą się składnie posta przy edycji byście naprawili. Cytat przeskakuje zawsze na kolejny akapit.

Tytan1

@lurker_z_internetu podrzucisz jakieś screeny z przykładem niepoprawnego działania?

Pokaż więcej komentarzy (19)

Lider

w React

3

React Native Isn't as Popular as You Think
https://youtu.be/E3Yjx0fFeaA

Fanatyk3

@Deykun - multiplatformowe frameworki do pisania aplikacja mobilnych się w korpo nie przyjęły :man-shrugging:

Lider1

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

Pokaż więcej komentarzy (2)

Gwiazdor

w Programowanie

23

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

Fanatyk0

Kuzwa dlaczego? Czemu chcesz to sobie zrobić i jeszcze wciągasz w to innych

Pokaż więcej komentarzy (9)

Kompan

w Dyskusje

5

Cześć!

Dzisiaj jeszcze garść krótkich ciekawostek o  a później już zaczniemy może coś bardziej technicznego :smiley:

ReactJS: 7 Ciekawostek:

1. Początki w Facebook
2. Pierwsze publiczne przedstawienie
3. To nie jest framework!
4. Virtual DOM – bohater (bardzo) niewidzialny
5. Inspiracja wzięta z XHP
6. React Native - brat bliźniak
7. A w sumie, to dlaczego "React"?

:point_right: Pełny post na https://programystics.com/reactjs/reactjs-7-ciekawostek/

Zostaw piorun, komentarz albo ... cokolwiek 😉

    

<- tag do obserwowania lub "czarnolisto-wania"

Kompan

w Dyskusje

2

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? :sparkles:

:point_right: Więcej na ten temat: https://programystics.com/bez-kategorii/wirtualny-dom-to-swiety-graal-frontendu/

ps jeśli chcesz się podzielić INNYMI doświadczeniami na w/w, to zapraszam do komentowania 🔥

Gruba ryba

w Hydepark

12

Właśnie zrobiłem upgrade bibliotek projektu w React, chociaż jestem backendowcem głównie, ale ogólnie orkiestrą.

1. Wyje@#% yarn'a i dałem NPM'a. Kiedyś yarn miał sens, ale npm rowniez jest szybki lub nawet szybszy
2. Jako to ze npm install && npm update jest czysty, to może bun'a zaciągne dla nich, by Ci/CD był szybszy.
3. 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
4. Upgrade nodeJS z 16lts na 18lts
5. Z 50 paczek co były updatetowane, tylko 6 nie jest najnowszych, z powodu że locki na reacie 17 są
6. Frontend team miał wyjebane na to od 3 lat
7. A to wszystko w 1 dniówkę.
8. 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)
9. Odchudziłem projekt z wielu bibliotek, które nie były wykorzystywane
10. Poustawiałem rygorystyczne eslinty, depchecki itp by nie zostawiali po sobie syfu
11. 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.

Osobistość0

@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

Gruba ryba0

@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 :smiley:

Osobistość0

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

Yarn import now uses package-lock.jsonFor a while now, the JavaScript ecosystem is a host to a few different dependency lock file formats, including yarn’s yarn.lock and npm’s package-lock.json.Yarn
Gruba ryba0

@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

Gruba ryba2

@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".

Pokaż więcej komentarzy (13)

Kompan

w Dyskusje

2

Cześć Wam 👋

Dzisiaj ciekawostka o ReactJs numer #3

> Wirtualny DOM (Virtual DOM) w ReactJS przynosi wiele korzyści, lecz ma również wady! Jakie?

:point_right: Więcej na ten temat: https://programystics.com/reactjs/wirutualny-dom-nie-taki-bez-wad/

ps te ciekawostki nie omawiają tematów dogłębnie, mają jedynie zachęcić osoby do przyglądnięcia się reactjs :smiley: tak, wiem, doskonały temat na zachętę dot. WAD 😂

pss jeśli chcesz podzielić się doświadczeniami na w/w to śmiało, zapraszam 🔥 będzie mi bardzo miło!



Kompan

w Dyskusje

5

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.
>
:point_right: Więcej na ten temat https://programystics.com/reactjs/wirtualny-dom-co-to-jest-i-jak-dziala/

Jeśli macie jakieś doświadczenia z Virtual Dom, to podzielcie się. Najlepsze będą te negatywne😊

    

Kompan0

Jutro pojawi się nowy wpis dot. wad Virutal Dom, bo nigdy nie może być "perfekcyjnie", stay tuned! :smiley:

Kompan0

Komentarz usunięty

Pokaż więcej komentarzy (5)

Kompan

w Dyskusje

3

Cześć! Tak jak obiecałem wrzucam ciekawostkę związaną z !

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.

:point_right: Więcej na ten temat https://programystics.com/reactjs/kto-stworzyl-reactjs/

ps czy taka forma "ciekawostek" się Wam podoba?



Kompan0
Pokaż więcej komentarzy (4)

Kompan

w Dyskusje

1

Cześć Wam! :rocket:
Od dziś chciałbym dzielić się z Wami informacjami o ReactJS - ale! nie tylko technicznymi.

Bardziej bym się skupił na tematach jak:
:heavy_check_mark: skąd się wzięła nazwa React?
:heavy_check_mark: jak wygląda obecny rynek pracy reaktowców?
:heavy_check_mark: ile można zarobić na starcie, a ile jako senior?
:heavy_check_mark: które firmy rozwijają swoje produkty w Reactcie?
:heavy_check_mark: co React ma wspólnego z mobilkami?
:heavy_check_mark: w ogóle dlaczego React?
...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 :hammer: abyś stłukł szybę :window:, przez która patrzysz na Reacta i mogł po niego sięgnąć.
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?😉), mile widziane.

  

Autorytet1

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

Kompan2

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... 😉

Gruba ryba2

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

Tytan0

@rakokuc react nie jest od MVC i to jest jego wada i zaleta jednczesnie. Mozesz stworzyc wlasne MVC a ze wielu o tym nie mysli/nie umie to inna sprawa

Pokaż więcej komentarzy (15)

Gruba ryba

w Programowanie

3

Ejejejejej. Pochwalcie się co ciekawego ostatnio znaleźliście na temat - 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.



Kosmonauta0

ostatnio sporo siedzę w tematach virtio służbowo, ale chyba to mało dla Ciebie interesujące.

Gruba ryba0

@dotevo co uzywasz do wirtualizacji, i jakiego typu to jest wirtualizacja ? Serwerowa czy użytkownikowa ?

Kosmonauta1

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.

Gruba ryba0

@dotevo no nadal to jest wirtualizacja, czy to nie będzie powodem że system będzie zamulać w stosunku do natywnego drivera? A co w przypadku gdy np. gps ma więcej funkcji niż standardowy? Bo z tego co rozumiem co piszesz - virtio to taki wrapper na API urządzenia, wirtualizacja urządzenia - które dostosowane jest do standardów - a ostatecznie komunikacja z urządzeniem poprzez virtio. Wrapper który nigdy nie pozwoli wygrać z apple - gdzie apple ma parę urządzeń i może pozwolić sobie na natywne wsparcie.
Dobrze kminie?

Też się kiedyś zastanawiałem dlaczego rynek telefonów nie jest jak rynek PC - gdzie w PC możesz mieć inny procesor, inną kartę graficzną, bluetooth, wifi itp... A kernel je obsługuje w większości - w standardzie.

Kompan2

@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 :rolling_on_the_floor_laughing:

Composer - IBM QuantumProgram real quantum systems with the leading quantum cloud application.IBM Quantum
Gruba ryba1

@radler i za szybko nie potestujesz 😛

Pokaż więcej komentarzy (7)

Inspirator

w Programowanie

1

     

Jaki jest wasz ulubiony framework webowy do własnych projektów

  • Flutter9%
  • Vue20%
  • React32%
  • Angular14%
  • Sam klepie js,html,css25%

44 głosów

Kompan0

React to nie framework. Ale zaznaczyłem go, bo używam Next.js, które bazuje na React.

Inspirator0

@marmot a to ciekawe. Dlaczego uważasz, że react to nie framework ?

Kompan0

@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 :slightly_smiling_face:. Jak odpisałbyś mu "ale React nie jest frameworkiem", to Cię przeprosi i się poprawi, jak przy wielu innych rzeczach 😛

Start a New React Project – ReactThe library for web and native user interfacesReact
Twórca0

Laravel ?

Pokaż więcej komentarzy (7)

Zawodowiec

w Programowanie

1

sa tu jacys frontendowcy/koderzy? mam kilka luznych pytan

Kompan1

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:
https://reactjs.org/tutorial/tutorial.html

Learn web development | MDNWelcome to the MDN learning area. This set of articles aims to guide complete beginners to web development with all that they need to start coding websites.Mozilla
Zawodowiec0

@Jayes spoko tylko srednio zrozumiales o co pytam, bo te zdanie o hejto w html/css jest zdeczka smieszne 😉 a ja wprost pytalem np o to jak pozycjonujesz pozniej te elementy/komponenty stworzone w reakcie na stronie - jakims csssem linkowanym do danego htmla (?) itd. z tego co rzucilem okiem na podstawy reacta to przy bardziej statycznych stronach typowo firmowych (bez bazy userow) w zasadzie niekoniecznie jest sens tego uzywac.

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

Pokaż więcej komentarzy (6)

Twórca

w Programowanie

0

Podstawowe logowanie błędów do małej aplikacji w  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:    , trochę 

Specjalista1

Firebase Crashlytics możesz sobie sprawdzić. Sentry to klasyczek, ale po przekroczeniu limitu to monety uciekają z portfela.