Summary of three-month internship at BigO front end

This article was originally published at github.com/bigo-fronte… Welcome attention, reprint.

1. Overall cognition

1. Teamwork

At home or at school, I have been developing projects independently, and the front and back ends are all by myself, how to write, at their own control, in this solo development mode, it can be said that I know nothing about the team cooperation mode. Later, during the internship, after several iterations of the version, I had an overall understanding of the team collaborative development model. For example, what is the requirements cycle for a project:

1. Requirement review
2. The demand goes into the schedule
3. Into the development
4. Front and rear end self-test and commissioning
5. Initiate test after self-test without error
6. Tests mention bugs (preferably none)
7. Fix bugs if they exist
8. Published online

In these processes, the front end mainly play what role, also have a general understanding.

2. Engineering understanding

Before the internship, I had a vague concept of engineering, which was more limited to componentization and modularization. Although before the usual visit to some technical blog sites, will see some similar “XX into the engineering XX” “XX automation XX”, I can not wait to place in, but for me, it is really just metaphysics, so I will immediately close, and then take a deep breath, and then, Choose “JS basic types” “CSS selector order” and other articles to read with relish.

During the internship, after several releases, I learned that there was no need to manually upload resources to the server before going online. It’s a lot easier to do with a continuous integration/continuous release tool called Jenkins.

Slowly refreshed my understanding of engineering, engineering is far more than components and modules, originally it also includes standardization, continuous integration, automated build, automated deployment, automated testing, and so on.

Engineering is a big topic. I hope that with the accumulation of practical experience, I can gradually master the essence. Later, I also need to find some books to read.

3. The Git operation

Besides writing code, I think one of my biggest problems is git operation

Before the internship, MY git command is like this

• git pull
• git add
• git commit
• git push

My branch looks like this

• master

In the process of building branches, I stepped in many holes, but I finally found the right path. For example, in branch management, my experience is like this:

• Getting started: One branch per project, one file (all requirements are done in one branch)

• Later: One requirement for one branch per file (resulting in unclear relationship between branches)

• Finally: the same folder, a branch for a demand (so far, has not found any problems.

In addition, because other requirements sometimes need to be developed before another requirement is developed, several branches are developed at the same time, and unexpected things happen, such as the one I encountered:

Changes have been pushed, but are not required

In the process of branch development, some wrong files were added, or the wrong changes were made, and local changes were added to add,commit, and push, but these changes were not needed. How do you go back?

1. When you roll back to the specified git version, an error will be reported if you commit in the previous commit order
2. This is because gitlab has been submitted before your history, you can not push again push, this time add a parameter — force is ok
3. After adding parameters, it is found that Gitlab does not allow to push to the protected branch. The solution is to ask the project administrator to temporarily set the branch that you want to commit to gitlab as an unprotected branch

Git Revert is also available

The current branch is being opened, but needs to be cut to another branch

We are happy to develop new features on the new branch, but the product manager says that there are bugs or changes in other branches that need to be addressed quickly. In this case, we need to cut to the target branch. What about the changes made on the current branch?

I thought commit, but there’s a better way

1. useGit stash push - m "message"Save the current changes
2. Switch to the target branch to fix bugs, and switch back to the original branch after the change is committed
3. usegit stash popreduction

The important thing to note here is that when you save the current change, it’s better to add a message rather than a simple Git stash, because once you get too many Git stash changes, you can’t remember what was changed

– new functionality was developed in the wrong branch that has not yet been committed locally

1. Use git stash push — m “message” to save the current changes

2. Switch to the branch you want to develop

3. Use git Stash Apply to apply changes

New features developed in the wrong branch have been committed locally but not yet pushed to the remote repository

1. git log --oneline Obtain the hash of the current commit
2. git cherry-pick <commit hash>After switching to the target branch, merge all commit changes into the target branch
3. git reset <commit hash> Switch back to the wrong branch and roll back to the previous version
4. git checkout -- . Delete modifications

Two, debugging skills

1. Console. table Displays data

In the past, you’ve used console.log to print a variable, but there’s a better way.

For displaying arrays or objects on the console, using console.table is more straightforward than console.log.

console.table([
  {name:"Sunny",age:18,country:'China',job:'engineer'},
  {name:"Luffy",age:16,country:'Japan',job:'Pirate'},
  {name:"Kin",age:36,country:'Italy',job:'doctor'},
])
Copy the code

Of course, sometimes you don’t want to print so many columns, for example, if you just want to print name and job, you just need to add an array of dependencies to indicate which fields to print

console.table([
  {name:"Sunny",age:18,country:'China',job:'engineer'},
  {name:"Luffy",age:16,country:'Japan',job:'Pirate'},
  {name:"Kin",age:36,country:'Italy',job:'doctor'},
],['name','job'])
Copy the code

In fact, except for console.table. There are other ways:

• Console. info: It does almost the same thing as console.log, printing information from the console, although it may be printed in a slightly different style than console.log
• Console. error: Also has almost the same effect as console.log, but prints are highlighted in red and preceded by an x
• Console. warn: As above, printed messages will be highlighted with a yellow exclamation mark.
• Console. time and console.timeEnd: The two methods are used together. They take the same argument and output the execution time of the code between the two expressions.
• Console. count: The current print is printed, followed by the number of times it has been printed.

Having said that, in addition to the table, actually more use debugger!

2. Copy Copies data

Using the copy method, you can copy the console output to the paste board. It is a little easier to copy than manually, but only in Google chrome

3. Scroll elements to the view

When debugging the DOM element, we have focused on the relevant DOM structure, but the corresponding element is not shown in the visual window, so we can quickly scroll it into the visual window.

Control panel => Elements => Right-click the selected DOM node and Scroll into view

4. Capture a snapshot

Sometimes, you need to deliver a good page to the product to see, then you need a screenshot, but if the page is too long, it is very inconvenient, do you want to cut a lot of pages? Of course, you can download the long screenshot tool, which can do this, but it’s not necessary, there is actually a long screenshot command:

Control panel => Review element => Command + shift + P => Capture full size screenshot

You’ll see a long screenshot

5. Capture a local snapshot

Of course, sometimes, do not want to intercept so long, just want to intercept a certain part, in fact, there is a corresponding command

Control Panel => Review elements => Command + Shift + P => Capture node screens

3. Code style

During the internship, I was iterating on a current project to add new functions, so I could learn some good code styles from the predecessors’ code. The following are some impressive ones.

1. Focus on naming

Naming an event is always difficult because it’s so important, and we want to be able to see what the method does directly from its name. For example, merge two arrays into a new array and return an array with no duplicate values.

What are we going to call it, to show what it does?

Maybe it goes something like this:

mergeListsIntoUniqueList(arr1,arr2){}
Copy the code

But, in practice, it is best for a method to do only one thing, so that the coupling is lower and the method is more reusable

We split the two methods into two methods, one for merging and one for deweighting

mergeList(arr1,arr2)
Copy the code

unique(arr)
Copy the code

2. Simplify IF statements

Look at the following code:

multipleifnestedif(name === "sunny" || name === "Luffy"| | = = ="Kin"){

}
Copy the code

A nice way to write it is to put the values in an array and see if the name is in the array

const nameArr = ["sunny"."Luffy"."Kin"]
if(nameArr.includes(name)){

}
Copy the code

3. && instead of if

Look at the following code:

  function hello(){
    console.log("hi")}let enableSpeak = false
  if( enableSpeak){
    hello()
  }
Copy the code

There’s actually a more elegant way to write it

  function hello(){
    console.log("hi")}let enableSpeak = false
 
  enableSpeak && hello()
Copy the code

4. Multiple If nesting

When we receive data from the back end, we receive a multi-layer nested object, and we want to get the value of an object property in the deep layer. To prevent errors, we may need to use multiple layers of if nesting, as shown in the following code:

if(result.data){
  if(result.data.obj){
    if(result.list.obj.name){
      if(result.list.obj.name.firstname){

      }
    }
  }
}
Copy the code

It’s always a little tricky to write this way.

There is an optional chain operator (? .), which allows the value of properties deep in the chain of connected objects to be read without having to explicitly verify that each reference in the chain is valid

if(result.data.obj.name.firstname){
 
}
Copy the code

5. Return as soon as possible

There is the following code:

function handleEvent(event){
  if(event){
    / /...
    if(event.target){
      // do some thing real}}}Copy the code

Returning early makes our code more readable

function handleEvent(event){
  if(! event || ! event.target){return; }}Copy the code

6. Object parameters

You have the code shown below

function createObj(name,sex,age,hobby,job,address){}
Copy the code

When a function has a large number of parameters, we can combine the parameters of the same class with objects, and then pass the merged objects as parameters. In this way, when calling the function, we can clearly understand the meaning of each parameter, and do not need to remember the position of each parameter

function createObj({name,sex,age,hobby,job,address}){}
Copy the code

New technology

Before the internship, I specialized in VUE and had zero basis for React. Since the project in my group was React, I started to tread the road of react

When I’m writing react, I get an error, so it causes some thinking

1. Why introduce React

When writing React, you might write code like this:

import React from 'react'
function A(){
  return <h1>The front-end sunny</h1>
}
Copy the code

If you don’t write

import React from 'react'
Copy the code

The following code does not use react methods or properties, so why do we need to introduce react?

It turns out that Babel converts JSX code into

function A(){
  return React.createElement('h1'.null."Front sunny")}Copy the code

2. Why do we need to introduce super()?

JavaScript limits the use of this for a reason. Assume the following inheritance:

class Person {
  constructor(name) {
    this.name = name; }}class Geek extends Person {
  constructor(name) {
    this.sayHello;
    super(name);
  }
  sayHello() {
    alert('Good morning xdm! '); }}Copy the code

If JavaScript allows you to use this before calling super, a month later we need to modify the sayHello method, which uses the name attribute:

  sayHello() {
    alert('Good morning xdm! I am '+ this.name);
  }
Copy the code

There will be a name for the situation of undefined, is not to think extremely afraid!

3. Why do you call bind this

class Geek extends Person {
 
  sayHello() {
    alert('Good morning xdm! ');
  }
  render(){
    return (
      <button onClick={this.handleClick}>Click</button>)}}Copy the code

You’ll notice that this is undefined, which is always a little weird the first time you see this, because in the past, when I wrote vue, there was no problem

Vue code:

<button @click="handleClick">Click</button>
Copy the code

or

<button @click="this.handleClick">Click</button>
Copy the code

The reason why react and vue events are used differently is because of the internal implementation mechanism

React registers events into document through addEventListener, and then an event pool stores all events. When events are triggered, events are distributed through dispatchEvent, which can be simply understood as: Eventually this. HandleClick is called as a callback function

This is often lost when a function is called as a callback, as in the following code, which is most common:

function delaySayHello(){
  let _this = this;
  setTimeout(function(){
    / / use _this})}Copy the code

So what are some ways to handle this?

1. Bind this directly

It’s easy to write, it’s easy to write. Performance is not very good, every time render bind, and if there are two elements with the same event handler, still bind.

class Geek extends Person {
 
  sayHello() {
    alert('Good morning xdm! ');
  }
  render(){
    return (
      <button onClick={this.sayHello.bind(this)}>Click</button>)}}Copy the code

2. Constructor manual bind

Since the constructor is only executed once, it will bind only once, and there is no need to repeat bind if multiple elements need to be called.

No obvious drawbacks, maybe just too much code, right?

class Geek extends Person {
  constructor(props){
    super(props)
    this.sayHello = this.sayHello.bind(this)}sayHello() {
    alert('Good morning xdm! ');
  }
  render(){
    return (
      <button onClick={this.sayHello.bind(this)}>Click</button>)}}Copy the code

3. Use arrow functions

Good. Nice. Each time Render creates the function repeatedly, the performance will be poor.

class Geek extends Person {
  sayHello() {
    alert('Good morning xdm! ');
  }
  render(){
    return (
      <button onClick={(e)= >this.sayHello(e)}>Click</button>)}}Copy the code

4.public class field

Good. Nice. In the experimental phase, if you don’t want to take risks, it’s best to bind this to the constructor

class Geek extends Person {
  sayHello = () = > {
    alert('Good morning xdm! ');
  }
  render(){
    return (
      <button onClick={}>Click</button>)}}Copy the code

4. Write a simple react

In order to get familiar with the implementation principle of React, I watched some teaching videos and materials, and tried to write a simple react

Write simple react core principle :juejin.cn/post/689829…

5. Learn React Hook

In project iterations, new components should be implemented using hooks as much as possible, so learning React hooks is also essential.

Among them, learned such as useMemo, useCallback and other performance optimization methods. Also, in order to better use, also by watching some videos and materials, I tried to write hook principles commonly used in the hooks.

Core principle of handwriting React Hook

At the end

There are still many things to learn, such as React Fiber, React-Saga, nex.js, React 360, etc. In the coming days, we need to study hard!

Welcome to leave a message and discuss, I wish a smooth work, happy life!

I’m bigo front end, see you next time.