“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

preface

Although it concludes in 2021, the story begins in October 2020

The body of the

About work

In October 2020, I changed my job from a 10105.5 company to a 965 PaaS company, and also experienced a series of challenges.

My department is a big front-end department, including android /ios development, web/ BFF development, electron development and C++ development.

The secondary department I worked in was the “Web/BFF Development”. At the beginning, I was mainly engaged in an H5 project from 0 to 1.

Micro service

First, I went to understand the deployment of the company’s projects.

The company’s internal deployment team developed a container deployment framework, so the H5 project also needs to complete the microservices that meet the company’s container deployment framework and register with the company’s container service cluster.

So I started to build my h5 project micro-service, which involved some technologies I had not used before:

  1. helm chart
  2. jenkins
  3. Yaml (Sorry, I have never written yaml before
  4. Kubectl command
  5. Docker command

Since the company has no dedicated test, Pre and PRD environment, the company provides a cloud platform similar to Ali Cloud, which can be applied for self-use. So I set up a set of project environment (internal OS, why is there no operation and maintenance)

After Jenkins pipeline failed N times, SLB-nginx access failed N times, ingress setup failed N times, helm install failed N times, my POD is finally installed!

Micro front-end

After the microservice Pod was complete, I started to setup the H5 project.

React + React Hooks + TypeScript As an added bonus, this project is a microfront-end technology that is being pre-developed as a “client-side openness” to be implemented in future key projects.

The difficulty lies in the deployment, according to the deployment of micro-services just said, do I want to deploy a micro-service for each sub-application? This is too bad.

So I thought of a way:

  1. Install an Nginx Docker Container at the entrance of the microservice Pod
  2. Register the docker container of the other child applications in the microservice Pod
  3. Use nginx to direct traffic to ports exposed by the corresponding child application Docker Container

Tried it, Bingo! This allows me to play as I please without having to go through the same microservice deployment process every time I add a child application. For each new subapplication, you just need to add the location in nginx config, add the container in helm Chart, and build the corresponding image.

monorepo

Well, since there is 1 master application +N child applications + 1 Nginx, let’s make a Monorepo.

By organizing code with the Monorepo policy, the directory structure of my code repository would look like this:

. ├ ─ ─ lerna. Json ├ ─ ─ package. The json ├ ─ ─ composition # child application ├ ─ ─ app1 application 1 # son │ ├ ─ ─ but ts │ ├ ─ ─ node_module / │ └ ─ ─ Application package. The json ├ ─ ─ app2 son # 2 │ ├ ─ ─ but ts │ ├ ─ ─ node_module / │ └ ─ ─ package. The json... # ├ ─ ─ the core main application └ ─ ─ packages / # here will store all the reusable code ├ ─ ─ the API and the req # reusable request, res type │ ├ ─ ─ index. The ts │ ├ ─ ─ node_module / │ └ ─ ─ Package. The json ├ ─ ─ common # reusable hook, utils, context, const, store, types │ ├ ─ ─ index. The ts │ ├ ─ ─ node_modules / │ └ ─ ─ package. The json # ├ ─ ─ the components reusable components │ ├ ─ ─ but ts │ ├ ─ ─ node_module / │ └ ─ ─ package. The json ├ ─ ─ the ICONS # reusable ICONS │ ├ ─ ─ index. The ts │ ├ ─ ─ Node_module / │ └ ─ ─ package. Json ├ ─ ─ locales # reusable internationalization │ ├ ─ ─ but ts │ ├ ─ ─ node_module / │ └ ─ ─ package. The json...Copy the code

Not to mention the advantages of Monorepo, just use the right technology in the right scenario, after all, there is no “silver bullet” in software development.

Performance optimization

The first screen was optimized and tested with Lighthouse, and optimized on several levels

  • Step 1: Optimize LCP

    • Optimized pop-ups to replace large background images. Preload images. Speed up image download

  • Measure 2: Reduce useless JS and CSS, reduce TBT and improve SI

    • Help us analyze projects with Webpack Bundle Analyzer
    • Code thoroughly split
    • The front-end route is loaded lazily
    • split chunk
    • Micro front end preloading

  • Measure 3: Reduce the user-defined first screen time for the first picture

  • Measure 4: Preload resources

    • The Webpack plugin adds the preload attribute when packaging

  • Step 5: Reduce CLS

    In fact, layout offsets are quite common. For example, our user information data, in the user information card of my page, is obtained by the asynchronous interface. Therefore, it is possible to see that a part of the page is loaded first, and then the progress bar is displayed and generated after getting the data. This asynchronous content reduces CLS in a way:

    • You can solve this problem by incorporating the asynchronous interface into the main interface, or by setting up a default image placeholder. Replace it when the data comes in
    • UseSWR: Updates the cache policy asynchronously

  • Step 6: Browser caching mechanism (negotiated Caching)

    Combining strong Cache and negotiated Cache, we can Cache static resources reasonably. For example, when the content of our resources cannot be reused, we can directly set no-store for cache-control to reject all forms of Cache. If yes, set cache-control to no-cache. If yes, set cache-control to no-cache. Otherwise, consider whether the resource can be cached by the proxy server and decide whether to set it to private or public based on the result. Then consider the expiration time of the resource and set the corresponding max-age and s-maxage values. Finally, configure Etag and last-Modified parameters required by the negotiation cache.

Plug-in framework

Four months later, I entered the company’s key project to develop an open plug-in framework for clients

So I defined a few attributes for the plug-in framework

  • Plug-in development has low access costs
  • Key projects themselves require shell development that supports plug-in development
  • The plug-in framework is less intrusive for this priority project

So, with minimal intrusion, I completed the plug-in framework.

It was not difficult, but it was encapsulated twice.

  • Do pull configuration, formatting, registration, activation, dependency injection, switch, uninstall and other workflow hooks
  • Through dependency injection, the runtimeAPI is completed to provide the capabilities of the master application to its children
  • Adapted to the electron client plug-in loading
  • In the framework of the plug-in development shell development, that is, the use of an online environment to support the key project of the plug-in framework, the use of sessionStorage injection of a customized key and according to the development document specification configuration value, you can see the plug-in online environment, and hot update

About the technology

Summarize what you have learned this year, as if I have summarized it above, what do you think about next year

React 18

After all, we should study according to the direction of our own work, rather than blindly learning cutting-edge technology

vue3

You don’t have to, but you have to learn?

vite

Give me a taste of the fast development environment

Nest.js

I used it in the company. It feels good. I need to learn about exception filters, pipes, guards, interceptors, etc

About life

This year is my fifth year with her, so lucky to meet her in the best years

We walked through Hongyadong in Chongqing hand in hand, strolled through the wide and narrow alleys in Chengdu, stood in the FLIGHT container on the Shanghai Waterfront, closed our eyes, and held each other on Cangshan in Dali

crowded

Parting is normal, meeting is just an accident

Be grateful for life

And you can make me cry

Afterword.

I recommend the Song of Little Thunder from Glow Curve

There is a kind of light to death, every day that did not dance, is to live up to life

He was supposed to be beautiful, I was supposed to trust him, he was supposed to be an accomplice in my love, in my stealing, in my criminal desires

I’m uWydnA, and I’ll see you in 2022, and to you reading this, all the best