Hej
W tym tygodniu zima znowu zaatakowała ❄️, ale nie zaskoczyła twórców weekly i mamy dla Was przegląd frontendowych newsów, gotowy do porannej kawy ☕️. Mamy nadzieję, że trzymacie się cieplutko na home office i zapraszamy do lektury .
1. Remotion – Create videos programmatically in React
Ten tydzień zaczynamy od biblioteki, która rozprzestrzeniła się w mediach społecznościowych w wirusowym tempie (a pomyśleć, że jeszcze rok temu to porównanie miałoby dużo mniejszą wagę emocjonalną… ). Mowa o Remotion, które pozwala na tworzenie wideo przy użyciu Reacta. Jeśli jeszcze nie dotarły do Was żadne dzieła pochodzące z tej biblioteki, to koniecznie sprawdźcie te udostępnione przez autora tu i tu. Trzeba przyznać, że wygląda to profesjonalnie i nie odbiega od rynkowego standardu.
Jak działa biblioteka? Najpierw tworzymy komponent `Composition`, do którego przekazujemy podstawowe dane, takie jak wysokość i szerokość w pikselach, czy pożądane FPS-y. Następnie do `Composition` przekazujemy nasz własny komponent odpowiedzialny za wyrenderowanie filmu i tutaj dzieje się większość magii. Wewnątrz stworzonego wcześniej kontekstu dostępny jest hook `useCurrentFrame()`, który zwraca aktualną klatkę animacji i na podstawie tej informacji renderujemy odpowiedni kontent. Na tym poziomie możecie korzystać właściwie ze wszystkich bibliotek, jakie sobie wymarzycie (szczególnie ciekawi mnie, co uda się wymyślić wszystkim maniakom three.js ). Co ważne, wydajność nie jest tu szczególnie istotna, bo nie jest to kod, który trafia do klienta.
const MyVideo = () => {
const frame = useCurrentFrame();
const opacity = frame >= 20 ? 1 : (frame / 20);
return (
<div style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
opacity: opacity
}}>
Hello World!
</div>
)
}
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="MyVideo"
component={MyVideo}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
</>
);
};
Prosty przykład wideo jakie można stworzyć przy użyciu Remotion
W trakcie developmentu (a może należałoby powiedzieć montażu? ) mamy dostępne preview z timelinem z prawdziwego zdarzenia. Kiedy dzieło jest już gotowe, odpalamy build, podajemy ścieżkę do pliku docelowego i `ffmpg` uruchamia magię, dzięki której otrzymujemy plik mp4.
Remotion oprócz licencji Open Source i być może bycia bardziej przyjaznym dla deweloperów niż egzotyczne narzędzia jak `After Effects`, ma jeszcze jednego asa w rękawie : można go uruchomić w aplikacji serwerowej i w dokerze. Opcja jest o tyle ciekawa, że daje całą masę możliwości i chodzi tu nie tylko o generowanie filmików powitalnych z imieniem użytkownika.
Jakie jest moje zdanie na temat tego narzędzia? To fajna ciekawostka, ale nie do końca rozumiem, skąd tyle zamieszania. Dla osób zawodowo zajmujących się wideo takie narzędzie nie jest nawet opcją do rozważenia. Dla programistów jest to ciekawa alternatywa, ale na dłuższą metę skorzystanie z branżowych standardów powinno być lepszą opcją. Jedynym światełkiem nadziei jest więc zastosowanie serwerowe i tutaj czekam, co pokaże prężna społeczność Reacta.
Źródła:
https://github.com/JonnyBurger/remotion
https://www.remotion.dev/
Zainstaluj teraz i czytaj tylko dobre teksty!
2. npm 7 is now generally available! ❤️
Po prawie trzech latach od premiery wersji 6, wreszcie się doczekaliśmy! npm 7 stał się ogólnie dostępny, czyli został oznaczony jako `latest` i od tego tygodnia domyślnie będzie instalował się przy odpaleniu `npm install –global npm`. Po trzech latach pracy deweloperzy chwalą się, że udało im się znacząco usprawnić proces releasów (około 2 tygodniowo), zwiększyć pokrycie testami (z 77% na 97%) , zmniejszyć liczbę dependencji (z 123 na 67) i generalnie poprawić wydajność.
Oprócz ujętych powyżej generalnych usprawnień w nowej wersji mamy 2 usprawnienia. Zmianie uległ lockfile i teraz ma umożliwiać on reprodukowalne buildy i będzie kompatybilny z yarn.lock. Jak dla mnie w tym momencie jedna z większych zalet yarna została wyeliminowana i powoli traci on swoje argumenty.
O ile pierwsza zmiana raczej nie sprawia problemów przy aktualizacji, to druga może być już bardziej problematyczna. Od npm w wersji 4 w przypadku wystąpienia konfliktów w peer dependencies generowane było ostrzeżenie. W nowym wydaniu ostrzeżenie zostało zamienione na błąd (warto zaznaczyć jednak, że będzie on zwracany tylko, jeśli jego naprawa jest w naszym zasięgu – konflikty głęboko w naszym drzewie zależności pozostaną warningami).
Źródła:
3. Vuex 4 released
Na samym początku muszę się Wam do czegoś przyznać: nauka Vue już od dawna leży na mojej kupce wstydu. Zawodowo miałem styczność zarówno z Reactem, jak i Angularem, ale prądy mojej kariery nigdy nie ściągneły mnie do frameworku tak wychwalanego przez deweloperów. Może powiedziawszy to publicznie znajdę w sobie wystarczająco motywacji, żeby dokopać się do tego zadania… Z tą wiedzą przejdźmy jednak do newsa, którym chce się z Wami podzielić.
Od wydania Vue 3.0 minęło już pięć miesięcy, ale dopiero teraz doczekaliśmy się migracji najpopularniejszej biblioteki do zarządzania stanem aplikacji, czyli Vuex. Lead time jest co najmniej niepokojący i ciekaw jestem, czy proces migracji będzie równie czasochłonny dla standardowych aplikacji, czy też jest to przypadek szczególny związany z niskopoziomowością biblioteki.
Skończmy jednak ponure rozważania i zobaczmy, co się zmieniło. Dwie największe nowości to wsparcie dla TypeScriptu i nowego api do kompozycji. Pobieżnie przeglądając breaking changes, wydaje się, że proces migracji nie powinien być ekstremalnie trudny w porównaniu z samym procesem migracji z Vue 2 do Vue 3.
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
return {
// access a state in computed function
count: computed(() => store.state.count),
// access a getter in computed function
double: computed(() => store.getters.double)
}
}
}
Composition API wykorzystane w Vuex
Źródła:
https://next.vuex.vuejs.org/guide/composition-api.html
https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html
Zainstaluj teraz i czytaj tylko dobre teksty!
4. 10 bad TypeScript habits to break this year
Na koniec mam dla Was kawałek dobrej TypeScriptowej ewangelizacji, której nigdy za wiele. Artykuł jest o tyle ciekawy, że nie oferuje suchej listy zasad, ale dla każdego przypadku pochyla się nad alternatywami i porusza ich wady względem sugerowanej wersji. Jeśli tylko będziecie mieć chwilę, to koniecznie zerknijcie.
Jeśli chcesz otrzymywać tego typu treści spersonalizowane pod Ciebie, pobierz Vived!
