原文链接

前言

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

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

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

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

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

读文先看此图，能先有个大体概念：

写在前面

Md2site 是基于 Omi 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。
当我们想把一堆 markdown 文档转成网站时，你可能有许多选择，倘若选择 md2site ，你一定会爱上她。

• 官网：http://alloyteam.github.io/omi/md2site/
• Github: https://github.com/AlloyTeam/omi/tree/master/md2site
• 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html

特性

• 超轻巧，生成的网站除了 Omi 不依赖其他第三方库，超级小的尺寸让你加载更快
• 完整支持 Markdown，使用 markdown 写你的文档或者网站，完整支持 markdown 所有语法
• 响应式，生成的网站是响应式的，手机和 PC 都有不错的阅读体验
• 多语言，天生支持多语言，只需增加修改配置便可。让世界了解你的网站
• 代码美，请记住: 不仅仅是代码高亮，使用 md2site 轻松可以让代码内的某些代码高亮
• 超方便，npm run dev 预览，npm run dist 一键生成网站。不满足现有布局或样式可轻松进行二次开发

通常来说 web 前端实现动画效果主要通过下面几种方案：

• css 动画；利用 css3 的样式效果可以将 dom 元素做出动画的效果来。
• canvas 动画；利用 canvas 提供的 API，然后利用清除-渲染这样一帧一帧的做出动画效果。
• svg 动画；同样 svg 也提供了不少的 API 来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作 svg 线条动画。

Open and modern framework for building user interfaces.

• Omi 的 Github 地址 https://github.com/AlloyTeam/omi
• 如果想体验一下 Omi 框架，可以访问 Omi Playground
• 如果想使用 Omi 框架或者开发完善 Omi 框架，可以访问 Omi 使用文档
• 如果你想获得更佳的阅读体验，可以访问 Docs Website
• 如果你懒得搭建项目脚手架，可以试试 omi-cli
• 如果你有 Omi 相关的问题可以 New issue
• 如果想更加方便的交流关于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)

这次没有带来游戏啦，本来还是打算用一个小游戏来介绍阴影，但是发现阴影这块想完完整整介绍一次太大了，涉及到很多，再加上业务时间的紧张，所以就暂时放弃了游戏，先好好介绍一遍 webgl 中的 Matrix。
这篇文章算是 webgl 的基础知识，因为如果想不走马观花的说阴影的话，需要打牢一定的基础，文章中我尽力把知识点讲的更易懂。内容偏向刚上手 webgl 的同学，至少知道着色器是什么，webgl 中 drawElements 这样的 API 会使用~

一. 前言

当我们选择使用 Node+React 的技术栈开发 Web 时，React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处：

        1. 利于 SEO：React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构，方便 Google 等搜索引擎的爬虫能爬到网页的内容。

        2. 提高首屏渲染的速度：服务器直接返回一个填满数据的 HTML，而不是在请求了 HTML 后还需要异步请求首屏数据。

        3. 前后端都可以使用 js

二. 神奇的 renderToString 和 renderToStaticMarkup

有两个神奇的 React API 都可以实现 React 服务器渲染：renderToString 和 renderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包，都接受一个 React Component 参数，返回一个 String。

也许你会奇怪为什么会有两个用于服务器渲染的函数，其实这两个函数是有区别的：

前言

看到这个标题，估计有同学会想，又要重复造轮子么？其实重复造轮子在大多数情况下确实是不太可取的，既浪费了精力又浪费了时间。但这并不能说明重复造轮子完全不可取，比如你想要某个轮子的精简版，又比如你想学习某个轮子的制造方法，重复造轮子也可以是有意义的。

简介

接下来，我们就来学学某个轮子简易版制造方法，这个轮子就是模块加载工具。

说起模块加载工具，估计大家就会想起 webpack、commonjs 等，更“ 久远” 一点的会想起 requirejs 和 seajs。这些工具都源于前端的模块化思想。

为什么前端需要模块化？这主要得益于前端技术的发展，使得前端不再像以前那样只能展示一下静态内容，撑死加上几个飞来飞去的动画。现在的前端内容越来越丰富，我们可以播放视频，可以协同工作，还可以玩游戏。这就导致了前端代码量剧增。当代码行数噌噌噌往上涨时，模块化思想就自然而然地出来了。

1，HTTP2 的新特性。

关于 HTTP2 的新特性，读着可以参看我之前的文章，这里就不在多说了，本篇文章主要讲一下 server push 这个特性。

HTTP,HTTP2.0,SPDY,HTTPS 你应该知道的一些事

2，Server Push 是什么。

简单来讲就是当用户的浏览器和服务器在建立链接后，服务器主动将一些资源推送给浏览器并缓存起来，这样当浏览器接下来请求这些资源时就直接从缓存中读取，不会在从服务器上拉了，提升了速率。举一个例子就是：