2022 Web front-end development process and learning route (detailed version)

foreword

The front-end focuses on human-computer interaction and user experience, and the back-end focuses on business logic and large-scale data processing. In theory, in user-oriented products, all problems (including product, design, back-end, and even invisible problems) will be exposed to the front-end, and only some problems (data problems, calculation problems, security problems, etc.) Being exposed at the back end means that the front end plays a vital role in carrying and connecting.

The update of front-end technology is changing with each passing day; the technology selection of front-end framework is in contention; the trend of visual aesthetics is constantly changing; the visualization effect is extremely cool; the user's operation system is gradually refined; The upgrades and adaptations of smart devices are endless. All of this has one requirement for the front-end field and front-end students: to toss, love to toss, and toss repeatedly.

1. Front-end development process

needs review

Generally, when doing requirements review, there are only interactive drafts in the PRD, and there are no visual drafts yet. It is necessary to output the visual draft after the review is over and a consensus is reached.

1. Demand analysis: Discuss demand points one by one, demand rationality, interactive review, logical sorting, and possible missing parts.

Tip: The process of logic sorting takes a lot of time and runs through the whole process of development.

2. Involved channels/environment:

Channels and environments are often blind spots in demand, and are also key factors affecting technology selection and development progress.

App: App native page, App embedded H5 , App embedded applet.
Small programs: technology stack perspective: native pages of small programs, H5 embedded in small programs , and small programs embedded in Apps.
Ordinary H5: Wechat H5, M station (that is, ordinary browser environment)
B-side: operation management platform, etc.

3. Feasibility analysis: whether there are technical difficulties in realization, and whether there are other dependent conditions.

Data source: which are the interface, which are configurable , and which are hard-coded by the front end; the configurable part is read by the front end, or read by the interface and then returned to the front end. Tip: Configurable flexibility correlates positively with risk.

Abnormal flow design: fault tolerance, disaster recovery, bottom-up, downgrade, fallback mechanism, risk controllable. prd generally only writes the logic of the normal flow, and the abnormal flow often requires the cooperation of R & D students to do a comprehensive consideration.

6. Demand changes: If the demand is not clear, the demand is changed, the demand is added, the demand is cut, the time is added, the time is changed, the manpower is added, etc., the risk needs to be predicted in advance.

visual review

1. Progress follow-up: Is the visual draft delivered in batches or at one time ? This is the first thing to consider.

According to historical experience, half of the delay in the progress of the front-end project depends on the progress of the visual draft; because of the development of a new page, 30% to 50% of the front-end work is doing page construction.

2. The file format of visual draft:

Sketch prototyping software: .sketch format. Generally used to draw visual drafts .
Figma prototyping software: .fig format.
Axure Prototyping Software :: .rp format. Axure is generally used to draw interactive drafts . If you are outputting a high-fidelity mockup, Sketch or Figma is recommended.
Photoshop software: .psd format. Specialized in image processing . Of course, some CP outsourcing personnel have single skills and like to use PS to output visual drafts.
Adobe Illustrator software (referred to as AI software): .ai format. Make vector graphics.
Adobe After Effects (AE) software: .aep format. Make an animation.

Remarks: Sketch is a prototyping software unique to the Mac platform, the most well-known and common. Figma is a popular full-platform prototyping software recently, and it has a tendency to replace Sketch.

[Key points] When delivering the visual draft, visual students are required to output a visual specification file " with dimensions ".

3. Check requirements: whether all design points in requirements and interaction design are covered.

4. Check the visual specification:

Whether the style and color match the overall style of the page and product.
Size specification: The width of the mockup on the mobile terminal is 750px.
Typography, alignment, consistency. It is recommended to read the book "Write a Design Book Everyone Reads" to understand the basic design principles.
Font: font size (usually above 12px, especially small above 10px), font weight (note that the bold attribute value is 700), and any special fonts . Pay special attention to copyright issues of fonts.

5. Which diagrams are for front-end construction, which diagrams are hard-coded image resources, and which diagrams are configurable; in configurable diagrams, each element needs to be disassembled, whether this element is merged into the background diagram, or cut out separately, Still read the data.

6. Image cut format: png (transparent format), jpg

