Chat about the Web front end

Based on the React/React-native unified stack

Original article by Jerry

The c-end attributes of the product determine that the lateral span of the front-end technology stack is large and the high availability of front-end applications is high. Current development platforms include IOS, Android, React-Native, and Web, and development languages include Java, javascript, and Object-C.

How to understand the front end is shown below:

This is a typical midfield-small front-end model, with Native providing midfield-output and Web and ReactNative providing business support

Web developers need to be concerned with three interactions, two compatibilities:

  • The user interaction

    • User interaction is based on the principle of human-computer interaction, product architecture, and give the design prototype.
    • The user interaction scheme may be adjusted based on the results, for example:

    Access the third-party Web page A, and expect A to be displayed in our site B as A sub-process, and B can communicate with the process of A in the process of interaction. Due to the limitation of security, it is often illegal to operate elements in A directly in B. In this case, it is recommended to display A in the form of A pop-up window, and directly close the process after processing A and continue the next process in B. In this way, aesthetic feeling and flow design are taken into account. So Web development in weak scenarios to achieve business requirements, need to feedback problems, give advice.

  • The background interaction

    • Web developers, background interaction process to reduce the number of interactions, clear the need for data, reduce redundant data return, optimize error handling

  • APP interaction

    • Web development needs to define specific input and output parameters and reuse existing interfaces as much as possible.

  • System Compatibility

    • C-terminal products, for the most users, system compatibility needs to consider the compatibility of browsers from different vendors, browser versions, and APP platforms. Browser compatibility can be solved independently through translation and gaskets. Platform compatibility depends on APP developers to provide solutions and web side cooperation.

  • API Version Compatibility

    • API version compatibility, background API, APP API. The background API does not discriminate version processing for the time being, but only needs to cooperate with interface optimization. APP version fragmentation needs to be considered, and how to deal with the old version of APP with the new APP interface scheme.

  • Interaction design is the constraint discussed by designers according to business requirements and requirements and limitations of each end, and the determined input gives the determined output.

  • 👆 Interface is a document. Good interface constraints can reduce the complexity of each end and the difficulty of collaboration.

Technology stack

  • HTML5(a brief introduction to some useful technology points)

    • PostMessage: Resolves cross-domain and window communication problems
    • LocalStorage/SessingStorage: Web backend data store
    • Canvas: Draw graphics and convert HTML to PDF
    • Video/audio: Streams media
    • Input: placehoder, Input type number/date/text/passwrod, min/Max length, disabeld
    • requestAnimationFrame
    • WebGL
    • IndexDB
    • .

  • Sass/less/Css

    • Box models and browser differences

    • Mobile adaptation schemes include REM and VM

      • Rem: Set the font size of the HTML root node by dynamically calculating the ratio of screen size to design size. Global style rendering is adapted according to the font size of the root node
      • Vm: Based on a percentage of viewports

    • Style module design

      • Universal style extraction, modular introduction
      • Style preprocessing postCss

  • Ajax/fetch

    • AxiosRequest library is based on xmlHttpRequest encapsulation and is often used in network resource request scenarios.

      • Abstract the Axios instance and initialize different network request objects according to different scenarios through configuration mode. For example, the web implementation API Server A and API Server B background interaction, and the background defines different interaction rules

           const axios = require('axios');
   export const axiosA = axios.create('https://server.a.com',{
        baseURL:"https://exampleA.api.com"
   })
   export const axioB = axios.create('https://server.a.com',{
                         baseURL:"https://exampleB.api.com"
                    })
Copy the code
    • The FETCH interface abstracts Headers, Request, and Response objects.

  • DOM/BOM API

    • DOM add, delete, modify and query interface
    • DOM event flow, event capture, event target, event bubbling
    • BOM browser interactive interface, path navigation, browser information query, Base64 conversion, screen information

  • ES6 and other grammar sugar

    • Object
    • const/let
    • Promise
    • class
    • Symbol (New base type)
    • Async /await(how to implement?)
    • .

  • React

    • The life cycle
      • Create a periodic hook function
      • Update the periodic hook function
      • Destruction of compoentWillUnmount
    • Father-son communication/brother communication
      • Transmission of values between father-child communication components, one-way data flow,
      • Sibling communication, managing state synchronization information through a common parent component
    • State management, global state management, component state management
      • Global status: Prompt box, route, and permission management
      • Component state management: page data, interaction effects
    • Advanced component design
    • Universal UI component design
    • Component reusability
    • Rendering performance optimization
    • Virtual DOM tree update mechanism
    • Time slicing

  • React-router

    • React-router design concept
    • Componentized design
    • Code segmentation based on routing

  • Redux

    • Redux design concept
    • Management of shared data
    • Data consistency design

  • Antd/Antd-mobile

    • Customized use
    • According to the need to load

  • echart

    • Front-end data model design
    • Business Component Design

  • Babel

    • Babel 6/Babel 7
    • Presets/Plugins/Transform/Polyfill
    • Syntax degradation (mobile compatibility)

  • Eslint

    • Check airbnb code style
    • Usage Mode The packer configuration is used using the IDE editor configuration

  • webpack

    • Basic configuration
    • The plug-in USES
    • Customize the localized development environment
    • Packaging analysis

  • npm/yarn

    • NPM package development specification
    • Yarn Usage Scenarios
    • nrm
    • nvm
    • Mirror switch

  • git

    • Git Development Process
    • Git Use Tips
    • Merge code to resolve conflicts
    • Git rebase

  • Browser Environment

    • Browser Security Measures
      • The same-origin policy
      • Content security protection policies
    • How browsers work
    • Browser developer tools
    • Browser compatibility

  • CommonJS specification

    • The evolution of history

  • HTTP Is an application-layer protocol that transmits data based on TCP/IP. HTTP message format: request line, request header, blank line and request data consists of four parts.

    • Cache is used to improve Web performance. First, you need to understand the cache storage policy, invalidation policy, and cache comparison policy.
    • cookie
    • CORS
    • Session
    • HTTP versions
    • CSP
    • The HTTP status code
    • HTTP Method
    • HTTP Headers

  • Nginx

    • Reverse proxy and forward proxy
    • Detailed description of front-end use
      • Single-page application configuration path matching rule
      • User request header information is transparently transmitted
      • Gizp configuration
      • Forwarding agent

  • Jekins

    • Jekins integration steps
    • Multi-environment details

  • UI framework

    • Bootstrap

  • Web framework

    • React
    • Vue
    • Angular

  • The React – native framework

    • Based on the component
    • layout
    • The routing configuration

  • Third-party libraries

    • lodash
    • moment
    • Crypto-js
    • xlsx
    • codemirror
    • medium-editor
    • shelljs
    • yeoman

  • Webview

    • Basic webView concepts
    • Platform differences
    • System versions vary
    • Cross-platform communication

  • Typescript/Flow

    • Use scene big front end team collaboration, no interface rendering, mid-stage – small front end mode collaboration

  • SEO friendly

    • The search crawler
    • Sharing on social platforms
    • Server side rendering
    • Rich media objects

  • License MIT\BSD, knowing the open source License can help us avoid copyright risks in the process of selecting open source framework