Front-end early chat conference, a new starting point for front-end growth, jointly held with the Nuggets. Add Scott wechat Codingdreamer into the conference surrounding technology group, front-end page building special, 2021-2-27, live online.

The live on page visual/automation/intelligent structures, new style, the lecturer from ali, tencent, bytes, with help, ants, bytes, etc., subject involves the foreground/background/PC/H5 / rich media (such as video, posters, questionnaire), registration stamp: www.huodongxing.com/go/tl21


The text is as follows

This is the 14th and 96th session of the front End Early Talk about Growth and Promotion. It’s shared by Gizee-Janlay, who recently published a technical book at the Nuggets called implementing a CI/CD Process from 0 to 1. Introduces how to implement a set of CI/CD process step by step based on containerization technology to facilitate r&d and efficiency improvement.

One, foreword

Welcome to the front end early talk 14. I am Wang Shengsong, the keynote speaker of the first session. Now I am working in Gitee privatization R&D team as a front end development engineer.

Two, self-introduction

I first do a simple self-introduction, I believe that many students have already known me, I am a 00 front-end.

In 2001,

I was born in Jinan, Shandong province in September 2001. I became interested in computers when I was young. At first, I learned to install software by myself, and then I gradually repaired equipment and installed systems.

In 2016,

When I was in junior high school, I was very interested in the beautiful Android mobile phone system, so I studied Android ROM transplantation. I first came into contact with open source and Github because of my exposure to open source systems. At that time, I was very interested in this “treasure platform”. At the same time, FOR my own research on porting and installation, I also learned how to install and use LInux.

In 2017,

Later, WITH the support of my parents, I left my hometown and went to Beijing to train Java development for more than one year, during which I really learned how to write code. Later, I decided to switch to front-end development because I was more interested in user interface.

In 2018,

I came into contact with vue.js by chance, and then I learned about Webpack. Therefore, I learned how to use these two front-end tools. In about 3 months, that is, in May of 2018, I entered Open Source China through social recruitment and formally became a front-end development engineer.

In 2019,

When I first joined the company, I did an open source crowdsourcing platform, a website where programmers took orders to make money. In April of nineteen nineteen, the company adjusted its strategy and was joined in the Gitee privatization team to do front-end research and development, and became one of the initial members of the Beijing team. I have been writing front-end until now. The above is my personal introduction.

Survival first, development later

When I first stepped into the front end, I first learned and consolidated things like Vue, Vuex and VueRouter, which was a basis for writing requirements. After learning these things, I developed requirements independently. Because of my special background and various aspects, I first needed to “stand firm and survive” in the team. At the same time, I got to know the company’s overall project architecture and release process, such as construction tools, communication and collaboration tools, project management platform, etc.

One year after joining the company, due to the adjustment of business direction, I also adjusted my personal development direction. Meanwhile, I learned the knowledge related to Docker DevOps, practiced container deployment in the company, and developed a CI/CD suite by my team.

For a long time, there were only two people at the front of the Beijing team, and I was also in a leading position. Therefore, I felt the situation was dangerous, so I signed up for the advanced training of the front end. After two years of employment, I began to feed back the previous knowledge to the business and improve the engineering efficiency of myself and the team.

So just to summarize what I just showed you.

It can be summarized as three stages:

  • Just entering the industry: survive first and integrate into the team, for me, is “to survive the trial period”, which is the most basic goal of survival, this period is mainly the process of running in with the team.
  • One year in the job: find my shortcomings and shortcomings in knowledge, and then quickly make up these shortcomings, and then find out what I am familiar with and interested in, and highlight my advantages. I can stand out in the team. Now we have many FE students, so we need to think about how to highlight our advantages in the team.
  • First two years: make the advantages more distinct, whether in the team or your front circle, and then give your advantages back to the business.

So the summary is: survive first, develop later. We survive first, and then we figure out how to do it better.

Iv. Team business introduction

CI/CD platform

This is the CI/CD platform that our team did at that time. On the left is the deployment function, which allows you to deploy containers, graphically orchestrate steps, and so on, including functions like pipeline status monitoring, email notifications, and permission control on the right.

Privatization scenario

Here are two real-life scenarios from the project:

Introduction (as PPT above), I thought of how to use some “mutable things” to control these “immutable things”. For example, using variables to control constants, like cookies, localStorage, things like that to control baseURL, that’s one of the ideas of using mutable to control immutable. Of course, this idea is also borrowed from the idea of changing the Webpack Public Path at runtime.

So I first made a version to realize the function and promote it, so I added Banner to optimize the experience.

So the second scenario is about the privatization scenario, how to quickly locate the front-end version of the customer deployment?

In a private scenario, our code and applications are deployed on the client side. What customers do, in fact, we do not know, some of them even deployed on the Intranet, introduced (PPT above).

So can we write a Webpack plug-in output packaging information to solve this problem? So I thought to output some information about the packaging environment (time, platform, packer, packaging branch, last commit, Commit message, etc.) as JSON files and store them in dist directory after each packaging. Of course, I also checked a lot of materials and learned a lot during this process. It also open-source the tool.

Development thinking

