“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

  • 📢 welcome to like: 👍 collect ⭐ message 📝 If there is any mistake please correct it, send roses, hand left fragrance!
  • 📢 This article was originally written by Webmote and originally published by C🙉
  • 📢 author’s motto: life lies in tossing about, when you do not toss about life, life will start tossing you, let us work together! 💪 💪 💪

Preface 🎏

As a team leader, you often need to help your team members solve various blocking problems. 🎎 🎎 🎎

I’ve been working on the back end, so my knowledge of the front end is not that rich (actually very crude).

In view of the present popular development mode are almost the separation of front and rear end, in order to form a good team, the front-end and back-end almost 1 configuration seems to be some not quite right, so slightly tilted back end, according to 80% configuration front-end, the proportion is appropriate, estimated that each of us has our own idea, the matching problem can leave a message about your team staff.

Our new product, the back end uses micro service, the front end uses micro front, feel is perfect match. Unexpectedly, tragedy pulls open prologue at this point…..

🎏 01. You don’t seem to know…

In order to build a team, there are multiple rounds of interviews, and selecting talent is never an easy job.

Chuai a uneasy heart, in preparation of the front end of the knowledge, began the job interview, encountered me this half bottle wobble the interviewer, the front end of the big guys are not very easy to beat the interviewer?

Talk about my interview style

My general steps are:

  • 🍄 Before you get started, talk to them about their experience, why they left, and their previous development team. Then, if appropriate, talk more about the technology.
  • 🍄 will generally ask the life cycle of vUE, vUE routing classification, parent-child component communication and object deep copy, and even let him write a recursive function, to the basic end.

When talking about deep copy, a lot of front end engineers will come up with a sentence: you don’t seem to ah, you don’t understand front end.

Oh, dear! The words were like a bolt from the blue, and the old husband's body shook!Copy the code

All my vUE, typescript, and Angular projects I was working on at the time were for nothing. Well, I have to confess, I don’t understand much.

It looks like I’ve finally found a real front end engineer, and you’re just what I want!

Come on, baby!

That’s how I got hung. 🔥 🔥 🔥

🎏 02. Nice looking rear 90 front end

The interview of a front 90, the chat is still happy, will also be more (⚡ the real reaction after the hanging ⚡), look at the project experience is pretty good, I hope he will do the front team leader.

After all, there is no need for me to spend too much time in unfamiliar areas as I am not familiar with front-end knowledge.

Let the competent people do things well. 🤔 🤔 🤔

I also hope to give him more salary, after all, it is not easy to find a competent person, only a stable team can continue to develop.

Perhaps the origin of the disaster lies in the lack of understanding, the lack of front-end knowledge, resulting in the fermentation of subsequent events.

The concept of micro front should be several years old, and I have talked with my former colleagues before, and they all think it is a good idea. Just then I saw an article introducing Ali QianKun engine, which was very detailed, so I forwarded it to this post-90s young man. And told him many times that we need a micro front-end architecture to build our project, using The mature engine of Ali, at least the direction will not be wrong.

I don’t know if I got this right:

The micro front end, in my understanding, is based on the current framework, which is just a variant of the older organizational form of the Iframe.

Using an iframe as a micro front end, if not obsolete, would be incredibly simple. The micro front-end engine is to use new technology to replace iframe, so it needs to do the child application loading, even dynamic loading, and need to solve the CSS, JS conflict, separated from its scope.

The task has been arranged, just wait patiently for the result, everything will be handed over to the “front team leader”! 😍 😍 😍

🎏 03. A dazzling DEMO

Team communication is always a problem, but the Japanese don’t see it that way, they have their own way.

A question, in order to be clearly laid out, needs to be carried out in five steps.

  1. To have someone who can do it 🕺
  2. Have a specific completion date ⏱️
  3. Have clear completion criteria 🚩
  4. After assigning the task, ask the employee to repeat 🗣️
  5. Do reporting requirements and check progress ✅

In the process, I did not follow the steps above, and I thought and he thought may not be aligned.

Of course, I simply tracked the progress of the task and looked at the final results, and I did not control the code inside.

