Dette var uka der Skal vi danse avsluttet sin 15. sesong, der vi også kunne se litt mindre imponerende danseferdigheter, og ja.. en slags dans? Og 17.521 ting danset seg inn i React verdenen! 💃
Skrive min egen React..?
Jeg, som mange andre, hadde ikke noe særlig forhold til hvordan React var laget da jeg begynte å kode i det for første gang. Det var lett å ta i bruk, men temmelig magisk.
9 høydepunkter fra React Conf 2019
Kristofer Giltvedt Selbekk tar oss med til Nevada, hvor årets største React-nyheter ble vist fram.
Overraskelsen min var desto større da jeg etterhvert lærte hvor enkelt det er å lage en forenklet versjon av rammeverket, og hvis du bare er bittelitt nysgjerrig anbefaler jeg å ta en titt på denne artikkelen jeg kom over i forrige uke. Artikkelen gir en pedagogisk innføring i hvordan man lager React fra bunnen av, samtidig som man kan følge med på kodeendringene i en nydelig scrollflyt. Enjoy!
Hvis du skulle ha lyst på en litt mer hands-on gjennomgang, om enn uten hooks, kan jeg anbefale denne workshopen som noen av mine dyktige kollegaer lagde i vår og holdt på NDC.
Instagram ❤️ Optimization
Glenn Conner fortsetter sin artikkelserie om hvordan de sakte men sikkert gjorde Instagram raskere. Denne utgaven dreier seg om hvordan de begynte å redusere lastetidene til brukerne ved å rett og slett shippe mindre JavaScript. Dette gjorde de på to måter:
Nå kan du teste nye React Native
ForrigeUke: Etterspill av Twitter-dramaet, ny React Native og kunsten å lage en diger frontend.
- De ryddet vekk så mye de kunne av usynlig og interaksjonsavhengig JavaScript vekk fra bundlene som lastes i det siden lastes, og la dette heller inn i bundler som lastes dynamisk avhengig av bruken av siden.
- De har valgt å ha to bygg: Ett som produserer ES2017-kode som de leverer til moderne browsere, og ett bygg som bruker Babel for å transpilere ned til ES5. Dette grepet alene gjorde at de reduserte bundlestørrelsene med 5,7% og at ende-til-ende lastetidene på Instagramfeeden ble redusert med 3% for de brukerne som hadde nettlesere med støtte for ES2017.
Instagram bruker Metro for å bundle sin React Native kode, men man kan helt fint få til samme type kodesplitting ved å bruke blant annet Webpack, Rollup eller Browserify uten altfor mye jobb.
Når det gjelder å ha to bygg må man veie opp kostnadene av det mot lastetidsreduksjonen, og for de fleste nettsider vil det kanskje ikke være verdt det, men dette er jo likevel interessant å ha i mente!
Og, hvis du ikke har fått med deg de tre forrige artiklene i serien har de en om prefetching av data, en om å pushe data direkte til klienten istedet for å vente på at klienten requester dataen og en om cache-first rendering.
Redux skrevet om til TypeScript
Dan søker hjelp, Markbåge braindumper, Redux skrives om og Chakra gjenfødes.
Redux Starter Kit => Redux Toolkit
Redux Starter Kit har fått en liten navneendring og heter nå Redux Toolkit. Teamet har skrevet noen ord om hvorfor de byttet navn i sine release notes, men i denne versjonen uteblir altså kodeendringene.
Men husk å sjekke om ikke React Context kan dekke behovene dine før du drar inn Redux 🔥 Eller kanskje du ikke trenger noen av delene..
Prop drilling vs. Context vs. Composition
..for apropos Redux og Context: En liten Twitter-brannfakkel om prop drilling og Context førte til en veldig fin og lærerik videosnutt. Den illustrerer veldig godt hvordan composition i mange tilfeller kan løse opp i hele prop drilling-problematikken. Her blir vi tatt med på en komponentreise fra prop drilling til bruk av context til bruk av composition. Dersom du har femten minutter til overs anbefaler jeg å ta en titt på denne:
Og det var alt vi hadde for denne uken! Håper dere likte det, og at dere gleder dere like mye som jeg gjør til neste utgave av 😃 Takk for meg!
Se Reacts nye debug-verktøy
ForrigeUke: Ti bud om Suspense, testing av Concurrent Mode, nyheter i DevTools og Native - pluss nye releaser.