前言

前端侧重于人机交互和用户体验,后端集中于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题(包括产品、设计、后端,甚至隐形问题)都以形式表达,都会暴露在前端，只有一些问题(数据问题、计算问题、安全问题等)被暴露在后端,这意味着前端起着重要的负载和连接作用。

先进的技术不断变化;数以百计的前端帧正在竞争;视觉美学趋势不断变化;视觉效果惊人;用户操作系统日益复杂;老龄化、无障碍、青少年的愿望正在浮出水面;智能设备不断升级和适应。所有的这一切， front-end领域和 front-end学生的一个要求是折叠,爱折腾，反复折腾。

一、前端开发流程

需求评审
一般来说,在执行要求审查时, PRD只包含交互性草稿,没有视觉草稿。 在审查完成后和达成协议后,必须输出视觉文本。

1.需求分析:需要点逐一讨论,要求的合理性、相互作用评估、逻辑计算和可能缺失的部分。

提示:逻辑压缩的过程需要大量的时间,并经过开发的开始和结束。

2. 包括 渠道 / 环境 :

渠道和环境往往是需求的盲点,也是影响技术选择和发展进度的关键因素。

应用程序: 应用程序原页, 应用程序插入H5, 应用程序插入小程序.
Small Programs: Technical Stack View: Small Programs Original Pages, Small Programs Embedded H5, App Embedded Small Programs.
正常H5:WeChat H5,M(即正常浏览器环境)
B:操作管理平台等。
可行性分析: 是否存在技术困难, 是否存在其他依赖条件.

数据源:是调用接口,使它们可配置的,在前面写死的;可配置的部件,在前面读,或在接口读,然后返回前面。

异常流动设计:故障容忍、灾害容忍、能力、降级、逆转机制、风险控制。 一般来说,prd只写出正常流动的逻辑,而异常流动往往需要研究与开发学生的合作来考虑整体。

需求变化:如果需求不明确,改变需求,增加需求,减少需求,增加时间,改变时间,增加人力等,风险需要事先预测。

视觉评审

进度跟踪: 可视草稿是批发的,还是一次交付的?这是首先考虑的问题.

根据历史经验,前端项目进度的延迟率的一半取决于视觉脚本的进度;由于新页面的开发,前端有30到50%的页面建设工作。

2.视觉手稿的文件格式:

图形样本设计软件.图形格式.一般用于绘制视觉图形。
Figma原型设计软件:.fig格式。
轴向原型设计软件.rp格式。 轴向通常用于绘制交互式手稿。 如果输出是高真实性视觉,则建议使用Sketch或Figma。
Photoshop软件:.psd格式。 专门处理照片。 当然,一些CP外包者有一个单一技能,他们更喜欢使用PS来输出视觉脚本。
Adobe Illustrator Software(AI Software)A.I.格式。
Adobe After Effects(AE)软件.aep格式.动画的制作.
注意:Sketch是Mac平台的唯一原始设计软件,最著名的和最常见的。

在交付视觉草稿时,视觉学生需要输出具有“维度标记”的视觉标准文档。

检查要求: 它们是否涵盖需求和交互设计中的所有设计点.

4、检查视觉规范：

与页面和产品整体风格匹配的风格和颜色.
尺寸: 移动端的宽度为750px.
修改,同步,一致。 请阅读“写一本供大家阅读的设计书”并学习设计的基本原则。
字体:字体大小(通常为12px或以上,尤其是10px以下),字体重量(注明字体属性值为700),以及任何特殊字体。
5,哪些图是前端建模,哪些图是死图像资源,这些资源是可配置的;在可配置的图中,每个元素需要分解,这个元素被合并到背景图中,或单独切断,或读取数据。

6.图形格式:png(透明格式),jpg

切下图片的大小,不要太大。 移动端的大型图片(如窗帘的背景)不应超过50kb,而小图片不应超过20kb。

复杂图形和动画的实现难度和方法,技术评价。

