空手套白狼-个人互联网草根创业亲身经历

和大多数人同样，我出生寒门学子，没钱没势，全部的一切都是从零开始，只能空手套白狼，本文章主要是为了分享下我我的的创业经历以及一个产品从无到有的过程，后面也会聊到我作H5工具的相关技术方案，但愿能帮助读者在将来的工做或者是创业路上有所帮助。

2010年第一次创业

务实的人都不甘于平庸，我亦如此，也许越是有挑战的东西，我越是感兴趣，创业的想法就像一颗毒瘤一直在我脑中去不掉，大学第一天上学，我把全部的生活费在阿里巴巴上进了一堆跳舞毯，开始了人生的第一次创业，我记得那是2010年上大一的事情了，虽然没有赚回本钱，可是我意外的认识了生产跳舞毯的老板。在学校里卖不完跳舞毯，因而我开了个淘宝店铺在网上卖，虽然网上也没卖完，却阴差阳错的成为了跳舞毯公司的网店兼职设计师（精通美图秀秀），再后面就自学了PS，成为了一个UI设计师，我大学学的是java，由于学习了PS，也就瓜熟蒂落的成了前端工程师。也为接下来的创业奠基了技术的基础。

2012年第一个工做室

大学2年期间，个人前端技术逐渐成熟了，能够作一些官网站了，因而我打算在乐山本地找一家网络公司作兼职，很快我成功的拿到了他们的网站订单，创意的设计风格加上物美价廉，很快成为了这家公司稳定的合做方，因而我在学校里面创立了本身的工做室（馒头工做室）。个人头像也是M这个LOGO也一直沿用至今。

2014年人生第一家公司

14年，咱们都被大学老师赶出去找工做，刚刚出来的我找了一家公司，可是很快就按耐不住想要创业的想法，因而汇集了几个同窗，咱们一块儿创办了一家公司，受到了“云来场景应用”的启发，当时咱们就在想，要是能批量生产H5就行了，咱们提出了“即见即所得”的概念，很快在14年发布了第一款产品"酷APP"，我这里还保留了几张珍贵的截图：

可是当时缺少商业经验以及面临公司生存的问题，没有拿到融资的咱们很快就坚持不下去了，而后项目以失败了结！团队也各奔东西。

小知识：什么是H5？微信扫描如下二维码便可查看H5

H5DS v1.x 版本

虽然第一款自主研发的产品失败了，可是我依然以为这个产品是个好东西，因而贼心不死的我在15年团队解散后发布了另一个编辑器产品（H5DS）也就是如今的1.x版本。界面是参考PhotoShop来作的，是否是感受很像PS？

H5DS v2.x 版本

有了1.x版本，那就有2.x是吧？期间我去了一家创业公司，在那家公司我用下班的业余时间，在H5DS的基础上又重构了一个版本，2.x的编辑器。界面清爽了不少，并且功能也更多了。

H5DS v3.x 版本

16年的时候，大多数创业公司都输给了资本，我所在的创业公司也没法避免，随着上家创业公司的倒闭，我没有立刻找工做，回到家里，我继续捣鼓个人编辑器，因而很快发布了3.x版本。界面从白变黑，整个代码也重写了。能够说3.x版本彻底是重构的。

H5DS v4.x 版本

到如今3年了，由于兼职的缘由，因此进度很慢，后来在一次技术分享会上面，我认识了个人技术合伙人，基于3.x版本，咱们一块儿发布了4.0版本，3.0版本是jquery的版本，那么4.x就是react的版本。

H5DS v5.x 版本

4.x版本的生命周期是很短的，在屡次讨论后，咱们在4.x之上，咱们很快就发布了5.x版本。5.x版本在界面上没有作任何改动，可是代码彻底重构了，5.x也就是如今的版本。今后选择了拥抱react生态，海量react组件库在H5DS中均可以使用。

产品版本总结

任何产品都非一来就完美的，若是是那样，我也不用重构那么多版本了，慢慢改进打磨迭代升级，产品就会愈来愈完善，愈来愈强大。能够看到产品的进步，也能够看到咱们想法的转变，任何一次升级都是为了更好的迎合市场的需求，若是但愿本身的产品能走的更远，那就不要停下来！创业也是同样，并不是一开始就什么都会，什么都有，也是慢慢积累起来的经验和知识，而后学以至用。感受有点像玩游戏打怪升级，一开始在新手村混，而后到普通玩家区，再到高玩（高端玩家）区，一开始就到高玩区，确定死翘翘了！

