原文链接

写在前面

Omi框架经过几十个版本的迭代，越来越简便易用和强大。
经过周末的连续通宵加班加点，Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代，但是Omi团队成员都有着克制之心，处女座占了半壁江山，所以Omi的API除了增量的API，其他的历史API没有任何变化。

• Github：https://github.com/AlloyTeam/omi

废话不多说，这就为大家介绍到目前1.0版本为止，关于Omi，你必须知道的点点滴滴。

前言

现在时富媒体时代，图片的重要性对于数十亿互联网用户来说不言而喻，图片本身就是像素点阵的合集，但是为了如何更快更好的存储图片而诞生了各种各样的图片格式：jpeg、png、gif、webp等，而这次我们要拿来开刀的，就是png。

简介

首先，png是什么鬼？我们来看看wiki上的一句话简介：

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

也就是说，png是一种使用无损压缩的图片格式，而大家熟知的另外一种图片格式——jpeg则是采用有损压缩的方式。用通俗易懂的方式来讲，当原图片数据被编码成png格式后，是可以完全还原成原本的图片数据的，而编码成jpeg则会损耗一部分图片数据，这是因为两者的编码方式和定位不同。jpeg着重于人眼的观感，保留更多的亮度信息，去掉一些不影响观感的色度信息，因此是有损耗的压缩。png则保留原始所有的颜色信息，并且支持透明／alpha通道，然后采用无损压缩进行编码。因此对于jpeg来说，通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片，比如照片之类的图片；而png适合需要保留原始图片信息、需要支持透明度的图片。

Webgl的魅力在于可以创造一个自己的3D世界，但相比较canvas2D来说，除了物体的移动旋转变换完全依赖矩阵增加了复杂度，就连生成一个物体都变得很复杂。

什么？！为什么不用Threejs？Threejs等库确实可以很大程度的提高开发效率，而且各方面封装的非常棒，但是不推荐初学者直接依赖Threejs，最好是把webgl各方面都学会，再去拥抱Three等相关库。

上篇矩阵入门中介绍了矩阵的基本知识，让大家了解到了基本的仿射变换矩阵，可以对物体进行移动旋转等变化，而这篇文章将教大家快速生成一个物体，并且结合变换矩阵在物体在你的世界里动起来。

写在前面

Md2site是基于Omi的一款Markdown转网站工具，使用简单，生成的文件轻巧，功能强大。

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

在使用之前的版本的时候，你会发现体验非常好？为什么非常好？因为页面间的切换是无刷新！
无刷新的原理就是，所有的markdown都会被webpack打包到js里，只要在js动态require就行。

这样带来的一个问题便是：如果有海量的markdown的时候，首次加载的时间非常长。

怎么解决？支持动态拉取和解析markdown~~

写在前面

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

阅读本文需要 11m 24s。

CSS Modules介绍

CSS Modules是什么东西呢？首先，让我们从官方文档入手：
GitHub – css-modules/css-modules: Documentation about css-modules

原文链接：https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md

写在前面

通常认为，命令行界面（CLI）没有图形用户界面（GUI）那么方便用户操作。但是CLI比GUI节约资源，在熟悉命令之后，CLI会比GUI更加高效地帮你完成想要的任务。

Omi CLI地址: omi-cli

下面来介绍下pasturn童鞋为Omi开发的CLI的两种使用姿势：

姿势一

原文链接

前言

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)