The image size of the cut image should not be too large. It is recommended that the large image on the mobile terminal (such as the background image of the curtain pop-up window) not exceed 50kb, and the small image not exceed 20kb. Images can be compressed on TinyPNG – Compress WebP, PNG and JPEG images intelligently before uploading .

7. Difficulty and implementation methods of complex graphics and animations, and technical evaluation. For details, see "Technical Selection" to be discussed next.

Schedule evaluation

1. Scheduling generally includes the following elements:

Development time: visual construction time, interface document (interface protocol) delivery time, front-end and back-end joint debugging time, self-test time
Transfer experience time
turnaround time
Launch time (and, need to confirm the business launch time)

2. When evaluating the schedule, schedule according to the visual draft , not the interactive draft. This is the first thing to emphasize. For the development of a new page, 30% to 50% of the front-end work is done on page construction. If you only look at the interactive draft, it is impossible to evaluate the real development workload.

3. Front-end development work includes: outline design, visual construction, logic code, front-end and back-end joint debugging, self-test, transfer experience. Each item has to be disassembled and evaluated separately, and added together is the overall schedule.

4. When scheduling, other dependent factors should be considered: such as the delay of the visual draft, unclear requirements, interface progress, testing progress, and of course the most important thing is the online progress. For urgent projects, the development schedule is often reversed according to the launch time.

5. After entering the development stage, coordinate testing resources with the testing department and confirm the transfer time; for large-scale projects & key projects, it is necessary to notify the testing department in advance during the requirements review stage to reserve time.

6. If you are developing other projects in parallel, you need to reserve a buffer for yourself when scheduling. It is commonplace to develop two projects in parallel; however, when this project is being tested, it is often difficult to get away from doing other projects, because it will always be held back by the test children's shoes.

7. Development schedule: If there is a change in the development schedule, it is necessary to inform other relevant personnel immediately, especially to assess the risk of the test schedule. Test schedules are more difficult to change than development schedules.

Technology Selection

Technology selection is ever-changing, and a hundred schools of thought contend. Here you need to list the commonly used technology selections in your department, not the technology stacks on the market.

1. Page development framework:

(1) Multi-terminal page: (mini program native page, H5)

Taro framework (based on React technology stack)

Note 2: For some businesses, only H5 was done at the beginning, and later iterations required the native page of the applet. This should also be factored into the needs assessment.

(2) H5 page: Vue.js framework, React framework

(3) App side:

Android development language: Kotlin (new), Java (old)
iOS development languages: Swift (new), Objective-C (old)

(4) B-side development, UI framework:

React technology stack: Ant Design (Antd for short)
Vue technology stack: Element , Ant Design Vue
Simpler CSS Responsive Framework: Bootstrap

(5) Node.js back-end development framework:

Koa: A new generation Node.js framework.
Egg.js : Egg is an enterprise-level web development framework further encapsulated on the basis of Koa.
Express: An older Node.js framework.

2. CSS preprocessor: SASS

3. Difficulty and implementation methods of complex graphics and animations, technical evaluation:

gif animation: Try not to use it. Because the file is too large and the effect is blurry.
CSS3 Animations: Suitable for simple, regular animations. Examples: Swinging Fish , Jingxi Factory
Canvas : Canvas animations and applet sharing pictures are drawn with Canvas
3D animation: WebGL ( Three.js is a comprehensive library of WebGL) common cases: the solar system
Game Framework: Cocos Engine

outline design

Demand background and resources
risk assessment
Technology Selection
project structure design
Main function point logic design
Scalable and reusable design
Dependency interface
Workload breakdown and scheduling

Development link

1. Code design:

(1) Directory structure design, code style

(2) Design of public components and tools: ensure the principles of reusability , high cohesion and low coupling. Which ones can reuse the public components of the Jingxi platform, and which ones need to write components and utils separately.

(3) Pop-up window design: If a page has multiple pop-up windows, it is recommended to design an abstract pop-up window base class first. When designing pop-up windows, you need to consider :

Design principles: easy to expand, strong reusability
avoid duplication of code
Avoid multiple popups at the same time
The position of the pop-up window must be strictly centered (the position of the pop-up window cannot be misaligned due to the size of the screen changing)
Dealing with scrolling penetrating ailments.

2. Visual construction:

(1) When the backend develops the interface, the frontend does the visual construction; after the visual construction is completed, the frontend adjusts the interface through mock data and writes the frontend logic according to the definition of the interface document; tuning stage.

