Techparty-广州Javascript技术专场（学习分享）

上周末（2016/07/31）去了一个技术沙龙学习前端相关的东西，下面是各个主题我印象比较深的。

React + Redux 最佳实践

主题：本次分享，主要从React/Redux相关概念及其工具链，Webpack构建流程，如何Mock数据，如何测试以及一些开发小经验等方面，分享介绍如何使用React/Redux开发一个先后端分离的企业级应用系统。

有意思地方：

1. 规范化

经过开发工具进行代码校验，统一编码风格。

统一的ES6写法（这个见仁见智）。

2. JavaScript测试

进行JavaScript，介绍了测试工具。

• jsdom（构建符合W3标准的DOM）

• mocha（JS测试框架）

• chai（Node BDD/TDD 断言库）

• enzyme（airbnb出的React测试工具）

• isparta（ES6代码测试覆盖率工具）

• nock（HTTP 模拟库）

• redux-mock-store（用于测试异步请求或中间件时，模拟store）

• sion（用于JavaScript的测试监视（spy）、桩（stub）和仿制（mock）功能）

JavaScript to Native

主题：分享目前 JavaScript 编写 Native App 的现状，围绕 React Native 和 Weex 展现 JavaScript 编写原生应用的开发和调试，并讲解其中的一些原理。

有意思地方：

1. 将页面转成原生界面

这个还在理论实践的阶段，原理是页面DOM转成Virtual DOM（虚拟DOM）再而转成原生组件。

PS：有趣是有趣，但未有实践产物，难想象实践效果。（我的以为东西没作出来就急于分享着实很差）

零配置前端开发流程

主题：Web 技术没有独裁者控制，野蛮发展致使开发环境特别混乱。不一样的工具由不一样的群体维护，各玩各的，常会有兼容性的问题。一个 “现代化” 的前端项目先后可能须要花费 10%~15% 的精力维护项目构建的配置，很是浪费时间。在这个分享主题我会示范一个的前端开发流程，把花在配置的时间趋于 0。

有意思地方：

1. 使用的前端框架或工具

浏览器，移动端，后台NodeJS，同构

npm vs bower vs systemjs vs duo

grunt vs gulp vs browserify vs webpack vs rollup

less，sass，postcss，css-module

ES3，ES5，ES6，ES2016

TypeScript，FlowType

React，Angular，VueJS

PS：用的都是有逼格、新的东西。

使用 Meteor + React 进行快速的原型开发

主题：主要介绍 Meteor 框架的特色，如何使用 Meteor 为 React 提供相似 Redux 的先后端数据流控制，什么是 Reactive Programming，如何实现 Optimistic UI，还有基于 websocket 编程，以及 Meteor 的现状和将来。

有意思地方：

1.  Reactive Programming

Reactive响应式(反应式)编程 是一种新的编程风格，其特色是异步或并发、事件驱动、推送PUSH机制以及观察者模式的衍生。reactive应用(响应式应用)容许开发人员构建事件驱动（event-driven），可扩展性，弹性的反应系统：提供高度敏感的实时的用户体验感受，可伸缩性和弹性的应用程序栈的支持，随时能够部署在多核和云计算架构。

PS：简单说就是数据的交互是经过websocket进行实时交互。

概念可参考：http://www.jdon.com/idea/js/rxjs.html

React先后端同构实践

主题：本次分享咱们在使用react+redux过程当中遇到的一些性能瓶颈，咱们在解决先后端代码/API复用、提高工做效率和先后台架构调整中所作的一些尝试及成果。

有意思地方：

1. 同构的思想

同构 JavaScript 应用基于 JavaScript 编写，能够在客户端和服务端运行。正由于此，你只须要写一次代码，就能够在服务端渲染静态页面，还能够在客户端完成复杂的交互。

服务端渲染的页面能够很好解决两个问题：

（1）. 性能

由于相对于静态页面，SPA 须要更多的客户端代码，须要下载数据的体积也更大。这使得手机加载速度很慢，可能会致使一些极端的情况 —— 好比糟糕的用户体验以及收入上的损失等。依据 Microsoft 的一篇文章 ——

PS：Bing 的一项研究代表：页面的加载时间每增长 10ms，站点年度总收入就会减小 $250K。

（2）. SEO

由于单页面应用依赖于 JavaScript 的执行，服务器不会提供它们可能用到的任何 HTML 内容。所以，web 爬虫很难去索引到这些页面。爬虫就是能够像 web 服务器发送请求，而且将结果分析成原始文本的程序，而不须要像一个浏览器运行 JavaScript 那样解释和执行客户端的内容。不久前，Google 优化了搜索引擎的 web 爬虫，如今它也能够抓取基于客户端 JavaScript 所构建的页面了。可是 Bing、Yahoo 以及其余搜索引擎怎么办？一个好的索引对任何公司来讲都相当重要，它一般会带来更多的流量以及更高的回报。

2. 首屏加载速度方式

检测首屏加载速度，分加载模块进行优化，提升首屏加载速度，减小用户等待时间。

 

总结

讲的绝大多数跟React相关，看来他们是很是推崇这个框架，很是提倡组件化的开发思路。除去React的不说，我以为比较重要的是JS测试方面，这方面咱们有待增强。代码规范和工具使用都是老生常谈的，这点不用多讲。最后有一点也必须特别注意是，前端在不断发展，新的好的框架或JS版本，能够考虑使用，让代码写得更优雅。