According to the above two scenes to make a summary, in fact, everyone has a uncomfortable place, is not open mind. The first thing to do is to make sure that you have a solid knowledge base. Solid knowledge does not mean that you learn more, or even recite more, but that each knowledge has relevance, so that knowledge can be learned meaningfully and understood deeply, so that it can be used in the future.

Such as several knowledge acquisition channels (above). However, no matter how to learn, the biggest mistake is “dabbling” : for example, WHEN I learn 70%, or even just learn the surface, I think I have learned, learned, and do not continue to learn and think. Maybe this part of the knowledge can only be used in the interview, or to ask the scene and pros and cons, it is a little insufficient, so after learning a piece of knowledge, be sure to think about its application scenarios, and how the relevance of other knowledge is.

The second is to learn nesting dolls. After learning a technology, think about how it will be used in the business, how much it will improve the business, and whether it will help. If you can think about that, then knowledge already has a place in your mind, rather than being suspended in mid-air.

I’ll talk about that in the next slide.

Focus on persistence: don’t stop learning halfway and continue learning other knowledge, which is easy to make knowledge fault, and it is difficult to produce relevance. Usually, new knowledge is difficult at the beginning, followed by some support around the previous core knowledge, so we must insist on learning a series of knowledge.

Refuse to pursue what’s beyond our reach: a lot of new knowledge and concepts are improved and upgraded based on previous knowledge. If you just learn new knowledge without learning prior knowledge, it will be more difficult to get started and confusing to learn.

Example: AST abstract syntax tree. Most people talk about the core building principles of Webpack, but it’s not just for interview exams, it’s useful for many real-world scenarios.

So when we learn something, we have to think about what its core function is, and then think about where we can use that knowledge to achieve it.

Another important concept is to develop the business scenario. The first is to break the job boundary. Now the division of labor of Internet jobs has been very clear, and everyone is doing his/her own job. However, in our agile training, the coach said that the technical personnel should become half product manager, understand your product, communicate with your customers and colleagues, and collect feedback and opinions. What pain points does his post/user feel uncomfortable about right now? Ask for information. Only in this can you understand what you can do. If you can solve it, it will be an extra big help to the business, your performance and grade will look better, give yourself more empathy and find more things to do.

However, do not think it is not worth doing. When I just merged into Gitee, I also did some work related to server operation and maintenance and server environment building, and later produced documents, which are of great help to my later knowledge learning and a clearer understanding of the overall picture of the product.

Active feedback is also very important, especially in some small factory or small company, and to technologies such as the probability of almost is small, besides wait to also don’t have time to give you feedback, the best way is to actively seek feedback, such as the output of your solution to let everyone review, take the initiative to find open source project learning to discuss, so you can get a big promotion and experience.

Be constantly sensitive to new technology: Learning new technology is not about keeping up with The Times, but about solving business problems. For example, Docker container makes the original deployment more clear, lightweight, traceable and sensitive, and it is not necessary to learn all technologies. It is still necessary to learn knowledge suitable for business development direction and personal future planning. If your business does not use it, it is ok to simply understand its functions and uses.

5. Book recommendation

To recommend a book: “code farmers turn over”. For me personally, there is a lot to learn about basic computer knowledge, but this part of knowledge is quite obscure. This book vividly explains those basic computer knowledge points with some cartoons, stories and other ways.

Six, recruitment

This is an introduction to our team: the Gitee Privatization team. We are also recruiting a lot of friends, if you are interested, please send your resume to us by email ([email protected]).

Seven, QA

Q: How did you learn data structure and algorithm as well as computer related knowledge as a junior high school dropout? A: Actually, I learned the algorithm first, and then other professional knowledge. It is not as difficult as the legend. I will find some related video materials, text related materials for basic data structure learning, algorithm topics mainly rely on brush questions, do more questions to understand clearly, there is no good way, do more will be “read a hundred times, the meaning of itself”, other professional knowledge, I mainly take Linux to start. For example, to learn some classic Linux kernel source information, to understand some of the technical details of the Linux kernel, combined with actual combat to learn will be more clear and profound.

Q: How to develop a good study habit and form self-discipline? A: Before my personal self-discipline is not strong, but because of interest in blessing, so can insist on to do some things, sometimes also will learn tired, want to brush the back of the phone and have some fun, such as learning mainly all things are difficult before they are easy, I will use my mobile phone on some “self-discipline mode” to force limit entertainment, split into daily goals, making them seem not very hard, Be confident.

Q: What are your technical characteristics? A: PERSONALLY, I think engineering is my outstanding advantage in front-end development at the same stage.

Q: How do you divide your time between study and work? A: I always advocate “precision learning”. Before learning, I will spend time to find good materials and tools before starting. Therefore, I will spend less time on learning. It’s about 2-3 hours a day on average, but not always.

Eight, epilogue

Finally, I would like to share an English saying with you. If you have a new idea, if you wait for the boss’s opinion, the boss may consider the time cost, business development and other aspects, time will be too late or cancelled, the best way is to explore and apply it by yourself, success will be successful, failure will not be what.

That’s all for today’s sharing. Thank you!