(2) It is recommended that front-end children's shoes learn to cut pictures by themselves, which is more controllable and can reduce communication costs. Just learn the basic PS and Sketch operations, and be a qualified front-end figure cutter.

(3) For regular styles and animations, it is recommended to use codes instead of pictures. Pictures will reduce the page opening performance, and the display effect on large screens is relatively blurred.

(4) Dimensional requirements for cutouts: 100% width shall be subject to 750px.

(5) Pixel-level visual draft : It is recommended to use Snipaste screenshot software, press F1 to screenshot, F2 to texture, then adjust the transparency of the texture to 50%, and compare the texture with the front page at the pixel level.

3. Business logic implementation:

(1) It is recommended to use a mind map first , sort out the business logic, and then write the code by hand. Mind maps are helpful for clarifying logic, reviewing after the event, and explaining to others efficiently at a glance. What matters is the idea, not which tool is cooler to use.

(2) When calling the interface, it is necessary to clarify the front-end's own security boundary: Assuming that the interface field is abnormal, the front-end needs to have its own downgrading measures, and cannot completely rely on and trust the field, resulting in a direct white screen, abnormal interaction, or even hang up on the page .

(3) In addition to completing the business logic required by the product, the design and disaster recovery of abnormal flows must also be considered at all times.

(4) When many front-end children's shoes are making requirements, they have a habit of not liking to look at prd carefully, and only develop against interactive drafts and visual drafts. Although this saves trouble, there are three procedures that cannot be missed:

Before development, you must go through the prd details with the product children's shoes again;
During the development process, communicate and confirm repeatedly with the product children's shoes at any time;
When the development reaches 80%, compare the prd by yourself and read it verbatim to see if there are any omissions.

4. Non-functional requirements. After the business code is written, there are still many details that need to be polished. for example:

Sharing Scenarios Through Different Channels
ppms configuration check: The operation configuration side needs to be verified; it is for product operation, and the configuration should be as humanized as possible.
Add buried points: exposure report, click report, breathing report
Monitoring report, test report, badjs report
Duplicated code streamlined
Remove redundant codes such as console.log and debugger
Static resource compression such as pictures and fonts
Common performance optimization: skeleton screen (on demand), image lazy loading, image preloading, anti-shake throttling, long list scrolling to dynamic loading in the visible area
Perfect user experience: return positioning, scrolling penetration
screen adaptation
Small program code slimming
Disaster recovery drill

5. Code submission:

First git pull, then git push, to reduce code conflicts.
Commit granularity should be as fine as possible
Before committing, be sure to diff the code and confirm the changes of each line to avoid submitting unnecessary changes.
Common formats of Commit Message: feat, fix, docs, merge
If you encounter a conflict when merging code, be sure to resolve the conflict before submitting the code. If the conflict involves other people's code, you must find the corresponding classmates to solve it together.

6. Self-test:

Compared with prd, check for leaks and fill in vacancies.
Experience the page on a real device, not an emulator.
Write some test cases to speed up the progress of subsequent tests. The mind map sorted out earlier is actually the best material for testing.

product experience

1. Experience it on a real machine, not on an emulator. It is best to compare the experience of both iOS and Android.

2. During the experience, record and sort out various todolists:

Requirements to be confirmed list: Some small, risk-controllable demand points can be put forward to the product children's shoes in the physical examination stage.
Development unfinished list: What unfinished parts need to be clearly explained with the product children's shoes.
known bug list
Experience problem list: While experiencing, record the problems of product feedback, and synchronize them to test children's shoes later.
Dependency list: interface, visual cutout, real test environment, etc.

code review / code review

Code review can be done during testing.

review order:

business core logic
Coding Standards
Key positions and places that are easy to step on pits need to be annotated in detail
System guarantee (monitoring, disaster recovery and downgrade)
System Security and Risk
user experience

visual walkthrough

Visual walkthroughs can be performed during testing.

Visual children's shoes all have pixel eyes, even if there is a difference of one or two pixels, they can see it. Therefore, it is recommended that the front-end children's shoes strengthen self-test, and strive to restore the visual draft at the pixel level .