H5DS产品概述

H5DS（HTML5 design software）h5ds.com 是一款真正意义上的HTML5页面制做工具，很是可贵是这个项目我作了5年，版本也换了好几个，依旧初心不改！将来还有不少个五年，我也但愿本身的工具会越作越好，下面就来聊聊这个花了我无数心血作的产品。

准确的产品定位

相似的竞品也比较多。好比易企秀，maka，兔展，人人秀，wps秀堂，凡科H5等。咱们的产品究竟有何不一样？

普通用户而言：H5是手机上用于营销的滑动页面。

专业技术人员：H5是HTML5的简称，是一门技术方案，滑动页面只是H5的一小块应用领域。

很明显，其余竞品的定位是作营销滑动页面，而咱们的定位是HTML5的编辑器。能够作滑动页面，网站，3D虚拟现实，数据报表，PC网站，小程序，在线PS，在线动画制做等应用。

从一个技术到产品再到销售

任何成熟稳定的产品都不是一朝一夕就能完成的，从1.x到5.x，我从一个技术慢慢也有了产品的思惟，这个项目让我学到了太多的东西，我以为是任何公司都给不了一个技术的东西，作了这个项目，让我有了和可客户坐在咖啡厅唇枪舌战的经历，同时我也有了产品经理的经验，我规划的功能也曾遭受用户的质疑，甚至有用户专门发了一个word文档给我，里面罗列了40多个编辑器改进意见，作一个产品是一件很是有意义的事情，我也兼职了UI的工做，玩起了PS，如何设计交互让用户感受更友好，让我掉了很多头发！这个项目让我体验了设计师，技术，产品，销售，至少哪天不写代码了，还能够去跑下业务！

创业九十九死一辈子

一路走来，我感受本身创业以来什么都缺，缺人才，缺资金，缺资源，的确，创业是很是艰难的，若是说九死一辈子是其余行业的创业，那IT行业真的是99死一辈子。14年在风口的创业公司有多少能活到如今？14年咱们创业的时候也是冲着融资去的，可是如今不是了，我以为首先要活下去，而后再想如何发展壮大，如何赚钱。我所知道的不少IT公司都须要靠融资才能够活下去，一旦资金链断裂了，公司立马倒闭，H5DS在发布4.x版本的时候就已经能作到自负盈亏了，因此目前咱们不须要融资，不用考虑生存的问题，虽然节奏慢了点，可是不至于倒闭作不下去了，先解决温饱，才能够创造价值。我但愿咱们的产品能走的很远，只要活着，就有但愿！虽然看上去比较悲观，可是创业真的很是残酷！我很是庆幸本身没有放弃，一直坚持作本身的产品，算下来，今年是5年了，正好是v5版本。产品也比较接近个人预期。

将来会走的更远

很是庆幸，咱们在第一个5年活下来了，将来咱们会站在巨人的肩膀上，走的更远！至于将来五年的规划，虽然我已经作好了，可是市场永远是变化不可测的，咱们也会不断的更新产品，推出新鲜的功能，只但愿能在这条道路上走的更远！

技术干货分享

聊了太多和技术不挂边的东西，差点忘记本身是一个技术了，接下来会聊一些技术相关的东西，也算是分享一些干货给给位技术同僚！就编辑器技术部分，这里给你们作个分享。

技术选型

技术选型咱们采用react + mobx + koa2 + mysql 总体都是JS技术栈，至于为何要这样选型，由于咱们人少，技术保持统一，方便维护！另一方面缘由是由于咱们是一个创业团队，技术资源很是宝贵，必须尽量的节约开发成本，也是为何咱们会选择纯JS的技术栈，这样咱们每一个人均可以作前端也能够作后端。

mobx 最最核心的概念只有2个。 @observable 和 @observer ，它们分别对应的是被观察者和观察者。这是你们常见的观察者模式，这里使用了ES7 中的 装饰器。参数发生变化时自动触发render更新视图，这个和vue是同样的原理。

