昨天有幸到阿里巴巴西溪园区参加了第12届D2前端技术论坛，这也是我第三次参加D2。

这是D2的十年，也是我的三年。

2015年第一次参加D2的我正值大三，即将面临就业的我，此刻的心情是即无助又彷徨的。无助的是，作为一名通信工程专业的本科生，我在前端这条道路上只能靠自己去摸索；彷徨的是，作为已经自学一段时间的我，并不知道这个行业未来的发展，甚至不知道未来的工作究竟是怎样的。

我只知道，我喜欢互联网，并向往互联网轻松并又充满激情的工作环境。

注意：本篇不是一个讲解HMR原理的文章，仅仅阐述如何实现接入HMR。

背景

随着部门业务的发展，业务逻辑的不断发展，为了更好的应对业务的多变性，提高项目可维护性，我们提出了基于React的组件化工作流。

React作为构建用户界面的前端库(View Library)，现在已经成为各大公司的技术栈一员，我们组内也早已着手基于React来构建项目，有幸从零开始开发了一些页面，有了一些自己的想法。当使用React来构建一个web页面的时候，我都在思考什么？
这里仅以一个简单的web page为栗，暂且抛开使用Reat-router或Redux的单页应用不说。

谈到React，不得不提到的就是state，相信你一定用过很多次的setState，也知道setState是一个异步方法，正如官网说的：

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Nodejs 作为走向全栈的一把利器，越来越得到前端工程师的追捧，由于Nodejs的非阻塞式IO和异步回调让前端工程师可以无缝隙的从客户端衔接到Node。Node是通过以一个个的package搭建起来的，其中fs作为文件系统模块，让人们可以通过简单的API来实现对文件的增、删、改、减。

注：本文是基于Node 4.x版本讲解，详情查看[官方文档](https://nodejs.org/docs/latest-v4.x/api/fs.html#fs_file_system)

klass.js是一个oop风格的javascript库，提供Javascript传统面对对象的编程风格。

起因

由于部门是从事电商领域，需要全面兼容不同的客户端，这就造成了我们前架构的“繁杂”，以PC端为例：jQuery + jqoteplus + freemarker-Template + React + klass + sass的混搭风你可能真的很少见过（微笑脸）。为了SEO友好，PC端大部分的页面都是使用传统的模版语言来进行后端渲染，前端复用效率比较低，这也就造成了可能只是一个小的需求修改，我们不得不深入到每一个具体的模版页面去修改，降低了工作效率不说，也很繁琐。好像有点跑题了，关于团队的项目后期有机会再聊～