-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
314 lines (283 loc) · 17.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>河狸家 Web 开发团队</title>
<meta name="description" content="河狸家 Web 开发团队的履历">
<meta name="keywords" content="河狸家,河狸家 Web 开发,工程师">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="HandheldFriendly" content="true">
<meta name="screen-orientation" content="portrait">
<link rel="icon" href="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_b8e96e866a8997c97a9aef3d9c0cc8e3.png">
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" media="print" href="./index.print.css">
</head>
<body>
<main>
<aside>
<div id="brand">
<img src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_b8e96e866a8997c97a9aef3d9c0cc8e3.png" width="150" height="150" />
<h1>Helijia Web Team</h1>
</div>
<section id="info">
<h1>Info</h1>
<ul>
<li class="home">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-importantdevices"></use>
</svg>
<h3>首页</h3>
<a href="https://helijia.cn/web">https://helijia.cn/web</a>
</li>
<li class="addr">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-place"></use>
</svg>
<h3>地址</h3>
<address>北京: 朝阳区 - 三元桥 </address>
<address>杭州: 余杭区 - 溪望路</address>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-email"></use>
</svg>
<h3>email</h3>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-web"></use>
</svg>
<h3>网站</h3>
<a href="https://www.helijia.com">https://www.helijia.com</a>
</li>
</ul>
</section>
<section id="skills">
<h1>Skills</h1>
<table id="skills-list">
<tbody>
<tr>
<td>JavaScript</td>
<td>重点技能, 全员精通</td>
</tr>
<tr>
<td>HTML</td>
<td>基础技能, 全员精通</td>
</tr>
<tr>
<td>CSS</td>
<td>基础技能, 全员精通</td>
</tr>
<tr>
<td>Elixir</td>
<td>高级技能</td>
</tr>
</tbody>
</table>
</section>
<section id="stacks">
<h1>Stacks</h1>
<h3>Client Side</h3>
<ul class="with-dot">
<li><a href="https://babeljs.io/">Babel</a></li>
<li><a href="https://webpack.js.org/">Webpack 4</a></li>
<li><a href="https://reactjs.org/">React 16</a></li>
<li><a href="https://redux.js.org/">Redux</a></li>
<li><a href="https://ant.design/">Antd</a> / <a href="https://dvajs.com/">DvaJS</a> / <a href="https://umijs.org/">UmiJS</a></li>
<li><a href="https://eslint.org/">ESLint</a></li>
<li><a href="https://jestjs.io/">Jest</a></li>
</ul>
<h3>Server Side</h3>
<ul class="with-dot">
<li><a href="https://elixir-lang.org/">Elixir 1.8</a></li>
<li><a href="https://phoenixframework.org/">Phoenix 1.4</a></li>
<li><a href="https://github.com/elixir-maru/maru">Maru</a></li>
<li><a href="https://www.postgresql.org/">PostgreSQL 10</a></li>
<li><a href="https://github.com/rrrene/credo">Credo</a></li>
<li><a href="https://github.com/parroty/excoveralls">Excoveralls</a></li>
</ul>
<h3>Tool Chain</h3>
<ul class="with-dot">
<li><a href="https://about.gitlab.com/">Gitlab CE</a></li>
<li><a href="https://kubernetes.io/">Kubernetes 1.9</a></li>
<li><a href="https://www.docker.com/">Docker 18</a></li>
<li><a href="https://git-scm.com/">Git</a></li>
<li>Gira</li>
<li><a href="https://www.iconfont.cn/">Iconfont.cn</a></li>
</ul>
</section>
</aside>
<article>
<section id="profile">
<h1>Profile</h1>
<p>河狸家是一家互联网美业服务平台。背后依托大量经过严苛认证、技能精湛的「手艺人」，致力于向数千万的中产家庭提供质优价廉的服务。</p>
<p>我们是河狸家的 Web 技术团队。只要是 Web 相关的业务，无论页面运行于浏览器、小程序、原生 App、PC 环境; 无论是简单的活动页面，还是复杂的产品交互; 无论是纯前端，还是前后端混合的整体应用，我们都会持续高效地交付高质量的产品。</p>
<p>我们目前有 10 位开发工程师，专家及以上的有 4 位，有全栈开发经验的有 6 位。我们的愿景是成为中国顶尖的 Web 开发团队，并且正在为这个目标努力着。</p>
</section>
<section id="key-projects">
<h1>Key Projects</h1>
<dl>
<dt>`Lego` - 乐高<time>2016 <br>|<br> now</time></dt>
<dd>
<p style="background: #000"><img src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_2e86d7fc08b3540358c84052b7ee357b.png" width="100%"></p>
<p>这支新的 Web 开发团队面临的第一个大挑战是如何完成日渐增多的活动页面开发需求。</p>
<p>河狸家是一家跨类目的美业服务平台，有大量的促销场景。落到 Web 开发层面，我们需要开发大量的活动页面，这部分工作占到当时前端所有工作的 60% 左右，需要长期投入至少 2 名开发工程师。活动页面往往是一次性的，这不仅浪费了开发资源，也让工程师无法有产品归属感。我们需要找到高效的方式, 将团队从一次性活动开发的工作中解脱出来。</p>
<p>在这样的情况下，我们启动了乐高项目。
<ol>
<li>第一步将历史活动进行梳理，整理出常见的模块，通过组件化开发提升效率；</li>
<li>第二步开发一个系统，结合第一步的组件化，可以在线将模块进行组合，「搭」出页面，赋能需求方。</li>
</ol>
</p>
<p>经过一个月的开发，我们成功上线了「乐高」系统。这个系统至今仍然在发挥着巨大的作用，已经累计帮助运营产生了数千个活动页面，节省了近万天的开发资源，也进一步改变了我们的开发模式：从直接面向业务，转变为开发组件，以组件化、工程化的方式赋能业务。</p>
<p>在河狸家 Web 团队，我们极为重视开发工程师的时间和效率。标配是 Macbook Pro, 大显示器。我们尽可能少地开团队内部的会议，没有周报（但是会提供场合 show 自己的产出）。</p>
<q>「我准备把乐高开源」—— 杜松 </q>
</dd>
<dt>
`Mobile v3` - M 站 (m.helijia.com)
<time>2016 <br>|<br> now</time>
</dt>
<dd>
早期(在 Web 团队正式成立前) 河狸家只有一些简单的 mobile 页面，这些页面存在的问题有：
<ol>
<li>没有做性能优化, 性能较差</li>
<li>打包流程是手动的，打包后的文件也存入版本控制，导致开发者之间冲突频繁</li>
<li>组件化程度比较低, 开发效率低</li>
</ol>
<p>
因此我们启动了 <code>mobile-v3</code> 项目，重写了 mobile 站，新站域名: m.helijia.com。我们做了很多优化:
</p>
<ol>
<li>采用 Webpack 打包，将资源做 hash 化处理，并统一分发到 CDN</li>
<li>建立 Git 分支和环境的映射关系，分支即环境。结合 Gitlab Pipeline 机制，实现持续集成、持续发布。</li>
<li>引入 React，以函数式、组件化的方式进行开发，大大提升了开发效率</li>
<li>建立内部 NPM 仓库，沉淀基础 ui 库、业务组件库、各类 util 库</li>
<li>强制 code review，所有需求必须 100% 经过 review 才能上线</li>
</ol>
<p>项目很顺利，我们用了一个多月完成了第一版的 M 站。但这只是一个开始，我们不断完善基础设施，升级 babel、Webpack 等主要依赖库，不断抽取公共组件，不断优化开发流程。这个过程至今仍在继续。</p>
<p>我们之所以如此大费周章，是因为我们认为：持续使用的软件必定需要持续的维护，拉长时间来看，长期的维护成本远远大于初期的开发成本。因此我们尽一切手段降低长期维护成本。</p>
</dd>
<dt>
`Quests` - 成长游戏
<time>2017 <br>|<br> now</time>
</dt>
<dd>
<p><img src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_43e4c19c538ae39e2d624df48ffe8846.jpg" width="100%"></p>
<p>和很多创业公司一样，我们团队有很多实习生、应届生，在我们团队中，90后占了一半。如何快速、有效提升大家的编程水平？是否有一种机制让编程技能能稳定提升，直到一个人成为 Web 编程的专家?</p>
<p>我们认为：是的，编程也是一种技能。技能的成长符合 <a href="https://en.wikipedia.org/wiki/Dreyfus_model_of_skill_acquisition">Dreyfus 模型</a>。处于技能不同阶段的人有不同的思维模式，也有对应的提升方向。除了知识和技巧的积累，更重要的是专家级的思维方式 —— 像专家程序员一样思考。</p>
<p>我们启动了「成长游戏」计划，将 Dreyfus 技能模型和刻意练习、游戏化结合，设计了一套成长游戏机制。简单来说，就是:
<ol>
<li>将知识体系进行整理，取出一些点，设计成一个任务，解决一道题目</li>
<li>玩家（团队成员）抽空完成题目。题目有不同难度，对应不同的时间，一般不超过 1 天。</li>
<li>玩家交任务给导师（团队中的专家级程序员），导师 review 任务完成情况。</li>
<li>根据大家的完成情况，进行打分、排名、奖励。进行下一轮游戏。</li>
</ol>
</p>
<small>部分成长游戏的笔记可以在 <a href="https://github.com/helijia-web/quests">这里</a> 看到</small>
<p>这套游戏的精髓在于导师 review 环节。通过和专家的思维模式进行对比，新人逐渐养成了同样的思维习惯。</p>
<p>通过成长游戏，团队的新人从系统化的任务学习中受益匪浅，进步很快。优秀新人轮番涌现。在河狸家入职一周年的新人，都能独当一面。</p>
<q> 「和优秀的人在一起，走起来都是捷径～」—— 落葵</q>
</dd>
<dt>
`Skylab` - 上云
<time>2019</time>
</dt>
<dd>
<p><img src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_2ba07a1f7038615935de3772d53c9349.png" width="100%"></p>
<p>我们自 2016 年开始，在生产环境中使用 Elixir 开发后端和前后端混合型应用，逐渐沉淀了近 20 个 Elixir 应用。</p>
<p>Elixir 是一个较新的语言，生态发展很快，所以三年间，我们的很多应用都已经落后最新的技术一圈了。比如一些应用无法在 Elixir 1.8 环境下运行。</p>
<p>同时我们普遍采用 Edeliver + Distillery 的方式，在本地用脚本发布应用到生产环境。这样发布就难以被记录和追踪。随着全栈工程师人数的增加，这个问题逐渐暴露了出来。</p>
<p>既然我们在 <code>mobile-v3</code> 中已经实现了「分支即环境」，而且运作得很好，我们是否能在 Elixir 项目中应用这个方式？</p>
<p>答案是：yes! </p>
<p>现在我们的开发流程是这样的:</p>
<ol>
<li>开发者基本上只需要写代码，不用关心部署的事情，部署到某个环境，只需要将代码合并到对应的 git 分支即可</li>
<li>有一些分支是被保护的，不能随意合并代码进去。需要提 Merge Request，经过 review 后才能被合并进去。这保证了我们的代码都是经过 review 的。</li>
<li>整体基于 docker 和 kubernetes，非常云友好，打包等都很容易，而且一致性比较好。</li>
</ol>
<p>经过优化后，现在我们的发布流程在 5 ~ 10 分钟左右, 所有人都很开心。</p>
<p>上面说了我们有将近 20 个应用，所有应用都改造一遍成本巨大。好在我们做了一个 hex 包 —— skylab, 应用接入这套发布流程，只需要 5 分钟。</p>
<q>Skylab 将会开源 —— 五柳</q>
</dd>
</dl>
</section>
<section id="concepts">
<h1>Faith</h1>
<ul class="with-dot">
<li><em>函数式 Web 开发</em> 优于 面向对象式</li>
<li><em>Client/Server 混合型开发</em> 优于 单一型</li>
<li><em>持续交付价值</em> 优于 耗时多的一次性交付</li>
<li><em>降低长期维护成本</em> 优先于 减少首次开发成本</li>
<li><em>降低长期维护成本</em> 优先于 性能优化</li>
</ul>
<small>更多理念，我们正在整理成在线电子书, 目前还在撰写中, <a href="https://thinking.hlj.team">点此访问</a></small>
</section>
<section id="members">
<h1>Mentors</h1>
<ul>
<li>
<img class="avatar" src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_74ee11c8165a3438fd9bf0f1f2837f2a.jpg">
<header>
<h3>五柳<span>Team Leader</span></h3>
<small><a href="http://q.pnq.cc">http://q.pnq.cc</a>, <a href="https://github.com/qhwa">@qhwa</a></small>
<p>15 年 Web 开发经验，曾任阿里巴巴技术专家。充满好奇心，为探索「什么是 Web 开发的正确方式」而加入河狸家。</p>
<p>理想现实主义者，喜欢游戏、音乐、旅行、读书。</p>
</header>
</li>
<li>
<img class="avatar" src="https://avatars0.githubusercontent.com/u/769981?s=460&v=4">
<header>
<h3>大鱼<span>高级 Web 技术专家</span></h3>
<small><a href="https://github.com/bencode">@bencode</a></small>
<p>
专注于前端架构和Web开发最佳实践<br />
深耕编程语言和编程方法论<br />
喜欢骑行、笛子、数学和编程
</p>
</header>
</li>
<li>
<img class="avatar" src="https://avatars0.githubusercontent.com/u/3152452?s=460&v=4">
<header>
<h3>临川<span>Web 技术专家</span></h3>
<small><a href="https://github.com/zven21">@zven21</a></small>
<p>9 年全栈开发经验，Elixir 语言爱好者，mipha 及 turbo_ecto 的作者。</p>
<p>喜欢桌游、跑步和瞎折腾。</p>
</header>
</li>
</ul>
</section>
<section id="chat">
<h1>Live Chat</h1>
<p>我们在寻找适合的: </p>
<ul class="with-dot">
<li><a href="https://www.zhipin.com/job_detail/75f39fea6ce582e41nxy2NW0FVs~.html">Web 前端架构师</a></li>
<li><a href="https://www.zhipin.com/job_detail/c8e871a9b88ec2731HJ60ty5ElM~.html?ka=search_list_12">资深 Web 开发工程师</a></li>
<li>对编程有热情的实习生</li>
</ul>
<p>有兴趣了解?</p>
<img src="https://img-ucdn-static.helijia.com/lego/uploads/user/images/original_67f4054a49d9dda36326aa3a5496a6cf.png" width="215" height="215">
<figure>微信扫一扫，在线聊</figure>
</section>
</article>
</main>
<footer>
created by <a href="https://www.helijia.com">helijia</a> with ❤️
<br/>
<a href="https://github.com/helijia-web/helijia-web.github.io">edit on github</a>
</footer>
<script src="https://at.alicdn.com/t/font_1272505_ks4qwjfrbvh.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143258110-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-143258110-1');
</script>
</body>
</html>