排期评估

日程表通常包含下列元素:

开发时间:视觉建设时间、界面文档(界面协议)交付时间、端口调用时间、自评时间
转体验时间
转测时间
开业时间(并确认开业时间)
在评估期限时,你应该根据视觉设计,而不是交互设计来安排。 这是首先要强调的。 在开发新页面时,30%到50%的前端工作是在页面建设上完成的。

前端开发工作包括: 概览设计 、 视觉构造 、 逻辑代码 、 前端连接 、 自我评估 、 转动经验。

当计划时,考虑其他依赖性,例如视觉延迟、不确定的需求、接口、测试和,当然,最重要的是,上传。

5、即将进入开发阶段后，与测试部门协调测试资源，确认转测时间；大型项目&重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。

如果你有其他项目同时运行,你需要在没有时间的时候为自己预备一个缓冲器。 共同开发两个项目是家庭的任务;然而,在测试这个项目时,经常很难参与其他项目,因为它总是受到儿童鞋测试。

开发中断:如果开发中断发生变化,必须立即通知他人,特别是评估测试中断的风险。 测试中断比开发中断更难改变。

技术选型

数千种变异的技术选择,数百个论点。 这里你需要列出你部门的通用技术选择,而不是市场上的技术堆栈。

1、页面开发框架：

(1)多页:(小程序原页,H5)

Taro框架(基于React技术堆栈)
注2:有些企业最初只做H5,然后反复要求小程序创建原始页面。

(2)H5页:Vue.js框架,反应框架

（3）App端：

Android最终开发语言:Kotlin(新)Java(旧)
iOS端开发语言: Swift(新), Objective-C(旧)
(4)B端开发,UI框架:

React Technology Stack:Ant Design(又称Antd)
Vue技术堆栈:元素,蚂蚁设计
更简单的CSS响应框架:Boottrap
(5)Node.js后端开发框架:

Koa: Node.Js Framework的新一代。
Egg.js:Egg是一个基于 Kooa的企业级Web开发框架。
Express: 相对较老的节点.Js框架.
CSS预处理器:SASS

3. 复杂 图形 和 动画 的 实现 的 困难 和 方法 、 技术 评价 :

不要尽量使用它,因为文件太大,效果模糊。

CSS3动画:适合简单的、常规的动画。 例如: Shifting fish, Kyokyo factory

帆布: 帆布动画, 用帆布画分享图片的小程序

3D动画:WebGL(Three.js是WebGL的复合库) 常见案例:太阳系

游戏框架: Cocos引擎

概要设计

需求背景及资源
风险评估
技术选型
项目结构设计
主要功能点逻辑设计
可扩展可复用设计
依赖接口
工作量拆解和排期

开发环节

1、代码设计：

(1)目录结构设计和代码风格

(2)公共组件和工具类设计:确保可重用、高封装、低耦合的原则。 哪些公共组件可以在慶應平台上重用,并要求您单独编写组件和输出。

(3)爆窗设计:如果页面有多个爆窗,建议首先设计一个抽象的爆窗基础类。 当设计弹窗时,必须考虑:

设计原则:易扩展、可重复
避免重复代码
避免同时出现多个 pop-up
必须严格地包含窗口的位置(由于屏幕的大小无法更改,因此不能包含窗口的位置)
克服这种顽固态度.
2、视觉构建：

(1)前端执行视觉建构,后端开发接口;完成视觉建构后,前端通过模拟数据调用接口,根据接口文档的定义写出前端逻辑;完成前端开发后,前端和后端可以进入接口调用阶段。

(二)建议儿童鞋的前端学会自己裁剪,这可以提高控制程度,并降低通信成本。 学习基本的PS和绘图操作,成为一名合格的前端绘图师。

(3)对于规则风格和动画,建议使用代码而不是图像。 图像减少页面的开放性能,大屏幕显示效果更加模糊。

(4)切削尺寸要求:100%宽度设置为750px。

