Klonet Netflix fra scratch

Forrige uka i frontend: Ny Typescript beta, Enzyme.js ferdig, Solid.js er en React-utfordrer, og fakeflix kloner Netflix.

FILE - In this Aug. 13, 2020 file photo, the logos for Netflix, Hulu, Disney Plus and Sling TV are pictured on a remote control in Portland, Ore. As streaming services proliferate, it can be a challenge to keep track of where some favorite TV shows and blockbuster movies are available. (AP Photo/Jenny Kane)
FILE - In this Aug. 13, 2020 file photo, the logos for Netflix, Hulu, Disney Plus and Sling TV are pictured on a remote control in Portland, Ore. As streaming services proliferate, it can be a challenge to keep track of where some favorite TV shows and blockbuster movies are available. (AP Photo/Jenny Kane) Vis mer

Dette var uken for oljelekkasjer🔥, fungerende tester✅ og livets harde skole📆. Og 1001 ting skjedde i frontend-verdenen!

TypeScript 4.4 Beta ✍️

Vi starter forrige ukes recap med å si at TypeScript 4.4 er ute i betaversjon og klar til å prøves ut av dere som lever på den blødende kanten. Den er pakket med mange nye features som du kan lese mer om her.

RestGis 🗺

Okei, dette er fett. En React-app som lar deg skrive inn en hvilken som helst lokasjon (eller flere) i verden og eksportere utsnittet i SVG eller JSON. Utrolig elegant laget! Tankene mine falt umiddelbart til at man kan bruke dette i en quiz, hvor man skal gjette land, fylker osv. basert på formen i utsnittet. Men så er jeg en quiz-nørd da 😅

Enzyme.js — på tide å si ha det? 🔥

Brannfakkel (eller ikke?) fra Piotr som sier det er på tide å forlate Enzyme.js på perrongen når React-toget kjører videre. Han sier at Enzyme, som er et testbibliotek for React, har en lang fartstid med å ikke henge med i svingene når React kommer med ny funksjonalitet. Noe som hindrer folk i å fortløpende oppdatere til nyere versjoner av React.

Videre i begrunnelsen sier han at

  • React Core-teamet fråråder å bruke det,
  • Det blir vedlikeholdt av én person (hallo trikkefaktor!),
  • Det benytter seg av dårlig testepraksis, og
  • Det finnes mye bedre alternativer på markedet, f.eks. React Testing Library.

Dette er så klart én persons mening! Enig? Uenig? Vet ikke? Les hva han har å si og gjør deg opp din egen mening!

SolidJS 1.0 🎉

Ryan har holdt på med JavaScript-rammeverket Solid siden 2016 og nå er endelig versjon 1.0 lansert!

Hva er Solid?

Som han så ydmykt skriver selv så er det et JS-rammeverk, tilsvarende React og Svelte, hvor det som gjør det unikt er at det gjør det umulige mulig. Et reaktivt og prekompilert “Virtuell DOM”-løst JSX-rammeverk med fleksibiliteten til React og den enkle mentale modellen til Svelte.

Høres jo nesten for godt ut til å være sant? Sjekk det ut og avgjør selv!

React Preview 🖼

Lyst til å teste komponentene dine direkte i VS Code? Da er du heldig!

François Wouts har nemlig laget en extension til Code hvor du kan forhåndsvise React-komponentene direkte i IDEen, dynamisk endre props og få umiddelbar feedback uten å skrive noe ekstra kode. Cool stuff!

Fakeflix 🎥

Her snakker vi hobbyprosjekt på et nytt nivå! Denne mannen har altså klonet Netflix fra scratch ved hjelp av React, Redux, Firebase og Framer Motion, og laget sin egen versjon som han kaller “Fakeflix”. Han har dekket alle features og til og med lagt på bedre transisjoner, animasjoner og effekter oppå det hele.

Som i en kommentar på reddit om prosjektet:

«This guy codes…»

Og det er jeg ganske enig i 😅

Demo av siden finner du her, og testbruker med passord finner du i Readme-en hvis du ikke vil lage egen bruker.

Dett var dett for denne uken! Vi tar ikke sommerferie — så ses neste uke 👋