早早聊Vue专场

非常感谢主办方的邀请，今天听了诸位讲师的分享感觉收益匪浅。今天我讲的内容更多是偏向于在H5和web中后台这些场景中，如何实践一个可视化搭建产品，以及涉及到的一些基础技术原理、核心原理实现、PC和H5这边的侧重点、核心组件和周边生态，以及平台扩展性的一些思考；希望通过这次分享，能够让大家了解一些搭建的概念和原理知识，对日后的工作应用有所帮助

说到可视化搭建，大家可能很自然会联想到通过托拖拽拽，然后将一个页面给配置出来。我们这次就会讲一下，集合Vue技术栈，托拖拽拽和配置这个过程中发生了什么，能够让一个页面能够通过这样的方式交付出来。希望大家听完这次分享，能够了解一些搭建的概念和原理知识，对日后的工作应用有所帮助

接下来会给大家看一下H5和中后台场景的搭建出来的一些页面

这个图鲁班H5搭建的一个疫情页面，大家可以通过鲁班H5的线上页面，在线体验一下大家也可以搜索一下码良这个开源项目，这个项目在H5营销场景的成熟度上要完善&健壮很多

这里是配置一个项目的菜单模块，类似于一个菜单配置系统，或者权限系统

这里是一个中后台的Web页面的配置页面，一个常规的CRUD页面。、

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux/Vuex，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了…… 而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：

可以对数据做筛选有按钮可以刷新数据编辑单行数据批量修改和删除查询某列按某列排序隐藏某列开启整页内容拖拽排序表格有分页（页数还能同步到地址栏，不过这个例子中关了）有数据汇总支持导出 Excel 「渲染引擎」那列的表头有提示文字鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多如果往下拖动还有首行冻结来方便查看表头（因为文档页面的限制，这个功能在这里看不出来）

我们的想法是，在中后台领域，不光做一个简单的CRUD页面，而是要做一个经过考验的 crud & 富含最佳实践 crud

后面我们会聊一下为何要做这个？业务研发衍生而来

接下来会结合 vue 简单介绍下，搭建化中的基础原理是什么？

这里的一个 crud页面，其实是通常是两部分组成的，上面的筛选区域 + 下面的表格区域，其实对于我们而言，上面的筛选区域其实是一个表单。点击【查询按钮】，将表单筛选数据发送给下面的表格，表格在收到这个search事件之后，就可以调用自己的搜索方法来触发这个更新表格数据的行为了。对vue而言，这个行为也就是一个method，只是这个行为更多是一个远程搜索行为而已

可以看到，对于一个表单项而言，其可配置的一般也就是一个组件的props了。我们目前的这个系统的组件可配置属性，均已经通过动态表单的schema来进行描述了

而我们上面看到的筛选区域其实也就是一个动态表单+将我们参考了 element-ui/iview/ant-design-vue/vuetify，在api层面将其抹平，提供一个经历了二次封装，可配置schema的表格，表格包含了常见交互的封装，比如发起搜索、点击搜索，分页信息pageSize的重置，异常场景数据的防御式处理也就是我们的页面本身是由一个动态表单

也就是我们的页面本身是由一个动态表单 + 配置式表格而成，我们内部将其称为 search-table

这里会介绍下讲一下，组件/区块之间的通信方案

这个我听刚才的ams 环境也有同学提问了

这里我会进行一些介绍

比如点击了

通过上面的讲解，其实大家应该能够有了一定的感受，刚才的页面的搭建的底层，其实是需要一个动态表单 + 表格的组建的，中后台场景我们总结了下，主要是如下场景：

那么我们就需要针对这些场景，做一下这些业务场景的渲染函数，然后将这些渲染函数组合起来，让其能够支持通信，这样也就是我们所说的渲染器了

早早聊搭建化专场

大家好，我叫我小小鲁班，来自满帮大前端团队。今天我要分享的主题是《如何一个人搭建开源营销H5平台-鲁班H5》
今天是第一次做超过10个人以上的分享，所以会有些许紧张，还请大家多多理解+包涵
第一个链接鲁班H5的GitHub，第二个链接是鲁班H5的在线站点。大家可以在听分享的同时，查看代码 + 体验在线站点+Demo的形式，参与这次分享，效果可能会更佳
推荐大家基于 17112号模板，进行复制，收益Double
给大家一两分钟的左右的时间，来打开GitHub + 在线站点；服务器比较小，如果访问略慢，请大家多多担待。时间差不多了，我正式开始今天的分享

