金融壹账通前端H5技术周报(第五期)

本期导读: 原创专题给大家带来来自掌雄的js端机器学习的探秘，同时分享我在制作h5页面生成工具的整个心路历程，另外，诗沂对咱们混合编程的js端进行了解析，希望对大家有帮助。语言基础带来nodejs的异步讨论和css的书写模式。小程序还不够热闹，PWA又出来了，工具框架篇带你来围观，同时webpack2也出来了，又有升级任务了。前端视界是诗沂做的图片粒子化效果，欢迎赏鉴

banner.jpg

原创专题

1) 从零打造在线版H5页面生成器 @曾文富

想必你一定使用过易企秀或其它微场景生成工具制作过炫酷的h5页面，除了感叹其神奇之处有没有想过其实现方式呢？从设计者的角度来看待问题，会有不一样的收获，本文将从零开始，使用node技术来设计实现一款精简版的易企秀

2) convnetjs - 机器学习入门探秘 @吴掌雄

2016年是人工智能发展得最为迅速的一年，涌现了许多机器深度学习技术框架，当中不乏前端JavaScript写的机器深度学习框架 - convnetjs，本文为大家探秘机器学习的基本原理与讲解入门例子

3) 混合开发H5通信方案 @胡诗沂

现在，混合开发是APP的主流开发模式——NATIVE+H5。金科支持的各site也是采取同样的做法。混合开发的优点很多，百度一下就知道，不是本文的重点。这里简单介绍下hyperion的工作原理，重点分析亿账通运营服务小组现在使用的方案——H5框架里面耳熟能详的两个hyperion JS文件走读下代码。

语言基础

1) Node.js 异步最佳实践 & 避免回调地狱 @边城 · 译

本文涵盖了处理 Node.js 异步操作的一些工具和技术：async.js、Promise、generator 和 异步函数。阅读这篇文章之后你会知道如何避免臭名昭著的回调地狱！

2) 一个微信面试题引发的血案 --[译] 什么阻塞了 DOM？ @接灰的电子产品

译者注：昨天一篇工作仅一年的前端工程师面试几个大厂的文章 （1月前端面试记） 在掘金火爆起来。一方面大家觉得作者太厉害了，工作近一年，能力竟然这么强（大叔我表示惭愧），另一方面几个微信面试题引起很多讨论。其中我比较感兴趣的一个题目是关于JavaScript和CSS阻塞DOM的。老实话讲，我以前也没太关注过，与其哀叹自己研究的不够深入，不如我们去学习弥补一下吧。这篇文章是我今天读到的，感觉不错，翻译一下给大家共享。

3）CSS 书写模式 ——24ways @哈呼哈哈呼 · 译

无论你知道与否，书写模式是我们创建的所有布局的首要基石。 你可以做我们已经做了25年一直在做的事，并且舍弃你的页面的默认的从左至右的方向，水平的从上至下的书写模式。或者，你可以进入充满新的可能性的新世界，在这里内容布局流动在另一个方向。

工具框架

1) Webpack 2 快速入门 @dwqs · 译

自简单来说, Webpack 是一个针对 JavaScript 的打包工具. 然而, 随着 Webpack 日渐流行, 它逐渐演变成了前端代码的管理工具(不论是人为故意还是社区推动的).

2) 下一代 Web 应用模型 —— Progressive Web App @黄玄

试想一下，有这么个世界，我们不仅可以借助不断增长的 NPM 模块仓库，还可以借助整个 Bower 仓库来实现所有客户端需求，从而可以创建出高性能的、数据驱动的、跨平台的桌面应用程序。

3) 从零开始React服务器渲染 @TAT.rocket

当我们选择使用Node+React的技术栈开发Web时，React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处：
1.利于SEO：React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构，方便Google等搜索引擎的爬虫能爬到网页的内容。
2.提高首屏渲染的速度：服务器直接返回一个填满数据的HTML，而不是在请求了HTML后还需要异步请求首屏数据。
3.前后端都可以使用js

前端视界

pc端查看可直接点击链接，手机端查看请识别二维码

1) canvas粒子动效@胡诗沂

qr.png