Modern.js Prequel - Byte Modern Web Development

Looking back and adding: The onlooker is perplexed. Now looking back at the development of Modern.js, compared to the early promotion, it reveals just the tip of the iceberg. Constantly refreshing. Originally published on Yuque, now moved to the blog.

The original text corresponds to the speech at GMTC2021 Entering Modern Web Development (Full Text of the GMTC 2021 Speech "Byte's Modern Web Development Practices")

There is also a corresponding PDF, which will not be released for now.

Technical Details#

Three parts:

Overall review of "traditional development" and identifying bottlenecks
Changes and trends that occurred to solve the problems
Byte's technical output, referred to as "engine upgrade"

In large companies like Byte, there are many projects, and due to the large scale, frontend issues are more apparent.

The current state and future of modern web development: https://zhuanlan.zhihu.com/p/88616149

Traditional Development and Issues#

The following image shows the traditional development tech stack, read the image.

In the image, from bottom to top, it represents the abstraction layer from the lowest to the highest. The three blocks on the far right extend from the bottom to the top, representing that they are all end-to-end solutions, which are disconnected from the system on the left and from each other, containing a lot of redundancy. Due to time constraints, this sharing will not cover these parts.

The blue blocks are code-level, and the green blocks are platform-level.

This set of technologies has reached a point of stagnation, which manifests many problems.

Scaffolding. Structured with examples
Some files must be modified to conform to the actual project structure after changes
Multiple projects using the same scaffolding develop independently, and eventually, the differences become significant, making reuse difficult
The scaffolding has iterated but does not benefit the original projects
Project templates
Different projects have different templates, which will increase over time
Templates continuously evolve and some will stop updating
Webpack packaging
To avoid everyone needing to configure webpack, encapsulation and packaging are done as a convention
The abstraction level of the packaging is limited, and the configuration APIs are varied; once it gets complex, changes are needed. There are too many standards
Evolution of compilation tools. Besides webpack, there are more options. This is referred to as the third era of JS. Specific technical details are omitted
Dev build alone is not enough; the image below is quite insightful, looking at it column by column. It expresses that there is still a lot of work for the frontend; dev and build are insufficient. Moreover, it does not cover the underlying services of the project.

This segment of text in the image comes from an article written by Dan, the author of Redux, discussing the design of JS tools' configuration APIs. This text talks about how abstraction and design in this area can have a huge impact, requiring a high threshold and serious professionalism. This work also requires a high level of concentration, rather than being left to "Webpack engineers" to handle various "standards."

The melting pot of JavaScript: https://increment.com/development/the-melting-pot-of-javascript/

The Third Age of JavaScript: https://www.swyx.io/writing/js-third-age

Continuing

Frontend engineering. Limited to the code level, not reaching the platform level. (Is serverless vaguely implied?)
Issues with React.
Which specific technology framework to choose. They gradually unify around React, due to community ecology, application scale, design evolution, and design trends. This part is not very interesting; just the conclusion is enough.
React is incomplete as a framework
Looking at framework-level options, such as Nest, which provides backend-centered development, has little relation to ordinary web project frontends, and introduces a higher threshold from Node to BFF, etc., which will be omitted
The core is: layering + separation of concerns (there is definitely serverless below)

Reference links:

https://www.npmtrends.com/@babel/preset-react-vs-@vue/cli-shared-utils-vs-next-vs-nuxt-vs-react-vs-react-scripts-vs-vue-vs-vue-loader-vs-vite

Advancing the web framework ecosystem (Chrome Dev Summit 2019): https://youtu.be/QDljY2I1Pfw

NestJS Philosophy: https://docs.nestjs.com/#philosophy

The Clean Architecture: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

The BFF Pattern (Backend for Frontend): An Introduction: https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf

Continuing

IaaS and backend PaaS. Even less related to the frontend. The blue part should have a unified closure. (What is it? It must be serverless)

The image below shows that the green part is the underlying service. The yellow and blue represent the frontend and backend.

Thus, the first part ends.

The problems have been raised; how to solve them is the content of the second part.

Changing Trends#

The current state and future of modern web development (Full Text of JSDC 2019 Speech): https://zhuanlan.zhihu.com/p/88616149
Understanding Modern Web Development (JSConf China 2017): https://youtu.be/515pkXWHgnE

https://2017.jsconfchina.com/files/02-modern-web-dev-dexteryy.pdf

Technology is evolving

First, look at the blue part:

LAMP Linux+Apache+MySQL+PHP old setup, omitted
Ruby on Rails. Introduced MVC layering
12-factor app, a declaration of engineering standards, specifics omitted
MEAN/MERN Mongo+Express+Angular/React+Node.js description omitted
"Paradigm Shift": https://wiki.mbalib.com/wiki/%E8%8C%83%E5%BC%8F%E8%BD%AC%E6%8D%A2
The Asset Pipeline: https://guides.rubyonrails.org/asset_pipeline.html
Hotwire: https://github.com/hotwired/hotwire-rails
MERN Stack: https://www.mongodb.com/mern-stack

Next, looking at the orange part, to be continued.

JAMstack
j,js -> CSR corresponds to single-page
A, apis -> BFF ContentMesh
Markup SSR/SSG serverless
SHAMstack
Static Hosting -> serverless
Apis+js
Markup
STAR app
meta-framework

Star is a combination based on the above two.

The foreign tech community mentions meta-framework,

Essentially, it combines the emphasized parts of JAMstack and STAR to form a client-centered, higher-level abstract, general web framework that meets these needs, abstracting and simplifying various patterns within.

It also included an S-curve to illustrate that as UI frameworks approach stability, integration based on React forms new mainstream technologies.

Reference materials

JAMstack: https://jamstack.org/
SHAMstack: https://css-tricks.com/jamstack-more-like-shamstack/
"Content Mesh": https://www.gatsbyjs.com/blog/2018-10-04-journey-to-the-content-mesh/
ooooops I guess we’re* full-stack developers now: https://css-tricks.com/ooooops-i-guess-were-full-stack-developers-now/
STAR Apps: A New Generation of Front-End Tooling for Development Workflow: https://css-tricks.com/star-apps-a-new-generation-of-front-end-tooling-for-development-workflows/
React Distros and The Deployment Age of JavaScript Frameworks: https://www.swyx.io/react-distros/

We can move on to the next topic, which is the transition from traditional development to modern web development, called paradigm shift, Paradigm shift, where various old models transition to new models.

Defining Modern Development#

Now to define

"Modern Web Development" achieves integrated development within the same program, enabling "serverless" capabilities in development, debugging, running, and deployment stages, making it easier for frontend technology stack developers to become true "product developers."

Reference links