Advanced advanced guide for the beginning and middle front ends

preface

I was once confused. After learning the actual development and application of Vue and React, I seemed to encounter some bottlenecks and didn’t know how to go on. I believe that this is also a lot of one or two years of experience of front-end engineers encountered common problems, this article, the author would like to combine some of their own growth experience to sort out some routes, to help you less intermediate front-end engineers take some detours.

This article will cover lots and lots of learning routes and links. If you’re still at the beginning or intermediate level, don’t worry too much. Use this article as a roadmap to progress and work towards it in the years to come. I’m not saying that this article is the only way to become a senior engineer, if you do well in business, or can be good at communication, with all aspects of the strength of the project to do beautiful, then you can also have the title. This article is just a summary of my own growth route.

The audience of this article is 1 to 3 years of development experience of the beginning and intermediate front end engineers, hope to communicate with you.

For those who have been promoted to the top, you are welcome to leave your thoughts in the comments section to supplement some of my shortcomings and deficiencies.

I graduated from an ordinary undergraduate school in 17 years. In June, 20 years, I successfully passed the interview and entered Dafa with three years of experience. My rank is advanced front-end development.

My Github address, please follow, I will keep you updated with some projects worth your attention.

A little voice

Writing is not easy, this article cost me a lot of energy and time, although in the mining is very hot, but really to pay attention to the public number of people is still very few, I hope you can pay attention to the public number “front from advanced to hospital”, you can get the complete link of all resources, I will continue to update quality content.

Follow the public account, you can also add me as a friend. Short of friends, seize the opportunity oh ~

Basic ability

I have compiled an intermediate front end of the necessary technical stack capabilities, for my girlfriend intermediate front end interview tips. The technology stack in this article, of course, requires a solid grasp (in fact, I also have some missing, secretly fill).

Of course, ambitious you will not always be satisfied with intermediate front end, we have to continue to move up, promotion and pay, marry white rich beauty!

JavaScript

Native JS series

You need to be able to master everything except the undescore part of yuba’s blog. And flexibly applied to the development. JavaScript In-depth series, JavaScript Topics series, ES6 series

Fully familiar with eventLoop.

tasks-microtasks-queues-and-schedules

Promise

You need to read the Promise A+ specification, pay attention to the details, and apply them flexibly to your development. Promise A+ English document
You’ll need to go through the Promise tutorial by hand, think through the details, and incorporate the asynchronous waiting, error handling, and other details into your development thinking. Parse the Promise internal structure and step by step implement a complete Promise class that can pass all Test cases
Finally, you must be able to write a simplified version of the asynchronous chained calls that are at the heart of promises. Minimum implementation Promise, support for asynchronous chained calls (20 lines)

Digressing, at that time refined this 20 lines really circled me for a long time 😂, but understood will have a sense of suddenly enlightened. The techniques of this asynchronous queue should be integrated.

async await

We are very familiar with Promise, and by extension to async await, which is a very, very common asynchronous processing method in development today, we should be familiar with its Babel compiled source code.

Babel does a very clever job with async await functions with generator functions. How to recursively process a serial promise chain?

This technique is also used in the Axios source code. Commonly used interceptors are essentially serial executions of promises.

Of course, you can also dig deeper to see the source code for the Babel compilation of generator functions if you have the resources. It is not mandatory, since generator functions are rarely used in development. What does Babel compile Generator for ES6 series

Exception handling

You must be proficient in error handling in asynchronous scenarios. This is a required skill for a senior engineer, and it would be ridiculous if exceptions in development were consumed by the library you wrote. Evolution of Callback Promise Generator async-await and exception handling

Plug-in mechanism

You need to have a general understanding of how plugins are implemented in the various libraries on the front end, and be able to incorporate your own plugins as you develop your own libraries. Did Koa’s Onion middleware, Redux’s middleware, and Axios’s interceptor confuse you? Implement a compact version and you’ll get it all figured out.

Design patterns

For complex scenarios, your development can no longer be nested with if else shuttles, you need to look through the design patterns and choose the right design pattern for the right scenario. For example, the Vue source code uses the observer pattern, publish/subscribe pattern, strategy pattern, adapter pattern, publish/subscribe pattern, factory pattern, composite pattern, agent pattern, facade pattern, and so on.