鲁班H5分享大纲

今天要分享的内容大纲主要分成三个大部分（7小章节）：

鲁班H5-基本介绍
核心原理 + feature
展望 + 总结 + FAQ
整体介绍会包含：
- 作品演示+操作演示
- 鲁班的系统架构 + 工作流程
核心原理介绍：即如何通过JSON描述页面、渲染器如何消费JSON，以及用于描述一个H5的JSON是如何生成的
接下来会介绍下鲁班的几个Feature：
- 如何对接后端数据源，让H5能够展示动态数据
- PSD 转换H5（即PSD转H5的原理）
接下来会介绍在前期快速迭代鲁班H5 这样一个重前端，轻后端应用的时候，如何借助Strapi进行API的快速迭代，以满足一个人在迭代项目的时候，对后端的API的强诉求
分享的最后，会聊一下鲁班未来的规划 + 可能性，以及在做一个开源项目中的一些心得和收获

基本介绍

鲁班H5如标题所示，其实是我在19年年中的时候，自己做的一个开源项目，当时的想法其实比较简单：自己没有做过开源项目，加之想找工作，简历上没有亮点。于是就做了下尝试
一些契机+巧合让我开始迭代这个开源项目，差不多占据了 2/3周末的时间。
数据层面的话，目前有4K左右Star。我做了一些数据统计，差不多有20+左右的公司在使用鲁班进行二次开发，分别用于营销、海报制作、工业画册等等场景

演示图

这里的两张图是使用鲁班做的一些DEMO，大家可以简单看一下，今天的分享中，我们会围绕右侧的这个《新冠疫情实时数据报告》来讲一下它是如何制作出来的，以及它背后的原理

编辑器

我们先来简单认识下鲁班现有的一些功能：作品模板、表单数据收集/统计、新建一个作品、基于模板复制作品等
接下来通过编辑某个作品，我们来看下鲁班编辑器
- 最左侧是系统能力模块，主要有：组件列表、页面管理、偏好设置、组件树、数据源中心
- 中间是编辑状态和预览状态的画布
- 右侧是快捷方式：包含了：撤销回退、复制元素、页面，缩小、放大画布、下载海报等常用操作。
- 最右侧是：配置元素的属性、动画模块、动作系统，以及对作品整体的配置，如背景图、背景色、水印等信息
因为这个演示DEMO中也包含了今天分享一个话题：数据源，因此我们来简单演示下数据源的功能
这个demo基本演示了如何对接后端API，来展示新冠疫情报告中现有确诊数量的指标值
主要包含了：配置数据源，请求接口数据，数据展示，最后附带了一个小彩蛋：脚本/动作系统，关于脚本/动作系统，我司坤明大大会分享，我就不班门弄斧了😄

通过视频、前面的的介绍、以及一些小彩蛋，可以简单总结下，鲁班目前主要涵盖了

系统级别的能力：
生态：
开源相关的话：
- 鲁班目前有相对完善的开发、上手文档/教程
- 借助腾讯的吐个槽，我们搭建了社区论坛，加上GitHub issue + GitHub Discussion，以及相关的微信群、钉钉群，大家可以通过以上渠道来反馈意见、建议，参与社区建设 + 项目迭代

在讲解核心原理之前，我们来简单看下鲁班的工作流程和系统架构，来帮助我们更好的理解鲁班的运行机制

结合之前我们看到的视频、demo，我们来梳理下鲁班H5的工作流程：

我们主要会讲解下

页面渲染、编辑器的核心实现
如何配置数据源 + 对接数据源以及其实现原理

架构

鲁班H5的整体架构主要包含了三大模块：

编辑器
Model设计
API Server

首先，我们来看下对一个H5作品的Model层抽象：

作品基本信息、作品下的多页面信息、页面中的多个元素。model层的设计会直接关联页面的渲染逻辑，以及存储时候的数据结构
编辑器中，主要包含了：表单、数据源、组件、动画、脚本，将其称为基础模块是因为：预览 + 编辑器模块都会涉及这些公共模块
为了方便开发者快速开发组件，以及配置组件的属性，我们提供了一些支撑组件，比如图片库、视频库、颜色选择器等等。CommonPluginProps 的配置我们在讲解原理的时候，会做一个小的讲解
最后鲁班H5的数据源、脚本、作品等信息，会借助Strapi进行后端逻辑处理 + 存储，我们稍后也会简单介绍下strapi

