摘要

我构建了一个Babel插件，用于将JSX转换成普通JavaScript UI5呈现管理器调用。使用插件创建自定义控件要容易得多。我已经用过一点了，开发"经验"和Angular 2或ReactJS非常相似（当涉及到将HTML写入组件时）。

背景

不久前，大数据的4，我一直在玩React。老实说，比起UI5自己的XML视图，我更喜欢基于JSX的组件。因为我了解到JSX并不是真正的React-specific，一个想法开始在我的脑海中形成。我们希望其中一个视图有一个更"闪亮"的设计，淘客帝国，所以我们决定将materializecss包含进来，以便具有类似表单的材质设计。我不得不做一些自定义控件（输入、选择等），我意识到即使对于简单的控件，构建渲染器函数也是多么痛苦。

两周前，我参加了UI5Con的活动，很高兴看到许多非常好的演示和会议。其中两个特别引起了我的注意：

"UI5进化"由Peter Muessig在那里我们看到，控制渲染器将写在车把。WouterLemaire的"将您的功能插入WebIDE"。在这里，我看到了Wouter的插件，它用纯HTML构建呈现函数。

对声明式控件呈现的需求变得越来越明显。

想法

现在应该很明显了：让我们尝试使用JSX来定义控件的呈现函数。这个想法非常好的一点是，有了正确的JSX透明/解释机制，生成的代码与遗留的/非常旧的浏览器100%兼容。

JSX的另一个非常好的特性是，您可以在其中嵌入正则JavaScript表达式，而不需要专门的语法（如UI5的表达式绑定；angular的指令等）。

实现

好，因此，为这种特性添加支持的一个版本是创建一个专用的babel插件。Babel是一个非常流行的JavaScript transpiler，物联网协议，它允许通过插件进行相当简单的扩展（但没有很好的文档记录）。

在深入了解了Babel自己的存储库之后，我实现了这样一个插件。GitHub上的代码是：ui5jsxrm.

GitHub自述文件中更详细地描述了特性本身。简言之，目前有以下几点可行：

使用基本的HTML标记。动态检测渲染管理器（基于调用渲染方法的对象）。嵌入JavaScript表达式。动态指定类和样式（类似于Angular中的ngClass概念）。编写UI5特定的构造（控制数据、元素数据、可访问性状态）。扩展属性（即基于JS对象的键呈现标签的属性）。

使用插件的运行示例可以在这里找到：GitHub页面。源代码也是存储库的一部分。

更多的例子可以在单元测试中找到。我做了两类测试：

快照测试（测试生成的源代码本身）。执行测试（测试生成的源代码执行的输出）。

一个很好的例子如下：

输入：

输出：

现在你一定在想："在构建应用程序时，有人怎么能真正使用这个？"。好吧，电商平台数据分析，显然浏览器不知道在没有编译的情况下运行JSX代码（即使在开发环境中也是如此）。

所以我们需要一些工具来使用它。我想到了两种可能性：

使用构建脚本（可能带有watch和live-reload功能）。我在我的一个开源存储库（基于Grunt）中使用了这样一个脚本。Gruntfile在这里（当然可以瘦身）。脚本只需要在开发时启动（类似于react和angular自己的CLIs提供的功能）。使用模块加载器，它支持像SystemJS这样的浏览器内传输。在这里，我没有时间研究如何使用它（而不是UI5的标准模块加载系统；可能是不可能的）。

这样的插件显然可以通过UI5的人所说的"UI5 CLI"被包含/可用。

Outlook

好吧，淘客，有一些渲染管理器的方法还不能通过JSX调用（比如渲染图标的方法）。因此，我将来最有可能做的一件事是让JSX能够完全替换普通的Render Manger调用。

根据插件是否获得一些吸引力，可以对生成的代码进行一些优化（现在，生成一些可能不必要的即时函数；这可以进一步改进）。