阿里开源低代码引擎和生态建设实战及思考

阿里开源低代码引擎与生态建设实战

什么是低代码？

低代码平台是一种用于快速构建和开发应用程序的 RAD (Rapid Application Development) 工具。低代码平台所使用的工具和固有元素，使得企业 IT 部门和开发人员能够设计、构建和部署应用程序而无需编写传统的复杂的编程代码。

阿里开源的低代码平台

阿里开源了一款名为DataIde的低代码引擎，DataIde主要被设计用于数据驱动型企业级应用的快速开发。它主要提供以下功能：

• 前端（基于Weex）
• 后端（Node.js,Mysql）
• 可视化界面设计器

DataIde的优势包括：

• 极佳的性能和稳定性，具有多样化的扩展接口
• 独特的组件化设计，易于扩展
• 完备的文档和资料支撑

示例说明

下面我们通过两条示例详细讲解如何使用DataIde设计和构建一个企业级应用程序。

示例一：设计并搭建一个简单博客系统

1. 首先，在DataIde的官网上进行注册账号，然后下载DataIde的桌面应用程序并安装。
2. 通过数据源连接数据库

const getArticles = () => {
  return new Promise((resolve,reject) => {
    yanxuan.query(`select * from articles`,[],(err,res) => {
      if (err) {
        reject(err)
        return
      }
      resolve(res)
    })
  })
}

1. 创造文章列表界面和文章详情页的UI组件。

<yx-list>
  <yx-header title="文章列表" />
  <yx-cell :title="article.title" :description="article.date" @click="view_article(ii)" v-for="(article,ii) in articles" :key="ii"/>
</yx-list>

<yx-list>
  <yx-header :title="article.title"/>
  <yx-cell :description="article.content"/>
</yx-list>

1. 设计界面与事件交互的逻辑

//文章列表界面logic
(function() {
  const event = this.event
  const action_id = event.payload
  return Promise.all([
    getArticles()
  ]).then(([articles]) => {
    this.data.articles = articles
  })
})

//文章详情界面逻辑
(function() {
  const event = this.event
  const [action_id,article_id] = event.payload
  return Promise.all([
    getArticleById(article_id)
  ]).then(([article]) => {
    this.data.article = article
  })
})

1. 把设计好的UI组件、交互逻辑和数据源整合在一起。

<yx-page>
  <yx-headbar title="测试博客系统" />
  <yx-router :root="true" src="list" />
    <yx-router path="list" name="文章列表" :params="{}" src="list" />
    <yx-router path="detail" name="文章详情" :params="[article_id]" src="detail" />
</yx-page>

1. 完成简单博客系统的开发和部署。

示例二：使用DataIde开发一个在线商城系统

1. 首先，同样进行DataIde的注册和桌面应用程序的下载和安装。
2. 连接数据源，并在DataIde中创建相应的数据表。
3. 创造在线商城系统的UI组件。

<yx-list :data-source="'http://localhost/api/goods'">
  <yx-cell :title="good.title" :thumb="good.thumb" :description="good.description" :extra="'¥'+good.price" v-for="(good,idx) in list" :key="idx" @click="buy_clicked(idx)" :link="true" />
</yx-list>

1. 设计商城系统的逻辑和网络请求接口。

//list logic
(function() {
  const event = this.event
  return Promise.all([
    gmGet('http://localhost:3000/api/goods')
  ]).then(([res]) => {
    this.data.list = res
  })
})

//buy clicked logic
(function() {
  const [good_idx] = this.event.payload
  const gid = this.data.list[good_idx].id
  return Promise.all([
    gmGet('http://localhost:3000/api/goods/'+gid)
  ]).then(([res]) => {
    if (res.stock < 1) {
      throw new Error('out of stock')
    } else {
      return res
    }
  })
})

1. 整合门面和后端代码。门面代码主要完成UI组件、逻辑和数据源之间的联络和控制，后端代码实现了商城系统中的业务逻辑和数据源的操作。

<yx-page>
  <yx-headbar title="在线商城" />
  <yx-router ref="container" :root="true" src="list" />
    <yx-router path="list" name="商品列表" :params="{}" src="list" />
    <yx-router path="good_detail" name="商品详情" :params="[good_idx]" src="good_detail" />
</yx-page>

1. 完成在线商城系统的开发和部署。

以上是两个基于DataIde开发的企业级应用程序的示例。DataIde作为一款优秀的低代码引擎，为企业和个人开发者提供了快捷、便利、高效的开发工具和环境，相信在不久的将来，它将会成为业界和开发者们喜欢和青睐的首选开发工具之一。