班会第 39 期

[ufologist]

• 技术

  • 我的 ThinkJS 之旅 - 从前端向后端迈进

    ThinkJS 这么玩了一圈下来, 我们发现其实对于前端来说, 后端也没有想象中的那么难, 还能将 ES6/7 这样的新技术运用到项目中, 而不像在浏览器上随便用个什么新特性都畏畏缩缩, 担心兼容性问题, 何乐而不为呢?

    如果你以前感觉前后端跨界似鸿沟般难以逾越, 现在借助 ThinkJS 这么智能的框架, 前端也可以很块上手做后端的开发, 什么接口, 什么访问数据库都是小 case. 况且基于 Node.js 平台从开发到上线到运维都已经很成熟了, 工具和生态圈都很完善而且很活跃, 大型互联网公司早就用于生产环境了, 这方面没有什么后顾之忧.

    前端向后端迈进地主要的难点还是在于模型这一块, 对数据库比较陌生的前端多补补课, 把各种关联模型搞清楚, 不出几日已然就是全栈工程师了.

    俗话说万事开头难, 最后我只想告诉大家: Node.js 已经彻底改变了前端, 扩大了前端的圈子, 每一个前端工程师都应该拿起这个有力的武器, 在这个前端最好的时代, 实现自己的理想.

  • css3 animation 属性众妙

    • animation-delay

      • 轮播

      • 序列动画: 京东2017海外招聘

        

      • 无限循环的序列动画

        负值会让动画从它的动画序列中某位置立即开始

      • 调试动画

        将 animation-play-state 设置为 paused，animation-delay 设置成不同的负值，可以查看动画在不同帧时的状态，便于进行动画调试

    • animation-fill-mode

      • 保持结束状态: forwards

      • 开始前状态

        换句话说，backwards 作用的是 animation-delay 的时间段，应用第一个关键帧的样式。

    • animation-direction
      • 进/退场动画复用
    • animation-play-state
      • 翻页动画控制
      • 轮播的交互
    • animation-timing-function

      • 作用于 @keyframes 中设置的两个关键帧之间的，这一点在该属性值为 steps() 时可明显感知

      • 逐帧动画: 从而告别不可控的 gif 时代

        我们知道，rem 的计算会存在误差，因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话，由于计算的误差，会出现抖动的情况。

  • CSS新特性

    对于前端而言，最深的体会就是“贵圈真乱”。不停的在变，而且变得很快。其实对于技术而言，他将一直是会向前发展的，所以做为前端的我们需要保持一颗热爱学习的心态

    当有新东西出来之时，你没有一定的预知感，没有一定的好奇感，没有一定的尝试心，那么注定你将跟着人家的屁股后面追赶，而且追的好累，还不一定能追上

    

    • CSS Box Alignment: 用来控制元素在容器中对齐方式
    • CSS Grid Layout: 双维布局
    • CSS Shapes: 原来你在 Web 中的任何一个元素都是矩形盒子, shape-outside: circle(50%); 让文本绕着一个圆形的图片进行排列
    • Conditional CSS: @supports
    • CSS自定义属性（CSS变量）
    • CSS混合模式
    • CSS滤镜
    • element() 函数
    • CSS制作路径动画

  • 2016年前端开发者深度调研，看看别人使用什么技术体系

    • CSS
      • BEM
      • Autoprefixer
    • JavaScript
      • Gulp/Webpack
      • jQuery/Loadash
      • React/Vue/Angular
      • Jasmine/Mocha
      • Babel

  • 如何打造公司级公共前端团队 - 滴滴公共 FE 团队的实践和产出

    滴滴公共FE团队现在有十多个小伙伴，男女比例为 1： 1

    主要包含以下几大职能方向：

    • H5运营富交互动画案例方向
    • WebApp和端交互方向
    • 统一支付方向
    • 公司通用类 MIS 业务前端研发和服务配置化方向
    • 数据可视化和地图方向
    • 公司级组件库建设方向
    • 统一Nodejs服务（API、微服务、MIS等）
    • 跨端体验方向
    • 新技术孵化方向

    团队的实践和产出

    • 公司级组件库：魔方

      与公司设计团队和交互团队沟通，至上而下，统一 UI 视觉规范、交互规范
      PC/H5/可视化/前端规范/品牌规范/动画案例库

      技术：

      • PC 端
        • Angular + sass + webpack
      • H5 端：
        • 第一版：zepto + dmu(优化版的 gmu) + styl + handlebars + webpack
        • 第二版：vue + webpack
      • 前端规范:
        • jsbridge: ES6 + (webpack || rollup) + babel
        • 唤起app: 统一的中间页服务 + iframe 请求 schema
      • 数据可视化：canvas 类库封装 + 统一 theme + 上层配置化
      • 地图可视化：底层适配高德和腾讯，采用动态打包(webpack + require.ensure)

    • 公司级统一运营服务：TMS

      前端修改上线尤为频繁、如何解决资源推送 CDN、达到快速、高效、智能的上线流程

      技术：

      • 采用更定制化的Nodejs服务框架（从 Sailsjs 参考了很多） + mongo + pm2
      • 结合公司发布系统、定制日志监控和脚本化运维规范

    • MIS 服务化、配置化、GUI 化以及前后端分类

      随着业务发展，随之配套的各种 MIS 运营、管控、数据可视化系统，业务需求紧急、前端同学人力投入大、联调效率低

      前端同学依赖的构建工具和编辑器各异，有时候初始化开发环境都需要1-2天

      • 与后端同学沟通数据接口规范、推行 RESTFul API、沉淀业务组件库
      • 联调方式以 wiki 为准、统一出处
      • 前后端独立分开部署、后端 API 通过跨域或者反向代理等方式通信
      • 成熟的Nodejs服务化：脚手架、配置化、生产测试环境隔离命令脚本化
      • 微服务化：权限、登录、邮件等微服务化或者 SDK 化

    • 公司级组件库以及MIS系统的技术实践

    • WebApp首页公共化: 滴滴WebApp实践经验分享

      技术：

      • scrat完成打包+构建。
      • gmu实现组件化。
      • 前端模板handlebar。
      • combo服务。

    • H5 统一登录 SDK

      • 采用Facebook的统一登录方案，登录状态ticket缓存在passport域名下，打通滴滴各个域名的登录态
      • 业务线和运营活动页面接入只需引入一个JS，登录SDK提供login、logout、isLogin等接口，使用简单方便

    • Npm Private

      前端项目越来越多，内部产出的工具包也比较多，如何自建一个私有库

    如何打造公司级公共前端团队

    • 技术氛围和培养机制
      • 除了利用合理、稳定、高效的技术解决方案来服务日常的业务支撑外，考虑到前端技术的日新月异，我们也沉淀和创造一个统一的技术氛围
      • 敢于超越，专业性要求高
      • 能够沉浸在技术里面，去思考问题，最终产出
      • 敢于挑战自己惧怕的东西，克服困难，战胜自己
      • 写作&分享: 沟通和沉淀才能让知识更记忆深刻
      • 组内定期沟通：保持每周部分同学的沟通、每周全组周会
      • 公司比较早创办的 DDFE 的前端技术群
      • DDFE 前端技术微信公众号
      • DDFE Weekly
      • DDFE Github blog
    • 鼓励和提倡技术革新
      • 在技术上鼓励创新和不断打磨沉淀优化，鼓励团队的小伙伴通过一些工具和技术手段来解决一些重复性的事情
      • 让团队的很多同学熟悉前端独立部署、如何和不同的端交互以及他们内部相关的技术组成
    • 沉淀和解决业务痛点
    • 有规划、有目标、有理想
      • 除了满足业务需求外，还需要告诉团队方向在哪里、我们的计划是否是可以落地的
    • 客服意识要强

    技术上：一般我自己会保持比较高的阅读范围和一些国内外优秀的技术群

    • 每月一本的技术书籍
    • 定期也会和一些比较资深的前辈取取经
    • 参加一些业内比较知名的大会，比如最近的Qcon
    • 长期保持技术文章沉淀总结分享的习惯

  • 基于 gulp 的前端静态资源版本管理

    浏览器缓存基本认识

    • 强缓存: 200 from cache, 不发请求到服务器

      通过服务器返回response header中的Expires或者Cache-Control的时间来决定是否从本地读取缓存资源

    • 协商缓存: 304 Not Modified, 需要发送一个请求到服务器

      当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304。当浏览器收到304响应时，就会直接从本地缓存读取资源

      协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的

    前端刷新缓存的方式

    • 资源重新命名，如: index.js 更新为 index_a083082f.js
    • 资源链接添加变化的参数，如：index.js 更新为 index.js?hash=a083082f, 一般添加资源更新日期或文件内容的hash值

    从可用性角度说，大型web应用中，资源重新命名是最优的选择，因为新的资源文件不会覆盖正在运行的资源文件. HTML文件强制不缓存，就能很好的达到WEB应用版本更新的目的

    手动修改文件版本号，只适用于非常小型的应用。我们需要的是一个自动化的前端工具来做这件事。

    • gulp-hash-list 读取资源，计算hash值，按指定的格式生成一个清单文件
    • gulp-asset-revision 读取资源列表的清单文件，替换HTML中的js,css等资源引用地址

    其实Gulp生态已经有gulp-rev + gulp-rev-collector这种优秀的方案，但是它只支持生成新的文件名，不支持添加参数的形式。

    而gulp-hash-list和gulp-asset-revision不仅可以支持生成新文件，同时支持添加参数的形式刷新资源版本号，以更新缓存。

  • 滴滴出行·DDFE 技术周刊（第六期） @liangmiao930617

    割裂的前端工程师--- 2017年的预测

    随着业务的不同，每个团队在前端技术点开始有所分化：

    • 重型SPA页面
    • Hybrid方式的Web页面
    • 活动页面
    • 游戏等其他
    • 第一，这表现出前端整个领域发展比较迅速，各方面都有参与到，没有和时代脱节。第二，有各种细分的领域，大家可以做到一专多精，不用害怕失业的烦恼。因为每一个方向都可以做的很深，动力很足。第三，利于交流，各种不同分支的人，可以拿出自己特长的技术来相互交流，取长补短，构建更加系统的知识网络。

    HTML5 元素选择流程图

    

    iSource Browser——在你的 iPhone/iPad 上调试移动端网页

    与君同行的前端周刊（第十一期）

    HTML5游戏引擎深度测评 / 2016年 最火的 15 款 HTML5 游戏引擎

    • Phaser：文档教程，和案例方面都很不错，功能也算的上丰富。非常适合独立游戏开发和小团队使用。
    • Egret：性能不错，在工作流方面支持非常优秀，适应中度和重度HTML5游戏开发，有较多商业项目验证，非常适合商业团队使用。
    • cocos2d-js：老牌引擎，其性能在排名中居中，工作流支持相对完整，推荐。
    • Hilo：阿里前端团队作品，偏向于前端开发工程师，与游戏专业开发距离较大，推荐做HTML5营销小交互的使用。

  • 如何增强单页应用的体验

    所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。

    单页应用的弱点

    • 对搜索引擎不友好
    • 开发难度相对较高

    如何尽可能增强单页应用的操作体验？

    • 路由的规划: 路由可以理解为 URL 与界面状态的对应关系
    • 服务端推送: 即使页面开着不动, 服务端也主动发送消息过来, 通常使用 WebSocket 之类的技术来实现
    • 断线重连机制: 良好的内存管理, 版本的自动升级
    • 操作补偿机制: 连续进行了几步操作之后, 发现之前的操作失败了, 后续处理会非常复杂
    • 本地缓存: 甚至可以让用户脱机使用我们的应用, 把所有产生的这些变更都缓存, 等到联网的时候再批量同步合并回去
    • 热更新: 每次更新的代码模块也推送过来, 并且作为补丁应用到当前系统上
    • 良好的内存管理: 要想让用户能够长期开着应用, 还需要管理好内存
    • 服务端预渲染: 虽然单页应用跟服务端渲染是存在矛盾的

    我们提到了这些能够提升单页应用体验的方式，如果实现出来，肯定是可以让使用者非常愉悦的，但需要冷静权衡理想与现实之间的差距：

    • 我要做的是一个怎样的东西？
    • 我的开发团队是怎样的实力？
    • 我们有怎样的历史负担？
    • 值不值得这么做？
    • 能不能做得了？

  • 前端开发应该怎么学

    作为一个后端程序员，如果不了解前端，属于技能上的缺失，不仅无法独立完成一个完整的产品，而且在思维上不会站在前端程序员的位置上思考，即将来如果成为一个系统设计师，设计出来的软件也很有可能存在缺陷，反之亦然。这也是为什么整个行业越来越鼓吹全栈工程师，这个概念并不是虚幻不实际的，而是企业对人才的一种实实在在的需求，即人们常说的复合人才的一种，全栈工程师对于一个企业来说价值巨大。

    发现以前失败主要是因为自己的重视程度不高，加上前端技术栈确实庞大，如果随随便便就可以学到的技能，那其实本身它的含金量就不高；学习任何一个新技能都应该注重它的学习过程，首先要分析这个技能的主要框架，然后针对框架的每一个知识点，做大量的实践及练习，这样你才能够’快速’学会一门新技能。

    • 前端开发，从草根到英雄（第一部分）: HTML和CSS基础
    • 前端开发，从草根到英雄（第二部分）: JavaScript基础

  • Window 命令行下快速复制文件夹

    # 复制文件和目录树
    xcopy ccc ddd /i/f/s/e/y
    xcopy f:\ccc f:\ddd /i/f/s/e/y
    
    执行的结果如下
    ---------------------------
    F:\ccc\a.png -> D:\ddd\a.png
    F:\ccc\b.jpg -> D:\ddd\b.jpg
    F:\ccc\test\c.gif -> D:\ddd\test\c.gif
    复制了 8 个文件
    ---------------------------
    
    # 添加 /d 参数表示下次只复制更新过的文件
    xcopy ccc ddd /i/f/s/e/y/d
    

• 产品

  • 推荐！设计师与程序员不能错过的 10 个酷站

    • UpLabs 汇集了网站前端作品设计、 Android / iOS UI 设计等大量的资源
    • Collect UI 你可以快速找到登录与付费界面、404 界面、搜索界面等素材
    • SiteInspire 可以说是网页设计师必备灵感来源网站
    • One Page Love 汇集了优秀的单页网站、模版等资源的分享站点
    • Resource Cards 专为设计师、开发者提供各种优秀、丰富的资源网站, 包含了 12 大类，涉及图片、字体、图标、设计工具等设计师常用的免费资源，以及 HTML/CSS/JS、Bootstrap 等开发者需要的免费资源