TNTWeb – The full name of Tencent news front end team, partners in the group have practiced and accumulated experience in Web front end, NodeJS development, UI design, mobile APP and other large front end fields.

At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.

The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe

fantasticsoul

tntweb-admin

This article introduces tntWeb-admin, an open source react framework project based on Concent, React, React-Router, Ant Design, typescript, Jest and other technologies

Webpack, Vite dual engine drive

At the same time support Webpack, Vite two kinds of construction tools for development and debugging, to meet the friends like vite rapid debugging experience.

Webpack is recommended for production environments

// webpack starts NPM run start // vite starts NPM run vite-startCopy the code

Reduced-form routing, unified error handling

Convention project root directory configs/ Menus. ts file configuration menu, the project automatically according to the menu configuration generated navigation and routing components, and unified routing component package componentDidCatch hook function to do routing page error capture, prevent the whole site crash.

The internal routing component generation process wraps the React.suspense component to enable users to configure asynchronous routing page components.

const menus: Array<IMenuItem | IMenuGroup> = [
  {
    label: 'template'.path: '/template'.Component: lazy(() = > import('pages/_Demos/Template')),
  };
];
Copy the code

Built-in Concent best practices

Concent is a new data flow solution with high performance, progressive, dependency collection and other features. It also supports neutral model configuration and decentralized model configuration, and provides vuE3 like composition API programming experience.

The project deeply integrates concent’s common apis and provides best practices for coding various scenarios, such as global shared Model configuration, page-level Model configuration, and the use of setup.

Add a page

  • Add menus and routes

SRC/configs/menus in the corresponding menu add routing information and routing path unified maintenance in SRC/configs/constant/routerPath ts file

  • Adding a Route Page

Add page components in the SRC /pages directory

See SRC /pages/_DemoTempalte for sample code. After starting the project, visit localhost:3000/template to access the component page

Add the module

Modules can be added in the SRC/Models directory or the nearest service module can be added in pages/XxxComp. The service modules must be exposed in the SRC/Models /index.ts file and the module names are maintained in the SRC/Configs /c2Mods.ts file

  • Add a module name
// SRC /configs/ c2mods. ts export const HELLO = modName(' HELLO '); export type T_HELLO = typeof HELLO;Copy the code
  • Add multi-file modules

Add hello under SRC/Models and split state, Reducer, and computed of the module

|____models              
| |____hello             
| | |____state.ts
| | |____reducer.ts
| | |____computed.ts
| | |____index.ts
Copy the code

Define state in state file [required]

function getInitialState() {
  return {
    str: ' '.loading: false}; }export type St = ReturnType<typeof getInitialState>;
export default getInitialState;
Copy the code

Define methods in the Reducer file [Optional]

import { St } from './state';
import { VoidPayload, AC } from 'types/store';
import { T_HELLO } from 'configs/c2Mods';
import { delay } from 'utils/timer';

type IAC = AC<T_HELLO>;

export function simpleChange(payload:string, moduleState:St, ac:IAC){
    return {str:payload};
}

export async function complexChange(payload:string, moduleState:St, ac:IAC){
    await ac.setState({loading:true});
    await delay(2000);
    Return {STR :payload, loading: false};
    ac.dispatch(simpleChange, payload); Add other reducer logic to the current file
    return { loading: false };
}
Copy the code

Define computation in a computed file [Optional]

import { St } from './state';

// only value change will triiger this function to execute again
export function reversedStr({ str }: St) {
  return str.split(' ').reverse().join(' ');
}
Copy the code

In the SRC/models/hello/index. Ts file module

import { HELLO } from 'configs/c2Mods';
import state from './state';
import * as computed from './computed';
import * as reducer from './reducer';

export default {
  [HELLO]: {
    state,
    computed,
    reducer,
  }
};
 
Copy the code

Import modules into the root module in the SRC /models/index.ts file

import global from './global'; // Overrides concent's built-in $$global module
import Hello from './hello';

consttoExport = { ... Hello, ... global, };export default toExport;
Copy the code

Task components consume module data using useC2Mod, using module methods

import { useC2Mod } from 'services/concent';
import { HELLO } from 'configs/c2Mods';

export function SomeComp(){
    // state: data, Mr: method
    const { state, mr } = useC2Mod(HELLO);
}
Copy the code

100% ts

UseC2Mod hook functions can automatically help you derive module project data, calculation data, and related methods by passing in the specified module name.

Rich theme Settings

  • Based on CSS variables, realize online theme skin, real-time theme preview function (site theme color, font transparency, etc.)

  • Multiple layouts, 27 layout combinations (3 sidebar layouts * 3 top columns * 3 shortcut navigation bars)

  • Multi-tone mode: supports normal, black and white, and dark color modes

Multiple login topics

Multiple login themes, 10+ login theme arbitrary switch

TAB.

Support for tabs and associated browser forward and backward behavior

internationalization

Interfacing with Lingui internationalization scheme to support compile-time copy replacement

Lingui reports an error in Vite mode, currently only supports Webpack mode

Complete single test

Create a __tests__ directory under the component to write test files using Jest alignment

team

TNTWeb – Tencent news front end team, TNTWeb is committed to the exploration of cutting-edge technology in the industry and the improvement of team members’ personal ability. For front-end developers to organize the applets and the latest quality content in the field of web front-end technology, weekly update ✨, welcome star, github address: github.com/tnfe/TNT-We…