接下来我们将会介绍下鲁班H5的核心实现原理

正如前看我们讲解鲁班的Model层设计一样，对于我们经常看到的一个H5作品，我们可以将其抽象为：Work作品、Page、Element

而一个元素，也就是我们日常开发中的组件，它大概会包含一些基础属性：

style
props
id
type
domProps
EventHandler

这个我们可以理解为Element Model，我们就可以通过Model 结合Vue的动态组件，来渲染出一个mini page

我们看下一个疫情实时数据报告的demo 页面，它包含了

背景图、大标题（疫情实时数据报告）、数据相关文案信息
这个页面我们通过JSX 来进行描述这个页面，简单说，即Vue中的 component is 或者是 jsx形式（createElement），根据组件的name/id，以及组件的数据，包含 props、style进行渲染页面
大家可以扫码查看这个在线Demo，上手编辑体验一下
从过这个Demo，可以看到，我们通过json/model可以描述/渲染出一个页面。
那么接下来，我们来看下，在鲁班中如何通过拖拽生成一个H5页面对应的JSON 信息

如何生成JSON

如图所示，即是通过拖拽生成的H5页面对应的JSON信息
里面做了大致三层的逻辑抽象：Work、Page、Model，我们来简单看下这几个Model
那么对于鲁班而言，和刚才的《通过JSON描述页面》一致，我们来看下鲁班在预览/渲染层面的核心逻辑实现，其中 element.previewData 的返回值即一个包含了 element的基本信息，也就是：
- style
- props
- id
- type
- domProps
- EventHandler

我们再来看下鲁班的工作流程，即我们现在讲完了拖拽组件、配置属性、保存数据、预览页面、渲染页面这些，鲁班在拖拽生成页面这一块的核心原理讲解暂时先告一段落

接下来我们来讲一下配置属性的下一块：配置数据源

接下来我们进入「数据源这个话题」

在2020年疫情期间，相信很多同学一天会打开很多次「丁香园」推出的疫情实时数据，查看疫情相关数据+资讯
我们在这里以疫情实时数据为案例，演示 + 讲解下，如何通过数据源功能，实现从API接口中获取疫情相关数据，比如当前确诊人数，然后展示在页面中
接下来我们就正式进入这一小节

我们先来回顾下之前的数据源的小视频，

这个demo基本演示了如何对接后端API，来展示新冠疫情报告中现有确诊数量的指标值
主要包含了：配置数据源，请求接口数据，数据展示这几个过程
DataSource 数据源，即让H5拥有了能够对接了数据源的能力
它可以做什么呢？：获取一个营销活动的基本信息用户信息、业务数据，比如疫情数据，用户当前关注的省份、城市信息等等
右侧是一个数据源Model，它描述了一个数据源的属性和方法，主要包含了URL、请求方式（轮训 or 只初始化一次）、responseHander
接下来我们讲一下数据源的工作流程
在「鲁班的工作流程中」我们配置过一个页面有哪些数据源
在访问一个页面的时候，我们可以从其workJSON的描述中，取得配置了哪些数据源
然后我们调用 DataSource.dispatchRequest 进行分发请求，当数据请求成功之后，会将数据更新至全局维护的一个响应式数据池中，为何数据中心需要是响应式的呢？因为有些时候，数据并不是页面打开的时候，就会有的，或者数据是轮训更新的，这样我们就需要在数据请求成功，更新数据源之后，通过响应式，自动更新UI
通过 Vue2.6的Vue.observable()可以建立一个响应式的数据中心
然后我们在页面中需要使用数据的时候，比如原来的已经治愈人数是一个固定值，我们可以配置textElement.props.text 属性，可以通过写Vue的模板语法（比如在富文本编辑器中写{{a}}），然后鲁班会通过解析每个组件的props中是否包含该语法，当包含的时候，会将匹配到以DC开头的数据，替换为数据中心对应的动态数据
这样整体上就完成了动态数据的请求 + 消费

PSD 转H5

基础认知