And these design patterns may be hard to think of in engineering if you haven’t learned them, but if you have learned them, they become part of your internal engineering capabilities and, in a larger sense, architectural capabilities.

As we mentioned in the little book Design Patterns, even in the fast-changing front end, there is a learning-once, learning-for-life quality to knowledge. From an engineering perspective, I recommend that you focus on design patterns. – take it

Here I recommend nugget’s design pattern booklet.

The development idea

Sometimes composition is better than inheritance. It’s not just object-oriented programming that allows reuse. In some scenarios, the idea of composition may be more elegant.

Medium.com/javascript-…

“… The problem with object-oriented languages is they’ve got all this implicit environment that they carry around with You wanted a banana but what You got was a gorilla holding the banana and the entire jungle. “~ Joe Armstrong — “Coders at Work”

The problem with object-oriented languages is that they introduce all these implicit environments. You want a banana, but you get the gorilla with the banana and the whole jungle.

Code specification

You need to be familiar with cleancode-javascript, and deep into daily development, to develop your own specifications for your team’s scenarios. clean-code-javascript

algorithm

I’m not going to recommend a bunch of little books, notes, blog posts. From my own experience in learning algorithms, it is difficult to really read and understand the article without much algorithm foundation. Here, I only recommend the LeetCode real subject course of BObo, a moOCs website. In this course, Bobo, an algorithm expert, will make giFs of each algorithm very carefully. From the shallow to the deep to explain to you all kinds of classification of LeetCode true problem. This is one of the most rewarding lessons I’ve learned recently.

Is the algorithm important to the front end? Maybe you think it is useless to do the problem, but I can really feel that my code ability is improving rapidly after doing the problem and sorting out the ideas and solutions of each problem type.

For many students who think they are not smart enough to learn algorithms, I recommend Bobo’s article “Born Not smart”. It is this article that inspires me to start my journey of learning algorithms.

Here is a list of the basic knowledge of algorithms to be mastered at the front end, hoping to give you a route:

Complexity analysis of the algorithm.
Sorting algorithms and their differences and optimizations.
Array of double pointer, sliding window idea.
Use Map and Set to handle lookup table problems.
Various problems with linked lists.
Using recursive and iterative methods to solve binary tree problems.
Stack, queue, DFS, BFS.
Backtracking, greedy algorithms, dynamic programming.

Algorithms are the underpinning, and laying a solid foundation will pay off for the rest of your career.

Brothers: An advanced guide to algorithms written for the beginner and intermediate front ends

The framework paper

For senior engineers, you have to have a framework in your hand, which is like a sword in your hand, and you can cut through all kinds of projects.

Follow the public account, reply “advanced”

Vue

As for Vue, I mainly learn from Mr. Huang Yi and follow him carefully. Basically, you can be invincible in Vue.

Good command of

For Vue, you must be very skilled in using, you basically have to go through all the API on the official website. And you need to use some high-level apis to achieve clever encapsulation. A few simple examples.
You need to know how to use slot-scope to do some data and UI separation encapsulation. Take the vue-promised library for example. The Promised component doesn’t care what your view looks like, it just manages your asynchronous flow, throws data back to you through your incoming slot-scope at the right time, and helps you present your incoming view.

<template>
  <Promised :promise="usersPromise">
    <! -- Use the "pending" slot to display a loading message -->
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <! -- The default scoped slot will be used as the result -->
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <! -- The "rejected" scoped slot will be used if there is an error -->
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>
Copy the code

You need to use it skillfullyVue.extendsTo do something with the projectImperative APIThe encapsulation. And we know why it works the way it does. (Knowledge of source code is required)Confirm the component

export const confirm = function (text, title, onConfirm = () = >{{})if (typeof title === "function") {
    onConfirm = title;
    title = undefined;
  }
  const ConfirmCtor = Vue.extend(Confirm);
  const getInstance = (a)= > {
    if(! instanceCache) { instanceCache =new ConfirmCtor({
        propsData: {
          text,
          title,
          onConfirm,
        },
      });
      / / create dom
      instanceCache.$mount();
      document.body.appendChild(instanceCache.$el);
    } else {
      // Update properties
      instanceCache.text = text;
      instanceCache.title = title;
      instanceCache.onConfirm = onConfirm;
    }
    return instanceCache;
  };
  const instance = getInstance();
  // Make sure the updated prop is rendered to the DOM
  // Make sure the animation works
  Vue.nextTick((a)= > {
    instance.visible = true;
  });
};
Copy the code

