原文链接

前言

React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言。

为了提高开发效率,去年10月份也开始有意识地私下封装一些组件,并且于今年年初在项目组里发起了百日效率提升计划,其中就包含组件化开发这一块。

本文并不是要谈如何去写一个 React 组件,这一块已经有不少精彩的文章。例如像这篇《重新设计 React 组件库》,里面涉及一个组件设计的各方面,如粒度控制、接口设计、数据处理等等(不排除后续也写一篇介绍组件设计理念哈)。

本文关键词是三个,工程化、快速和可靠。我们是希望利用工程化手段去保障快速地开发可靠的组件,工程化是手段和工具,快速和可靠,是我们希望达到的目标。

前端工程化不外乎两点,规范和自动化。

读文先看此图,能先有个大体概念:
default

TAT.heyli 腾讯新闻React同构直出优化实践
In Web开发 on 2016年06月27日 by view: 4,051
1

原文地址
本文start kit: steamer-react

为什么做直出

就是为了“性能”!!!
按照经验来说,直出,能够减少20% – 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

除此之外,有些特定的业务做直出能够弥补前后端分离带来的SEO问题。像这次选取的腾讯新闻,大多数页面首屏其实都是直出的(但肯定不是React直出)。

TAT.heyli React移动web极致优化
In Web开发 on 2016年05月30日 by view: 7,566
20

原文地址

最近一个季度,我们都在为手Q家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用react 进行重构。选择react,其实也主要是因为它具有下面的三大特性。

React的特性

1. Learn once, write anywhere

学习React的好处就是,学了一遍之后,能够写web, node直出,以及native,能够适应各种纷繁复杂的业务。需要轻量快捷的,直接可以用Reactjs;需要提升首屏时间的,可以结合React Server Render;需要更好的性能的,可以上React Native。

但是,这其实暗示学习的曲线非常陡峭。单单是Webpack+ React + Redux就已够一个入门者够呛,更何况还要兼顾直出和手机客户端。不是一般人能hold住所有端。

2. Virtual Dom

Virtual Dom(下称vd)算是React的一个重大的特色,因为Facebook宣称由于vd的帮助,React能够达到很好的性能。是的,Facebook说的没错,但只说了一半,它说漏的一半是:“除非你能正确的采用一系列优化手段”。

3. 组件化

另一个被大家所推崇的React优势在于,它能令到你的代码组织更清晰,维护起来更容易。我们在写的时候也有同感,但那是直到我们踩了一些坑,并且渐渐熟悉React+ Redux所推崇的那套代码组织规范之后。

TAT.heyli babel到底将代码转换成什么鸟样?
In Web开发 on 2016年05月15日 by view: 1,877
4


原文链接

前言

将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代码转换的想法。本文不是分析babel源码,仅仅是看看babel转换的最终产物。

es6在babel中又称为es2015。由于es2015语法众多,本文仅挑选了较为常用的一些语法点,而且主要是分析babel-preset-2015这个插件(react开发的时候,常在webpack中用到这个preset)。

TAT.heyli 如何写一个webpack插件
In Web开发 on 2016年03月16日 by view: 2,695
4

原文地址

前言

最近由于用着html-webpack-plugin觉得很不爽,于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完,但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首先是进入how to write a plugin看了一页简单的介绍。然后教程会告诉你,你需要去了解compiler和compilation这两个对象,才能更好地写webpack的插件,然后作者给了github的链接给你,让你去看源代码,我晕。不过幸好最后给了一个plugins的API文档,才让我开发的过程中稍微有点头绪。

how to write a plugin这个教程还是可以好好看看的,尤其是那个simple example,它会教你在compilation的emit事件或之前,将你需要生成的文件放到webpack的compilation.assets里,这样就可以借助webpack的力量帮你生成文件,而不需要自己手动去写fs.writeFileSync。

 

TAT.heyli webpack使用优化
In Web开发 on 2016年01月14日 by view: 19,204
20

原文链接

 

前言

本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos

 

为什么要使用Webpack

  1. 与react一类模块化开发的框架搭配着用比较好。
  2. 属于配置型的构建工具,比较用容易上手,160行代码可大致实现gulp400行才能实现的功能。
  3. webpack使用内存来对构建内容进行缓存,构建过程中会比较快。

第3点我想稍微论述一下,如果看过我之前写的《如何写一个webpack插件(一)》,会发现,webpack会将文件内容存在compilation这个大的object里面,方便各种插件,loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式,但感觉webpack更进一步。gulp是每一个任务(task)用一个流,而webpack是共享一个流。

 

