Curated Frontend Resources: JS Frameworks, React Diff, CSS Mastery & More

News

State of JavaScript 2023 released (https://2023.stateofjs.com/en-US)

Large model 2024 exam results (https://www.jiqizhixin.com/articles/2024-06-25)

OpenAI acquired Multi and shut it down (https://multi.app/blog/multi-is-joining-openai)

Article Recommendations

Enterprise WeChat bans RPA, a prelude to Private Domain 3.0.

RPA (Robotic Process Automation) uses computer‑controlled phones to simulate human actions for precise private‑message marketing. Analogy with Amazon forest fires: as long as WeChat is used, business opportunities exist; RPA suppression is a survival cycle, not the end of private domain.

Let’s learn how modern JavaScript frameworks work by building one.

Original link: https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/ – This article explains the basic principles of modern JS frameworks and walks through building a simplified framework, helpful for understanding complex frameworks like React and Vue.

Don’t forget what front‑end was built upon 😡😡😡

Original link: https://juejin.cn/post/7357194991339143168 – The article argues that front‑end engineers must master CSS, which is currently undervalued. Key points: CSS is the technical foundation for recreating UI designs; mastery includes both property usage and design aesthetics. Current situation: open‑source component libraries dominate. Deep thought: collaboration between designers and front‑end developers is challenging.

In‑depth reading: “Why We Abandoned CSS‑in‑JS”.

The article discusses the pros and cons of CSS‑in‑JS, compares current solutions, and notes that writing CSS remains a pain point in business code, suggesting exploration of better alternatives.

React diff algorithm.

Original link: https://tsejx.github.io/react-guidebook/infrastructure/old/diffing-algorithm/ – Compared to traditional diff with O(n³) complexity, React reduces it to O(n) through a series of strategies. First perform tree diff on same‑level nodes. Then component diff to compare component types. Finally element diff for element‑level changes, handling deletions, moves, insertions (using mountIndex, lastIndex, nextIndex). Summary: Diff compares sibling children of the same parent; if type and key match, it updates, otherwise replaces. Uses a lastIndex variable; when mountIndex > lastIndex, no move is needed, improving performance.

“The Elements of User Experience: Designing for User‑Centered Products” (2nd edition).

Original link: https://book.douban.com/subject/33403542/ – Book overview: Explains the importance of integrating design, technology, and business, covering user experience, strategic, scope, structure, skeleton, and surface layers. Analyzes user‑centered design (UCD) for website design, focusing on thinking over tools, to achieve high‑quality experiences. Recommendation: Essential reading for front‑end engineers.

Xiaoming Recommendations

taro 4.0 supports Vite? (https://mp.weixin.qq.com/...)

Small MQTT tutorial (https://mp.weixin.qq.com/...)

How GuMing builds front‑end data center – interface analysis (https://mp.weixin.qq.com/...)

Conclusion

Follow the “Goodme Front‑end Team” public account for more practical content and community sharing.