You need to start using JSX to write complex components in your project. For example, in my netease Cloud Music project, I encountered a complex music table requirement, support for search text highlighting, dynamic hidden columns, etc. JSX still doesn’t work very well with the current version of Vue. There are many properties that need to be nested, which causes a lot of unnecessary problems. For example, there is no way to pass the props passed in from the outer component directly like React does. Vue3 RFC mentioned that the attributes of VNode nodes will be further flattened. We expect to get a perfect JSX development experience close to React.
You’ll want to dive deep into the mechanics of nextTick in Vue and understand why you should use microtask queues over macro task queues, and think deeply with your eventLoop knowledge. Finally, incorporate it into your knowledge of asynchronous merge optimization. NextTick: MutationObserver is just a cloud, microTask is the core!
You need to be able to understand the higher-order components in Vue. As for why slot-scope doesn’t work in this article, you can’t just read his article and get confused. (need your knowledge source) to explore the Vue high-order component | HcySunYang
I recommend my own Vue high-level components article, which covers some of the more advanced uses. Vue Advanced must learn advanced component HOC
For the use of Vuex must be very skilled, know when to use Vuex, know how to write Vuex plugin according to the needs, reasonable to use the SUBSCRIBE function of Vuex to complete some global dimension packaging, For example, I’m too lazy to try and catch Vuex action error handling, so I encapsulate a vuex-error-plugin. The code is simple, and it’s important to understand why it works. Monkey Patch is used here, which is not a good practice. It is only used as an introduction.
You must be skilled in the use of Wue-Router and know what needs to be used and what kind of router hooks, so as to hold a large project. I think the advanced Chinese documents in the official warehouse are actually very good, but I don’t know why they are not put on the official website. vue-router-advanced
Understand the nature of the virtual DOM. Is the virtual DOM necessarily faster than the real DOM? This is yu Yuxi’s answer. After reading this answer, I believe you will have a further understanding of virtual DOM. The Internet says that real DOM is slower, but tests show that it’s faster than React. Why?

The source code into

You not only need to skillfully use Vue, because Vue source write very beautiful, and reading difficulty is not very big, many people also choose to read Vue source code. Here recommended Vue teacher Vue source course. The source code for Vuex and Vue-Router is also included here. Vue.js source comprehensive in-depth analysis (including Vue3.0 source analysis)
You need to download the Git repository and cut to elegant branch to boot locally. Vue source code analysis at a line-by-line level
Of course, the master branch of this repository is also a treasure trove of articles in this author’s renderer series that explain the essence of vNode and diff’s essential components outside of the framework

Vue3 outlook

Vue3 has been released in Beta so you can learn ahead of timeHookRelated development patterns. Here’s my introduction to Vue3:

What’s so good about Vue3? (Detailed comparison with React Hook)

Vue3 source

For the responsive part, if you are already familiar with the responsive principle of Vue2, then the responsive principle of Vue3 should not be too difficult for you. Even in the course of learning you will be able to compare each other and see why Vue3 is better, what parts of Vue2 need to be improved and so on.

In fact, Vue3 changes the implementation into a more powerful Proxy, and makes the responsive part more abstract. It can even, I have to say, the responsive model of Vue3 is more close to the core of the responsive class library, even react state management library such as React-easy-state. It was built with a similar set of cores.

Again, @vue/ Reactivity subcontracting from Vue3 is highly recommended.

Go ahead and write your own article about the responsive core process of Vue3 in detail.

With you thoroughly understand the Vue3 Proxy response principle! TypeScript implements proxy-based reactive libraries from scratch.
With you thoroughly understand the Vue3 Proxy response principle! Map and Set response based on function hijacking
In-depth analysis: How does Vue3 subtly implement powerful computed

After learning, I easily integrated @vue/ ReActivity package into React to create a state management library, which also proves the abstraction of the package: 40 lines of code integrate Vue3’s responsiveness into React for state management

