Background: New recruits (development & products), conducted front-end (partial full stack) training based on department situation

Title: Rookie Training Notes (WEB Front-end Direction)

Content: more general, mainly to introduce, to develop direction

primers

Simple front end?

This question, I think, can be answered by reference as follows:

The front end is not simple, but the learning feedback of the front end is very direct, so there are many people who learn or know a little about the front end, which lowers the overall evaluation.

And because the feedback is so direct, most people think they know a little bit about the front end, because it seems so easy to change the spacing, font and so on, leading to the conclusion that the front end technology is simple.

With VUE and React, it’s not hard to quickly implement front-end requirements in existing projects

What do you write it after? Demo of existing components and code for similar functions in the project; Just Try more~

In addition to development, the front end is needed?

In addition to front-end development skills, I think there are two important points (especially for application-oriented front-end) :

  • Experience Design Reference: No experience design front end is not a good front end
  • Product thinking reference: A product manager who can’t promote is a bad front end

The whole stack?

Currently working department, pure front-end without 😂, more inclined to the development of the full stack. So, the whole stack spread out a little extended introduction

Full stack is not about putting your own capabilities on top of it, it’s about giving it what you’re strong on and letting others have full stack capabilities = “provide infrastructure, components, tools

The first is good performance, the second is to save communication costs, and the third is to improve personal ability

The server-side students became more and more supportive of this, and later taobao’s middle and background businesses turned to this mode

Students on the server side also built many API platforms to provide the ability to customize APIS. Other departments do not need to find the server side to develop new interfaces, and only a small number of students on the server side are required to participate. Finally, we found that the full stack is not to rob other people’s things, but to empower their own things, output out. In business, it can’t always be a zero-sum game, but this empowering output can turn zero-sum into positive-sum.

Quote above: front-end thinking

Front-end framework and technology stack

Introduce the products of the company and the department (omitted)

Front-end frameworks & Related skills

  • angular(The framework used by the company in the early years, but I like Angular personally.)
  • vue
  • React + hooks

Relevant Skill points

  • Engineered Webpack & Micro front end
  • Story etc.

Component library

  • Ant Design (Internal Systems & Platforms)
  • Company-owned components

How to write good front-end business code

  • Reasonable layered
  • Reusable components
  • Data interaction
  • discipline

Think about requirements and business logic first, design a reasonable data structure, and layer your code so that you can write more maintainable code to some extent.

Web Front-end Technology Stack (Basic)

  • JavaScript ES6
  • Advanced CSS (less Sass)
  • Knowledge of HTML & HTML5 apis
  • React
  • Webpack

Common Technology stack for Web Development

  • Common Network Protocols
  • Principles of browsers
  • Modular specification
  • Data structures and algorithms
  • Familiar with Git and Shell
  • Familiar with Ngnix

For Web development technology stacks, see github.com/kamranahmed…

In fact, the Web front end also has the depth of specialized fields, such as visual drawing, pure front-end animation implementation, and so on, which will not be discussed in depth here

Speaking from front-end experience

Mention colleagues you need to contact at work:

  • product
  • Interactive/Visual
  • Research and development of the back-end
  • test

Project perception and personal growth perception (omitted here…)

New growth

At the beginning, the working mode of development is more similar to that of Google development 😁. It is suggested to browse the following for searching and solving problems:

  • Google
  • Github (find wheels only, Issue -> Issue)
  • Stack Overflow
  • MDN
  • Official documents, official websites, official forums…
  • W3school

Compare recommended learning, view the article platform

  • medium.com
  • The Denver nuggets
  • The public,
  • zhihu There are more and more software and more and more details

Platforms: There are many platforms for sharing technology, but we only need to focus on one or two.

My daily brush platform (fragmentation) : Nuggets, public account

In addition, new people need to pay attention to:

  1. Ask lots of questions, but pay attention to the art of asking
  2. You need to be self-taught, passionate about technology and follow up