It is recommended to use Snipaste screenshot software for front-end children's shoes , press F1 to take a screenshot, F2 to map, then adjust the transparency of the texture to 50%, and compare the texture with the front-end page at the pixel level.

test session

1. It is recommended to strengthen the quality of self-test. After entering the testing stage, the children's shoes will be tested for a round of smoke testing. If the quality is not up to standard, they will be sent back, which is very embarrassing.

2. Organize the main process checkList required for self-test, test, and release, which can be used in each iteration.

The basic elements of a referral email include, but are not limited to:

prd link, mockup link
page link
project related personnel
Data configuration system
host agent
interface documentation
Brief design, front-end development finishing (if any)
test cases (if any)
Core business logic combing (if any)
List of experience problems
Test Focus Recommendations
Risk assessment

3. To test the bug list raised by children's shoes, the development students need to complete it within XX hours, otherwise they will be urged by QA.

4. It is necessary to control the number of bug tickets, otherwise it will be held accountable and resumed. For similar problems, it is recommended to merge the test children's shoes into the same bug list.

5. The test management system is a platform for everyone to deal with the bug process. It is not for testing children's shoes to record personal problems casually. Therefore, it is necessary to remind the test children's shoes, make it clear that the problem is a bug, and then bill; if it is not a bug, either do not mention it, or reject it after communication.

Release plan

Release order: Generally, the backend is released first, and then the frontend is released
Whether the dependencies are ready: configured data, configuration items, etc.
Will it affect online business and online data?
The local environment, dev environment, and gamma environment must all be verified.
fallback mechanism
Publish checkList

online confirmation

After the release is complete, you need to output the online confirmation email
Observe page experience and page performance
Observe monitoring data and business call volume
Summary review

2. Front-end engineering

Git version management

1. The git branch specification of the front-end code warehouse:

2. For the format of the Commit Message, only the following 10 logos are allowed, the most common ones are feat and fix:

feat: new features
fix: fix bugs
docs: Documentation
style: format changes, does not affect the operation of the code
refactor: refactoring (neither a new feature nor a code change to modify a bug)
test: increase test
chore: changes to the build process or auxiliary tools
up: This category can be used when it does not belong to the above categories
merge: used for merge branch, when a handwritten commit message is required
revert: used to undo the previous commit

3. Business branch, naming convention: (it is recommended to add the date)

Feature branch: feature_xxx_YYMMDD
Emergency bug fix branch: hotfix_xxx_YYMMDD
Applet release branch (automatically generated): release_YYMMDD

code specification

Code formatting: Prettier
Code formatting check: ESLint

CSS preprocessor

SASS (used more)
Less
PostCSS

package management

Package management tools: npm (most common), yarn
cnpm, nvm, nrm common commands

compile build

webpack (most common)
Quickly
Gulp
Babel: Convert ES6 syntax to ES5 syntax

Small program engineering

test related

Write test case code
unit test
automated test

3. Front-end core knowledge

Front-end entry core knowledge points

browser

Web Standards: Structural Standards (HTML), Presentation Standards (CSS), Behavioral Standards (JS)
The browser is divided into two parts: rendering engine (ie: browser kernel), JS engine
How browsers work: redrawing and reflowing, the V8 engine
App's WebView container, which is equivalent to a browser, can embed H5 web pages

HTML5

Semantic tags: <header>, <article> , <footer>etc.
Multimedia tab: <audio>,<video>
Stronger local storage capability and device compatibility: indexDB, HTML5 APP cookie
3D, graphics and special effects: SVG, Canvas, WebGL
More efficient real-time connections: WebSocket, Server-Sent Events
Accessibility experience

CSS、CSS3

CSS Box Model, BFC
Floating, positioning (absolute positioning and relative positioning)
flex layout
Holy Grail Layout, Double Flying Wing Layout
Selectors: descendant selectors, intersection selectors, union selectors, pseudo-class selectors
2D transformation: mobile translation, rotation rotate, zoom scale
3D conversion: perspective perspective, 3D mobile translate3d, 3D rotation rotate3d, 3D rendering transform-style
CSS3 animation: animation
CSS hack
How to achieve 1px pixel on Retina screen

JavaScript basics