(5)视觉文本的像素级渲染:建议使用Snipaste切削软件,按F1切削,F2贴,然后调整贴的透明度为50%,并比较贴与前页像素级。

3、业务逻辑实现：

(一)建议先使用思想指南,压缩业务逻辑,然后手写代码。 思想指南有助于澄清逻辑,重新思考后的事情,并有效地向人们解释。

(2)在调用接口时,指定前端本身的安全边界:假设前端在遇到接口字段的例外时需要自己的降级措施,并且不能完全依赖和信任字段,导致页面直接空白、交互例外甚至悬挂。

(三)除满足产品要求的业务逻辑外,还要考虑异常流动的设计和容忍性。

很多前端鞋的习惯是在需要时不看prd,只是开发交互式和视觉的脚本。 这可采取三个步骤,虽然很简单:

在开发前,一定要重新检查产品儿童鞋的 PRD细节;
在开发过程中,始终与儿童鞋产品沟通,不断确认;
在开发到80%的时候,它只读了单词正确,并检查是否有缺口。
非功能要求。 商业代码写完后,仍有许多细节需要解决。

不同渠道的分享场景
ppms 配置检查: 要检查操作配置端; 对于产品操作, 配置应尽可能人道.
添加缓冲器:曝光报告,点击报告,呼吸报告
监测报告、测试报告、 badjs报告
重复代码精简
退出 Konsol.Extra代码如log, debugger
例如图像和字体等静态资源压缩
一般性能优化:框架屏幕(如需要),滑板加载,滑板预加载,防止震动噪声,长列表滚动到可视区域动态加载
用户体验改善:返回位置,通过滚动
屏幕适配
小程序代码瘦身
容灾演习
5、代码提交：

首先推移Git,然后推移Git来减少代码冲突。
尽可能细化粒子
在提交之前,请确保指定 diff 代码,并确认每行更改,以避免提交不必要的更改。
提交消息 常见格式:feat,fix,docs,merge
如果您在编译代码时遇到冲突,必须在提交代码之前解决冲突。 如果冲突部分涉及别人的代码,必须与相应的同学一起找到解决办法。
6、自测：

查找丢失或丢失。
体验在真实机器上的页面,而不是在模拟器上。
写一些测试例子来加快后续测试的进度。 以前编写的思考指南实际上是测试的最佳材料。

产品体验

实时体验,而不是在模拟器上。 最好比较iOS和Android之间的体验。

2. 在 经历 、 记录 和 组织 各种 所有 名单 时 :

需要确认的清单:在物理检查阶段可以提出一些小、风险控制的需求点,重点放在产品婴儿鞋上。
开发未完成列表: 哪些零件尚未完成, 哪些需要和产品鞋要澄清.
已知的错误列表
经验问题列表: 侧面经验, 侧面记录产品反馈问题, 然后同步测试儿童鞋.
依赖项列表: 接口 、 视觉图表 、 实际测试环境等.
代码检讨
代码检讨可以在测试期间进行。

review顺序：

业务核心逻辑
编码规范
关键位置,很容易进入洞穴,需要详细的评论
系统安全(监察、防灾)
系统安全和风险
用户体验
视觉走查
在测试期间可以进行视觉扫描。

儿童视觉鞋具有相同的眼睛,即使是两个像素的差异,他们也能看出来。 因此,建议加强儿童鞋的前端的自我评估,努力实现视觉手稿的像素恢复。

建议使用Snipaste Cut-Off软件,点击F1 Cut-Off,F2 Cut-Off,然后调整Cut-Off透明度到50%,使Cut-Off页面的像素尺寸匹配。

测试环节

建议加强自评的质量。 在进入测试阶段后,在测试鞋上进行一轮烟雾测试,如果质量不令人满意,则将返还,这很尴尬。

2. 组织 自我 评估 、 测试 和 出版 所需 的 主要 过程 的 清单, 以便 用于 每次 重复 。