React

React has entered the Hook phase, and all libraries in the community are actively embracing Hook. Although it still has many traps and shortcomings, this is basically the future direction. In this article, I will not mention the class component development techniques, after all, many good companies have embraced the Hook.

Skilled application

You need to know all the techniques mentioned on the website, and even if you haven’t used them before, you need to have a general idea of where to use them.
Although many oF the API in the React book have been updated, the core design idea remains the same. React
On the subject of skillful application, there are actually several treasures in the gold mining booklet
1. Cheng body bosses (quietly tell you, his rank very high) of the small volume of enterprise management system, the code in this project is very deep, but in the abstract and optimization also do impeccable, his abstract the acl rights management system and the router routing management, and introduced the reselect do performance optimization, a year ago when I first read, A lot of people don’t understand it. After a year of handling a set of management system with ACL and permission routing from scratch, I know how strong its abstract ability is. Really is
  
  I do not know the first smell of the song, and then smell is the man.
  
  React combined development practice: build five core modules of enterprise management system
2. Three big guy React Hooks and Immutable data stream actual combat, easy to understand with you to achieve a music player. Everybody knows three yuan, right? That’s God. God taught you to write apps. Why not learn? React Hooks and Immutable data streams
Understand key understanding- fluid-key-prop in React

Why is the key recommended in React
React official team member’s thoughts on the derived state: you-probably- Dont -need-derived state

React Hook

You must master Hook skills, in addition to the official website documents:

Dan’s blog, he’s one of the actual writers of the Hook code, how authoritative is he? Here is the sweet Chinese version. UseEffect complete guide after reading this, go to Dan’s blog home page and find out all about hooks. Read it all!
Recommend huang ziyi’s intensive reading weekly series 096. Intensive reading “useEffect complete guide”. Md attention! Not just this one, but all the articles about React Hook in this warehouse, combined with their own thoughts analysis.
The “Hook Traps” series is also an article by Dan’s brother, detailing the reasons for the so-called closure traps and the tradeoffs in the design. What is the difference between a functional component and a class component?
Find some of the community’s best custom hooks and see if they have any development and design ideas that can be incorporated into your daily development. Intensive reading “Hooks take number – SWR source” Umi Hooks – help embrace React Hooks React Hooks system design one – layered

React performance optimization

Optimize component rerender in React, there are a few implicit points here. optimize-react-re-renders

How do I optimize the React functional component? This article is so detailed that it is worth reading carefully. How to optimize React functional components

React unit test

Use @testing-library/ React to test components. The reason why this library is better than enzyme is that it is more focused on testing a component from the user’s point of view, rather than testing the implementation details of the component. Introducing The React Testing Library Testing Implementation Details
Use @testing-library/ React-hooks to test custom hooks how-to-test-custom react-hooks

React is used with TypeScript

This repository explains how to combine React with TypeScript in great detail and gives some examples of how to use TypeScript in more advanced ways. It’s worth going over! react-typescript-cheatsheet
This article is brought by students from the data experience technology Department of Ant Financial. In fact, in addition to the technical article, students from Ant Financial also vividly explained to us how an advanced front-end student went to the community to find solutions, and how to think about and apply to the project, which we really admire. React + Typescript engineering governance practices
Microsoft’s big man takes you to write a type-safe component, very deep, very enjoyable… Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)
10 Wrong patterns to avoid in React + TypeScript 10-typescript-pro-tips-patterns-with-or-without-react

React code thinking abstractly

When should YOU break code into components? when-to-break-up-a-component-into-multiple-components
Thinking carefully about where state should be placed in your React app, whether it’s the component itself, promoted to the parent component, or local context and redux, can help improve performance and maintainability. state-colocation-will-make-your-react-app-faster
Think carefully about how states should be managed in the React component, using derived states preferentially, and optimizing them with useMemo, Reselect, and other libraries where appropriate. dont-sync-state-derive-it
This section describes how to use the reducer mode in the React Hooks to provide flexible data management and allow users to control data. the-state-reducer-pattern-with-react-hooks

TypeScript