之因此没有使用vue是由于咱们也须要react的state配合起来作性能优化以及灵活的数据处理。咱们能够结合防抖函数去作性能优化，控制或者选择性的去更新视图。下面举个例子：

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import debounce from 'lodash/debounce';

@inject('h5ds')
@observer
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
        count: props.h5ds.count  // 默认是1
    }
  }
  
  // 防抖函数控制性能
  updateOtherRender = debounce(() => {
      const { count } = this.state;
      // 若是大于10才会去更新其余地方的视图
      if(count > 10) {
        this.props.h5ds.count = this.state.count
      }
  }, 500)
  
  changeValue = e => {
      this.setState({count: e.target.value}, this.updateOtherRender)
  }
  
  render() {
      return <input type="number" value={this.state.count} onChange={this.changeValue}/>
  }
}

咱们在不少地方都有用到上面这种写法，react提倡的最小模块化，咱们也但愿模块之间的影响会最小，若是一个参数在多个模块中被使用，在快速输入的时候务必会变的很慢。

总体架构

咱们把项目总体划分红了多个子项目api，editor(编辑器）,web（前端管理），admin（后端管理）,app-preview（H5预览），plugins（H5插件部分）。既要拆分，又要作到很小的耦合性是很是困难的，因此咱们作了最大可能性的解耦，架构图以下。

若是想下降耦合度，web，app-preview，plugins都可独立打包，独立部署！若是考虑到部署的便利性，能够打包后合并代码进行部署。

1. 插件说明

咱们把H5里面的元素统必定义为插件，好比图片，文字，音频，形状等元素，这些插件都有一些共同的属性，如宽高，位置，动画效果，交互事件等，因此咱们把非共性抽离出来作成插件，并且插件能够独立开发和维护，完整的插件包括了渲染引擎和数据编辑器，渲染引擎在预览页面和可视化编辑的时候使用，编辑器部分在编辑器中选中对应的图层后使用。

1. 预览页面说明

预览是独立的页面，由于咱们要确保这个页面能够移植，区别于编辑器页面，渲染原理:编辑器输出是一个json数据，这个数据包含了H5页面的全部配置信息，好比每一个插件的大小位置，页面的颜色高度背景等。在独立的预览页面里面只须要解析这个json数据，而后根据json数据渲染页面便可，这里就须要h5ds的页面渲染引擎进行解析渲染。

1. 编辑器内核说明

咱们把editor作成了一个React组件包。能够像下面这样使用：

a. 引入必须的资源包。

<link rel="stylesheet" href="//at.alicdn.com/t/font_1160472_ybl2xl0ao8.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_157397_ze6q8vjbeme.css">
<link href="//cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css" rel="stylesheet">
<script src="//cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
<script src="//cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
<script src="//cdn.h5ds.com/lib/plugins/h5ds-vendor-0.0.1.min.js"></script>
<script src="//cdn.bootcss.com/pubsub-js/1.7.0/pubsub.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="//cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.js"></script>

b. 安装使用H5DS

npm install h5ds --save

import 'h5ds/editor/style.css';

import React, { Component } from 'react';
import H5dsEditor from 'h5ds/editor';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  /**
   * 保存APP
   */
  saveApp = async data => {
    console.log('saveApp ->', data);
  };
  
  /**
   * 发布 app
   */
  publishApp = async data => {
    console.log('publishApp ->', data);
  };

  componentDidMount() {
    // 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }

  /**
   * 使用编辑器部分
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={['demo']} // 第三方插件包
        data={data}
        debugger={false} // debugger=true用于调试插件
        options={{ 
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存应用
          appId: 'test_app_id' // 当前appId
        }}
      />
    );
  }
}
export default Editor;

从插件加载到插件挂载

最初咱们的插件都是打成umd包，而后使用requirejs加载，可是requirejs会判断是否浏览器已经实现了require和define方法。若是浏览器已经自带require和define方法，或者以前已经有一个requirejs脚本执行，那么这个requirejs就会马上中止执行，可能和有些包冲突起来！而后咱们决定取消AMD的加载模式，采用挂载的方式，把插件模块挂载到一个全局变量下面！同时也兼容UMD模式！去掉了requirejs采用挂载的模式代码更少，更快，更灵活！

加入咱们

QQ群：549856478

官方网站：www.h5ds.com