Frontend Thursday vol. 67

1. Lepsze wsparcie dla Custom Elements w React

Custom Elements szczyt swojej popularności mają już za sobą, ale udało im się znaleźć swoją niszę, którą są biblioteki komponentów. Wykorzystując natywną funkcjonalność przeglądarek zapewniamy, że z naszych komponentów będą mogły korzystać zespoły piszące w dowolnym frameworku. Większość frameworków radziła sobie dobrze z integracją z Custom Elements, ale niechlubnym wyjątkiem był React. Całe szczęście wygląda na to, że sytuacja ma się wreszcie zmienić, bo za eksperymentalną flagę trafiło usprawnione przekazywanie parametrów do Custom Elements.

Zanim wejdziemy w szczegóły, cofnijmy się jeszcze o krok i przyjrzyjmy się temu jak teraz przekazywane są parametry do Custom Elements. Możemy robić to na dwa sposoby: w JSX jako atrybut lub jako property wykorzystując referencję do obiektu.

//attribute binding
<custom-component foo="bar" />

//property binding
customComponent.foo = "bar";

Na pierwszy rzut oka wszystko wygląda w porządku, ale jeśli chcemy przekazać złożony obiekt (na przykład tablicę) jako property w JSX to nie jesteśmy w stanie tego zrobić. Próba naiwnego przypisania spowoduje przekształcenie obiektu do stringa, co spowoduje, że customowy komponent otrzyma wartość [object Object]. Problem ten da się obejść wykorzystując referencję do obiektu, ale chyba wszyscy zgodzimy się, że nie było to eleganckie rozwiązanie.

 // This will result in something like: <custom-component foo=”[object Object]" />
<custom-component foo={someObject}" />

// This will work as expected
<custom-component ref={el => el.foo = someObject}/>

Nowa funkcjonalność dostarczona za odpowiednią flagą sprawia, że React w przypadku przypisania wartości do custom-element sprawdzi jej typ i w zależności od niego przekaże ją jako atrybut, property lub event-listener. Dan Abramov przygotował demo wykorzystujące Custom Elements z Vaadin, które możecie znaleźć tutaj.

Jeśli jesteście ciekawi jakie alternatywne rozwiązania były rozważane i dlaczego podjęto takie, a nie inne decyzje to w RFC na Githubie znajdziecie naprawdę długą i wyczerpującą dyskusję na ten temat.

Źródła:

https://github.com/facebook/react/issues/11347
https://docs.google.com/document/d/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I/edit#
https://codesandbox.io/s/shy-tdd-8b4tq?file=/src/App.js
https://www.reddit.com/r/javascript/comments/rbv9pe/react_has_shipped_experimental_support_for_custom/

2. React Conf 2021 i ReactEurope

Fani Reacta zdecydowanie mają co robić przed świętami bo w tym tygodniu mamy urodzaj dużych konferencji Reactowych. Dzisiaj rano odbyło się React Conf 2021, ale jeśli się nie załapaliście to jeszcze nic straconego. Jutro rano odbędzie się retransmisja konferencji,a później nagrania mają trafić na YouTube. Kiedy to się stanie możecie liczyć na to, że na pewno damy Wam o tym znać w jednym z podsumowań.

Oprócz ReactConf2021 w tym tygodniu będzie mieć miejsce również ReactEurope. Warsztaty mają miejsce już dzisiaj, ale sama konferencja odbędzie się jutro i możecie zapisać się na nią za darmo tutaj.

Źródła:

https://conf.reactjs.org/
https://www.react-europe.org/

Bonus

Jeśli pomimo dwóch dużych Reactowych konferencji mających miejsce w tym tygodniu wciąż jesteście głodni materiałów Video to kilka dni temu do sieci trafiła próbna rozmowa rekrutacyjna przeprowadzona z Danem Abramov (jedna z twarzy Reacta, człowiek który maczał swoje ręce zarówno w React Hooks jak i React Server Components) z Benem Awad (człowiek odpowiedzialny za tindera dla programistów dostarczonego jako wtyczka do VSCode). Całość całkiem przyjemnie się ogląda, a może przy okazji nauczycie się czegoś ciekawego.

1. Lepsze wsparcie dla Custom Elements w React

Źródła:

2. React Conf 2021 i ReactEurope

Źródła:

Bonus

Odkryj więcej świetnych treści!