Technical Journal · Lu Chen finally sees Taishanping | The practice of micro front-end and plug-in architecture in Wix; the second path of editor architecture; front-end component system in business......

Dandelion·JELLY Technical Journal Vol.47

Programmers who don’t want to be architects are not “qualified” programmers? This kind of remarks should be very common in many articles. We need architectural thinking, abstract ability, and learning to layer... There are too many and too many, but there are few suitable projects that can help us develop these. Thinking habits, such as the design of business component systems, and editors, etc., need to weigh the balance between technology and business, the stability of architecture design and the ability to expand, and keep thinking in the face of business.

Guanhaizhi

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

micro front end and plug-in architecture in Wix

Synopsis : The concept of micro front end has been around for quite some time. We have been using this architecture in Wix since around 2013, even before it was named Wix. This is also a key factor in our gradual migration from AngularJS to React in 2016. Over the years, we have been improving it and have accumulated a lot of experience. In this article, I want to share with you some of the work we have done to develop the concept of large-scale micro front-end development (at the time of writing, we have 700 developers working on this architecture).

Recommendation : As one of the best website building products in the world, Wix's website building editor is very powerful and extensible. They have adopted the micro front end as a pluggable system solution for a long time, and have been iterating on this system. This article details the birth background and technical practices of their pluggable micro-front-end architecture, including a complete set of workflows for development/testing, build/release, monitoring, etc., and the corresponding pluggable micro-front-end architecture IoC library Open source: https://github.com/wix/repluggable

second path editor architecture

Synopsis : Slate lets you build Medium , Dropbox Paper or Google Docs , without letting you get stuck in the quagmire of complexity in code implementation.

Recommendation : The complexity of the editor application is one of the best in web applications, and the difficulty of the well-known multi-person collaborative editor in the industry is even the benchmark in the industry, but is the editor really only designed to be extremely complicated? It is worth mentioning that the Slate elegant and flexible, and the design of each module is exquisite but very easy to understand, which is worthy of careful taste. Efficient and robust code sometimes does not have a high correlation with design complexity, which is worth thinking about when organizing the capabilities of each module.

Front-end component system in

Synopsis : Componentization is already a cliché, but an enduring topic. With the change of technology and the increase of business complexity, componentization has been repeatedly taken out and re-examined. It can be said that the road of componentization reflects the development process of program development to a certain extent.

Recommendation : Starting from the actual business scenario, this article analyzes the component design ideas and the construction of the front-end component system in the business for the common problems in component implementation. You can understand the composability and analysis of component states. Knowledge points such as layer reuse and cross-technology stack integration have strong practicality and are worth reading.

Spotlight plugin for building website

Synopsis : Considering a command+k experience similar to MacOS's Spotlight and Linear? Use kbar to add a fast, expandable command + k menu to your site.

Recommendation : Improving user experience is a very grand proposition, but sometimes it only takes a few simple steps. For example, you can use kbar to add a command + k experience comparable to Spotlight to your website. Many individual developers will be very helpful~

Liu Zang Ting

Because of Shanbu’s ingenuity, he has poor eyesight looking at the water like the sky

Theia Technology Revealed Plug-in Extension

Synopsis : Theia’s plug-in design is very interesting. It guarantees stable functions while giving the system a strong ability to expand. This article starts from the analysis of nouns and describes what kind of plug-in system is needed in the process of Cloud IDE design. Explains the architecture between different system modules and teaches you to quickly get started writing Theia plug-ins.

Recommendation : The Theia plug-in system is very powerful, such a huge project, and coupled with complex capability modules, but still maintains high-quality code and clear architecture, which is difficult for many business projects. Such a project structure may not be needed many times, but it must be worth our thinking and learning.

Theia Technology Revealed Theme

Synopsis : Theia's theme design follows the VS Code Theme specification. This article starts from the type and details the issues that need to be considered in the implementation, as well as the details of Theia application specific implementation of the Theme plug-in under the VS Code specification.

Recommendation : For editors, it is unrealistic to implement from scratch, so if it can be compatible with existing designs, it is a great choice. VS Code is an excellent reference in all senses. Objects, through the theme compatible with VS Code, can greatly reduce the migration cost of users.

"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 framework " and many other industry hotspots, and professional interpretation; not only that, we will also recommend selected concave-convex technical articles to show you 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 travel 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.