前端模板框架-是时候揭开百度前端技术体系的真面目了

作者|编码爸爸

编辑|王文静

前段时间,我们发布了阿里巴巴集团整体技术体系的详细介绍,涵盖:基础设施、服务层、应用层、UI组件层、跨平台、工程化、智能化。 你可以看到很多前沿的探索。 今天的文章我们先从百度开始。

介绍

整个行业在前端框架的不断迭代中找到了很多突破的方向。 比如跨平台的RN、Flutter、服务器端的GraphQL、Serverless,前端和客户端的融合越来越近。 在Node和Electron的支持下,前端也将版图扩展到了服务器和桌面。

同时,随着前端开发越来越复杂,整个前端研发也经历了手工->工具->工程化->智能化的演变。 目前,各大厂在工程实践中不断迭代,出现了许多Low/No Code等前端智能解决方案。 工程实践也渗透到研发的各个环节,不断提升前端研发的标准化能力。 而且,随着机器学习的加入,各种UI2Code解决方案也开始出现,前端研发进入了一个完全不同的时代。

随着终端能力的不断增强,越来越多的事情在终端上做。 首先,在数据可视化方向,图表、地图、3D等数据可视化的尝试越来越多; 其次,在人工智能的加持下,末端的人工智能应用也开始普及,减少了服务终端之间的交互,提高了系统的实时响应能力; 最后,通过WebAssembly等技术的应用,可以将前端运算能力提升到更高的水平,在终端上实现更复杂的计算。

为了了解当前前端的发展趋势,让我们先从中国各大互联网公司入手,了解他们的最新发展和未来规划。 本篇我们先从百度开始。

百度团队介绍

2019年百度业务低迷,团队和组织架构也不断调整。 从今年的股价走势也可以看出,其发展确实并不顺利。 就市值而言,也不断被美团和京东超越。 从此,世界上没有BAT前端模板框架,只有AT。

然而,百度作为国内老牌互联网公司,尤其是经过多年搜索大量数据的经验,是国内工程师文化最强的公司,被誉为国内互联网的黄埔军校。

因此,虽然业务/市值已经无法与阿里巴巴、腾讯相比,但技术体系仍然处于国内顶尖水平。 下图是百度前端技术体系列表。

以下是百度前端相关技术团队的总体介绍(有公开信息)。

百度FEX

FEX名字的来源是FE代表前端,X代表每个人都可以是独一无二的,不仅无所不知,而且拥有专长。 就像 X 战警一样,每个人都有自己独特的能力,但作为一个团队,他们可以做得更好。 FEX原本属于“Web前端研发部”,现在核心成员均在百度云,致力于将前端技术打造成技术产品。

FEX致力于为百度各产品线在Web复杂应用、全端应用、全端数据监控评估、前端工程优化等方面提升开发效率和页面体验。 是百度内部最具影响力的前端团队。

FEX是百度最早的开源实践者。 先后推出了Tangram、UEditor、FIS、GMU、Chassis、KityMinder等库和工具。 目前主要产品有艾帕格、糖、阿米斯。

百度EFE

百度的EFE(优秀前端)技术体系,前身为ECOM前端团队,通过技术发展逐渐形成了完整的前端技术体系。

EFE技术体系现在由多个遵循该技术体系的前端团队组成。 E(Excellent)代表追求卓越的技术态度。

EFE团队有很多开源项目,其中最著名的就是可视化图表库ECharts,这也是百度内部非常有影响力的团队。

百度EUX

百度企业产品用户体验中心,网站首页披露的信息并不多。 顾名思义,应该负责百度企业产品的交互、视觉、前端。 从团队照片来看,小姐姐的比例非常高。

百度用户体验设计

百度用户体验中心成立于2016年5月17日,由原移动用户体验部(MUX)、搜索用户体验部(SUX)、糯米设计团队、蜂巢设计团队、好123设计团队等组成。合并有影响力的机构,涵盖了百度85%以上的产品体验设计。 团队愿景是打造中国用户体验标杆,成为令人尊敬的用户体验组织。

基础设施

百度智能云

与阿里类似,百度也有智能云服务,为前端提供Serverless函数计算、CDN、人工智能、数据可视化、物联网可视化、安全防护、开发者服务,如AR平台、性能监控APM等场地。

前端应用层框架

LAWAS - 基于 Vue.js 的 PWA 解决方案

Lavas是一套基于Vue的PWA解决方案,可以帮助开发者快速构建PWA应用前端模板框架,解决接入PWA的各种问题,显着提升用户体验和用户留存率,并且开发者无需过多关注PWA开发本身。

Progressive Web App,简称PWA,是一种改善Web App体验的新方式,可以给用户带来原生应用程序的体验。

PWA 能够实现原生应用的体验并不是通过参考某种技术,而是应用一些新技术进行改进,在安全、性能和体验三个方面都有了很大的提升。 PWA 本质上是一个 Web 应用程序。 在一些新技术的帮助下,它还具有Native App的一些特性,并且兼具了Web App和Native App的优点。

