Preface​

The most incomprehensible thing about the world is that it is comprehensible.

The world's most incomprehensible aspect is that it is comprehensible. -- Albert Einstein

Open-source has created today's thriving software industry. Open-source enables developers worldwide to collaborate on excellent utility projects, also known as "wheels," benefiting companies and individuals of all sizes while showcasing creators' and contributors' technical prowess. Many developers today extensively use open-source projects as third-party libraries or dependencies to complete development tasks faster and more efficiently.

I'm no exception. Recently, while refactoring the Crawlab frontend using Vue 3, I used the upgraded version of ElementUI developed by the Element team - the new UI framework Element Plus rebuilt for Vue 3. The Element team completely refactored Element Plus using Vue 3, fully embracing TypeScript. Compared to the previous Vue 2 version, it enriched some components while maintaining consistent styling and usage patterns. Some APIs even became more streamlined. Therefore, during the initial refactoring phase of Crawlab's frontend, I didn't encounter major obstacles. Combined with previous development experience, the development process felt smooth and familiar. However, the good times didn't last long. As the project continued developing, I encountered some technical difficulties. More precisely, I faced limitations from the Element Plus framework itself when implementing complex features. Although I eventually found ways to solve the problems, I deeply experienced the difficulties of hacking open-source project source code. Therefore, I'd like to take this opportunity to share my experience in mastering open-source code with readers.

This article will begin with my experience solving Element Plus problems, progressively discussing issues with open-source projects or frameworks, and further discussing methods and techniques for mastering open-source project source code, sharing thoughts on reading, understanding, and modifying source code. This article primarily focuses on methodology discussions without too many technical details, making it accessible to readers of any professional background.

Introduction​

The only constant in the world is change.

世界上唯一不变的是变化。--《谁动了我的奶酪》作者 斯宾塞·约翰逊

The IT industry changes too fast, especially frontend development. If you could travel back 10 years and meet a Web development software engineer, they would definitely tell you that mastering frontend means being proficient with jQuery and solving IE browser compatibility issues. However, with the continuous development of frontend, jQuery faced "official retirement" and gradually exited the historical stage (element selection and manipulation were unified by standard DOM APIs); the much-criticized IE browser compatibility problems, due to IE's gradually shrinking market and the emergence of compatibility tools (Polyfill), have been downgraded from core optimization issues to minor annoyances, no longer being standard equipment for frontend engineers.

Today's frontend development has a dazzling array of professional terminology and complex technology ecosystems, which may make engineers new to frontend development feel anxious: there's simply too much to learn. Modern frontend engineers who don't understand Webpack, Babel, Node.js, NPM/Yarn, ES6/7, React/Vue, Sass/Less, TypeScript, ESLint, Canvas/SVG and other modern frontend knowledge will find it difficult to convince others of their professional background. Frontend engineers in 2021 may be true engineers in every sense of the word. They typically need to apply extensive professional knowledge to solve engineering problems, including how to modularize projects, how to design interactions between components, how to improve reusability, how to enhance bundling efficiency, optimize browser rendering performance, etc. They no longer just need the HTML/CSS/JS routine to develop static pages like before.

This article will focus on the theme of modern frontend development to introduce various important technologies of frontend engineering in detail, helping readers understand how the complexity and diversity of modern frontend pages are constructed. This article is a popular science piece about frontend engineering—even if you don't understand frontend technology, you can benefit from this article.

Introduction​

A craftsman must first sharpen his tools if he is to do his work well. -- The Analects of Confucius

In today's frontend landscape dominated by three major frameworks, very few people don't know Vue. In 2014, former Google engineer Evan You released what's called a progressive frontend application framework, Vue. Its simplified template binding and component-based thinking had a positive and profound impact on the frontend field that was still in the jQuery era. The birth of Vue benefited frontend developers who weren't comfortable with TS or JSX syntax. Moreover, Vue's low learning threshold also makes it very easy for beginners to get started. This is also an important reason why Vue could spread rapidly in a short time. From the State of JS survey, we can see that Vue's awareness is close to 100%, and overall user satisfaction is also quite high.

Vue is both powerful and easy to learn—does this mean Vue is a perfect framework? Unfortunately, the answer is no. Although Vue has a low entry threshold and is flexible and easy to use, this advantage also becomes a double-edged sword, bringing certain limitations for building large projects. Many frontend engineers who have developed large projects with Vue 2 have a love-hate relationship with Vue. However, with the release of Vue 3, these disadvantages that became prominent when developing large projects have been effectively resolved, making the Vue framework very versatile and truly having the potential to compete with "frontend framework leader" React. What important new features does Vue 3 bring? This article will provide a detailed introduction.

Introduction​

How can I blame you for making mistakes, when I gave you too much freedom. -- Jacky Cheung "Too Much"

Many software engineers probably know or understand TypeScript (abbreviated as TS) to some extent, and frontend developers who have used TypeScript consistently express positive feelings about it. If you search for TypeScript on search engines, you'll find an overwhelming number of articles praising or complimenting TS, such as "TypeScript Makes You Never Want to Go Back to JavaScript", "TypeScript Sweet Series", and "If You Don't Embrace TypeScript, You're Getting Old!". According to the latest 2020 State of JS Survey Report, TypeScript's popularity and satisfaction are increasing year by year, with "TS fans" (developers who answered "would continue using" in State of JS) including this author, even exceeding 70% (as shown below).

In summary, TS now holds an unshakeable core position in the frontend field and is a very important frontend engineering development tool. TS is one of Microsoft's outstanding contributions to the software industry after embracing open source projects. However, TypeScript cannot improve the runtime efficiency of JavaScript code in browsers, nor can it increase developer productivity like React and Vue frontend frameworks, and it certainly cannot make your frontend pages look attractive. So what exactly makes it such a widely beloved "truly fragrant language"? What makes frontend developers love it so much? If you have similar questions, please continue reading. This article will explain in detail the advantages of using TS to develop large-scale frontend projects.

Background​

Many excellent programmers and technical professionals enjoy writing technical articles and blogs as a way to share and spread knowledge and experience, expand their visibility and influence, attract followers, and some tech bloggers even earn advertising revenue through writing. Many excellent bloggers have also gained opportunities to publish books and find jobs through this method. Therefore, writing technical articles is a very worthwhile investment that helps oneself while benefiting the public.

However, writing technical articles is usually time-consuming, especially for high-quality articles. Not only do they require extensive research, thoughtful article structure, and consideration of the target audience, but they also require a lot of preliminary work, such as setting up environments, writing demo code, testing code, and so on. A high-quality technical article typically takes 3-6 hours to complete. However, spending a lot of time writing articles only to have them receive little attention upon publication is quite frustrating. We believe that quality articles deserve attention and dissemination, allowing more technical workers to gain knowledge and benefit from reading them.

Every tech blogger has their preferred technical media platforms, such as Juejin, CSDN, WeChat Official Accounts, etc. Many tech bloggers also like to publish articles on different platforms to seek maximum attention while preventing their hard work from being copied and plagiarized by others. However, publishing on multiple platforms is troublesome: bloggers need to log into multiple media platforms simultaneously and copy-paste their articles one by one. What's more troublesome is that some platforms only support Markdown while others only support rich text, requiring bloggers to convert between the two, which increases workload.

The multi-platform publishing tool ArtiPub solves exactly this problem. Below, we'll introduce the recently launched open-source multi-platform publishing platform ArtiPub.