Why SPA not SSR?

ssr(server side render)

The principle of

After receiving the user’s request by the server, the number of requests, processing business logic, complete HTML is returned to the client, and then the browser presents the web page.

advantages

  1. First screen performance.
  2. SEO(we can build SEO key information directly on the server side, so that search engine crawlers can crawl relevant data).
  3. Server-side rendering is not a browser compatibility issue.
  4. For a phone or tablet with a weak device, you can reduce your battery consumption.

disadvantages

  1. Users need to refresh the page for some complicated operations, which results in poor user experience in a poor network environment.
  2. The server is under heavy pressure.

Spa (Single Page Application)

The principle of

After the client initiates the request, the server returns static resources such as JS, CSS, and basic HTML, and then the client builds the page.

advantages

  1. Partial refresh. You don’t have to do a full page request every time (to make the page interaction smoother).
  2. Reduce server stress to some extent.

disadvantages

  1. If the first screen is slow, the user will see a blank screen for a period of time.
  2. Bad for SEO (because the returned HTML document content is basically empty).

From the perspective of business, this project does not have too many requirements on SEO and first-screen performance, and the first-screen performance can be optimized by means of disassembly and packaging and interactive optimization to achieve a good user experience.

View & Component framework React

React was chosen for the team’s technical stack (everyone familiar with React).

Base scaffolding create-react-app

The Create React App is an official scaffolding tool for building React single-page applications. It integrates Webpack with a series of built-in loaders and default NPM scripts, making it easy to quickly develop React applications with zero configuration. In this way, some tedious configuration processes can be saved. The most basic default functions can also basically meet our project requirements, and many extended functions can be introduced according to specific requirements.

Component library

Why choose a component library?

Component library is an important technical unit in the front-end field, serving for efficiency, quality and experience. Efficiency is to abstract the common points of business components in business research and development to avoid repetitive work. Quality is that if a component has been tested and quality iterated, then proper use should not have quality problems; On the experience side, component libraries can unify the interactive experience and make the performance of components more consistent.

According to antd?

  1. Ant DesignThe “background framework” is clarified.
  2. Ant DesignAt the same time, the design specification is also given.
  3. Ant DesignHas a good ecology, and a large number of user groups.
  4. Based on the fact that the current project is a background project.

According to the TypeScript?

  1. JS dynamic typing weakly typed language, type checking at run time. Prone to null pointer problems.
  2. TS static type strong type language, during the development or compilation of strong type checking, can help us in the development stage to avoid a lot of mistakes, the use of type system to make code controllability, scalability, more convenient collaboration.

TypeScript advantages

  1. RoadMapClear, oriented to fitECMAScriptTo build a type system on top of it, rumorES8The type system will also be added.
  2. TypeScript 是 JavaScriptSuperset, whose role is only at the development stage and whose generated code does not contain any type of code, but is guaranteed by the type system.
  3. IDE support is excellent, except for our ownVSCodeHigh integration, rapid user growth,TypeScriptIt also supports almost every major IDE on the market.
  4. The community is huge and the tools around it are plentiful.
  5. R&d teams are dynamic and motivated, and many open source ecosystems are rapidly integrating.
  6. Current frameworkangular vue3Widely used inTypeScript Create-react-appAlso provided onTypeScriptSupport.

The project code specification has a uniform style

This project used Eslint + Prettier + Husky + Lint-staged to improve front-end project quality and unify project code style:

  1. Eslint code checks. When the editor enables Eslint, non-conforming versions will be automatically flagged.

  2. Prettier makes code more pretty, changes code that doesn’t meet testing, automatically formatting.

  3. When husky Git Prettier formatting script Prettier formatting script is executed for the pre-commit operation, the hook function for husky Git is executed once for every Prettier operation.

  4. Lint-passage is simply used to process only files that have changed.

why Eslint not Tslint

TSLint benefits:

  1. Specially designed forTypeScriptService, bug thanESLintLess.
  2. Is not limited toESLintSyntax tree usedESTree.
  3. Can go straight throughtsconfig.json. The configuration in compiles the entire project so that type definitions in one file can be linked to code checks in other files.

The advantages of Eslint

  1. Base rule ratioTSLintA lot more.
  2. The community thrives and plugins abound.

BUT

Due to performance issues, TypeScript officially adopted ESLint as a full testing platform, even using a Repository, while ESLint’s TypeScript parser became a separate project focused on compatibility issues.

why Hooks

What is theHooks

Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class.

A problem fixed by Hooks

  1. Reusing state logic between components is difficult: previously, only tripartite libraries such as Redux and Mobx were used to solve this problem. UseReducer and useContext in Hooks allow you to reuse state logic without modifying component structure.
  2. Complex components become difficult to understand: Hooks break down the interconnected parts of a component into smaller functions (such as setting up subscriptions or requesting data) rather than enforcing partitioning by lifecycle. You can also use Reducer to manage the internal state of components and make them more predictable.
  3. The obscure class: Hook allows you to use more React features in non-class situations. Conceptually, the React component has always been more like a function. Hook embraced functions without sacrificing the spirit of React. Hooks provide solutions to problems without learning complex functional or reactive programming techniques.

The cache

Cache-control: max-age=31536000 for build/static resources (the hash value changes after each package if the file name changes inside the resource so that the browser can directly use the latest static resource), and cache-control: No-cache is used for everything else.

In the future

  1. CI/CD
  2. Automated testing

Refer to the article

useEslint + Prettier + husky + lint-stagedImprove front-end project quality and unify project code style

Why use itTypeScript

Front-end project language selection

A brief introduction the React – Hooks

Get data using react-hooks