你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
walterShen

FIS与Grunt的区别 3个回复 专栏 @ 工具

walterShen 发布于 5 年前

what is fis

平时我们很少正面的详细的去和grunt对比,也是不想引起不必要的口水,毕竟fis的定位和grunt完全不一样 grunt 是一个基于 task 的构建工具,依赖众多的插件进行配置组织, fis设计之初我们发现公司各个前端团队遇到的是一系列的工程化问题,其中涉及开发规范/目录规范/最佳实践、模块化开发框架(模块,js,css模块化)、自动化工具、辅助开发工具(本地调试、数据模拟、部署上传)和性能优化等一系列需求,我们希望可以通过一整套开发方案来解决一些关键问题,来做到高效率、高性能、高质量的目标。

自动化工具

这块的目标是和grunt一直的,解决自动化问题,减少重复工作,但是具体实现却是有本质区别,首先说下亮点:

  • 管道式的处理,采用了文件流的处理方式,极大提高了运行性能
  • 工程化的考虑,整个文件编译过程包括parser(编译器插件)、preprocessor(标准预处理器插件)、standard(标准化处理)、postprocessor(标准后处理器插件)、lint(校验器插件)、test(自动测试插件)、optimizer(代码优化器插件)处理流程,设计初衷就是为了规范化自动化工具,让插件可以有整体上的考虑,又支持扩展的能力
  • 与其叫更灵活的配置,不如叫更便捷的配置更合适,例如fis-plus,我们是希望使用者可以做到零配置就可以直接使用包括预处理、md5处理、压缩、优化、打包等功能

在工具层面相比grunt的区别还有:
a. 强大的缓存机制,可以极大提高缓存命中率,提高编译效率
b. 三种语言的标准化处理,自动化处理定位资源、嵌入资源、分析依赖
c. 业务支持,基于业务场景考虑的插件,国际化场景、mobile场景

开发框架

这块是grunt所不具备的,fis一路演变过来的经验是,想要仅仅依靠工具层面来解决问题最后会导致编译工具滥用、黑盒效应、灵活性差等问题,如何仅仅依靠框架来解决问题会导致框架臃肿、性能低下,开发效率地,只有工具和框架相互结合才能发挥出最大的效果,既能发挥出框架的运行时、开发时的优势也能极大降低使用成本,提高开发效率,下面就拿模块化来举例(下面提到的问题requireJS/SeaJS也在很大程度上解决了,在此仅是举例),

requireJS/SeaJS提供一种JS模块化的机制,可以很好的划分模块、降低模块间的耦合,但是在开发体验上和性能上也带来了一些问题:

  • 为了支持线上处理依赖url处理,整个实现将近2000行,在性能上带来消耗
  • 为了支持模块化,同时也实现了异步加载,大家是否还记得曾经大家都将js放在页面底部,为了支持模块化,不得不采用js来进行动态加载,这是一种冗余的行为
  • 为了处理依赖,不得不在页面中采用异步的方式来调用模块,这种方式既难理解,体验也很差,为什么不能像nodeJS一样的用户体验
  • 手工添加闭包,需要手工添加define闭包
  • 合并打包的复杂性,因为模块化拆分、异步加载和匿名闭包等特性,导致合并打包并不像以前一样简单,需要考虑flush,配置map等一系列方式,或许很多同学现在还不了解如何将requireJS的模块进行打包

我们的初衷是为了做模块化开发,这样做的意义是为了提高开发效率和可维护性,但是明显上面的方案是有悖初衷的,所以我们将工具和框架进行了整体考虑,可以做到:

  • 线上框架(modJS)不到100行,具备很好的性能
  • 后端框架(back end view)自动拼装页面,将页面需要的资源script插入页面相应位置
  • 支持在项目中使用类似nodeJS的开发体验,在页面可以通过同步require的方式来调用模块
  • 自动添加闭包,对工程师透明
  • 直接配置合并策略,不需要考虑其他有模块化导致的问题,目前支持不配置任何合并策略,持续自适应优化合并打包(过一段时间会对外开放此服务)

辅助开发工具

简化本地调试、部署等开发流程,来达到更快、更可靠、低成本的自动化项目交付。包括一键部署、一键提测(还未对外开放)等功能。

最佳实践

面向定制化,包括PC、Mobile、I18n等大量最佳实践。

quickling - 适用于网络高延迟、低带宽场景的解决方案

特点:

  • 用于构建网络高延迟、低带宽场景(无线)高性能应用
  • 使用后端模板渲染的一站式(webapp)应用方案,可以避免大量的服务器端重复计算和客户端重复渲染;
  • 支持page cache和用户缓存控制,可以避免资源重复加载,提高页面切换性

pc-plus - 适用于PC最佳实践解决方案

特点:

  • 内置丰富的插件和自动化工具
  • 内置静态资源管理和加载框架
  • 编译速度更快,开发体验更好

i18n - 适应于国际化多语言支持的解决方案

特点:

  • 解决当语言增多时出现的文件成倍增长的问题
  • 支持动态加载,运行时分析
  • 解决本地编译效率低下、国际化目录规范复杂开发成本高等问题

phiz - 适用于php高性能解决方案

特点:

  • 不依赖于smarty的php解决方案
  • 支持模块化和静态资源管理
  • 性能更高、架构更灵活,直接对接odp、bingo后端架构
Feature Fis Grunt Comment
自动化编译流程 FIS 可自动构建文件编译流程,减少手动操作
前端编译工具 FIS 拥有针对 JS、CSS、HTML、LESS、CoffeeScript、Smarty、前端模板等校验、合并、优化等工具,同时支持二次开发插件
前后端解耦 FIS 并不关心你使用的任何前后端框架以及语言,甚至可更好的独立开发前端项目
最佳实践 FIS 根据众多前端业务总结整理了适合各类场景的最佳实践方案,方面用户直接使用合理的前端方案
模块化支持 FIS 拥有 JS、CSS 以及模板级别的模块化方案
多平台多语言本地开发环境 FIS 可在多平台下支持 JAVA、NODEJS、PHP 的本地服务器,拥有数据模拟、URL 转发等功能,支持前端项目本地开发预览调试
文件监听 FIS 可监听文件的变化直接进行文件编译、浏览器刷新,方面用户本地开发预览调试
图片合并 FIS 可根据整站进行图片合并,减少繁重的手动成本
自定义规范 FIS 可根据不同的业务等制定开发及部署规范
静态资源管理 FIS 根据静态资源表对整站的静态资源进行管理加载
多平台支持 FIS 可在 win、Linux、mac 等系统下正常运行
自定义流程 FIS 根据前端开发的经验自定义一套合理的编译流程,无需用户再自定义
部署配置 FIS 可根据配置编译发布至本地或任何其他机器,方便用户联调等
登录后回复,如无账号,请使用邀请码注册