A few days later, my dear front end leader of the post-90 generation (with 2 front end members under his charge) took out 3 demos, saying that they were all micro-front end based on Qiankun or single-SPA, both base and sub-applications, support vue, Angule, React and so on.

I feel like either one of them meets my needs, which makes me feel better. “You pick one”, we don’t need other technology stack anyway, just support vue.

Another front end engineer will work on the sub-application, which will be modified with the base.

The division of labor feels clear, and the goal of this iteration should be ok, right? Every morning meeting, there’s progress. I’ll leave it at that.

🏃🏃🏃 about 1-2 weeks later, when I went to know about it again, the leader of the front end said there were some problems in the communication between the base and the sub-applications. I reviewed the introductory document of Qiankun and posted it to the group.

I felt like I had figured out that using the API provided by the engine, I could pass the token, so I decided to talk to him face to face. Here is the dialogue:

I: we this communication uses that article introduction that I send ok, you see. He: HMM, this is very simple, use localstorage can. Me: No, the sub-applications may be deployed in different domains. How is that possible? He: so, that we adopt that API, I change again, change relatively big. Me: What you use is Qiankun several? He: someone else integrated, do not know. I: is not the version too low, now seems to be 2 points a few. He: This project doesn’t depend on which version is being used. Me: have a look in the bag, I look at the official document again. . After I read the document, I found that I only need to install the Qiankun package. He: I think this project is not an Qiankuan project. I’ll check out another demo……

At this time, another front end told me that he had changed 3 versions in 3 demo and logged in according to the group leader’s orders, and none of them were used as Qiankun…

Oh, my god! What’s going on?!

🎏 04. Leave

A single spark can start a prairie fire! 🔥 🔥 🔥

The previous mistake delayed our selection time, but it is still possible to correct the mistake and turn around quickly.

Things are coming! Hold on! Hold on! 🧺

I urgently inform the group leader of the front end to use the Qiankun bag as soon as possible to construct the project and build the base.

Just the company has come to A front, A veteran, here we call him old A, let him work with the front team leader.

I was busy looking at the official documentation myself, trying to help them with the dock container project, since the iteration task needed to be completed on time.

It took me a few hours to go through the general principles, and I felt that the integration should be very simple, there is no particularly complicated place, of course, as a technical manager, I have a certain anticipation of the pit.

When it was time to leave work, I communicated with them and said, hey, it’s not my original intention to do things before leaving work.

Old A said, no problem, especially simple, let me do it, tomorrow.

The leader of the front end said: I can’t make it, let me do the sub-application.

@@@ I just talked with him about the cause and effect, it should not be too heavy, just told him that he should use the Qiankun, not other engine, unless he is sure to do better. This time so, let old A to do gay seat, we do the sub-app related tasks, and give him A few tasks.

I didn’t expect to receive his wechat on my way home from work.

Manager, I would like to mention that I am leaving. I am in a bad state. I will find a job after a quiet period of time

Get used to

Number one was going to say

State is not good, afraid of delay progress

I tried to stay, after all, only encountered a small bumpy bai, it is nothing. The result he only said: ah, the state did not adjust over, go to Shenzhen my classmate that adjust for a period of time, improve the next technology.

Like a snowflake from the head across, I look at, rely on, no test on the front end of the group leader, so out. One month, leaving 7 DEMO projects.

Is this be, this leader in legend does not listen to me….

🎏 05. The captain is needed to put out the fire

In addition to facing the mess left by the front team leader, I also suffered the shock of building a team.

I suddenly realized that a person’s sudden departure was an extra blow to his or her superiors, but eventually I figured out that it wasn’t a big deal, just a summary of the lessons, no need to go over the top.

The next day was still a hectic one as I followed the progress of the plinth project with mixed news.

When I got off work, the front end old A told me that there were many problems that could not be solved, and it might not be used. He was off work and would look at it tomorrow.

Even though I was off duty, I really couldn’t let it go any further, so I decided to try it out myself and see where the bottom card was.

Overtime regardless of time, as if the leadership has this consciousness!