ES6 syntax: strict mode, arrow function, Promise, Symbol data type, Set and Map data structure
ES6 to ES5
JS data type conversion, implicit type conversion
Built-in objects and their methods
Various methods of arrays: map, filter, every, reduce, etc.
Event mechanism, prototype inheritance, immediate execution function
DOM operation, diff algorithm of virtual DOM
BOM browser operation
Event bubbling mechanism: capture phase, target phase, bubbling phase.
Asynchronous programming: Ajax, Promise, async await
SessionStorage和LocalStorage、Cookie
Iterator Iterator and Generator Generator
Web Socket
asynchronous programming
single thread
Canvas image drawing
svg animation

JS Advanced

JS Three Mountains: Prototype and Prototype Chain, Scope and Closure, Asynchronous and Single-threaded
Scope chains, classes, inheritance, prototypal inheritance
this pointing and binding rules
deep copy and shallow copy
Stabilization and throttling
Promise macro tasks and micro tasks
Browser Reflow and Repaint
Handwritten the entire logic and API of Promise: resolve, reject, then, catch, finally, allSettled, race any
higher order functions
event delegation
call、apply、bind
arguments pseudo-array
function currying
Modularity: CommonJS, AMD, CMD, ESModule
JS high-level grammar: Iterator iterator, Decorator generator
JS high-level syntax: Decorator, Proxy/Reflect, MutationObserver, Object Property Descriptor, Object.assign, Object.freeze, Object.seal
JS memory leak, JS garbage collection algorithm
TypeScript type checking
Vue.js, React.js source code analysis
State management for Vue.js and React.js : Vuex, Redux, Redux Toolkit, React Hooks, zustand
V8 engine source code

Node.js

Callback
time-driven mechanism
Modular
function
routing
global method
File system

web security

Cross-domain issues, same-origin policy, JSONP
CORS
XSS
CSRF

page format

Multi-terminal adaptive layout
SPA Single Page Application
PWA (Progressive Web App): the originator of small programs

4. Front-end framework

Each framework and tool has its own constraints, values, and best practices.

JS framework

Vue.js
React.js
Svelte (lightweight framework, relatively popular recently).
angular (phased out)

Compared:

Vue: declarative programming, data-driven thinking
React: Functional programming. If you want to change the data, you must call the api to change it.

In vue, almost everything you want is given to you; while react pursues more self-reliance.

CSS framework, component library (commonly used on the B side)

React technology stack: Ant Design (Antd for short)
Vue technology stack: Element , Ant Design Vue
Simple CSS Responsive Framework: Bootstrap
Tailwind CSS (more popular recently)
Vant Weapp : Lightweight mobile (including H5, applet) component library

Knowledge Base Framework

Vuepress (based on Vue.js, recommended)
Docusaurus (based on React.js, recommended)
GitBook
docsify: Make simple wiki documentation. Case: Gravedigger's Wiki

Supplement: Knowledge base framework, first recommend Vuepress and Docusaurus, powerful, mature and stable.

API Documentation Framework

TypeDoc: Generate HTML, markdown and other documents from TypeScript projects.
storybook : A knowledge base for building UI components. The styles and interactive effects of UI components can be previewed online.

Cross-end framework

Flutter (more popular recently): Flutter's Dart development language, which can be compiled into ARM 64, x86 and JavaScript code
ReactNative (gradually declining): App, Web
Taro: applets, H5

Desktop Application Development Framework

Electron framework. Case: VS Code software is developed with Electron.

Electron is very popular, used by a large number of companies, and has many successful software, such as VS Code, Facebook Messager, Twitch, Microsoft Teams, etc. Although Electron is easy to get started, the problem is obvious, that is, it is slow, consumes memory and is large . Electron consumes memory because the packaged Chromium consumes content. At the same time, a Hello World will cost 120M+ after compilation.

VS Code, chrome, and applet developer tools are essentially running chrome kernels. So you will find that these three software take up a lot of memory and are very stuck. I call it the " Three Musketeers of Front-End Headaches ".

Front-end visualization framework, chart library

ECharts: Baidu's open source chart library.
D3.js: visual js library.
Three.js : A 3D engine based on the native WebGL package. Solar System Case #
Cocos engine : Game animation development framework.
Egret Engine : H5 game engine, a complete set of H5 game solutions. The company where the Egret engine is located has gone bankrupt in early 2022 and it is not recommended to use it.

editor frame

