这里有一个前端工程师改变软件开发行业的机会 - 2

我们的名字叫乘法云。我们在挑战的问题是

从业务想法到软件上线，速度如何提高10x？

在上一篇文章中，列了一张非常抽象，不明觉历的脑图。但其实我们的愿望很简单，大白话就是把代码写得漂亮好懂。这一篇里我们就具体来看一些 TypeScript 代码。

Counter Demo

这个demo要实现的效果是上面这个截图所示。

入口点的代码 index.tsx。MarkupScene 是启动界面用的，指定一个 section 的类定义，把界面渲染出来。

ReactDOM.render(<MarkupScene section={CounterDemo} />, document.getElementById('app'));

对应的 CounterDemo.ts

export class CounterDemo extends RootSectionModel {
    value = 0;
    onMinusClick() {
        this.value -= 1;
    }
    onPlusClick() {
        this.value += 1;
    }
}

对应的 CounterDemo.xml。因为和 CounterDemo.ts 文件名前面部分相同，所以 MarkupScene 可以把这两个文件给关联起来。

<Button @onClick="onMinusClick">-</Button>
<span margin="8px">{{ value }}</span>
<Button @onClick="onPlusClick">+</Button>

基本上就是一个自己实现的 mobx，加上 React 实现了个 Vue。

持久化的 Counter Demo

这个例子和上面一个例子的界面效果是一样的。区别仅仅是第二次进入这个页面的时候，会保持上一次离开时候的 counter 计数。

新建了一个 Counter 类，代表这个持久化的计数器。

@sources.Mysql("default")
export class Counter extends Entity {
  name: string;
  value: number;
}

需要在配置里指定一下，这个 default 的数据库的连接信息。这一步在乘法云上是通过图形界面配置的。这里我们先用 JSON 的形式表达一下：

{
    "Mysql": {
        "default": {
            "host": "localhost",
            "user": "root",
            "password": "",
            "database": "ddarch"
        }
    }
}

以及初始化一下数据库，插入了一条名为 default 的 Counter。这一步在乘法云上也是通过图形界面来配置的。这里我们先用 SQL 的形式表达一下：

CREATE TABLE `Counter` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `value` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

INSERT INTO Counter (name, value) VALUES ("default", 0);

然后修改一下界面的代码 PersistedCounterDemo.ts：

export class PersistedCounterDemo extends RootSectionModel {
  get value() {
    return this.theDefaultCounter.value;
  }
  get theDefaultCounter() {
    return this.scene.load(Counter, { name: "default" });
  }
  onMinusClick() {
    this.theDefaultCounter.value -= 1;
    this.scene.commit();
  }
  onPlusClick() {
    this.theDefaultCounter.value += 1;
    this.scene.commit();
  }
}

对应的视图代码 PersistedCounterDemo.xml 完全没有区别：

<Button @onClick="onMinusClick">-</Button>
<span margin="8px">{{ value }}</span>
<Button @onClick="onPlusClick">+</Button>

然后我们要改一下前端 WEB 的入口点的启动代码：

ReactDOM.render(
    <MarkupScene
        options={{
            host: 'localhost',
            port: 8080,
        }}
        section={PersistedCounterDemo}
    />,
    document.getElementById('app'),
);

这里指定了后端服务的 ip 和端口。然后再启动一个后端服务，把 Counter 这些代码注册进去。后端服务是托管的，乘法云界面上可以做控制。这里就不解释了。

这个例子想要说明的是，我们不是再重新发明 Vue。而是把前端状态管理的范畴从前端拓展到整个应用。你可以说，就是数据库直接绑定到界面了。

下一篇我们会展示更复杂更能体现差异的一些例子，敬请关注。

求前端人才

我们为顶尖工程师提供了与之相配的技术发挥空间、无后顾之忧的宽松工作环境以及有竞争力的薪酬福利。同时也为高潜质的行业新人提供充分的学习和成长机会。

这里，没有996，崇尚高效。
这里，话语权不靠职级和任命，靠的是代码的说服力。
这里，不打鸡血，我们用理性和内驱力去征服各种挑战。
这里，也会有项目排期，但不怕delay，我们有充足的时间，做到让自己更满意。

工作地点在北京西二旗，薪酬待遇见招聘链接：https://www.zhipin.com/job_de...