本文作者:成龙 腾讯前端开发工程师,负责腾讯文档前端开发与研发效能提升,AlloyTeam成员。 编译并整理产物 在中小型项目中,这一步通常会被直接省略,直接将构建产物交由部署环节实现。但对于大型项目来说,多次频繁的提交构建会产生数量庞大的构建产物,需要得到妥善的管理。 这对于发布频率越来越高,发布周期越来越短的现代大型项目中无疑是一个最优解。 3. 大型项目中产物->制品的建立 对于大多数项目来说,在代码编译完成生成产物后,部署项目的方式就是登录发布服务器,将每一次生成的产物粘贴进发布服务器中。 这是每一个成功的大型项目最终一定要实现的目标。 参考资料 1.
成龙,腾讯前端开发工程师,负责腾讯文档前端开发与研发效能提升,AlloyTeam成员。 编译并整理产物 在中小型项目中,这一步通常会被直接省略,直接将构建产物交由部署环节实现。但对于大型项目来说,多次频繁的提交构建会产生数量庞大的构建产物,需要得到妥善的管理。 这对于发布频率越来越高,发布周期越来越短的现代大型项目中无疑是一个最优解。 大型项目中产物->制品的建立 对于大多数项目来说,在代码编译完成生成产物后,部署项目的方式就是登录发布服务器,将每一次生成的产物粘贴进发布服务器中。 大型项目中,随着各项指标计算的接入,各项测试用例的数量逐渐增多,运行时间迟早会达到我们难以忍受的地步。 但是,测试用例的数量一定程度上决定着我们项目的质量,质量检查决不能少。
项目开发流程 看一下这个项目开发流程图,当项目启动之后,产品的同事会先来一轮需求宣讲,告知大家本期大致做什么,产品的同事会整合各方的发言在完善一轮功能。 下面我以最新一期接第三方支付的需求为例,讲讲这个耗时半个月的项目是怎么写前端设计文档的。 批量是为了解决超过100条数据操作的问题,所以批量导入的数据是不设限制的,这个时候后端可能一次性给过来几千条数据,前端一次性加载有一定概率导致页面卡顿。 方案名称 优点 缺点 通过账号信息 1、如果接口返回了明显的标识可以区分当前用户的类型以及支付类型,可以直接使用; 2、如果没有,则前端按照用户的类型,手动添加支付类型标识。
这篇文章通过实现一个商城后台,介绍了基于 umi 框架的微前端落地方案,通过这篇文章,你可以收获 超级简单的、可用于生产环境的基于 umi 的微前端实践,包括一套示例代码 全新的、基于微前端的大型中台项目前端组织方式 比如我们要做一个大型的商城后台,商铺管理和用户管理分别由两个团队开发维护,那我们可以将前端应用拆为主应用(layout)、商铺管理应用(shop)、用户管理应用(user),然后通过微前端组织起来,最终效果如下图 ,可以完美的拆分大型中台项目,也可以平滑的升级历史应用。 总结 微前端为大型中台项目带来了福音,我们可以非常灵活的进行应用拆分和组合。基于这一套玩法,我们不仅可以完成“总分”形式的组合,也可以实现“任意套娃”,极大的提升了中台应用的灵活性。 我想象中未来的中台前端也是微服务化,每个小组维护自己的数据和页面,通过“总分”和“套娃”组成一个大型中台应用。
作者:杨超 团队:业务中台 一、背景 对于大多数有点历史的复杂前端项目来说,应该已经经历了从刀耕火种的大型单仓库构建到多业务应用独立开发部署的过程。 毕竟, MPA架构的前端不是 生而为快,其最大的优势在于开发和维护的高效。 那么,在面对一个大型的 MPA架构前,我们的页面还可以再快一点吗? 这时候天空飘来了两个字—— MicroFrontend,微前端。微前端的定义想必大家都看了很多,大多数是起源自于 micro-frontends.org 和各个大牛自己的独到见解。 本文所介绍的方案并非全套的微前端方案,不包含独立发布、部署、依赖拆分这一部分的内容。 在分析了这些微前端方案的实现,并结合团队内的现状后,我们实现了自己的渐进式微前端方案——ZanSpa(命名就是这么简单朴素)。主要设计思路如下图所示: ?
作者:enoyao,腾讯工程师 背景 随着我们项目越来越大,我们有可能需要维护很多的模块,我们腾讯文档 Excel 项目大模块有 10 几个,而每个大模块分别有 N 个小模块,每个大模块下的小模块都有主要的负责人在跟进模块问题 ,让他去慢慢定位问题,这样的每个新同学对模块的熟悉,学习和维护的成本就会变得越来越大,项目越大这种情况就会越严重! 方案 由于上面的问题真的很痛,我们在爬滚中逐渐摸索了一套方案,我们暂且叫它为基于断点调试的共享化和复用化的实践方案吧,这里有个关键词是断点,相比作为每一个开发者都不陌生,在我们前端,模块定位问题的时候, debugger 位置 pasteFromInter 2 行 4 列 isShapePasteFromOuter 256 行 89 列 isImgPasteFromOuter 867 行 12 列 对于大型项目来说 当然实际情况可能还要比想象中复杂,举个简单的例子:因为分发的开关有可能会注入到一些被打包到 worker 的代码里面,worker 在大型项目中运用的很多,但是 worker 里面无法读取 document
大型前端项目性能瓶颈:内存泄漏排查与解决方案 背景与症状 长时间使用后页面越来越卡顿,滚动或交互明显变慢;内存占用持续上升且不回落 典型指标:用户设备内存占用(UA-specific memory)上涨 、FPS 降低、GC 频率升高、主线程占用增多 高风险场景:大型单页应用、长列表、复杂图表/Canvas、WebSocket/SSE、频繁路由切换、跨标签页缓存 常见泄漏模式 未清理的事件/定时器/观察者 :组件销毁后闭包仍持有大对象或 DOM 引用 WebSocket/SSE/Worker:连接与线程未按生命周期关闭 图像与 Canvas:未释放引用、离屏 Canvas 未清理、超大位图持有 路由与微前端 周期性采集 UA-specific memory 与页面交互事件;异常升高告警 错误平台:记录 OOM、AbortError、TimeoutError 等与内存快照元数据(路由、设备) 指标面板: 前端 Puppeteer 内存趋势脚本 文档:是否记录组件与资源生命周期 知识库:是否沉淀常见泄漏模式与修复方法 结果与总结 通过快照对比与保留路径定位,结合资源生命周期清理与缓存策略,可系统性消除内存泄漏 在大型前端项目中建立
大型前端项目代码拆分:按业务模块 / 功能维度的实战思路 目标:提供一套在大型前端项目中实施代码拆分的可执行方法,覆盖按业务模块与按功能维度的两种视角,并给出目录规范、构建配置、状态与依赖治理、迁移步骤与实战案例 适用场景:技术能力复用高、跨业务通用(UI、表单、网络、权限、i18n) 核心原则:横向复用、低耦合、稳定接口与语义化版本 优势:统一维护避免复制;风险:共享层升级影响面广,需契约测试与变更告知 目录与项目结构 Monorepo(推荐大型项目) repo/ apps/ web/ # 主 Web 应用(聚合业务模块) admin/ product/ member/ shared/ ui/ utils/ network/ pages/ routes/ store/ 适用中型项目或小团队 模块间通信优先事件总线(pub/sub),定义事件命名与载荷结构 状态边界:全局只保留会话级核心(登录、权限、主题);业务状态留在模块内,通过共享服务或事件同步 构建与加载策略 路由级拆分与多入口 多入口:大型模块或应用独立入口
建议大型项目用上Try Catch 我们在平时项目做功能的时候,经常会遇到崩溃的情况。如果是我们在开发测试阶段,我们可以找到原因修复。但是遇到已经上线,出现这种问题。 最近写的项目用Swift语法进行编写的,对于之前我们在Object-C中NSError**类型的指针标识遇到了什么错误,现在转成Swift方法直接进行throws进行抛异常。 比如我刚刚写的项目,就用上了,感觉用完顿时高大上了许多。
这篇文章主要讲的是阅读大型的前端开源项目比如 React、Vue、Webpack、Babel 的源码时的一些技巧。目的是让大家在遇到需要阅读源码才能解决的问题时,可以更快的定位到自己想看的代码。 授人以鱼不如授人以渔,希望大家可以通过这篇博客,了解到阅读大型前端项目源码时的切入点。在之后遇到好奇的问题时,可以自己去探索。 这里要强调一下,大型的开源项目一般都会有一个 Contribution Guide,目的是让想贡献代码的开发者更快上手。里面就有讲怎么在本地构建代码。 我们鼓励大家在本地把大型项目的源码跑起来,自己随意把玩,研究。因为源码也是普通的代码,并没有太多门槛。 自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的
项目准备阶段 本章中,我们将开始一个大型实战项目——博客网站。通过“以战代练”的方式来学习如何构建Spring Cloud微服务架构,让读者走出理论的丛林,在实践中玩转微服务架构。 我们知道,在正式开始搭建框架之前,首先应分析项目需求,再进行原型和UI设计,接着设计数据库结构,最后根据项目特点进行技术选型。本章将依次为大家介绍框架搭建前的准备事宜。 一个好的项目开发,产品设计阶段需要占到整个项目进度的50%甚至更多,才能保证整个项目开发的合理性。 一个优秀的产品应遵循以下几个原则。 用户至上。 小结 通过本章的学习,我们了解到一个项目从需求分析、产品设计到最后的架构设计的整套流程。在实际的项目中,无论流程如何改变,这些基本思路是不变的。 本文给大家讲解的内容是springcloud实战:项目准备,构建大型实战项目博客网站 下篇文章给大家讲解的是springcloud实战:从公共模块入手搭建一套完整的微服务架构; 觉得文章不错的朋友可以转发此文关注小编
分层架构确实能够有效降低大型项目的复杂度,方便独立开发。但也存在一些缺点,比如容易在高层产生过多代码,完全实施分层需要花费时间等。 总体来说,尽早引入分层架构,能够减少后期的重构工作量,是管理大型 Python 项目的一个有效方式。 本文通过一个真实的大规模 Python 项目案例,生动地介绍了分层架构的实施过程、优势和不足,对于管理大型项目很有借鉴作用。 看到上面的描述,你大概率会下意识地认为这个项目的代码肯定无比的混乱。坦白讲,我也会这么想。但事实是,至少在我工作的领域,大量的开发人员可以在一个大型的 Python 项目上高效地工作。 如果你正在开发一个大型的 Python 项目,或者哪怕是一个相对较小的项目,不发试试分层结构,还是那句话:越早分层需要面对的麻烦就越少。
1、项目背景,简单了解一下; 2、svn迁移git的过程,简单介绍迁移的经过; 3、正式使用gitflow前的尝试,如何尝试,尝试结果等; 4、研发模式调整,为什么调整,如何考虑的; 5、敏捷思维,gitflow 一、项目背景 我们的产品作为公司最重量级的产品,尝试使用git时(2016年10月)研发团队总体107人左右,研发经理6人、需求12人、架构师1人、系统分析师1人、测试26人、开发61人,整个团队负责全国 2、本质的问题,把产品当成了项目开发,不到20人的主干团队开发产品规划功能,剩余90人都在忙地区交付,2:9的人员配比,重交付轻研发,目标是快速交付,客户说啥做啥,结果质量很不理想,发布后问题非常多。 4、只迁移源码,其他数据(如文档)继续在svn上使用,svn和git并行同时使用,项目的文档有27个G。 最后在配置管理员一晚上的通宵下,顺利的完成了主干的迁移,从此大家在git上进行开发。 首先,gitflow仅仅是一个工具,能够有效提高发布频率,让大型项目更加灵活,带来的不便就是有一定的学习成本,管理成本有所提高(需要配套的工具才能降低),提高效率方面需要结合很多其他方面才能提高。
/ python 生产实战 python 大型项目神器实战 / 在 fastapi 当一个新的请求到来的时候,实际的调用流程如下: 1.调用依赖项函数(传递合适的参数) 2.得到依赖项目函数的返回结果 3.把返回结果传递给路由函数中对应的参数 4.路由函数中业务流数据处理 5.获取的数据返回给客户端 /前端 2.1 函数级依赖项 # -*- encoding: utf-8 -*- from fastapi import Depends, FastAPI app = FastAPI() async
1、项目背景,简单了解一下; 2、svn迁移git的过程,简单介绍迁移的经过; 3、正式使用gitflow前的尝试,如何尝试,尝试结果等; 4、研发模式调整,为什么调整,如何考虑的; 5、敏捷思维,gitflow 一、项目背景 我们的产品作为公司最重量级的产品,尝试使用git时(2016年10月)研发团队总体107人左右,研发经理6人、需求12人、架构师1人、系统分析师1人、测试26人、开发61人,整个团队负责全国 2、本质的问题,把产品当成了项目开发,不到20人的主干团队开发产品规划功能,剩余90人都在忙地区交付,2:9的人员配比,重交付轻研发,目标是快速交付,客户说啥做啥,结果质量很不理想,发布后问题非常多。 4、只迁移源码,其他数据(如文档)继续在svn上使用,svn和git并行同时使用,项目的文档有27个G。 ? 最后在配置管理员一晚上的通宵下,顺利的完成了主干的迁移,从此大家在git上进行开发。 首先,gitflow仅仅是一个工具,能够有效提高发布频率,让大型项目更加灵活,带来的不便就是有一定的学习成本,管理成本有所提高(需要配套的工具才能降低),提高效率方面需要结合很多其他方面才能提高。
大家现在知道了,又遇到有中国特色的项目了,"需求范围不确定,资源限死、时间限死",大家会说不是战略项目吗,资源怎么会限死呢? 考虑该如何实施这个项目时,似乎传统的项目管理从计划来分配资源模式以及采用瀑布型的开发方式,根本行不通。 单元测试的实践,由于时间紧研发人员都担心会影响项目进度,因为本身测试代码工作量也不少。 所以,项目组开会时,开发团队与需求团队就经常发现摩擦。 开发要求需求人员将需求描述的非常细,否则不予接受。 由于团队之间对立情况,反而加剧了对文档传递的依赖,项目进度慢了下来。
前端全栈介绍 前端全栈指的是同时具备前端开发和后端开发能力的技术人员。 在传统的开发团队中,前端和后端开发通常是由不同的人员分工来完成,但随着互联网技术的不断发展,越来越多的公司开始倾向于招聘同时具备前端和后端开发技能的全栈工程师。 前端全栈工程师通常会掌握多种技术,包括HTML、CSS、JavaScript等前端技术,以及Node.js、Python、Ruby等后端开发语言。 API 是前端工程师需要了解的知识之一。 所以这便凸显了前端工程师的重要性,如果没有经过前端的编译处理,用户在请求使用服务时会变得难以上手。那么在获取 JSON 格式的数据后,前端人员如何进行处理呢?
或许你会感到疑惑,怎样的项目算是大型前端项目呢?我自己的理解是,项目的开发人员数量较多(10 人以上?)、项目模块数量/代码量较多的项目,都可以理解为大型前端项目了。 在前端业务领域中,除了大型开源项目(热门框架、VsCode、Atom 等)以外,协同编辑类应用(比如在线文档)、复杂交互类应用(比如大型游戏)等,都可以称得上是大型前端项目。 对于这样的大型前端项目,我们在开发中常常遇到的问题包括:项目代码量大,不管是编译、构建,还是浏览器加载,耗时都较多、性能也较差。各个模块间耦合严重,功能开发、技术优化、重构工作等均难以开展。 其实大家也能看到,大型前端项目中主要的问题便是“管理混乱”。所以我个人觉得,对于代码管理得很混乱的项目,你也可以认为是“大型”前端项目(笑)。 之前这块我也有简单研究过,可以参考《大型前端项目要怎么跟踪和分析函数调用链》。
的地方还是要考虑好是否要用ajax 来自:Arno 的专栏 - SegmentFault 链接:https://segmentfault.com/a/1190000007624980 文章参考自:李智慧的《大型网站技术架构
这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理的,保存在这里,方便以后其他项目用到查漏补缺。