wangEditor: very popular in China
TinyMCE: Very popular abroad
ueditor: Baidu's open source framework. Older and gradually declining.
Monaco Editor: Online version of VS Code

Node.js framework

Koa: A new generation Node.js framework.
Egg.js : Egg is an enterprise-level web development framework further encapsulated on the basis of Koa.
Express: An older Node.js framework.

server-side rendering framework

Next.js (based on React.js)
Nuxt.js (based on Vue.js)

Front-end testing framework

Mocha : JS testing framework.
Tiga : Automated testing SDK for cross-end (H5, applet) projects. Produced by Bump Labs.

5. Front-end performance optimization

performance analysis tool

Console waterfall chart Waterfall
The performance tool of the console: observe and analyze the runtime performance during the daily development process
LightHouse in the console: run points, output performance reports, analyze performance
WebPageTest Website: Evaluate Website Performance
Performance This API: Dynamically measure performance in real time

performance parameter

First screen time = white screen time + rendering time. Pre-parsing, pre-loading, pre-rendering, lazy loading, lazy execution.
FPS frame rate
Measure of Performance: The RAIL Model
Weak network environment, time-consuming comparison

Browser rendering optimization

Understand the rendering process, critical rendering path
Reduce reflows and repaints
What process did the user go through from entering the url to the completion of the page loading display

JavaScript optimization

JS resource optimization: on-demand loading, compilation and packaging, parsing and execution, asynchronous loading
V8 engine working principle, performance optimization principle
Stabilization and throttling
Infinite scrolling list: do node recycling
Skeleton screen skeleton: reduce layout movement
Time slicing: Break down a long-running task into smaller tasks and execute them in blocks to reduce the user's sense of lag
JS memory management

resource optimization

Compression and merging of resources: reduce the number of http requests; reduce the size of requested resources; use http cache
HTML optimization: reduce the use of iframe; avoid deep nesting of nodes; avoid using table layout
CSS optimization: reduce CSS blocking of page rendering, load CSS as soon as possible; use GPU to render CSS animations; use contain attribute to reduce layout and drawing time consumption
Image optimization: Use CSS3, SVG, IconFont instead of images; lazy loading of images; preloading of images; progressive images; responsive images; use base64 instead of images smaller than 8kb.
Font optimization: font flickering problem; when using special fonts, it is recommended to dynamically load web fonts
Asynchronous loading of third-party resources: uncontrollable third-party resources will affect the loading and display of the page

build optimization

tree shaking, code splitting (Code Splitting)
code minification obfuscation
When packaging, avoid repeated builds of unchanging libraries.

Network Transmission Optimization

Enable Gzip to compress resources
CDN transmission: All static resources are placed on the CDN, so that users can obtain the required content nearby and greatly reduce the distance of optical fiber transmission.
Avoid redirects: 301, 302 redirects slow down response
dns pre-analysis: Use dns-prefetch to resolve domain names in advance to improve resource loading speed. DNS pre-resolution can reduce loading time by about 5% when accessing image-based websites.
PWA，Service worker
SSR Server Rendering/Node Straight Out

6. Front-end tools and resources

front-end documentation

MDN Official Documentation: Web Development Technologies | MDN

Front-end community

GitHub
stackoverflow
nuggets

JS learning resources

Modern JavaScript Tutorial: Modern JavaScript Tutorial
Ruan Yifeng's JS Tutorial: JavaScript Tutorial - Webdao
Ruan Yifeng ES6 Tutorial: ES6 Getting Started Tutorial
TypeScript introductory tutorial: https://github.com/xcatliu/typescript-tutorial
Node.js Study Guide: Node.js Study Guide

JS code specification

1、Airbnb JavaScript Style Guide：

Original English version: https://github.com/airbnb/javascript
Chinese version: https://github.com/lin-123/javascript

2、clean code JavaScript：

Original English version: https://github.com/ryanmcdermott/clean-code-javascript
Chinese version 1: https://github.com/alivebao/clean-code-js
Chinese version 2: https://github.com/beginor/clean-code-javascript

Front-end brush questions

Front-end advanced way: front-end advanced way

Design Tools