我们的目的是：PSD -> H5
根据我们之前的讲解，以《中秋节祝福海报》为例，我们知道一个简单的H5本质上对应的是一个 JSON，如下所述(其中：lbp意思是 lu-ban-plugin)：
那么 PSD -> H5 也就意味着，我们需要把 PSD 文件转换为上面的JSON结构，我们大概看下：
假如我们有某种办法，能够得到PSD中的图层结构，能够对 PSD 文件做以下操作：
把每个图层中的图片保存下来
获得该图层的 左上角 相对于 整个PSD 的相对左上角 的位置（以左上角为坐标原点，向右为X正轴，向下为Y正轴），也就是：{left, top}
获得文字图层中的文字内容、文字大小、颜色、字体等信息
再高级点：图层的渐变色等
如果上面的办法可行，我们可以把 PSD 文件也抽象成一个 JSON
也就是说 PSD 文件是由几个部分组成的：
File Header
Color
Image Resources
Layer And Mask Information
Image Data
我们借助 psd.js 来尝试下对 psd 文件进行一些分析，代码如下，可以copy 运行（前提，需要有一个 psd 文件，拷贝到该脚本的相同目录中）

殊途同归

可以发现，PSD 文件的数据结构和鲁班中的一个作品的数据结构是非常相似的

我们来整理一下二者之间相似之处（如下），是不是发现PSD 的结构和鲁班在很多地方是可以一一对应的上的呢？

image(psd) <-> lbp-picture(luban) text (psd) <-> lbp-text(luban)

实现路径

那么让我们看一下我们之前的假设： 假设我们可以分析PSD的结构，并从中得到图片、文字等图层信息
现在可以告诉大家了，上面的假设，我们完全可以实现。
首先,让我们重新认识一下PSD这个文件格式，通常情况下，我们都知道它是Photoshop导出的文件格式。其实它也是一个有着自己独特风格的文件格式。
我们先来看一份东西： PSD 的文件规范，访问地址：https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/

看一下 PSD文件结构，有一种被计算机网络七层结构支配的恐惧😂

如果大家有项目需求，可以进行fork项目，进行二次开发
建议大家在开发的时候，主要可以关注如何开发组件、数据源如何使用、脚本/动作系统如何最大化发挥作用，比如脚本层面，大家不要把脚本滥用，脚本只是给组件本身增加了额外的小能力，然后尽量做大把逻辑闭合在组件内部，将经常需要改动的属性，比如图片URL、文案信息等等，通过props 暴露给运营、业务进行配置配置
鲁班目前已封装了一个一键安装脚本大家在fork之后，几乎可以通过这个脚本完成所有事情

./luban-h5 init

./luban-h5 rebuild_fe

./luban-h5 start

./luban-h5 stop

如何参与鲁班H5 项目：大家看完这次分享之后，对鲁班H5的基本原理 + 实现机制，有了基本的了解。大家可以去阅读鲁班H5的文档，里面包含了快速上手、原理介绍、创建组件等等。如果大家有贡献PR 的想法，也可以到鲁班的社区/论坛中提问，我们将会及时解答大家的疑惑
大家可以去GitHub找一下相关的issue，有些容易上手/参与其中的改进项，我打上了good first issue的标签，大家有疑惑或者更好的建议，可以直接在相关issue下评论，我会及时和大家沟通的
一个开源项目的迭代除了作者本身的开发之后，也非常欢迎/感谢大家的关注、贡献、意见、指导。

如果将非黑即白叫做 01 思维，那么光谱视角，应该叫 0~1 思维，它呈现的是有层次的渐进过程。

在上面的两段争论中，Vue 和 Vue 作者很容易通过反驳和用实力，得到澄清。但是，不是所有项目，所有人，都像 Vue 和 Vue 作者那样强大，有能力去肃清非议。

有许多弱小的项目和开发者，饱受歧视。

设想你是一个小透明，你在 GitHub 上新建了一个账号和仓库，将自己未经严格测试，甚至跑都还跑不起来的代码，发布上去。

然后有一个人对你说：我在刚工作的时候，我就学会了，代码没有严格的单元测试，代码覆盖率没到 99%，代码 commit messages 不规范，都不好意思放到 GitHub。

你试图反驳说：这些要求太高了。

他更严厉的质疑：这也叫高要求？这不是最基础的常识吗？你平时怎么工作的？

你败下阵来，默默删除了自己的仓库。默默对自己说，我只是一个弱鸡，我没资格开源。

同时你发现，在其它方面，也有很多既得利益者，利用先发优势，用资格论，对你进行自信心的打击。

你不敢让人知道你在学习什么技术，不敢给其他人看你写的代码。

