Weekly Notes 008 - React API Evolution, Mobile framework comparison and WhereAPI's beta

Hey there πŸ‘‹πŸΎ and welcome to my weekly notes. I hope you find something interesting from my experiences this past week.

  • The most exciting thing for me this past week was my progress with whereAPI. I started out thinking I could put out a V1 by the end of March. That was too much of a leap considering I was just learning node. I ended up getting the Beta version which includes the API, the client, the docs and the tutorial project. I've got a few friends whose feedback will help finetune the project. So, so excited.
  • My biggest goal for this week was to move the compute and storage for where API to AWS. (Elastic Beanstalk for the API and RDS for Postgres database). This has been my most difficult thing so far. I got so close to getting it to work (Successfully deployed a vanilla nodejs app), but my project is in typescript and I couldn't set up the code pipelines correctly. I had to ask a question on stackoverflow. Please let me know if you could be of help to me AWS-wise. For now, I'm considering Digital Ocean or Heroku.
  • I've gradually built a checklist of best practices while building my first nodejs API. I thought I could invest a little more time to document it. I put it on Github (restful API checklist). It's still a WIP, but I hope to improve them as I build more APIs.

Podcasts

The week went so fast. I didn't even launch my podcast app πŸ˜‚πŸ˜‚πŸ˜‚

Stuff I'm reading

  • React API Evolution: Exciting walk through the evolution of the React API, from React.createClass to mixins, to Higher-order components (HOCs), render props, and finally hooks. I really can't imagine a world without React.
  • Comparing Svelte and React: You'll always want to explicitly define props in React like so
<Component prop={prop} />

I find this quite repetitive and ambiguous. Wouldn't it be nice if we could do something like this (which svelte supports)

//syntax highlighting doesn't even like this
<Component {prop}/>

It's currently not supported in React, but I've seen some folks try work around this by doing something like

// Again syntax highlighting doesn't like this
<Component {...{ prop }} />

I don't think I like this one πŸ€·πŸΌβ€β™€οΈ

  • Flutter vs Native vs React-Native: Examining performance: I've done a few experiments with React Native but nothing production-level. Reading this article puts my mind in perspective. Despite the buzz, React Native might not be the best cross-platform choice in 2021. Mobile Frameworks Comparison Image for memory-intensive test (Gauss–Legendre algorithm) for iOS (Source)
  • Who has the fastest F1 website in 2021? Part 1: I love every bit of Jake's content. I remember reading the first one in 2019 where he examined the performance of a site. He re-examined the same site and found it became 19 times slower in 2 years. How is that even possible???
  • Finite State Machines in ReScript: I've heard a few people talk about state machines but haven't really tried them. This article gave me the closest view into how state machines can eliminate edge cases and represent different UI states.
  • React State Management Libraries and How to Choose: Dave Ceddia goes over React-specific ways to manage state, Redux, MobX, state machines, etc. State management has very much evolved in React.
  • By the numbers: one year of remote work: Framer's doing some data science and analytics work to identify patterns in remote design and product work.
  • How to Improve CSS Performance: Most people do not think CSS can cause performance issues. But this article shows how CSS can block rendering and HTML parsing. Unminified, bloated, and unzipped CSS can also cause network latency. I also learned that @import statements in CSS can slow down rendering. The browser has to first download the original CSS file and then import the next one. A better way is to put them all in the HTML. If there're many HTML files and a single CSS file, I think it makes sense to use CSS @import. If you think otherwise and have a better solution, please tweet at me.
  • 9 Best JavaScript and TypeScript ORMs for 2021: I had to choose an ORM for a side project last month. I ended up going with Postgress + Prisma (Which is like the best out there). I think most people are currently sleeping on Prisma 2 and all the exciting features they're adding to the ORM.

Resources

Music

Someone on Twitter recommended Traffic Jams Naija playlist on Spotify. I literally haven't seen a playlist with so much afrobeats hits. Everything's on point 🀞🏼

Thanks for reading. That'll be all for today. See you next week πŸ‘‹πŸΌ