I cloned The official Demo1 of Qiankun and Demo2 of my post and then compared the tutorial to build a new vue pedestal project step by step.

Not on Baidu, Google.

  1. Build a new VUE project: spacecraft

vue create portal-spaceShip

  1. Increase the element – the UI

yarn install element-ui

  1. Increase qiankun

yarn add qiankun

  1. Write demo2’s TS program as js to the project
  2. Start the

✨ seems to be successful, I doubt that I did not enter a new state, so smooth?

✨ launch a demo1 subapp, my god, that fast? No problem.

❤️ seems to have confidence: add login window, add links, nothing difficult ah, login OK.

70% better, I thought to myself.

There seems to be a small problem that the loaded child application is not rendered into the specified container, but instead sits on top of the top container. I finally found the root of the problem.

5.1 The pit of Ali Universe 1

The child application load will be loaded at the top level because the child and the base application both use the same ID. Just change the ID in the base index.html to a different ID.

5.2 Pit 2 Dynamic registration micro services

Because of the lifecycle, engine registration needs to be started around the vue cycle, usually in main.js, and the registration API registerMicroApps is also called at this time. However, you cannot register for the configured service because you are not logged in yet. After a lot of queries about the issue, it was found that it already supports dynamically adding child applications. Just call registerMicroApps again.

You can add a new microservice by calling it at the appropriate place in app.vue.

5.3 Pit 3 subapplication returns to the main application

This should not be considered as the engine pit, should be enabled root directory caused, can not be used to pop routes to the upper layer, only need to use.

      //window.location.href = "/";
      window.history.pushState(null,'','/login');
Copy the code

5.4 Core point sub-applications do not need the Qiankun package

The bottom line is that sub-applications don’t need to look at the Qiankun framework, they don’t need to reference the package, they just need to implement the standard export interface.

It’s all right. It’s not that hard.

🎏 06. Kill skill: something not to come

Of course, working overtime in the evening did not finish all, a few pits are also solved the next day after working overtime.

Because old A did not come the next day, ask rise, say to ask for leave, ah, this false batch or not batch…

In fact, since it has begun to do, then make the wind and water, of course, do not need to care about these details.

“No big deal.” I can only comfort myself.

Job survival skills: If you can’t handle an emergency at hand, take time off and let your supervisor see you ✨✨✨.

It seems that there is a need to strengthen the front-end knowledge

It seems that my ability to lead a team needs to be improved

🎏 07. Conclusion

I had a detailed talk with my boss about this, and the main points are as follows.

Of course, his views and suggestions are worth reflecting on. In fact, they also hit my enthusiasm a bit, because I did not get his support.

  • The problem of identifying people, not clear, let people take the responsibility
  • Delegating issues, inspection and task assignment are not clear
  • Rank difference, heart is too far away, hard to hear the truth
  • Communication takes too long. Everyone needs to communicate with me
  • Background frame inherent problems, such and such slot point
  • Eq problem, eq is not high 🤕🤕🤕
  • You need to think about rotating leaders, setting up middlemen, to take on tasks

🤕🤕🤕 glass heart I also received 10,000 points of harm, but I need to get through, see the friend hope can help me analysis analysis!

Thank you. Thank you all.

This is also a rare experience, recorded, later is also a string of special footprints!

Young don’t know front end fragrance, 🕺🕺🕺 mistake the back end as a treasure!

Routine summary, rational view!

Knot is what, knot is I want you to like but can not get the loneliness. 😳 😳 😳

👓 all see this, still care to point a like?

👓 all points like, still care about a collection?

Do you care about a comment when you have collected 👓?

There are a series of front-end articles, guest officer, you do not see?

👉 front-end project, see me here management global background initialization data, ask you sayin?

👉Vue routes to a common component and dynamically loads the component based on whether files exist in the path

👉 Free front End Engineers – one of a series of tutorials to develop your own custom lists and custom forms

👉 Free front End Engineers – the second in a series of hands-on interfaces to develop your own custom lists and custom forms

👉 Free the front End Engineer – hand in hand guide you to develop your own custom lists and custom forms in the three tables series