骄阳似火的八月,一年一度的由HTML5梦工场主办的最接地气、最有诚意的 iWeb峰会(HTML5峰会)将于8月12日在北京国际会议中心隆重开启。本次峰会将设置为五大板块:早上行业主题峰会,下午两个前端技术专场、与蝴蝶互动联合主办的HTML5游戏专场、与阿拉丁小程序统计平台联合主办的小程序专场等五大部分。以下为详细议程(点击图片查阅喔):

TAT.heyli 腾讯Web前端大会精彩回顾
In Web开发 on 2017年07月05日 by view: 1,370
0

腾讯Web前端大会已经圆满结束啦。希望大家收获满满干货的同时,能够在现场与大牛们碰撞各种火花。

会前花絮

大会的工作人员,基本都是AlloyTeam的工程师哥哥们,在忙完一天的需求之后,周五晚上纷纷赶赴大会现场筹备,为了准备1000多位参会者的签到礼物、做设备调试,大家奋战至深夜。

原文链接

腾讯 Web 前端大会完美落幕。希望大家能收获满满干货。博主负责大会部份的讲师的遴选。虽然我全程都没怎么听(基本都在安排展位和发微博),但我希望通过选题的角度,以及PPT的内容,给大家分享一点思路和分享的导读。

TAT.heyli 腾讯Web前端大会最强参会攻略
In Web开发 on 2017年06月22日 by view: 4,404
8

本周六就是万众期待的腾讯Web前端大会了,小编这周激动得都睡不着,因为可以见到好多大牛,还可以跟微信群、QQ群里技术聊得嗨的网友面基。下面小编就来介绍一下获取最佳参会体验的小Tips。

原文链接

—— 以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,623
1

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

为什么做直出

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

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

TAT.heyli React移动web极致优化
In Web开发 on 2016年05月30日 by view: 8,868
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,458
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: 4,070
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。