你觉得自己实力不行，不配去看官方文档，不配去问大神问题，不配去看英文材料，不配去看论文，不配获取一手材料，不配发表意见，不配开源代码，不配写文章。

你觉得自己只配从非官方的渠道，看二手的，三手的，非严肃的内容；看不懂也没关系，也没人嘲笑你：这么简单，写得这么清楚，你都看不懂？

最后你发现，你永远学不会真正的技术。你觉得自己果然不适合这个行业。

不。

不是这样的。

你可以随意开源，即便跑不起来，即便没有单元测试，即便你连什么是代码覆盖率都不知道。

你可以去写 TypeScript，即便仅仅是把 .js 后缀改成 .ts。对刚开始的你而言，不改一行代码，你也已足够 TypeScript。

你可以在光谱的最左端停留，这是你的起点。等你变强之后，你可以提升你的项目的完成度和质量，往光谱的右侧移动。

每个人都需要经历起步阶段。所有项目都有希望变得更好，不管当前处于哪个阶段。

你可以去看官方文档，你可能发现，它里面的第一句话是：本文档不要求提前知道 XXX 技术，本文档对于初学者也适用。

你可以去问大神问题，你可能发现，对方比你想象的更乐意帮助你。

你可以去看英文材料，可以去读论文，在合理合法范围内，你可以自由的做任何事。

不必桎梏于某些人划定的界线，即便这个人是所谓的大佬。

普朗克有一句名言：新科学的发展，不是靠使其对手看见真理之光，而是等待对手全死光，新一代熟悉新科学的人成长起来。

希望你能成长起来。

开源的收益之一，是让我意识到，我自己做的一些的小的内容是有价值的，也会有人关注，会督促自己做出更好的内容。

鲁班有两个微信群，差不多会有700人左右，里面有非常多的同学会反馈一些想法、建议，以及提供一些非常nice的idea。

在这里非常感谢关注鲁班H5、给鲁班提供意见、建议、Idea的同学，也要特别感谢给鲁班提过Issue 和 PR的同学，鲁班H5的建设和成长离不开你们，非常感谢!

最后感谢大家来听这场分享，希望能够大家带来一些灵感和收益。

要把计算机的原理弄明白，你推荐哪些书?

就像是剖析一个人，对身体和精神要有了解。对于身体，要能有层次地全面地知道是什么构成（人/系统/器官/组织/..../原子/...）；又要知道这每一层中的元素之间的联系（比如不同组织之间的联系）那么要对计算机的硬件和软件的工作和构建原理有一个清晰的基本的了解，可以看那些书？（英文的也行）本人真的很想对计算机有清晰的系统的认识。

从基本电路到操作系统，看什么书好？

比如我们看到的数字电路，离我们说的声音图片图像等太远。从基本电路到操作系统，如何完整地学习与理解他们，看什么书好

我有种很熟悉的感觉，猜测一下你是想把电子技术基础和现代计算机的内部运行机制联系起来，有时候会有一个疑问：我学的这个电子电路的东东和操作系统会有什关系？我只推荐一本书《穿越计算机的迷雾》_李忠 http://m.douban.com/book/subject/5432475/?session=0ae16a64

这本书里面讲了怎么将高中（还是初中）学的继电器运用到计算机的加法器上面，引出逻辑电路和电子电路，最后再到运算器，控制器，操作系统等等。我全心全意推荐，可能表达的不好，但是看书你应该不后悔，只是不想让好书埋没

可视化搭建技术分享: 鲁班H5&码良

时间：周六(明天:2020-06-06) 上午10:00 ～12:00

地点：五楼 侠客岛会议室