Ink Knife : A prototyping tool. Website: Ink Knife - High-efficiency production-design-research collaboration platform
Blue Lake : An online collaboration platform for product documents and design drawings. URL: https://lanhuapp.com
PxCook (Pixel Chef) : An efficient and easy-to-use automatic annotation tool. Software download link: PxCook - efficient and easy-to-use automatic annotation tool, generate front-end code, design and development collaboration tool
Real-time design, draft finalization, master go

flowchart tool

ProcessOn: ProcessOn - Free online drawing, mind mapping, flow chart, real-time collaboration

outline notes

Mubu : https://mubu.com
Feishu-Mind Notes

markdown editor

typora
VS Code

code editor

VS Code
Sublime Text

7. Recommended front-end books

JS Classic Books

Red Book: "JavaScript Advanced Programming"
Little Yellow Book: "JavaScript You Don't Know" Volume 1 and Volume 2
Rhino Books: The Definitive Guide to JavaScript
Green Paper: "Javascript Language Essence and Programming Practice"

Advanced JS

"Advanced core knowledge of front-end development"
Twenty Years of JavaScript
"JavaScript Enlightenment"
"In-depth understanding of modern JavaScript"
"JavaScript Ninja Cheats"
"Writing Maintainable JavaScript"
"Amazing JavaScript Engineer: From Front-End to Full-End Advanced Advanced"
"Javascript Design Patterns and Development Practices"
"WebKit Technology Insider"
The JavaScript Apocalypse

CSS

"CSS World"
"CSS New World"
"CSS Demystified"
"Mastering CSS"

Vue.js

"Vue.js Design and Implementation"
"In-depth explanation of Vue.js"

Node.js

"In-depth explanation of Node.js"
"Node.js: A Dozen of C++ Extensions"

Data Structures and Algorithms

"Soul of Computing"
"Big Talk Data Structure"
"Learning JavaScript Data Structures and Algorithms"

rear end

"Domain Driven Design"
"Recommendation System Practice"
"Data Intensive Application System Design"
"The Road to Code Improvement: From Code Farmer to Craftsman"

Project Management and Awareness

"Mythical Man Moon"
"The Hacker and the Painter"
Joel Spolsky's books: "Software Caprice", "Joel Talks About Software", "Joel Talks about Excellent Software Development Methods"
"Phoenix Project"
"Continuous Delivery 2.0"
"Google Software Engineering"
Soft Skills: A Survival Guide Beyond Code
"Restart 3: Jumping Out of the Crazy Busy"
"Programmer's Thinking Training"
"Common Sense of Management"

product

"Revelation"
"Netting"
"Everyone is a Product Manager"
"User Experience Elements"
"Effective Needs Analysis"
The Beauty of Product Logic: Creating Complex Product Systems
"The Product View Behind WeChat"
"Yu Jun Product Methodology"
"Decisive Victory at the B-end - The Road to Product Manager Upgrade"
"Technology for Product Managers"
"Lean Data Analysis"
"Product Manager Interview Collection"
"Experience Engine: Panoramic Exploration of Game Design"

design

Four Volumes of "Design Psychology"
"User Experience Elements"
"Tianshichengjin"
"Design Book for Everyone"
"About Face 4: The Essence of Interaction Design"
"Design in Design"
"Butterfly from Cocoon"
"Simplicity First: Four Strategies for Interactive Design"
"Web Form Design: The Art of Turning Stone into Gold"
Touching Hearts: Designing Great iPhone Apps
Momentary Beauty: How Web Interface Design Makes Users Move
User Experience Metrics: Collection, Analysis, and Presentation

operate

Two volumes of "Operation Light"
"I am doing user growth on the front line"
"Growth Hacking: User and Revenue Growth Cheats for Startups"
"Flow Pool"
"Super Operations"

Business

"Steve Jobs Biography"
"Top of the Wave"
"win"
"Why Do You Do a Good Job on the Internet: From Technical Thinking to Business Logic"
"Computational Advertising"
"Detailed Discussion: Zuo Hui"
"Online: Data Changes the Nature of Business, Computing Reshapes the Future of the Economy"
"The Philosophy of Retailing"
"I see e-commerce"
"Company on a Surfboard"
"A Book to Understand Financial Reports"

thinking and cognition

"Learn to ask questions"
"Thinking, Fast and Slow"
"The Art of Clear Thinking"
"Take time as a friend"
"Intellectuals"
"The Road Less Traveled"
"Methods of Communication"
"Why We Sleep"

