闲谈Web前端
基于React/React-native统一栈
原创文章 作者 Jerry
产品C端属性决定了,前端技术栈的横向跨度较大,前端应用高可用性要求高。目前开发平台有IOS、Android、React-native、Web, 开发语言以Java、javascript、Object-C为主。
如何理解前端,如下图所示:
这是一个典型的中台-小前端的模式,Native提供中台输出,Web、ReactNative提供业务支持
Web端开发人员,需要关心三个交互,两个兼容性:
-
用户交互
- 用户交互是基于人机交互原则、产品架构,而给出的设计原型。
- 用户交互方案会因结果倒逼而进行调整,例如:
接入第三方web页面A,期望A作为子流程展现在我们的站点B中,并且B交互过程中 可以与A的流程进行沟通。受限于安全往往作为非法者不允许在B中直接操作A中元素,此时建议将A以弹窗形式展示,处理完A流程直接关闭 在B中继续下一步流程。这样即兼顾了美感、流程设计更合理。所以Web开发在弱场景下实现业务需求,需要反馈出问题,给出建议。
-
后台交互
- Web开发人员,后台交互过程减少交互次数、明确需要数据,减少冗余数据返回、优化错误处理
-
APP交互
- Web开发需要定义出具体入参、出参,尽量复用已有接口。
-
系统兼容性
- C端产品,面向最广大用户,系统兼容性需要考虑不同厂商浏览器兼容性、浏览器版本兼容性、APP平台兼容性。浏览器兼容性可通过转译、垫片独立解决,平台兼容性依赖APP开发者提供解决方案,web端配合。
-
API版本兼容性
- API版本兼容性,后台API、APP API。后台API暂时不区分版本处理,只需要配合接口优化。APP需要考虑版本碎片化,新增APP接口方案对于旧版本APP如何处理。
-
交互设计是设计人员根据业务需求,结合各端需要和限制而商讨出的约束,确定的输入给出确定的输出。
-
👆接口即文档,好的接口约束,可以降低各端复杂度和协作难度。
技术栈
-
HTML5(简单介绍比较有用的技术点)
- PostMessage:解决跨域、窗口通信问题
- LocalStorage/SessingStorage:Web端数据存储
- Canvas:绘制图形、HTML转PDF
- Video/audio: 播放流媒体
- Input: placehoder、输入类型number/date/text/passwrod、长度min/max、disabeld
- requestAnimationFrame
- WebGL
- IndexDB
- .....
-
Sass/less/Css
-
盒子模型及不同浏览器差异
-
移动端适配方案:rem、vm
- rem:通过动态计算屏幕尺寸和设计尺寸的比例,来设定HTML根节点的字体大小,全局样式渲染是根据根节点字体适配
- vm:基于视区的百分比
-
样式模块设计
- 通用性样式抽取,模块化引入
- 样式预处理postCss
-
-
Ajax/fetch
- Axios请求库基于xmlHttpRequest封装,常用于网络资源请求的场景。
-
抽象出Axios实例,通过配置化方式根据不同的场景,初始化不同的网络请求对象 例如:web实现API server A和 API server B后台交互,后台定义了不同的交互规则
const axios = require('axios'); export const axiosA = axios.create('https://server.a.com',{ baseURL:"https://exampleA.api.com" }) export const axioB = axios.create('https://server.a.com',{ baseURL:"https://exampleB.api.com" })
-
- fetch接口抽象出了Headers、Request、Response对象。
- Axios请求库基于xmlHttpRequest封装,常用于网络资源请求的场景。
-
DOM/BOM API
- DOM增删改查接口
- DOM事件流,事件捕获、事件目标、事件冒泡
- BOM浏览器交互接口,路径导航、浏览器信息查询、base64转换、屏幕信息
-
ES6等语法糖
- Object
- const/let
- Promise
- class
- Symbol(新增基本类型)
- async/await(如何实现?)
- ...
-
React
- 生命周期
- 创建周期 钩子函数
- 更新周期 钩子函数
- 销毁 compoentWillUnmount
- 父子通信/兄弟通信
- 父子通信组件间传值,数据单向流动,
- 兄弟通信,通过共同的父组件管理状态同步信息
- 状态管理,全局状态管理、组件状态管理
- 全局状态:提示框、路由、权限管理
- 组件状态管理:页面数据、交互效果
- 高阶组件设计
- 通用性UI组件设计
- 组件复用性
- 渲染性能优化
- 虚拟DOM树更新机制
- 时间分片
- 生命周期
-
React-router
- react-router设计理念
- 组件化设计
- 基于路由的代码分割
-
Redux
- Redux设计理念
- 共享数据的管理
- 数据一致性设计
-
Antd/Antd-mobile
- 定制化使用
- 按需加载
-
echart
- 前端数据模型设计
- 业务组件设计
-
Babel
- Babel 6/Babel 7
- Presets/Plugins/Transform/Polyfill
- 语法降级(移动端兼容性)
-
Eslint
- 代码风格校验 airbnb
- 使用方式 打包器配置使用 IDE编辑器配置使用
-
webpack
- 基础配置
- 插件使用
- 定制本地化开发环境
- 打包分析
-
npm/yarn
- npm包开发规范
- yarn使用场景
- nrm
- nvm
- 镜像切换
-
git
- git开发流程
- git使用技巧
- 合并代码,解决冲突
- git rebase及如何变基
-
Browser Environment
- 浏览器安全措施
- 同源策略
- 内容安全保护策略
- 浏览器工作原理
- 浏览器开发者工具
- 浏览器兼容性
- 浏览器安全措施
-
CommonJS规范
- 演变历史
-
HTTP协议 应用层协议,基于TCP/IP通信协议传输数据。HTTP消息格式:请求行、请求头部、空行和请求数据四个部分组成。
- cache 用于提高Web性能,首先要理解缓存的存储策略、失效策略、缓存对比策略。
- cookie
- CORS
- Session
- HTTP各个版本
- CSP
- HTTP状态码
- HTTP Method
- HTTP Headers
-
Nginx
- 反向代理与正向代理
- 前端使用详解
- 单页应用配置路径匹配规则
- 用户请求头信息透传
- gizp配置
- 代理转发
-
Jekins
- Jekins集成步骤
- 多环境详解
-
UI框架
- Bootstrap
-
Web框架
- React
- Vue
- Angular
-
React-native框架
- 基础组件
- 布局方式
- 路由配置
-
第三方库
- lodash
- moment
- Crypto-js
- xlsx
- codemirror
- medium-editor
- shelljs
- yeoman
-
Webview
- webview基础概念
- 不同平台差异
- 系统不同版本差异
- 跨平台通信方式
-
Typescript/Flow
- 使用场景 大前端团队协作、无界面渲染、中台-小前端模式协作
-
SEO友好
- 搜索爬虫
- 社交平台分享
- 服务端渲染
- 富媒体对象
-
License MIT\BSD,了解开源license有助于我们在选取开源框架过程避开版权风险