相关资料：
1. gods-pen(码良)：[https://github.com/ymm-tech/gods-pen](https://github.com/ymm-tech/gods-pen)
2. luban-h5(鲁班H5）：[https://github.com/ly525/luban-h5](https://github.com/ly525/luban-h5)

自我介绍：

昵称：小小鲁班（打王者荣耀&程咬金 😂，你以为我玩小鲁班，并不是😄）
之前经历：广告平台公司
项目经历：B端管理系统 & 营销投放系统

分享主旨：
1. 了解可视化搭建基本概念: 5分钟左右
2. 鲁班H5-码良核心实现原理 10 分钟左右
3. 鲁班H5 整体流程-基础架构 10 分钟
4. GitHub 运营： 10分钟
5. QA环节： 10分钟

目标：
- 了解码良之类的可视化搭建原理，更高效的使用码良 & 遇到问题能够高效提问&参与共建
- 了解开源基本内容

What：什么是可视化搭建（Low Code、No Code）

可视化：通过低代码或无代码的形式，搭建<搭建这个词太技术化，或者工地化了 😂>/制作面向用户的产品
举个🌰
- 我们接触到最早的可视化搭建产品估计是 PPT 了
- 游戏编辑器：CocosCreator
- 易企秀、Maka
- 强交互 & 支持编程：iH5、码良、鲁班H5
- 强交互 & 不支持编程：墨刀

What：希望解决什么问题

布局
项目紧急、时间不足
组件复用

How：怎么解决

业务抽象<从业务场景 → 技术层面>

我对可视化搭建的一些认知 · Issue #399 · ly525/blog

技术层面：实现原理

码良与鲁班基本一致
实现原理大纲：从盘古开天辟地开始讲起：😂
1. 基础铺垫：一个H5 页面< A fake h5 page>
2. 基础铺垫：DOM Tree
3. 基础铺垫：一个用 Vue 写的H5 页面
4. 看起来像基础：Vue Template → JSX → Static Render Result → Virtual DOM → JSON
实现原理文档：

https://www.yuque.com/luban-h5/docs/ug7xg5

一部接一步：Show Me the Code
一个H5 页面

Header-Body-Footer.json https://jsoneditoronline.org/#left=cloud.96df8e46dd0844258ef1a0230385afd2

https://jsoneditoronline.org/#left=cloud.96df8e46dd0844258ef1a0230385afd2

DOM Tree
用 Vue 写一个简单的H5 页面 https://codesandbox.io/s/vigorous-sanne-enyof?file=/src/App.js https://codesandbox.io/s/vigorous-sanne-enyof?file=/src/App.js
扩展下思路：
- Vue Template
- → JSX
- → Static Render Result
- → Virtual DOM
- → JSON

https://codesandbox.io/s/vue-ast-to-json-pcr20?file=/index.html

所需资料

1. Vue Virutal DOM、jsx render： https://vuejs.org/v2/guide/render-function.html#Nodes-Trees-and-the-Virtual-DOM
2. Template Compilation: https://vuejs.org/v2/guide/render-function.html#Template-Compilation
3. Compilation Result -> JSON: https://codesandbox.io/s/vue-ast-to-json-pcr20

技术层面：整体概览(架构?不敢用这个词)

Flowchart Maker & Online Diagram Software

前端

编辑器(核心模块）
- 组件系统
  - @luban-h5/components<自建组件库>
  - 三方组件库：vant-ui
  - 「其它想到再补充」
- 脚本
- 数据源
- PSD 转H5
- 「其它想到再补充」

PSD 转 H5 实现 · 语雀

后端

Strapi.js
Done is better than perfect
「其它想到再补充」

计划/展望

完善生态
1. 组件：
  1. 脚手架
  2. 基础能力
2. 脚本
3. 对接开放数据源
完善开发者体验！！
对接社区需求，达到生产可用级别

码良规划？

可能要和坤哥同步一下

收获

业务场景沉淀

营销/宣传推广/广告
1. 拉新
2. 企业宣传
3. 校园招聘
4. 朋友圈广告<新房装修、婚纱店铺推广
电商
1. 6.18 大促（手淘）
2. 商品详情页
3. 有赞电商店铺页
数据统计
1. 表单<钉钉里面每天的体温填报>
社交活动
1. 邀请函：婚礼邀请函<特别到了我这个年纪，最近看到这个是越来越多了🤦‍♂️>
App 集成
1. 手淘
2. 美团魔方

「其它想到再补充」

技术沉淀

沉淀基础组件
沉淀业务组件
沉淀组件库
沉淀通用解决方案：模板
沉淀更多技术产品
- 可视化技术产品
  - H5 编辑器
  - 大屏幕可视化编辑器
  - PPT 编辑器<https://slides.com/>
  - 墨刀<交互工具>
  - Webflow<建站>
  - 更多方向，欢迎讨论-交流<核心宗旨：从业务中衍生、演进、抽象、提炼，通过技术沉淀、技术创新，最终回归业务，通过技术、技术产品为业务赋能，创造业务价值>
- 表单生成器
- 布局生成器
- 待补充
  1. 回归技术基础&思考业务
- 技术基础
  1. 能写一个简单的组件吗？
    1. 比如按钮、输入框、轮播、tab
    2. 能把它发布到 npm 吗？
    3. 动态加载组件技术 → 脚本加载器 → 资源加载器: create.js/require.js/system.js

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

  2.  元素拖拽：reflow/repaint 
  2.  数据请求： 
     1. 请求队列、请求分发
     1. 与平时写业务的请求有何区别？
  4.  H5 在 Native上的时候： 
     1. JSBridge
     1. 跨端？
  5.  可视化： 
     1. Echarts 抽象
  6.  埋点 
  6.  数据分析 
  6.  「其它想到再补充」

回馈业务
- 写业务 === 做产品（思路改变）：因为做鲁班的大部分的代码&技术积累，其实是来自业务
- 现在写的业务代码，其实本身还是产品代码

关于开源

如何看待开源/第一次开源的心态

Vue 3.0 公开代码之后......

[摘录]：

在上面的两段争论中，Vue 和 Vue 作者很容易通过反驳和用实力，得到澄清。但是，不是所有项目，所有人，都像 Vue 和 Vue 作者那样强大，有能力去肃清非议。

有许多弱小的项目和开发者，饱受歧视。

设想你是一个小透明，你在 GitHub 上新建了一个账号和仓库，将自己未经严格测试，甚至跑都还跑不起来的代码，发布上去。

然后有一个人对你说：我在刚工作的时候，我就学会了，代码没有严格的单元测试，代码覆盖率没到 99%，代码 commit messages 不规范，都不好意思放到 GitHub。

你试图反驳说：这些要求太高了。

他更严厉的质疑：这也叫高要求？这不是最基础的常识吗？你平时怎么工作的？

你败下阵来，默默删除了自己的仓库。默默对自己说，我只是一个弱鸡，我没资格开源。

同时你发现，在其它方面，也有很多既得利益者，利用先发优势，用资格论，对你进行自信心的打击。

你不敢让人知道你在学习什么技术，不敢给其他人看你写的代码。

你觉得自己实力不行，不配去看官方文档，不配去问大神问题，不配去看英文材料，不配去看论文，不配获取一手材料，不配发表意见，不配开源代码，不配写文章。

你觉得自己只配从非官方的渠道，看二手的，三手的，非严肃的内容；看不懂也没关系，也没人嘲笑你：这么简单，写得这么清楚，你都看不懂？

最后你发现，你永远学不会真正的技术。你觉得自己果然不适合这个行业。

不。

不是这样的。

你可以随意开源，即便跑不起来，即便没有单元测试，即便你连什么是代码覆盖率都不知道。

你可以去写 TypeScript，即便仅仅是把 .js 后缀改成 .ts。对刚开始的你而言，不改一行代码，你也已足够 TypeScript。

你可以在光谱的最左端停留，这是你的起点。等你变强之后，你可以提升你的项目的完成度和质量，往光谱的右侧移动。

每个人都需要经历起步阶段。所有项目都有希望变得更好，不管当前处于哪个阶段。

你可以去看官方文档，你可能发现，它里面的第一句话是：本文档不要求提前知道 XXX 技术，本文档对于初学者也适用。

你可以去问大神问题，你可能发现，对方比你想象的更乐意帮助你。

你可以去看英文材料，可以去读论文，在合理合法范围内，你可以自由的做任何事。

不必桎梏于某些人划定的界线，即便这个人是所谓的大佬。

普朗克有一句名言：新科学的发展，不是靠使其对手看见真理之光，而是等待对手全死光，新一代熟悉新科学的人成长起来。

希望你能成长起来。

文章已于2019-10-10修

Star？

Star？
如何获得：营销/正常节奏

309: 如果推广自己的产品，有哪些渠道呢？ · Issue #309 · ly525/blog

如何看待？母鸡

如何开始

满足自己的需求即可：做点自己觉得不错的事情/写文章也行/解决某个方面的痛点问题/any
长久考虑：

开源与商业化

License
- 选择
- 案例
开源免费??? 商业化
眼界

开源公司到底能挣钱吗？都是怎么运作的？与开发者和投资人一起聊聊开源商业化在线收听_社会人科技评论_喜马拉雅FM

  - 个人认知：PS、FullPage 等案例，盗版等

技术输出：项目/文章、影响力、Team 招人