DEV Community: maxam 🧑🏻‍💻

Rethink React: Is it still a good library?

maxam 🧑🏻‍💻 — Fri, 07 Oct 2022 16:49:18 +0000

About 4 years ago, I started to write React as my first choice in frontend development. However, time changes. Something better comes out already…

In the beginning, I was a React lover because it was much more elegant than other frameworks/libraries at that time. Declarative UI (and JSX, a syntax sugar 🍬 for UI), Virtual DOM, and one-way data flow… those things are fascinating to me, also the ecosystem and community. However, I feel disappointed with it now.

below we will discuss two parts of React: "Performance" and "Stability".

Performance

Virtual DOM in React is a lie because runtime diffing really hurts performance.

The concept of how declarative UI works in React is powered by virtual DOM. It’s a plain object for storing something about rending (Idk its structure really looks like but I think it changes after React Fiber comes out) and React does "reconciliation" for synchronizing real DOM with it.

The official docs only show some points about how heuristic the process is. But for me, it really a black box because I never get into the source code. But it doesn’t matter. The problem isn’t about the algorithm behind it. It’s about why React does it in the runtime instead of build time (some frameworks already do that).

Stability

React is too REACTIVE.

Except for built-in reconciliation, React provides 2 ways to mitigate re-render.

builtin hooks: useMemo, useCallback
React.memo / shouldComponentUpdate

To be honest, it’s bad and costs a lot. If you want they don’t re-render, you need to wrap variables, functions, or components with one more function and make more diffing.

Not only make DX worse but also that comparison (diffing) makes your application slower 🐢.

I think the React team already notice the first problem and run the project: React Forget to rescue our DX. If you want to know more about this project, watch the playback of React Conf 2021: React without Memo - YouTube.

Conclusion

As I see it, the root cause of those problems is the philosophy of React. For example, one of the modern frontend frameworks, Svelte, gives a better solution:

No virtual DOM: compiling your code into tiny vanilla js
Reactive on your own: non-reactive by default and mark it if you want.
And I really fond of the concept: Don’t let everything be reactive.

Maybe React won’t change now, and I still need to use React at work. However, React 18 still impresses me with the new features like streaming SSR and selective hydration. I’m still waiting for React Forget and other new features to come out.

Give this post like 💖 and my blog a follow if you enjoyed this post and want to see more.

Add a New GitHub SSH Key Automatically 🔑

maxam 🧑🏻‍💻 — Sun, 02 Oct 2022 13:53:15 +0000

Every time you get a new machine and want to connect GitHub with SSH, it's so annoying to set up. Generate the SSH key after googling for a while and then manually copy & paste it to GitHub on their webpage.

Is it possible to do this whole process on the command line? Yes!

Today I'll introduce this brilliant CLI tool - gh-ssh-keygen.

How to use `gh-ssh-keygen`

There're two ways available.

Simply run this command if you don't want to install anything.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/maxam2017/gh-ssh-keygen/HEAD/gh-ssh-keygen.sh)"

Otherwise, you can install the whole command.

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/maxam2017/gh-ssh-keygen/HEAD/install.sh)"

If this command has already been installed, it'll skip or upgrade if the new version is available.

Then, run

$ gh-ssh-keygen

After a few interactive steps, SSH key would be added to your GitHub account 🎉

If you want to know more about how to use it, checkout this video for detail!

How this command works

Internally, it is powered by Official GitHub CLI which provides API to upload ssh keys.

$ gh ssh-key add [<key-file>] [flags]

Except that, I connect the whole process with the MacOS (and Linux) package manager brew and OpenSSH auth utils ssh-keygen together.

Also, this command handles lots of package installation things and implement some extra validation for user input. Therefore, feel free to use it if you need to add SSH key to your GitHub account next time!

Welcome to follow me or star ⭐ ️my repo if you're interested in it.
GitHub Repo: https://github.com/maxam2017/gh-ssh-keygen
GitHub Account: https://github.com/maxam2017

Are you an early 🐤 or a night 🦉? Let's check out in the Gist

maxam 🧑🏻‍💻 — Fri, 24 Apr 2020 05:27:29 +0000

Last week, I build a simple GitHub Action, called productive-box. It's my first time creating a GitHub Action so I would like to share some insight about it.

The kernel concept about this project is using commit histories to find your most productive hours and declare which type of people you are (simply an early 🐤 or a night 🦉), finally write into your Gist.

Commit history

When it comes to 'commit', we always think of GitHub. That's right. Here I using GitHub API to access commit history. It's also my first time using it. In the beginning, I check out the v3 RESTful API, but I found something new - v4 GraphQL API, so I gave it a try.

The greatest part of GitHub GraphQL API is it provides a real-time and interactive playground: GraphQL Explorer which makes a better experience with this new stuff.

https://developer.github.com/v4/explorer/

After I completed this project, I knew that GraphQL just means POST a query and gets something you REALLY need.

Gist

reference to an amazing project - matchai/waka-box

Like him, I also use @octokit/rest, the GitHub REST API client for JavaScript.

WorkFlows

Workflows are custom automated processes that you can set up in your repository to build, test, package, release, or deploy any project on GitHub.

Easily checkout your workflows in the 'Actions' tab

Simply saying, it uses GitHub's virtual machine to execute our script and we just only need to write YAML config into .github/workflows/xxx.yml.
My Action simply listens to two events: push and schedule. It means that when we push some commits to the master branch(by default) or periodically(just a Linux cron job), it will trigger my built script.

Going Forward

I also have some other ideas about this project. Welcome to follow up or star ⭐ ️my project if you're interested in it.

maxam2017 / productive-box

Are you an early 🐤 or a night 🦉? Let's check out in gist

Caution

If you upgrade to v1.1.5+, please remember to:

move the GIST ID to the Secret
move the TIMEZONE to the Repository variable For details, refer to the third point in Project Setup.

p.s. when you see this notice in the README of your forked repository, it means you have upgraded to v1.1.5

📌✨productive-box

Are you an early 🐤 or a night 🦉
When are you most productive during the day?
Let's check out in gist!

This project is inspired by an awesome pinned-gist project.
Find more in https://github.com/matchai/awesome-pinned-gists

Overview

This project uses GitHub graphQL API to get the commit histories and write into the gist by rest.js

Setup

Prep work

Create a new public GitHub Gist (https://gist.github.com/)
Create a token with the gist and repo scope and copy it. (https://github.com/settings/tokens/new)

enable repo scope seems DANGEROUS
but this GitHub Action only accesses your commit timestamp…

View on GitHub

Feedback welcome! Thanks for reading.