成都市网站建设设计,广州seo排名外包,网页制作与网站建设设计报告,WordPress情侣网站1.公司研发人数与前端体系 小型创业公司 前端人数#xff1a; 3 人 产品类型#xff1a; 产品不是非常成熟#xff0c;比较新颖。 项目流程#xff1a;不完善#xff0c;快、紧促#xff0c;没有固定的时间排期。 技术栈#xff1a; 没有历史包袱#xff0c;技…1.公司研发人数与前端体系 小型创业公司 前端人数 3 人 产品类型 产品不是非常成熟比较新颖。 项目流程不完善快、紧促没有固定的时间排期。 技术栈 没有历史包袱技术栈较新、无前端架构师甚至无高级前端。 项目安全几乎不会额外考虑安全性。 基础设施几乎无。 系统可用性几乎无具体标准。 前端工程化 使用业界方案怎么快怎么来。 学习氛围自学。
中型创业 前端人数 20 人 产品类型 公司有自己较成熟的产品有一定的用户量。 项目周期快、紧促有大概固定的时间排期时忙时闲。。 技术栈 没有历史包袱技术栈较新、有前端架构师或者 teach lead 项目安全考虑一些简单的安全问题例如 sql 注入、xss、csrf 等依赖第三方库。 基础设施错误监控、日志收集、代码回滚三件套。明显的体验就是有时候做新功能或者改 bug 的时候一不小心就把之前的代码改炸了。 系统可用性几乎无具体标准。 前端工程化使用业界方案用文档来做规范化和沉淀会有一些跟业务无关的技术需求的沉淀。 学习氛围自学 讨论。
传统 500 强企业 前端人数 50 人 产品类型产业转型大多数是内部产品例如一些 saas 产品、对内使用较多。 项目周期处于行业转型较快、较紧促有大概固定的时间排期时忙时闲或者是都挺闲的。 技术栈 有历史包袱技术栈较老、技术栈多会有前端架构师或者 teach lead。 项目安全定期会请专门安全团队做安全检测。 基础设施 会有 A/B test、数据埋点。会尽量去避免出现错误流程还是没有达到规范化明显的体验就是不敢重构不敢升级依赖不敢更换系统不敢接锅能跑起来就行。 系统可用性没有或者 3 个 9 前端工程化使用业界方案用文档来做规范化和沉淀缺少自己内部的前端定制化工具库、组件库等。 学习氛围自学 讨论。
百亿级别公司 前端人数: 500 人 产品类型多个成熟的产品且成为行业龙头或者独角兽 项目周期两周一迭代项目紧较紧促有大概固定的时间排期时忙时闲有项目间隔期。 技术栈 有历史包袱技术栈较新、技术栈多会有前端架构师或者 teach lead。 项目安全定期会请专门安全团队做安全检测。 基础设施主要还是配置化、工具化、完善的基础设施会考虑性能问题能在客户发现问题之前就发现部分问题能快速定位问题并解决明显的体验就是有专门的团队去维护这些标准或者操作流程原则还是人操作工具来提效去约束人。 系统可用性普遍 4 个 9 以上。 前端工程化 用文档和工具结合做到规范化、例如代码规范、代码校验、代码测试覆盖等等能沉淀出一些流程脚本代码库、工具、经验、脚手架。 学习氛围每周分享了解各种前沿技术。 2.前端整体架构方案 前端架构概览图 前端工程化体系 3.混合开发方案 混合开发多端一体化方 美团整体架构体系 EH - 增强型Hybrid框架 EH - Enhanced Hybrid框架是美团金融研发的针对Hybrid业务场景的增强型框架。Hybrid实现虽然在研发效率上有很大优势但同时也存在大量的用户体验问题。 页面白屏问题无法做到原生页面在切换时候的流畅度。白屏问题的本质原因在于原生页面切换到Web页面时候Web页面这时候还未加载渲染完成因此会导致白屏问题。解决方案就是在当前原生页面中通过一个不可见的webview将页面进行加载当webview页面完全加载完成后通知原生页面然后进行跳转。 离线化技术通过资源离线化线上增量更新实现页面的加载性能提升接近于原生的渲染体验。 交互一致性由于SPA的前端系统在页面交互上难以做到原生一致的体验例如左滑回退操作等等EH TransPage通过使用Native导航结合SPA页面实现在交互体验上和原生保持一致。 一体化配置前端页面在Webview中缺乏对外部宿主的有效控制例如导航栏样式、状态栏文字颜色等等EH Config提供一套接口可以让前端页面灵活进行配置实现视觉一致性。 下图是EH的整体架构图 4. 典型案例汇总 美团点评 美团点评是一个多业务形态的平台各个业务发展阶段和技术诉求都不尽相同因此前端技术在美团点评各个团队中百花齐放诞生了众多的解决方案。下面我分享一下几个代表性团队的前端技术体系。 酒旅团队 以上是酒旅前端团队的技术体系结构图我们有两种共存的项目类型静态化项目和服务端项目静态化项目是通过CDN进行承载使用Vue进行功能开发同时借助移动端样式组件库提升开发效率通过离线包机制和KNB (Native Bridge)增强页面在容器内的表达能力最后通过AWP自建的静态化发布系统可以高效的进行上线部署。 服务端项目不同的是使用NodeServer进行承载前端通过AngularJS/VueJS进行功能开发同时配合NGUIAngularJS样式组件库快速进行页面搭建Node端框架选用的是Express服务的部署通过OPS内部的运维发布系统完成。 人机识别服务是我们在前端角度设计和开发的一套安全机制它包含前端SDK和基于Node实现的验证服务可以用于接口的防抓取、防止接口被第三方非法调用等场景。目前线上接入的业务平均拦截率在30%左右接口TOP90的响应时间在9ms以内。 构建工具栈中我们通过Yeoman开发了团队的脚手架开发者可以通过脚手架快速的进行项目搭建和组件开发通过Gulp和Webpack进行项目的构建和打包NPM作为团队统一的包管理工具Sass作为CSS的预编译工具提升CSS代码的可维护性Babel作为ES6的编译工具ESLint作为团队的代码检查工具保证代码的规范一致并且接入了Sonar。同时借助一些开源的自动化测试工具提升开发阶段的代码质量。 监控体系中Sentry用于线上错误信息的收集和监控Perf平台用于Web端性能数据的收集灵犀用于业务的统计和埋点Falcon一方面用于Server的监控报警一方面用于业务监控和报警比如火车票的抢票失败率和接口调用情况PM25是我们自建的一套针对NodeServer进程粒度的开源的监控报警系统用于确保线上Node服务的稳定性。 5. 目前公司前端架构 前端架构体系图 基础设施云端能力成为各大互联网的基础能力可以想象未来云端会越来越强大可以提供更多标准化的能力前端可以自主做更多的事情。 服务层BFF/SSR是前端服务层的主要作用从技术栈而言Node-GraphQL-Serverless会是一个大趋势尤其是Serverless的出现让大家看到前端更加独立放飞自我的可能性。 应用层在前端三大框架React、Vue、Angular之上形成了一系列强约束性、架构标准化、插件化扩展的应用层开发框架这类应用框架的出现对于大厂技术栈能力沉淀起到非常重要的作用。 UI组件库组件库不再是简单的UI组件的封装而是一套完整的设计语言。同时随着端的丰富组件库也从PC端来到移动端、小程序形态上也更多出现了数据可视化等更为丰富的表现。 跨平台动态化跨平台和动态化始终是一个关于研发效率与用户体验如何平衡的热门话题不论是Hybrid的Web容器增强还是RN、Flutter这类虚拟运行环境的解决方案都有着不同的应用场景。在国内对于研发效率和动态化能力执着追求下在用户体验妥协下RN、Flutter技术得到长足的发展RN目前已经进入了成熟期各大公司的基础建设也相对完善Flutter则是当红炸子鸡处于技术泡沫期但其未来前景有可能更好其跨平台的愿景更为宏大未来可期。 工程智能化大前端研发早就进入到大规模、多团队协作的工作模式因此工程化的基础建设对于研发效率、规范落地、线上异常性能监控等方面都起到非常重要的作用。目前阿里在云端化的建设例如Web IDE、云构建等进一步提升了前端工程化的能力。同时前端智能化这个方向也非常热门在Pro Code/Low Code/No Code三个方向都有很多突破前端同学在自我革命的道路上越走越决绝了。
