原文链接

—— 以webpack文档部署为例子

Overview

Some friends and I have been running webpack-china for a few months.
After a few months effort, most doc translation job have also been done. We keep tracking the master and you will see Chinese version does not lag behind too much.

pretty much the same and http2 is also applied

(pretty much the same and http2 is also applied)

原文链接

前言

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

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

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

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

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

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

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

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

为什么做直出

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

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

TAT.heyli React移动web极致优化
In Web开发 on 2016年05月30日 by view: 8,156
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: 2,094
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: 3,056
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: 20,490
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的优化,得到不少的性能提升。