和大多数人一样，我出生在一个没有钱也没有权势的贫穷家庭。就是分享我个人的创业经历和一个产品从无到有的过程。后面我也会说说我做H5工具的技术方案，希望对读者以后的工作或者创业有所帮助。2010年第一次创业，踏实的人不甘于平庸，我也是，可能越是有挑战性的事情，我就越有兴趣。创业的念头就像是我心中无法摆脱的毒瘤。大学开学第一天，我就把所有的生活费都放在了阿里巴巴的一堆地垫上，开始了我的第一次创业。记得那是我2010年大一的时候，虽然没有赚回本钱，但还是很意外。我认识了生产舞垫的老板。学校里的地垫卖不完，就开了淘宝店在网上卖。虽然网上没有卖完，但我却在一个偶然的机会成为了一家地垫公司网店的兼职设计师（精通美图秀秀）。后来自学了PS，成为了一名UI设计师。大学学的是java，因为学了PS，自然而然的成为了一名前端工程师。也为接下来的创业打下了技术基础。2012年第一工作室大学的那两年，我的前端技术逐渐成熟，可以做一些官网了，于是打算找乐山当地的一家互联网公司做兼职，很快我就顺利拿到了他们网站的订单，富有创意的设计风格和物美价廉很快成为了这家公司稳定的合作伙伴，于是我在学校成立了自己的工作室（馒头工作室）。我的头像也是M，这个LOGO沿用至今。2014年，人生第一家公司，14年前，我们都被大学老师赶出去找工作。刚找到一家公司，又忍不住马上要创业的念头，就约了几个同学。我们一起创办了一家公司，受到了“云端场景应用”的启发。当时我们就想，如果能量产H5就好了。第一个产品“CoolAPP”发布了，这里还保留着几张珍贵的截图：但那时候，我们缺乏业务经验，面临着公司生存的问题。没有融资我们就坚持不下去了，然后这个项目就以失败告终了！各队也各奔东西。小知识：什么是H5？微信扫描以下二维码查看H5H5DSv1.x版本。虽然第一个自研产品失败了，但我还是觉得这个产品是个好东西，所以在15年团队解散后又出一个。编辑器产品（H5DS）目前是1.x版本。界面是参考PhotoShop做的，有没有PS的感觉？H5DSv2.x版本有1.x版本，然后有2.x的吧？这期间，我去了一家创业公司。在那家公司，我利用下班后的空闲时间重构了另一个基于H5DS的版本，即2.x编辑器。界面更简洁，功能更多。2016年H5DSv3.x版本的时候，大部分创业公司输给了资本，我所在的创业公司也是免不了的。随着之前的创业公司倒闭，我并没有马上找到工作。回到家后，我继续和我的编辑器一起修修补补，很快就发布了3.x版本。界面由白变黑，整个代码都重写了。可以说3.x版本完全重构了。H5DSv4.x版本已经3年了，因为兼职，进度很慢。后来在一次技术分享会上，认识了我的技术伙伴。在3.x版本的基础上，我们一起发布了4.0版本，3.0版本是jquery的版本，那么4.x是react的版本。H5DSv5.x4.x版本的生命周期很短。经过多次讨论，我们在4.x之上，我们将很快发布5.x版本。5.x版本在界面上没有做任何改动，但是代码已经完全重构，5.x是当前版本。从此，我选择了拥抱react生态，大量的react组件库都可以在H5DS中使用。产品版本摘要没有任何产品是完美的。如果是这样，我就不需要重构那么多版本了。慢慢完善、打磨、迭代升级，产品会越来越完善、越来越强大。你可以看到产品的进步，也可以看到我们思维的转变。任何升级都是为了更好地满足市场的需求。如果你想让你的产品走得更远，那就不要停下来！创业也是如此。你不是一开始就什么都知道，你什么都有，但是你慢慢积累经验和知识，然后学以致用。有点像玩游戏打怪升级的感觉。一开始在新手村混，然后去普通玩家区，再去高端（高端玩家）区。一开始，我去的是高档区。H5DS产品概述H5DS(HTML5设计软件)h5ds.com是一款真正的HTML5页面制作工具。难得的是，我在这个项目上干了5年，版本也换了好几次，但初心依旧不改！未来还有很多五年，也希望我的工具越来越好。先说说这个花了我无数心血做出来的产品吧。产品定位准确同类竞品很多。比如益奇秀、maka、图展、人人秀、wps秀堂、凡客H5等，我们的产品有什么不同？对于普通用户：H5是手机端营销的滑动页面。专业技术人员：H5是HTML5的缩写，是一种技术方案，滑动页面只是H5的一个小应用领域。很明显，其他竞品的定位是做营销滑页，而我们的定位是HTML5编辑器。可用于滑动页面、网站、3D虚拟现实、数据报表、PC网站、小程序、在线PS、在线动画制作等应用。从一项技术到产品再到销售任何成熟稳定的产品都不是一蹴而就的。从1.x到5.x，我逐渐从一个技术上思考一个产品。这个项目教会了我很多我认为任何公司都无法提供技术性的东西。做完这个项目，我就有了和客客的顾客坐在咖啡店里的经历。同时，我也有产品经理的经历。该功能也遭到了用户的质疑，甚至有用户给我发了一个word文档，里面罗列了40多条编辑器改进建议。做一个产品很有意义，自己也兼职做UI，玩PS，怎么设计交互让用户感觉更亲切，让我掉了很多头发！这个项目让我体验了设计师、技术、产品和销售。至少有一天我不写代码了，我可以去做生意了！九十九死的创业一路走来。感觉创业以来什么都缺，缺人才，缺资金，缺资源。的确，创业是非常困难的。如果说九死是其他行业的创业，那么IT行业真的是九九死一生。有多少风起云涌14年的创业公司能活到现在？2014年创业的时候，我们也专注于融资，但现在不是。我觉得我们首先要生存下来，然后再考虑如何发展和赚钱。我认识的很多IT公司都需要靠融资才能生存。一旦资金链断裂，公司将立即破产。H5DS发布4.x版本的时候，已经可以自筹资金了，所以我们目前不需要筹资，不需要考虑生存的问题。虽然节奏慢了点，但也不会不破产。必须先解决温饱问题，才能创造价值。希望我们的产品能走的更远，只要我们活着，就有希望！虽然看起来很悲观，但创业真的很残酷！很庆幸自己没有放弃，坚持做自己的产品。算起来今年是5年，刚好是v5版本。该产品也比较接近我的预期。未来我们会走得更远。我们很幸运我们在最初的5年里活了下来。未来，我们将站在巨人的肩膀上，走得更远！至于未来五年的规划，虽然我已经做好了，但市场总是变幻莫测。我们会不断更新产品，推出新功能。只希望我们能在这条路上走得更远！技术干货分享跟技术无关的东西说多了，差点忘了自己是个技术。接下来说说一些技术相关的东西，也算是给技术同仁分享一些干货吧！至于编辑器技术部分，这里分享给大家。技术选型我们采用react+mobx+koa2+mysql进行技术选型。整体就是一个JS技术栈。至于为什么选择这种方式，因为我们人数少，技术保持统一，维护方便！另一方面是因为我们是一个创业团队，技术资源非常宝贵，必须尽可能节省开发成本，这也是我们选择纯JS技术栈的原因，让我们每个人都可以成为一个前端或后端。mobx中只有两个核心概念。@observable和@observer分别对应被观察者和观察者。这是一个常见的观察者模式，这里用到了ES7中的装饰器。当参数发生变化时，会自动触发render来更新view，这个原理和vue是一样的。之所以不用vue，是因为我们还需要react的状态相互配合，进行性能优化和灵活的数据处理。我们可以结合防抖功能来优化性能、控制或选择性地更新视图。这是一个例子：importReact,{Component}from'react';从'mobx-react'导入{注入，观察者}；从'lodash/debounce'导入去抖动；@inject('h5ds')@observerclassDemoextendsComponent{constructor(props){super(props);this.state={count:props.h5ds.count//默认为1}}//debounce函数控制性能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
