Kerry前端开发工程师

一个社交活动平台，可以在上面浏览、查看活动、活动报名参与等等，同时针对活动组织者也可以在上面创建圈子及发布活动。

• 独立负责开发了扎堆堆和轻识活动平台两个微信小程序，开发均使用了Taro框架。
• 对小程序使用了按模块进行分包优化，突破了微信原本2M大小的限制。此外还对活动图片上传使用了compressImage进行了压缩优化，极大的提升了页面加载速度和用户体验。
• 实现了小程序活动报名订单创建及微信付款，小程序用户通知消息。
• 通过Canvas生成并实现了活动分享海报，使用Editor实现并对富文本编辑器进行组件封装，小程序版本检测自动升级。
• 项目后端使用Nodejs开发，Eggjs作为企业级开发框架极大简化了系统接口的开发难度和开发效率提升。

小拉出行管理后台，是一个聚合了多个子系统的基于iframe的微前端应用，针对司机和乘客的管理，以及会员订单管理等模块，子系统之间主要通过postMessage来通信。

• 主要负责司机相关业务系统的开发，包括司机资料审核、车贴管理及司机管控系统，涉及车贴合同、车贴审查、司机判责单、分单配置、司机行为分、司机准入和车辆审核等模块。
• 框架采用CRA搭建，Nginx 指向的全静态项目，跨域请求通过CORS方案解决。
• 全站使用函数式风格的React Hooks进行页面组件开发，使得页面逻辑清晰，可读性更好，利于后期的项目维护和升级。
• 利用sessionStorage，实现列表页点击进入详情，再返回列表，保持上一次的表单搜索记录。
• 使用useRef解决在函数式组件中定时器失效的问题，这是利用了useRef来存储数据，它可以跨越渲染周期不会引起组件渲染。
• 通过从Redux中获取当前用户角色权限列表实现对页面组件按钮级别的权限控制。
• 此外，还封装了ModalConfirm、PopconfirmDelete、Pagination、Layout、Player基础公共组件和PhotosInfoItem、CredPhoto、PhotosInfo、InputFields、ReviewButtons、OperateReview等司机资料审核相关的业务公共组件，实现组件的高度复用。

项目地址

01心意捐款平台，慈善机构通过入驻平台发布筹款项目，用户可以在线上进行爱心捐款，核心模块包括首页项目推荐、搜索页项目浏览、发布个人筹款，及用户会员中心等。

• 基于Nextjs构建的SSR模式的服务端渲染网站，利用SEO搜索引擎优化，并解决了SPA单页应用首屏渲染慢的问题。
• Redux-saga在项目中的使用，可以轻松的帮我们处理边际效应，使得store和api解耦，专门用来去请求数据和文件操作等。
• 在项目中大量使用React Hooks编写组件，相比Class类组件，Hooks组件逻辑清晰、可读性更好；函数式组件更容易实现代码复用。
• 在样式方面，项目使用了styled-component，css in js框架，可以直接在React组件中编写样式，使页面组件维护起来更加容易。
• 在项目详情里面，使用到了第三方播放器，通过借助next/dynamic，实现第三方库动态引入加载，提升页面加载速度。
• 在一些父子组件中，通过React.memo包裹子组件，并使用useCallback、useMemo对一些函数和计算量比较大的操作进行缓存，以此来减少组件不必要的render渲染。
• 为了提高开发效率，封装了useMq、usePrev、useDispatchPromise几个实用的Hooks自定义方法。
• 项目详情页面，内容区域tab栏，页面滚动到tab内容区域时，实现tab导航粘性在顶部。在页面滚动使用debounce防抖处理，这样减少了函数被频繁调用的次数。
• 异常监控方面，使用Bugsnag对页面发生的错误上报，当异常发生时，可以快速的发现线上问题，最小化的降低给网站用户带来的影响。
• 通过对页面进行埋点，收集用户浏览和点击行为，更好的分析网站的用户，从而可以对网站进行优化改进。
• 响应式页面开发，支持desktop、tablet和mobile不同分辨率的屏幕尺寸适配。
• 使用i18n，支持语言国际化，项目通过travis-ci和docker实现代码的自动化部署。

项目地址

小鹏汽车官方网站，对外展示发布车型产品信息、在线车型选配下单、试驾预约，此外还有新闻、活动中心、金融、门店售后等模块功能。

• 主要参与官网G3和P7产品站的开发，活动中心的改版重构。
• 项目使用遵循CMD规范的Sea.js框架进行页面模块化开发，Gulp工具进行资源文件压缩和编译打包。
• 产品站存在大量的图片，为了页面加载速度和用户体验，对图片使用lazyload进行懒加载处理。
• 使用vm方案进行屏幕的适配，为了开发效率使用了社区提供的postcss-px-to-viewport插件对px自动转换为vm单位。
• 此外还编写了button、modal、toast、slider等公共组件，并负责部分页面和功能的开发。

项目地址

项目包括web sdk和nodejs数据采集接口服务，网站和小程序接入sdk后可以对用户行为数据、异常信息进行收集，包括用户浏览、点击行为数据和页面进入离开时间等基础数据，将收集的数据发送到Node数据接口服务，对持久化保存到Mysql数据库中，用于后期的数据分析。

• 主要负责Node接口采集服务的开发，并参与web sdk的部分功能的开发，通过监听window.onerror对异常信息进行采集，以便及时发现和排查故障。
• 项目使用Eggjs企业级框架搭建，约定大于配置，使用多级分层的设计方式（Controller, Service等等）。
• 对服务接口请求异常使用nodemailer邮件上报，方便再第一时间发现并解决问题。
• 针对大数据量的存储，对采集的数据按月分表存储，同时为防止重复入库，使用Redis缓存机制，只有Redis中不存在才进行保存到数据库中，同时保存最新的数据到Redis里面。
• 引入消息队列机制（Kue），将每次的请求放入到消息队列中，先后顺序进行处理，防止过大的服务端接口压力。

GO卡是基于微信平台的一款高收益低风险的投资理财产品，通过和优质商户进行合作，用户可以在线购买商户发放的会员礼遇卡，通过消费买单形式对持卡用户进行分红奖励，会员中心可查看购卡信息、分红分析、账户记录、对银行卡管理及提现操作。

• 使用Koa2搭建中间层，实现前后端分离，对请求数据进行处理并通过artTemplete模板引擎返回数据并对前端页面进行渲染。
• 采用flex实现布局，根据设计图高度还原页面效果。
• 通过使用字体图标减少图片带来的http请求，将静态资源通过cdn进行管理加速。
• 在数据交互较多的页面使用了Vue.js。