webapp培训

上周三下午，培训我坐在培训教室的培训最后一排，看着前排三个学员同时卡在同一个页面跳转问题上。培训讲师老周没急着讲代码，培训反而问了一句：“你们平时用手机点外卖，培训从选菜到下单，培训中间要经过几个页面？培训”教室里安静了两秒，然后有人开始掰手指头数。培训这就是培训webapp培训的第一课——不是教你怎么写代码，而是培训让你先意识到，你每天都在用的培训东西，其实是培训个复杂的系统工程。

老周把webapp拆成三个层面来讲：壳、培训肉、培训魂。培训壳是外壳，就是那个浏览器里的页面框架；肉是交互逻辑，按钮点了要跳转，数据提交了要有反馈；魂是性能优化和用户体验，页面加载超过三秒，用户就跑了，这道理谁都懂，可真正写代码时没人管这个。他举了个例子，说有个学员做了个功能齐全的购物车，但结算按钮放在页面最底部，用户得滚三屏才能看到。这种错误不是技术问题，是压根没把自己当成用户。

培训第三天，开始接触真东西。老周让所有人把手机浏览器打开，访问一个他自己写的demo页面——一个极简的待办事项应用。加载速度很快，点添加任务时，键盘弹出来，输入框自动上移，没有遮挡。删除任务有个滑动动画，松手时带一点回弹。这些细节平时没人注意，但缺了任何一个，用起来就“不对劲”。老周管这叫“手感”。他说webapp和原生app最大的区别在于，webapp跑在别人的浏览器里，你控制不了环境，只能靠代码去适应各种奇怪的情况。

有个学员问，那直接学原生开发不就行了？老周笑了，说你看你手机里那些大厂应用，淘宝、京东、美团，很多页面其实是webapp套了个原生壳。为什么？因为webapp改个bug不用等应用商店审核，发个新版本当天就能上线。他指着自己的手机说，昨天他刚给公司的一个活动页换了张banner图，从改代码到线上生效，前后不到二十分钟。这种速度，原生开发做不到。

但webapp也有让人头疼的地方。安卓和iOS的浏览器渲染差异，老机型的内存限制，网络差时资源加载策略——这些坑他一个个带我们踩。最典型的是那个字体闪烁问题，页面加载时先显示默认字体，几毫秒后突然变成设计字体，看起来很廉价。解决办法是预加载字体文件，但预加载又会影响首屏速度。这种两难选择在webapp开发里到处都是，没有标准答案，只能根据实际场景取舍。

培训最后一天，老周让每个人做一个简单的产品展示页，要求必须包含列表、详情、搜索三个功能。有个学员做了个二手书交易页面，搜索框支持模糊匹配，列表页有懒加载，详情页能放大图片。老周看了一圈，说这个页面在4G网络下打开要2.8秒，太慢了。他打开开发者工具，指着网络请求列表说，这里有七个请求是重复的，合并掉能省一半时间。那个学员当场改代码，再测，1.6秒。老周说，这就是webapp培训的意义——不是让你背几个API，而是让你学会用工具去看自己的代码到底有多笨重。

培训结束那天，老周没讲什么总结性的话。他把自己的demo页面源码发到群里，说你们回去看看这个文件命名方式，每个组件都带版本号，以后改起来不会乱。我回家打开那个源码，发现注释写得跟聊天记录似的——“这里别动，动了会出bug”、“这个写法很蠢但能跑，别改”。看着看着就笑了，这大概就是真实世界里的webapp开发——没有那么多高大上，全是一个个细节堆出来的。