Since the advent of Vue3, TypeScript seems to have suddenly taken off. This is a good thing, pushing the front end to learn strongly typed languages and develop more rigorously. And with the addition of ts support for third-party packages, we don’t even need to open the document to the API much of the time.

As for TypeScript learning, a few months ago I was completely blind to this JavaScript superset. After two or three months of careful learning, I was able to understand some relatively complex types.

Learning TypeScript is different from learning a library or a framework.

An introduction to

In addition to the official documents, there are some good Chinese introduction tutorials. Introduction to TypeScript Handbook
TypeScript Deep Dive is a very high quality introduction to English. TypeScript Deep Dive
Tool generics are very common in everyday development and must be mastered. TS the use and implementation of some tools generics
The video course, also by Mr. Huang, is very helpful for unit testing, front-end handwriting framework, and the principles of web requests. Refactoring Axios from zero based on TypeScript

The advanced

These five articles explain some advanced uses of TS with the help of many examples. Please be sure to try and understand the concepts in the IDE again and again, and return to the documentation if you don’t understand them. There are five articles in the TypeScript series
One of the important things about TS progression, the conditional type, is that a lot of generics derive from it. conditional-types-in-typescript
And all the TS posts from the big guy’s blog above. mariusschulz.com

In actual combat

A parameter simplified actual combat, involves the advanced knowledge point is very much.
1. 🎉 Advanced types in TypeScript
2. 🎉Conditional Types
3. 🎉Distributive conditional types
4. 🎉Mapped types
5. The 🎉 function overloads TypeScript arguments to simplify actual practice
Achieve a simplified version of Vuex, the same knowledge combined full.
1. 🎉 Advanced types in TypeScript
2. 🎉 Uses generics in TypeScript for reverse typing. (Generics
3. 🎉Mapped types
4. 🎉Distributive Conditional Types
5. 🎉 Infer in TypeScript (an important use of Infer in the source Vue3) TS is a simplified Vuex version of intelligent type inference

Deliberately training

It’s almost a new language (in the genre world) and it takes a lot of effort to learn it well.

My advice for learning TypeScript is really just one key word: practice deliberately, typing, understanding, and thinking in vscode as you go through the basic concepts. After the basic concept to look for practical articles, such as the above advanced and practical part of the recommended several, continue to deliberately training, must pile up the amount of code, learning a new language is impossible to rely on the documentation to achieve success.

I’d build a repository of interesting TypeScript code I’d come across, type it in and understand it.

Ability to grade

In fact, TypeScript’s capabilities are bifurcated. For everyday writing, you can define interfaces that work with official built-in types like React.FC.

But what about building a wheel? If you wrote a library of your own, and the types were complex, would you be sure to derive it? Or in the case of Vue3, ref is a very complex nested type,

If we define const value = ref(ref(2)), Vue3 will unpack nested ref(ref(2))

So how does it make TS indicate that the type of value is number?

If you look at this piece of code in the source code, and you only have the basics, you’ll be confused. Vue3 follows yuyuxi’s example of TypeScript’s Ref type being implemented from zero

// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
  cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  array: T
  object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
  ? 'cRef'
  : T extends Array<any>
    ? 'array'
    : T extends Ref | Function | CollectionTypes | BaseTypes
      ? 'ref' // bail out on types that shouldn't be unwrapped
      : T extends object ? 'object' : 'ref']
Copy the code

Business developer

If you want to be business-like in the short term, it’s enough to understand TypeScript’s basic interface and type writing and the general use of generics (which can be understood as function passing arguments in the type system).

Framework developer

But in the long run, if you can write your own some type is the purpose of perfecting the library or framework, or do you play in the company front expert architects, wheels and so on character, often need to write some partial at the bottom of the library to your friends to use, so you have to learn more, so you can do it for you using the framework of user experience perfect type.

The interview questions

I don’t see a lot of typescript-related interview questions, but I think the Typescript-related interview questions in China are more difficult. There is a TS interview question that is both practical and difficult, which is simply unpacking.

// Unwrap the Promise in the parameter and return value
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
 ↓
asyncMethod<T, U>(input: T): Action<U>

// Unwrap the Action in the argumentSyncMethod <T, U>(Action: action <T>): Action<U> ↓ syncMethod<T, U>(action: T): action <U>Copy the code