检索邮件的基本要素包括但不限于:

prd链接,视觉脚本链接
页面链接
项目相关人员
数据配置系统
host 代理
接口文档
设计及前端开发概览(如有)
测试例(如有)
核心业务逻辑组成(如有)
体验问题列举
测试重点建议
风险点评估
3.测试儿童鞋的错误表,开发学生需要在20小时内完成处理,否则QA将被触发。

4.您需要控制错误的数量,否则您将被处罚重新显示。 对于同样的问题,建议测试儿童鞋集成到同样的错误表。

测试管理系统是所有人处理错误过程的平台,不允许儿童鞋的测试记录个人问题。 因此,应警告测试鞋,明确问题是错误,然后再提出;不是一个错误,或者不,或者在沟通后拒绝。

发布方案

释放的顺序:通常是前端、后端和前端
是否有依赖: 配置数据, 配置项目, 等等.
它会影响网上业务或网上数据吗?
本地环境、 dev环境和伽马环境都需要验证。
回退机制
发布检查列表

上线确认

发布完毕后,您需要发送确认消息
观察网页体验和网页性能
监控和监控数据和业务电话
总结复盘

二、前端工程化

Git 版本管理
1.前端代码仓库Git分支规范:

提交消息格式只允许使用下列10个标识符,最常见的是feat and fix:

feat: 新功能
修正:修正错误
docs: 文档
样式:不影响代码运行的格式变化
重构:重构(不是一个新功能,不是一个错误代码的更改)
测试:增加测试
作业:建筑工程或辅助工具的改变
up:如果该类别不属于上述类别,则可使用此类别
合并:用于合并分支,需要手写提交消息
返回:在取消之前提交
业务分支,名称说明(建议必须包括日期)

特点: feature_xx_YYMMDD
紧急错误修复科: hotfix_xx_YYMMDD
小程序发布部(自动生成):release_YYMMDD
代码规范
代码格式化:Prettier
代码格式检查:ESLint
CSS预处理器
SASS(多使用)
Less
PostCSS
包管理
包管理工具: npm(最常见的),yarn
通用命令cnpm,nvm,nrm
编译构建
webpack(最常见的)
Vite
Gulp
巴比伦:从ES6翻译成ES5
小程序工程化

小程序工程化探索
Kei Kyi小程序的最佳实践:如何写超级大小程序代码
测试相关
编写测试用例代码
单元测试
自动化测试

三、前端核心知识

前端入门核心知识点
浏览器
Web标准:结构标准(HTML),性能标准(CSS),行为标准(JS)
浏览器分为两个部分:渲染引擎(即浏览器内核)和JS引擎
浏览器的工作原理:重新绘制和重新排列,V8引擎
应用程序的WebView容器,相当于浏览器,可以嵌入H5网页
HTML5
语义化标签：

、

、

3D、图形和效果:SVG、Canvas、WebGL
更有效的实时连接:WebSocket,服务器发送事件
无障碍体验
CSS、CSS3
CSS Box Model, BFC
浮动定位(绝对定位和相对定位)
flex 布局
杯式布局,双翼布局
选择器:继承选择器,交叉选择器,组合选择器,伪类选择器
2D转换:移动转换,旋转旋转,缩小尺度
3D变换:视角,3D运动转换3d,3D转动转动3d,3D显示变换风格
CSS3动画
CSS hack
如何实现Retina屏幕的1px像素
JS基础
ES6语法:严格模式,箭头函数,承诺,符号数据类型,设置和映射数据结构

ES6转ES5

JS数据类型转换,隐藏类型转换

内置对象及其方法

分组的多种方法: 地图 、 滤波器 、 每个 、 减少等.

事件机制,原型继承,即时执行功能

DOM操作,虚拟DOM diff算法

BOM浏览器操作

事件泡沫机制: 捕捉阶段, 目标阶段, 泡沫阶段.

非同步编程: Ajax, Promise, async await