dorsywang2

 
本期看点: Abstract框架 AlloyImage 兴趣部落
 
导读:
 
首届AC2015大会即将于2015年12月12日在深圳腾讯大厦总部举行。这是AlloyTeam沉寂一年来首次对外举行的一次技术分享。AlloyTeam前身是负责WebQQ,Q+,QQ互联的腾讯前端团队,最近又历经了兴趣部落、群开放、家校群等一连串QQ拳头项目的洗礼,积淀了不少技术知识,希望借着一年一度的技术分享会对外展示我们一年以来的技术成果。届时,亦会有神秘web游戏项目对外公布。
 
王斌,AC2015的讲师,2012年加入腾讯AlloyTeam,先后开发过Q+互联,兴趣部落。开发过AlloyDesigner, AlloyPhoto等有趣的设计、图像处理开源项目。并为兴趣部落手机端整合出Abstract框架,支撑了这一亿万级业务的稳健发展。

csonlai2

本期看点: 跨webview优化 LocalStorage优化 滚动长列表优化 兴趣部落
 
导读:
 
首届AC2015大会即将于2015年12月12日在深圳腾讯大厦总部举行。这是AlloyTeam沉寂一年来首次对外举行的一次技术分享。AlloyTeam前身是负责WebQQ,Q+,QQ互联的腾讯前端团队,最近又历经了兴趣部落、群开放、家校群等一连串QQ拳头项目的洗礼,积淀了不少技术知识,希望借着一年一度的技术分享会对外展示我们一年以来的技术成果。届时,亦会有神秘web游戏项目对外公布。
 
赖晓思,AC2015的讲师之一,2012年加入腾讯AlloyTeam,曾参与过QQ互联、群基础、兴趣部落等项目的开发,目前负责兴趣部落的页面开发。在公司内率先使用跨webview预拉取数据的性能优化办法。之所以说一文惊人,是因为他成功解决移动端滚动列表的卡顿问题,提出InfiniteScroll.js的解决方案,并将解决滚动列表卡顿的解决方案,包括代码、横向对比的数据分析、渲染分析以及图表及视频的形式发布在内网,获得一致好评。这套方案的结合分析也是他成为高级工程师的一大亮点。他将会在AC大会中分享以上优化心得。
johnnyguo
 
本期看点: 性能 前端发展 首屏优化 兴趣部落
 
导读:
 
首届AC2015大会即将于2015年12月12日在深圳腾讯大厦总部举行。这是AlloyTeam沉寂一年来首次对外举行的一次技术分享。AlloyTeam前身是负责WebQQ,Q+,QQ互联的腾讯前端团队,最近又历经了兴趣部落、群开放、家校群等一连串QQ拳头项目的洗礼,积淀了不少技术知识,希望借着一年一度的技术分享会对外展示我们一年以来的技术成果。届时,亦会有神秘web游戏项目对外公布。
 
郭碧青,AC2015的讲师,2011年加入腾讯AlloyTeam,先后开发过WebQQ,Q+,QQ互联,兴趣部落。在性能优化方面有非常丰富的经验,是腾讯学院前端性能优化课程的讲师,曾参与春节兴趣部落红包项目,将性能优化做到极致,成功应对每秒50万的并发。最近应用React直出的方案实践兴趣部落PC版web的优化,得到不少的性能提升。
weberpan
 
本期看点:React + Redux 前端第三方交互 手Q家校群
 
导读:
 
首届AC2015大会即将于2015年12月12日在深圳腾讯大厦总部举行。这是AlloyTeam沉寂一年来首次对外举行的一次技术分享。AlloyTeam前身是负责WebQQ,Q+,QQ互联的腾讯前端团队,最近又历经了兴趣部落、群开放、家校群等一连串QQ拳头项目的洗礼,积淀了不少技术知识,希望借着一年一度的技术分享会对外展示我们一年以来的技术成果。届时,亦会有神秘web游戏项目对外公布。
 
潘佳韩,AC2015的首位讲师,2012年加入腾讯AlloyTeam,曾参与过兴趣部落、群活动等项目的开发,目前是手Q家校群项目的前端主要负责人,参与项目期间,制定了家校群移动端详情页功能、题库功能、PC家校群功能的交互及技术方案,保证家校群功能的稳定上线,以及对内推广react + redux技术。