Technical Journal · The natural river flows eastward | In-depth React 18 working group; CSS course produced by Google...

Dandelion·JELLY Technical Journal Vol.41

Fiction and reality are like ebb and flow, yin and yang are like sunrise and sunset, and everything has its own laws, just like we need to have a gradual process for learning; products will plan the entire project cycle according to user portraits; when developing and testing, we hope to have a hand in hand Tool of……

These rules are also the same for front-end development. The iteration of the front-end framework will continue to iterate. For example, after the release of React 17, the arrival of the React 18 alpha version is just a matter of course. The introduction and design of the new features of React 18 Principle analysis and other content are also being continuously discussed in the community. Many features and thoughts are worth understanding and learning even if they will not be presented in React 18 in the end.

Guanhaizhi

Mountain climbing is full of love in the mountains, while watching the sea is overflowing in the sea

CSS course produced by Google

Synopsis : This course will systematically introduce the basics of CSS, which is suitable for beginners and advanced developers. Through the various modules of the course, you will understand the core concepts of CSS and know how to effectively use it in your project.

Recommended language : Google’s products must be excellent, CSS is the most basic front-end skill, follow Una Kravets to re-learn CSS, there is a high probability that there will be new gains. In addition, Amway Una Kravets’s podcast "The CSS Podcast"

React 18 More extreme batch optimization

Synopsis : In the past, React batched multiple update actions in some cases, and finally only re-rendered once to optimize update performance. React 18 will perform more batch processing operations by default, and developers no longer need to call unstable_batchedUpdates to manually start batch processing. Dan explained in detail what batch processing is, how it currently works, what changes have been brought about in React 18, and potential Breaking Changes.

Recommended language : If you do not know the specific behavior of the current React batch is unclear why the event callback more setState will be merged, and the event callback call setTimeout in the setState and will not be merged, this article will Answer your questions well. In addition, React 18 has recently released an alpha version. If you are interested in the new features of React 18, you can browse the React 18 working group . Here is a collection of React team's introduction to React 18's new features, design principles analysis, etc.

Deep into the Suspense SSR architecture of React 18

Synopsis : React 18 will launch a new Suspense SSR architecture. This feature brings together the efforts of the React team for many years and can significantly improve the performance and user experience of React SSR. Dan explained in detail the design purpose, two major features and overall architecture design of Suspense SSR in the article. The article is accompanied by pictures and texts, allowing readers to learn the principles of SSR, the existing problems and the improvements brought by Suspense SSR.

Recommendation : Although Suspense is to change the user experience of asynchronous loading, it has always been used with React.lazy in the front end. This will be fundamentally changed in React 18. Suspense can split the application into independent small pieces, using pipeToNodeWritable achieve streaming push Concurrent Mode in the browser according to priority. In this way, we can finely control the content of the SSR, solve the congestion problem caused by the full transmission on the server side and the full hydrate on the customer service side in the past, and bring BigPipe , which significantly improves the user experience.

React 18 new feature: startTransition

Synopsis : According to the degree of urgency, React rendering can be divided into two categories: Urgent updates and Transition updates. All updates in React 18 default to Urgent updates. The article uses an example of an input box to describe how startTransition solves the UI blocking problem by changing the rendering priority to Transition updates, thereby improving the user experience.

Recommendation : Since the Concurrent Mode concept, we have learned that rendering can be prioritized and interruptible. The startTransition API allows us to lower the priority of certain rendering (heavy rendering logic or severe network delay), avoid blocking interactive rendering (such as rendering caused by clicks and input), and improve user experience. In the past, we often used setTimeout , debounce and other methods to optimize obstructive rendering, but we need to pay attention to startTransition and them (perceived Pending state, etc.). I believe that after the widespread popularity of React 18, this is a very important and commonly used optimization method.

Lightweight Postman tool

Synopsis : Postman alternative tool, lightweight Rest Client, currently has close to 16w downloads in the VSCode plug-in market, no loss in equity!

Recommendation : Postman is a paid software after all. In daily business development scenarios, developers often only need light-weight API testing tools. Thunder Client for VSCode may be a better choice.

Understanding User Portraits in

Synopsis : This article introduces us to what a user portrait is, why we need a user portrait, what does the user portrait mean to us, and the user portrait label algorithm, so that we have a more comprehensive and clear understanding of the user portrait.

recommendation language : User portrait is a very basic technology in the construction of recommendation system, which can be said to be the premise of personalized recommendation service. User portraits must go deep into specific business scenarios. User portraits in different business scenarios are different, but the algorithm ideas for constructing user portraits are similar. Mastering these technical methods and having a deep understanding of business scenarios are the two major prerequisites for a good user portrait.

"Dandelion" journal, a weekly update, we focus on mining " underlying technology , engineering , cross-end framework technology , graphics programming , server development , desktop development , Artificial Intelligence , design philosophy , front-end frame " and other major industry hot spots, and professional interpretation; not only that, we will also recommend selected concave-convex technical articles to show everyone the research direction of the team.

Looking up, the seeds of dandelion will take root and sprout, like summer flowers; to learn from things, we climb high and overlook the sea, and we will reach thousands of miles in order to accumulate silicon.

Dandelion·JELLY Technical Journal Contribution Guide

Welcome to follow the blog of Bump Lab: aotu.io

Or follow the AOTULabs official account (AOTULabs) and push articles from time to time.