SessionStorage和LocalStorage,Cookie

迭代器和发电机发电机

Web Socket

异步编程

单线程

帆布图画

svg 动画

JS 高级
JS的三大山脉:原型和原型链、范围和封闭、反演和单线性
功能域链,类,继承,原型继承
其指导和约束性规则
深拷贝和浅拷贝
防抖和节流
承诺的宏观任务和微型任务
浏览器的重排和重绘
手写承诺整个逻辑和API:解决,拒绝,然后,捕获,最后,所有设置,任何比赛
高阶函数
事件委托
call、apply、bind
参数伪数组
函数柯里化
模块化:CommonJS,AMD,CMD,ESModule
高级语法:迭代器迭代器,装饰器生成器
JS 高级语法: 装饰器, 代理/反射, 变换Observer, 对象属性描述, 对象.指定对象.冻结, 对象.封锁
JS内存泄漏和JS垃圾回收算法
类型Script类型检查
Vue.js、React.js源代码分析
Vue.js, React.js状态管理: Vuex, Redux, Redux工具包, React Hooks,zustand
V8引擎源码
Node.js
回调函数
时间驱动机制
模块化
函数
路由
全局方法
文件系统
Web 安全
跨边界问题,同源战略,JSONP
CORS
XSS
CSRF
页面形式
多端自适应布局

SPA单页应用

Progressive Web App

四、前端框架

每个 框架 和 工具 都有 其 本身 的 限制 、 价值 和 最佳 做法 。

JS框架
Vue.js
React.js
斯维尔特(轻型框架,最近与火相比较)。
角
对比：

视图:宣言编程,数据驱动思维
React: Functional programming.If you want to change the data, you must callapi to change it.
在Vue中,几乎所有你想要的都是给你的,而你想要的更多是自我实现的。