8. Front-end summary and cognition

R&D perspective, how to understand requirements

Click to view larger image .

As you can see from the flowchart above, what are the deliverables of the product manager? Is it prd? Obviously not.

The job of a product manager is very different from that of a designer or an engineer. Engineers are expected to deliver working code, designers are expected to deliver mockups. And for product managers, delivering a prd is not enough.

Product managers are responsible for following up the entire product cycle, including page effects and data performance after launch. Writing a requirements specification is a means of communicating and moving the project forward , but the specification itself has no intrinsic value . Many product managers don't use prd to communicate their ideas, they can use conversation, and they can draw ideas on the whiteboard. There are also some product managers who wrote specifications, but did not follow them to implement them.

What skills and qualities should a front-end engineer possess?

Technical foundation, technical vision, technical pursuit
In addition to developing business functions, it is also necessary to have a certain understanding and practice of development specifications, engineering, componentization, modularization, testing, and design patterns
Communication and expression skills, written expression skills, summary review habits
Global thinking, abstract thinking, continuous delivery awareness
Responsible for the first position of the project, with a sense of teamwork
Comprehensive trade-off: cost, efficiency, quality, risk, experience
Focus on product, design, business and other fields. Interdisciplinarity leads to more innovations.

Front-end cognition

1. Although most of our time is spent on business development, we still need to accumulate other aspects of precipitation and do more interesting and sustainable things, such as sharing summary, basic capacity building, R&D efficiency improvement, technical operation construction, Technology precipitation, etc.

2. Learn to ask questions. When we ask and solve problems in our daily life, we are often prone to fall into XY problems , resulting in unclear goals, unclear thinking, low communication efficiency, and even wasting a lot of resources, time and energy in a completely wrong direction. It is shown both in the person asking for help and in the person giving it.

When faced with a problem, understand the intention, fact, emotion, expectation of the sentence. Learning to ask questions and learn to answer them is a kind of wisdom. See the wisdom of asking questions .

3. Follow up the whole process, deliver continuously, and create business value.

4. The essence of the front end is to link business, design, and computing capabilities to provide users with a professional human-computer interaction experience.

5. Product capability and technical capability are: judging information, grasping key points, integrating limited resources, packaging one's own value into a product for delivery, and getting rewards.

6. There are many roles in the department system: operation, product, vision, development, testing, architect, leader, marketing, data analysis, operation and maintenance, etc. Some jobs are not a matter of "to do or not to do" but a matter of degree. On the premise of paying attention to the boundaries, take the initiative to take responsibility, think holistically, and have more empathy. This is a manifestation of the gradual increase in ability and responsibility.

7. Humility, respect and trust are the basis for coordinated operations and healthy cooperation.

8. What should be the relationship between people in the organization? Some people think it is the relationship between management and being managed, and some people think it is a cooperative relationship. And I think that the relationship within the organization is a dedication relationship . No organizational relationship exists without a foundation of dedication. There is a mutual contribution relationship between people in the organization, a mutual contribution relationship between departments, and a mutual contribution relationship between superiors and subordinates. In such a relationship of mutual dedication, the organization will truly exist and play its role. effect.

The basic phenomenon produced by the dedication relationship is: each person in the process is more concerned about what contribution he can make for the next process; each department is concerned about how to adjust itself to have a harmonious interface with other departments; Paying attention to how you cooperate can provide support to your superiors, and your superiors will ask you to solve problems and provide help for your subordinates.

Ability is important, but dedication is even more important.

9. Excellent people have several characteristics: sensitive, intolerable, and capable of manual optimization.

10. The front-end focuses on human-computer interaction and user experience, and the back-end focuses on business logic and large-scale data processing. In theory, in user-oriented products, all problems (including product, design, back-end, and even invisible problems) will be exposed to the front-end, and only some problems (data problems, calculation problems, security problems, etc.) Being exposed at the back end means that the front end plays a vital role in carrying and connecting .

11. The update of front-end technology is changing with each passing day; the technology selection of front-end framework emerges in an endless stream; the trend of visual aesthetics is constantly changing; the visualization effect is extremely cool; the user's operation system is gradually refined; On the water; smart device upgrades and adaptations are endless. All of this has one requirement for the front-end field and front-end students: to toss, love to toss, and toss repeatedly.