首先进行分享的是百度前端技术部资深研发工程师陈骁带来的《搜索组件化的探索与实践》。
为什么搜索要做组件化?
据陈骁介绍,最开始的百度搜索移动端的前端架构是从 PC 时代迁移过来,服务器端使用 Smarty 来渲染模版,实现前后端分离。前端使用 Zepto 来完成交互逻辑,但是它的扩展性比较有限,难以实现对 HTML、CSS 代码的组件化管理,随着移动端的交互形式越来越复杂,原本的方案出现了局限性。
于是,组件化应运而生。组件化是把一些可复用的单元提取出来,通过对几个组件的管理,实现对整个搜索结果页样式的控制,提高开发的效率和横向团队整体升级的效率。
目前百度已经有了非常多的组件化解决方案,包括 Lavas 和 Reac t。可以具体到组件语法、基础框架以及同构区块。
前三部分基本能够覆盖组件的常用语法,而同构在服务器端和浏览器端都能执行,主要有 props、data、components、computed 等。
那么这个组件代码怎么在线上跑起来呢?
首先会在线下通过编译器,把它编译成 PHP、JavaScript 两份原码。PHP 的编译产物完全使用 PHP 的语法,可以在后端形成一个 Server Runtime,在这个过程中,也能够把 PHP 的编译产物渲染成字符串,通过网络传输到浏览器端。而在浏览器端运行时可以用编码产物 Javascript 的组件,渲染成可操作的 HTML 代理结构,包括它的事件和交互。
其中的难点在于怎么把一个组件代码编译成在 PHP、在 JS 都能跑的组件代码。百度会做对于模板和一些表达设计的处理。例如,模板代码有一个文本节点,有一个自定义组件,在编译的过程中,会利用编译器把它转化成抽象语法树,形成树的结构,每个节点都有一些属性和信息,利用语法树的结构和属性信息,就可以通过代码生成器分别生成 PHP 和 JS 的代码。 |
|