但PWA接入还是比较复杂,涵盖了Web App Manifest、Service Worker、Notification API & Push API、App Shell & App Skeleton、HTTPS、SSR等,因此接入成本还是比较高。 Lavas 提供了基于 Vue.js 的完整 PWA 解决方案,可以帮助开发者快速接入 PWA,获得类 Native 的体验。

San - MVVM前端框架

San 是一个 MVVM 组件框架。 它体积小(<15K),兼容性好(IE6),性能优良。 它是实现响应式用户界面的可靠且可靠的解决方案。

通过声明式的类HTML视图模板,San不仅支持原生HTML的所有语法特征,还支持数据到视图的绑定指令、业务开发中最常用的分支和循环指令等,同时保持良好的可扩展性。可用性框架基本上完成了基于字符串的模板解析,构建了视图层的节点关系树,并通过高性能的视图引擎快速生成UI视图。

San相对于Vue、React等前端框架最大的优势就是体积小、性能优异。 从下图可以看出,在Table中进行添加、替换、删除行等操作时,有一定的性能优势。 但其问题在于缺乏生态。 与Vue、React等成熟框架相比,它缺乏工程、状态管理、测试等其他工具。

UI组件库

ECharts - 数据可视化组件库

ECharts是一个使用JavaScript实现的开源可视化库,可以在PC和移动设备上流畅运行,兼容当前大多数浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),并且依赖于矢量图形底层库ZRender提供直观、交互式、高度可定制的数据可视化图表。

ECharts应该是国内使用最广泛的数据可视化组件库了,而且涵盖面很广,从最简单的折线图、柱状图到高级显示,比如地理位置、3D图形等,组件库都可以描述为一切。

除了丰富的图形组件之外,ECharts还可以接收多种数据格式、支持大数据量展示、针对移动终端进行优化、支持数据图表交互和无障碍访问等。

Sugar - 百度数据可视化平台

Sugar基于ECharts和D3的可视化图表,提供报表和数据的大屏可视化服务。 拥有丰富的图表组件,拖拽式编辑,支持下钻、联动等交互式数据分析。

Sugar是一个数据可视化平台,包含数据源、组件库、拖拽布局、炫酷大屏、数据分析、权限控制。 提供整套全流程的数据可视化能力,能够以较低的成本实现企业数据可视化的需求。 。 下图展示了Sugar的大屏能力:

百度智能小程序

与微信小程序类似,百度智能小程序也是依托百度Web/APP生态的小程序。 在渲染层,基于WebView/Native-View,逻辑层通过JSCore获取底层系统能力,同时封装Web/Native组件,还可以连接百度智能云,提供基础云服务和AI服务。

性能方面,只需首次下载,并且还提供预下载、预加载、本地客户端容器等能力,在体验流畅度上远胜传统H5。

百度智能小程序最大的亮点在于,依托百度的生态环境,提供搜索、信息流、百家号、贴吧流量,可以尽可能地获取用户资源。

工程智能

FIS——定制化前端工程建设

FIS3是一款面向前端的工程构建工具。 解决前端工程、性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、嵌入)、模块化开发、自动化工具、开发规范、代码部署等问题。

FIS涵盖了前端工程开发的各个方面:

FIS3还支持插件功能,可以方便在编译、构建、打包等方面进行定制,非常灵活。 但该系统的开发时间比较长。 目前前端工程界已经有了比较完善的基于Webpack、Babel等的实践体系,因此FIS3推广起来相对困难。

amis-Low Code中后台配置平台

amis是一个前端低代码框架,可以通过JSON配置生成各种后端页面。 目前在百度广泛用于内部平台的前端开发。 它已被 100 多个部门使用,并创建了 1.2k+ 页面。

amis 支持以下功能:

通过amis,只需20分钟即可开发一个中等复杂的页面,访问100+部门,创建1.20,000+页面,拥有1.8K活跃页面。

AIPage - 智能建站平台

百度智能门户(AIPage)是百度智能云推出的一款面向中小企业用户智能构建网站和小程序的SaaS应用产品。 用户无需任何编程知识即可上手,像制作PPT一样拖拽式设计创建自己的网站和小程序。 AIPage具有可视化设计、海量模板组件、搜索引擎优化、AI智能获客、全终端、全球化、用户营销等特点,5大终端覆盖PC、H5、百度智能小程序、微信小程序、支付宝小程序,可视化的拖放设计和模板组件可以为客户节省大量的网站建设时间。

总结

百度作为中国老牌互联网公司,有着相当深厚的技术积累。 可见其在应用框架、数据可视化、智能小程序、工程化方面有着不错的积累。 当然,文章内容是根据公开资料整理的,很多内部技术框架还是未知的。 希望有相关信息的同学能够多交流。

这是各大厂商前端技术体系解密系列文章的第二篇。 后续也会有其他大厂的内容,敬请期待。