CSS框架、组件库(B端通用)
React Technology Stack:Ant Design(又称Antd)
Vue技术堆栈:元素,蚂蚁设计
简单的CSS响应框架:Boottrap
TailwindCSS(最近比较的火焰)
Vant Weapp:轻型移动终端(包括H5、小程序)组件库
知识库框架
Vuepress(基于Vue.(js,建议)
Docusaurus(基于React.(js,建议)
GitBook
docsify:可以创建一个简单的维基文档。
补充: 知识库框架, 首先推荐Vuepress和Docusaurus, 功能强, 成熟稳定.

API 文档框架
TypeDoc: 为TypeScript项目生成html 、 markdown 和其它文档.
故事书:建立UI组件的知识库。在线预览UI组件风格和交互效果。
跨端框架
Flutter: Flutter的Dart开发语言,适用于ARM 64、x86和JavaScript

ReactNative:App,Web

塔罗:小程序,H5

桌面应用开发框架
例:VS代码软件由电子开发。
电子很受欢迎,也被大量公司使用，也有很多成功软件，例如, VS Code, Facebook Messager, Twitch, Microsoft Teams等。电子虽然易于使用,但问题也很明显，它是慢的,是存储的,是大的,电子会吃记忆,因为它会吃包装的铬的含量,同时,一个Hello World编译器需要120M+。

VS代码、克罗姆和小程序开发工具基本上运行了克罗姆内核,所以你会发现所有这些软件都有内存和卡的使用。

前端可视化框架和图形库
ECharts: Baidu的开源表库。
D3.js: js库的可视化。
Three.js:基于原始WebGL的三维引擎。 Solar System Case #
Cocos引擎: 游戏动画开发框架.
H5游戏引擎,一个完整的H5游戏解决方案。
编辑器框架
王编辑:在中国很受欢迎
TinyMCE:国外很热
ueditor: Baidu的开放源代码框架。
摩纳哥编辑器:VS代码在线版
Node.js框架
Koa: Node.Js Framework的新一代。
Egg.Js: Egg是一个基于Koa的企业级Web开发框架。
Express: 相对较老的节点.Js框架.
服务端渲染框架
Next.js(基于React.(js)

Nuxt.js(基于Vue.(js)

前端测试框架
Mocha: JS测试框架.
Tiga: 跨端(H5,小程序)项目自动化测试 SDK.Concave实验室展览.

五、前端性能优化

性能分析工具
控制面板瀑布瀑布

控制面板的性能工具:在日常开发过程中观察和分析性能

控制器灯塔:运行分数,输出性能报告,性能分析

WebPageTest网站:评估网站性能

性能此API:实时动态性能测量

性能参数
第一屏幕时间=白屏幕时间+渲染时间。 预分析,预装,预递,懒惰的装,懒惰的执行。
FPS帧率
性能测量标准: RAIL模型
弱网环境，耗时对比
浏览器渲染优化
理解渲染过程和关键渲染路径
减少重排和重绘
用户完成从输入url到页面加载的显示,以及通过哪些进程
JavaScript优化
JS资源优化:加载、编译、包装、分析、执行、非同步加载
V8发动机工作原理及性能优化原理
防抖和节流
无限制的滚动列表:做节点回收
框架屏幕骨架:减少布局运动
时间块:将具有较长的运行时间的任务分解为较小的任务,并将其执行成块,减少用户的充电。
JS内存管理
资源优化
资源压缩和合并:减少http请求的数量;减少请求资源的大小;使用http缓存
HTML优化:减少iframe的使用;避免节点深度嵌入;避免表布局
CSS优化:减少页面渲染中的CSS阻塞,最早加载CSS;使用GPU渲染CSS动画;使用包含属性,减少布局和绘图时间
图像优化:使用CSS3、SVG和IconFont来代替图像;图像懒惰的加载;图像预加载;增量图像;响应图像;使用 base64来代替8kb以下的图像。
字符优化:字符闪烁问题;在使用特殊字符时建议动态负载网络字符
第三方资源非同步加载:无法控制的第三方资源会影响页面的加载和显示
构建优化
代码分割
代码压缩混淆
在包装时, 避免重建一个不变的库.
网络传输优化
启用Gzip压缩资源
CDN传输:所有静态资源都放在CDN上,使用户能够密切访问所需的内容,大大减少纤维传输距离。
避免转向:301, 302转向降低响应速度
dns预分析:使用dns-prefetch预分析域名来提高资源的载入速度。 当访问基于图像的网站时,DNS预分析可以减少载入时间约5%。
PWA，Service worker
SSR服务结束/节点直接输出

六、前端工具和资源

前端文档
MDN官方文件: https://developer.mozilla.org/zh-CN/docs/Web
前端社区
GitHub
stackoverflow
掘金
JS 学习资源
现代JavaScript课程: https://zh.JavaScript.info/
JS课程: https://wangdoc.com/javascript/
电邮地址:https://ww.es6.org.ruanyifeng.com/
TypeScript介绍: https://github.com/xcatliu/typescript-tutorial
Node.js学习指南: https://blog.poetries.top/node-learning-notes/
JS 代码规范
1、Airbnb JavaScript Style Guide：

英文版本: https://github.Com/airbnb/javascript

中文版本: https://github.com/lin-123/javascript

2、clean code JavaScript：

英文版本: https://github.clean-code-javascript

中文版本1: https://github.clean-code-js

中文版本2: https://github.com/beginor/clean-code-javascript

前端刷题
前进方向: https://yuchengkai.cn/
CSS 学习资源
CSS灵感: https://github.CSS-Inspiration
不同的CSS实现: https://lhammer.You-need-to-know-css
css_tricks：https://github.com/QiShaoXuan/css_tricks
按照需要定制CSS动画效果: https://github.QiShaoXuan/css_tricks
字体相关资源
360字体版权查询: https://fonts.Safe.360.cn/
最完整的免费商业字体-效果预览: https://wordshub.github.io/free-font/index.html
常见的免费字体: http://zenozeng.github.Free Chinese Fonts
抓包工具
Whistle：https://wproxy.org/whistle/
兼容性查看工具
我可以使用: https://caniuse.com/
图片相关工具
图像压缩: https://tinypng.com/
图像压缩: https://docsmall.com/
生成代码剪辑: https://carbon.now.sh/
设计工具
墨刀:原型设计工具。网站:https://modao.cc/

Blue Lake: 产品文档和设计图案的在线协作平台.网站: https://lanhuapp.com

PxCook:高效、易于使用的自动标记工具。 下载软件的链接: https://ww.fancynode.com.cn/pxcook

即时设计 、 起草 、 master go

流程图工具
ProcessOn：https://www.processon.com/
大纲笔记
劇本: https://mubu.com

飞书-思维笔记

下标编辑器
typora
VS Code
代码编辑器
VS Code
Sublime Text

七、前端书籍推荐

JS经典书籍
红书:高级JavaScript编程
小黄书:你不知道JavaScript上,下
犀牛:JavaScript权威指南
绿皮书:JavaScript语言和编程实践
JS进阶
核心知识的先进发展
」 《20世紀JavaScript》。
JavaScript启示。
了解现代JavaScript。
JavaScript Ninja Secrets。
支持JavaScript的编译
优秀的JavaScript工程师:从前端到全端高级
Javascript设计模型与开发实践
WebKit Technology。
JavaScript启示
CSS
《CSS世界》
《CSS新世界》
《CSS揭秘》
《精通 CSS》
Vue.js
Vue.js设计和实现
深浅的Vue“Js”。
Node.js
更深的和更深的节点“Js”。
Js: Let's Play C++ Extensions(英语:Let's Play C++ Extensions)
数据结构和算法
《计算之魂》
《大话数据结构》
学习JavaScript数据结构和算法
后端
《领域驱动设计》
《推荐系统实践》
数据密集型应用系统设计
高级代码:从煤炭农民到工匠
项目管理和认知
《人月神话》
《黑客与画家》
Joel Spolsky的书: 软件自杀, Joel Says Software, Joel Says Excellent Software Development Methods。
《凤凰项目》
《持续交付2.0》
谷歌软件工程
软技能:超越代码生存指南
《Return 3: Jumping Out of Crazy Busyness》
程序员思考练习
《管理的常识》
产品
《启示录》
《结网》
每个人都是产品经理
《用户体验要素》
《有效需求分析》
产品逻辑的美丽:创造复杂的产品系统
WeChat背后的产品视图
《俞军产品方法论》
Win-Win-Bend - 产品经理升级路径
“向产品经理学习技术”
《精益数据分析》
产品经理面试指南
」 《Experience Engine: Game Design's Overview》。
设计
《设计心理学》四册
《用户体验要素》
《点石成金》
为每个人设计书
关于面部4:交互设计的基本原理
《设计中的设计》
《破茧成蝶》
最后总结:互动设计的四个策略
网页形式设计:制作金石的艺术
触摸人:设计一个优秀的iPhone应用程序
直观美观:网页界面设计如何让用户情绪化
用户体验测量:收集、分析和展示
运营
《运营之光》两册
我正处于用户增长的前沿
增长黑客:创业公司用户和收入增长的秘诀
《流量池》
《超级运营术》
商业
史蒂夫·乔布斯
《浪潮之巅》
《赢》
什么是使你擅长互联网:从技术思维到商业逻辑
《计算广告》
《详谈：左晖》
网上:数据改变商业性质,计算经济复苏的未来
《零售的哲学》
《我看电商》
《冲浪板上的公司》
《一本书读懂财报》
思维和认知
《学会提问》
《思考，快与慢》
《清醒思考的艺术》
《把时间当作朋友》
《智识分子》
《少有人走的路》
《沟通的方法》
我们为什么睡觉?

八、前端总结和认知

从研发角度来理解需求

如上面的流程图所示,产品经理的交付是什么? 是 PRD 吗? 显然不是.

产品经理的工作与设计师和工程师非常不同,人们期望工程师提供有效的代码,而设计师提供视觉脚本。

产品经理负责监控整个产品周期,包括启动后页面效果和数据显示。编写要求标准是沟通和促进项目的一种手段,但规范本身没有内在价值。许多产品经理不使用 PRD来传达他们的想法,他们可以用谈话，你可以在白板上画出想法。还有一些产品经理写标准,但却没有参照执行。

高级工程师应该具备哪些技能和品质
技术功绩,技术远见,技术追求
Besides developing business functions, there is also a certain awareness and practice of development norms, engineering, componentization, modulation, testing, and design patterns
沟通、书面表达、总结重复习惯的能力
全球思维、抽象思维、持续传递意识
项目1负责、团队协作意识
综合权重:成本、效率、质量、风险、经验
注重产品、设计、商业等。 跨学科创新将带来更多的创新。
前端认知
虽然我们大部分时间都花在商业发展上,但我们仍然需要积累其他方面的积累,做一些更有趣的和可持续的事情,例如分享总结、建立基本的能力、提高研发效率、建立技术运作、技术积累等等。

2、学会提问。当我们每天问问题和解决问题时,通常很容易进入X-Y问题,这导致了不明确的目标、不明确的思维和缺乏沟通效率。即使在完全错误的方向,也会浪费大量的资源、时间和精力。在寻求帮助的人身上,或帮助的人,都有所体现。

面对问题时,要了解这个句子的意图、事实、情感和期望。 学会问问题,学会回答疑虑都是智慧。

3.遵循整个过程,持续提供,并创造业务价值。

前端的本质是连接业务、设计和计算能力,为用户提供专业的人机交互经验。

产品能力和技术能力是: 判断信息, 把握重点, 整合有限资源, 将价值包装在产品中,以提供并获得回报.

部门系统中有许多角色: 业务 、 产品 、 视觉 、 开发 、 测试 、 建筑师 、 领导 、 销售 、 数据分析 、 业务等.有些工作不是做或不做的事。而是程度的问题。铭记边界,主动行动,思考所有事情,有极大的同情心,这 反映 了 能力 和 责任 的 逐步 加强 。

谦卑 、 尊重 和 信任 是 合作 和 良好 合作 的 基础 。

8、组织内，人们之间的关系应该是什么?有些人认为这是管理与被管理之间的关系,有些人认为这是伙伴关系。而我认为，组织内部的关系是献身关系。没有奉献作为基础，组织关系尚未建立。这个组织里的人和给予对方的人之间存在着关系。部门和部门是相互支付的关系,上层和下层之间有关系,在这种相互奉献的关系中,只有组织才能真正存在并发挥作用。

奉献 的 基本 现象 是, 每一个 参与 进程 的 人 更 关心 如何 为 下 一 个 进程 作出 贡献 ; 每个 部门 更 关心 如何 调整 自己, 以便 与 其他 部门 保持 和谐 的 联系 ; 下 一 级 更 关心 如何 协调 自己, 以便 向 上 一 级 提供 支助 ;上司会要求自己解决问题,并向下属提供帮助.

能力是重要的,但给予是更重要的。

优秀的人有几个特点: 敏感, 不能容忍, 能够手动优化.

10、前端侧重于人机交互和用户体验,后端集中于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题(包括产品、设计、后端,甚至隐形问题)都以形式表达,都会暴露在前端，只有一些问题(数据问题、计算问题、安全问题等)被暴露在后端,这意味着前端起着重要的负载和连接作用。

先进的技术不断更新;先进的框架越来越复杂;视觉美学趋势不断变化;视觉效果越来越复杂;用户操作系统越来越复杂;老龄化和无残疾的年轻人的吸引力不断浮动;智能设备的升级和匹配是无穷的。所有的这一切， front-end领域和 front-end学生的一个要求是折叠,爱折腾，反复折腾。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/27884.html。