FIS —— 百度開源的前端集成解決方案

FIS是百度開源的前端集成解決方案,這是團隊和百度衆多產品線共同探索出一套前端集成解決方案。解決了前端生成中前端靜態資源加載優化、頁面運行性能優化、基礎編譯工具、運行環境模擬、js|css組件化開發等心問題。php

fis logo

NPM version

Dependencies Status

F.I.S簡介

首先讓咱們來看一個真正的前端團隊要開發一個產品時所須要經歷的過程:css

  • 第一階段: 規範與設計

    • 定製必要的開發規範
    • 定製項目的組件化拆分方案
  • 第二階段: 技術選型

    • 選擇前端組件化框架(seajs, requirejs, ...)
    • 選擇前端基礎庫(jquery, tangram, ...)
    • 選擇模板語言(php, smarty, ...)
    • 選擇模板插件(xss修復)
  • 第三階段: 自動化與拆分

    • 選擇或開發自動化工具(打包,壓縮,校驗)
    • 將系統拆分爲幾個子系統,以便大團隊並行開發
    • 適當調整框架以適應工具產出
  • 第四階段: 性能優化

    • 當心剔除已下線的功能
    • 優化http請求
    • 適當調整自動化工具以適應性能優化
    • 使用架構級優化方案:BigPipe、BigRender等

以上階段,是全部大型應用前端團隊都會經歷的階段,咱們將 其中的技術需求總結爲前端集成解決方案html

一般,一套完整的前端技術解決方案包括四個方向:前端

  • 前端框架:提供組件加載及管理框架支持,提供前端基礎庫及組件庫。
  • 模板框架:提供組件化開發模式支持;配合前端框架收集頁面所須要的最小靜態資源需求;留有充分的性能優化空間,性能優化對工程師透明。
  • 自動化工具:提供基本優化能力;爲前端框架、模板框架提供輔助支持。
  • 輔助開發工具:提高工程師的開發體驗,下降調試、部署成本。

so,若是你的團隊已經擁有以上四項技術基礎,那麼恭喜你,你已擁有了一套fis。java

這樣的過程天天都在前端界上演,那麼,有沒有辦法讓這個過程簡化,讓前端團隊能夠快速進入角色,並且不用擔憂將來的自動化、性能優化等問題呢? 答案是確定的!node

F.I.S@百度

2011年末,百度web前端研發部成立F.I.S團隊,聚集了來自各產品線的精英工程師,該團隊的任務是尋找提高前端工業生產力水平的解決方案。通過1.5561643836年的努力,fis團隊和百度衆多產品線共同探索出一套前端集成解決方案,解決了前端生成中遇到的諸多問題,包括但不限於 前端靜態資源加載優化、頁面運行性能優化、基礎編譯工具、運行環境模擬、js|css組件化開發 等前端領域核心問題。現在,fis團隊的解決方案已應用到百度30多個產品線,覆蓋了從pc到無線終端的應用,極大的提高了前端團隊的生產力,下降了開發成本。jquery

2013年初,fis團隊總結了以前在前端集成解決方案領域所作的探索,將整套方案整理開源,但願能爲前端工業化提供新的思路。linux

功能概述

  • 跨平臺支持win、mac、linux等系統
  • 無內置規範,可配置 開發和部署規範,用於知足任何先後端框架的部署需求
  • 對html、js、css實現 三種語言能力 擴展,解決絕大多數前端構建問題
  • 支持二次包裝,好比 spmxphizchassis,對fis進行包裝後可內置新的插件、配置,從而打造屬於大家團隊的本身的開發工具
  • 自動生成靜態資源表關係表(map.json),可用於 鏈接先後端開發框架
  • 全部靜態資源自動加 md5版本戳,服務端可放心開啓永久強緩存
  • 支持給全部靜態資源添加域名前綴
  • 可靈活擴展的插件系統,支持對構建過程和命令功能進行擴展,現已發佈N多 插件
  • 經過插件配置能夠在一個項目中無縫使用 lesscoffeemarkdownjade等語言開發
  • 內置 css sprites插件,簡單易用
  • 內置 png圖片壓縮插件,採用c++編寫的node擴展,具備極高的性能,支持 將png24壓縮爲png8
  • 內置本地開發調試服務器,支持完美運行 javajspphp 等服務端語言
  • 支持文件監聽,保存即發佈
  • 支持瀏覽器自動刷新,可同時刷新多個終端中的頁面,配合文件監聽功能可實現保存即刷新
  • 支持上傳到遠端服務器,配合文件監聽,瀏覽器自動刷新功能,可實現保存即增量編譯上傳,上傳後即刷新的開發體驗
  • 超低學習成本,只須記憶 2 條命令便可完成開發
  • 抹平編碼差別,開發中不管是gbk、gb23十二、utf八、utf8-bom等編碼的文件,輸出時都能統一指定爲utf8無bom(默認)或者gbk文件

快速上手

三種語言能力擴展

插件系統

配置文檔

高級使用

更多資料

  • fistool 可視化界面工具
  • gois go語言組件化解決方案
  • phiz PHP組件化解決方案
  • spmx 經過包裝fis獲得適應seajs架構的集成解決方案
  • sublime plugin 支持FIS編譯的sublime插件,能夠替代watch功能

項目主頁c++

相關文章
相關標籤/搜索