After two or three months of intensive study of TS, I was able to solve this problem relatively easily. I believe this also shows that I did not go off course in my study. (I didn’t let go of the solution and respected the interview questions, which means I studied the use of mapping and infer.) Focus on the interview questions

The code quality

Code style.

Integrating Prettier + ESLint + Airbnb Style Guide including – Prettier -eslint-airbnb-style-guide-in vscode
Integrate ESLint with Prettier, TypeScript on projects

High quality architecture

How to reconstruct a past thousands Star source – BetterScroll, is made up of drops of bosses JiZhi brings, similarly, in addition to this article detailed introduction a qualified source project should be the code quality assurance, testing process, continuous integration process, also reflected the depth of some of his thinking, is well worth learning. How to refactor a Star open source project — BetterScroll

Git Commit information

When submitting Git information, the leader will beat you up if you do so.

How to Write Git Commit information

Git-commit Log specification (Angular specification)

Commitizen specifies the commit tool for the process. The canonical commit format will also allow the tool to generate friendly Changelog for you

Build tools

Webpack Basics and optimization webPack basics
Didi front-end engineer webPack in-depth source analysis series, very excellent. Overview of one of the WebPack series

Performance optimization

From Webpack to network to DOM operation, it will take you to do some actual performance optimization. I couldn’t stop reading this little book at the time. The style of The master is light and humorous. But it’s something you can really benefit from.
Google Developer performance optimization chapter, need not say more? Very authoritative. There’s more on the menu bar on the left, where you can choose to study on demand. user-centric-performance-metrics
Talk about the synthetic layer in detail, the synthetic layer this thing is far and close to us suddenly, maybe your one careless operation will cause the layer explosion, of course, need to pay close attention to it. At the very least, in case of performance bottlenecks, you can open chrome’s Layer panel and see how your page is layered. Detail on composite
Liu Bowen’s performance optimization guide, a very clear explanation of the page optimization of several important points of attention. Make your web pages silky

Community discussion

As a qualified front-end engineer, be sure to actively reach out to the community to keep abreast of the latest developments, such as following your favorite tech developers like Dan and Yuyuxi on Twitter.

In addition, many issues on Github are also a treasure trove of discussion, and I will cite a few simple examples from my recent Vue3 study.

Why doesn’t Vue3 take time slices?

Why don’t you add React time slices in Vue3? I also analyzed the differences between React and Vue3 in detail, and blew a wave of Vue3. Why remove time slicing from vue3?

The Vue3`composition-api`What’s so good about it?

Vue3 functional- API related RFC, especially big debate group of scholars, explained the design idea of Vue3 for everyone in simple terms and so on. Amendment proposal to Function-based Component API

Vue3`composition-api`First-hand documentation of

When domestic materials were not complete, I read the Vue – Comcomposition – API RFC document in English. I was amazed by the design ideas in the document and learned a lot of great ideas.

In short, for the warehouse you like, you can go to see whether the issue of it seems to be interested in the discussion, you will learn a lot of things. And you can keep up with the author’s thoughts, which is a very rare thing.

Some gains about hooks

After absorbing a wave of Vue3 comification-API design ideas and comparing the old and new models, this article is my insights on the new Vue3 model. Vue3 Comcomposition -Api + TypeScript + Exploration of new state management modes.

In Vue2, you can use the Plugin to start with comjunction-API and take a small piece of code from the actual project:

<template>
  <Books :books="booksAvaluable" :loading="loading" />
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api';
import Books from '@/components/Books.vue';
import { useAsync } from '@/hooks';
import { getBooks } from '@/hacks/fetch';
import { useBookListInject } from '@/context';
export default createComponent({
  name: 'books',
  setup() {
    const { books, setBooks, booksAvaluable } = useBookListInject();
    const loading = useAsync(async() = > {const requestBooks = await getBooks();
      setBooks(requestBooks);
    });
    return { booksAvaluable, loading };
  },
  components: {
    Books,
  },
});
</script>

<style>
.content {
  max-width: 700px;
  margin: auto;
}
</style>
Copy the code

This actual combat corresponding warehouse:

vue-bookshelf

Besides, it is also very similar to React Hook in many aspects, which is even beneficial to my use of React Hook, such as the idea of code organization.

When Hook development was first used, most people probably kept the old idea of luming state in the first chunk of code, computed in the second, and mutation in the third, which IS what I’ve been doing all along, if you don’t look at The design ideas that You’ve seen.

But why do Logical Concerns outperform Vue2 and React Class Component Option Types? After the detailed- Design chapter, you’ll know all about it, and it will be incorporated into your daily development.

In short, after reading this article, I decided to directly extract n custom hooks from a lump of code of the first screen component in the company, and the improvement of maintenance efficiency was like a rocket.

Of course, there must be more than these treasure issues in the community. I just listed a few, but these several broaden my technical vision a lot, and they are truly integrated into the actual business of the company, and they are of business value. I hope you can develop the habit of watching the issue and keeping up with the English community. The pure technical discussion atmosphere in Github issue is really comparable to few other communities in China.

function AppInner({ children }) {
  const [menus, setMenus] = useState({});

  // User information
  const user = useUser();

  // Topic ability
  useTheme();

  // Obtain permission
  useAuth({
    setMenus,
  });

  // Dynamic menus also require the ability to use menus
  useDynamicMenus({
    menus,
    setMenus,
  });

  return (
    <Context.Provider value={user}>
      <Layout routers={backgrounds}>{children}</Layout>
    </Context.Provider>
  );
}
Copy the code

As you can see, hooks have unique advantages in terms of code organization, and even value passing between modules is so natural, only functions pass parameters. In short, the community came up with something new, and it resolved some of the pain points. If we follow the boss’s lead, we’ll get meat.

The Tree Shaking Issue

Your Tree-shaking does not come up with the final answers and contribute them to the Chinese community. It will not be in any Chinese community in the first place. It is up to you to explore and discover.

Changes in learning methods

From the beginning of the intermediate front end to the advanced front end, there is a very important point, that is, in many cases, the information that the domestic community can find is not enough, and a lot of quality information is also from the foreign community second-hand, third-hand translation, translation quality can not be guaranteed.

This brings us to the first point of our progression, which is to start receiving information in English.

Many students here say, my English ability is not good, can’t understand. In fact, I want to say that my English ability is also very general, since last year I set a goal, is zoned with word translation plugin to start difficult reading English articles and materials, meet don’t understand the word is out to see two eyes (not trying to back), DiWuLiu time I met this word, barely remember what it means.

After half a year or so, I can feel my English ability is improving with the naked eye (I read more than 3 articles every week). I can read a complete passage without using the word translation plug-in.

Here are some of my notes from reading good English articles at the time,

Reading technical articles in English

After English reading slowly became a more natural thing, also did not deliberately to record, early can be used in this way to motivate themselves.

Recommend two English sites, there are a lot of high quality front-end articles.

dev.to

medium

Medium may require some scientific tools to view, but membership fees and author incentives make the articles very good. Login your Google account can become a member, the front page may not recommend some front-end related articles, you can search for keywords such as Vue, React, Webpack, any front-end technology stack you are interested in, it does not take long for your front page will appear the recommended content. Enjoy this high quality English community.

About practice

There are a lot of powerful people in the community who are very cynical about new, handwritten code, thinking that if it has any, it’s not TypeScript, and that if it doesn’t have unit tests, it doesn’t deserve to be thrown on Github. It’s not their fault, they’re just paranoid about open source software. But for beginners to learn, this kind of speech is easy to cause a blow to everyone, lead to dare not write TS, write things dare not to release. In fact, it is not necessary. Industrial Group published a good opinion on these views, which touched me deeply. From the beginning of this article, I slowly transformed the old project with TS and made progress slowly.

After Vue 3.0 exposes the code…

conclusion

This article is summarized from my learning experience of more than a year, and THERE are many things I will add to this article one after another.

I hope you can gain something as a beginner or intermediate front end engineer. It would be my greatest satisfaction if I could help you.

To be continued… Updates are ongoing.

❤️ Thank you all

1. If this article is helpful to you, give it a like. Your likes are my motivation.

2. Follow the public number “front-end from advanced to hospital” can add my friends, I pull you into the “front-end advanced exchange group”, we communicate and progress together.

You can also scan the code and add me as a friend