Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

描述一下你们采用的前端集成解决方案 #6

Open
3Lweb opened this issue Sep 1, 2017 · 4 comments
Open

描述一下你们采用的前端集成解决方案 #6

3Lweb opened this issue Sep 1, 2017 · 4 comments

Comments

@3Lweb
Copy link
Owner

3Lweb commented Sep 1, 2017

前端集成解决方案,英文翻译为 Front-end Integrated Solution,缩写fis,发音[fɪs]。它是将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案。http://www.infoq.com/cn/articles/talk-front-end-integrated-solution-part1/

@3Lweb
Copy link
Owner Author

3Lweb commented Sep 1, 2017

web团队开发涉及到的大概有八个方面:
开发规范:包括开发、部署的目录规范,编码规范等。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。

模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。

组件化开发:在模块化基础上,以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等,甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装,解决一些常见的组件渲染、交互问题。

组件仓库:有了组件化,我们希望将一些非常通用的组件放到一个公共的地方供团队共享,方便新项目复用,这个时候我们就需要引入一个组件仓库的东西,现在流行的组件库有bower、component等。团队发展到一定规模后,组件库的需求会变得非常强烈。

性能优化:这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富,就不在这里展开了,感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是 性能优化一定是一个工程问题和统计问题,不能用工程手段保证的性能优化是不靠谱的,优化时只考虑一个页面的首次加载,不考虑全局在宏观统计上的优化提升也是片面的。

项目部署:部署按照现行业界的分工标准,虽然不是前端的工作范畴,但它对性能优化有直接的影响,包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。

开发流程:完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本,工作这些年见过很多独立的系统(cms系统、静态资源推送系统)将开发流程割裂开,对前端开发的效率有严重的阻碍。

开发工具:这里说的工具不是指IDE,而是工程工具,包括构建与优化工具、开发-调试-部署等流程工具,以及组件库获取、提交等相关工具,甚至运营、文档、配置发布等平台工具。前端开发需要工具支持,这个问题的根本原因来自前端领域语言特性(未来我会单独写一篇文章介绍前端领域语言缺陷问题)。前端开发所使用的语言(js、css、html)以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统,要想把它们串联起来,才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响,因此能否串联其他技术要素,使得前端开发形成一个连贯可持续优化的开发体系,工具的设计至关重要。

@3Lweb
Copy link
Owner Author

3Lweb commented Sep 1, 2017

**
整体静态资源结构来分的话,将页面母版和常用的页面模块,表单验证指令和第三方模块放置在一个单独的文件夹,将具体实现的各个业务模块单独分为一个个文件夹。将菜单目录和资源目录单独整合成两个文件,通过对这两个文件的修改就可以实现新页面和新资源的加载。这样可以实现快速增加新功能并且不会影响其他页面 。

对于静态资源的加载来说,我们采用了requireJS来实现按需加载和组件化,后台部署的话使用了jekins自动化部署方案,快速构建。团队开发环境这块我们专门搭建了三个环境,rd环境用于调试,at环境用于测试,现网环境用于项目上线。对于前端开发来讲还专门使用了一个debug的小程序,来对线上页面样式进行快速修改和测试。

页面的优化部分:
部分整合一个单独的模块,一些经常用的页面模块和表单验证整合成一个指令,比如弹出框和表格模块,输入验证部分。把这些和第三方引用的插件放在一个公共文件夹frame里面,使用util模块来控制用户权限和url的统一管理。优先使用了CDN资源的加载。**

@3Lweb
Copy link
Owner Author

3Lweb commented Sep 5, 2017

fouber/blog#2 百度的前端集成解决方案为FIS,但他们官网上面的是适合于他们自己的一套技术体系的方案,具体需要自己总结

@3Lweb
Copy link
Owner Author

3Lweb commented Sep 5, 2017

seajs开发体系,支付宝团队前端开发体系,以 spm 为构建和包管理工具
fis-plus,百度绝大多数前端团队使用的开发体系,以fis为构建工具内核,以lights为包管理工具
edp,百度ecomfe前端开发体系,以 edp 为构建和包管理工具
modjs,腾讯AlloyTeam团队出品的开发体系
yeoman,google出品的解决方案,以grunt为构建工具,bower为包管理工具

这些都是已有的前端集成解决方案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant