Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi
写在前面
Omi框架经过几十个版本的迭代,越来越简便易用和强大。
经过周末的连续通宵加班加点,Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化。
废话不多说,这就为大家介绍到目前1.0版本为止,关于Omi,你必须知道的点点滴滴。
强大的Store系统
先说说Store系统是干什么的!
当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在Omi框架里,组件通讯非常方便:
- 通过在组件上声明 data-* 传递给子节点
- 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射)
- 声明 group-data 把数组里的data传给一堆组件传递(支持复杂数据类型的映射)
- 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法。比如(标记name、标记omi-id)
当然你也可以使用event emitter / pubsub库在组件之间通讯,比如这个只有 200b 的超小库mitt 。但是需要注意mitt兼容到IE9+,Omi兼容IE8。
虽然组件通讯非常方便,但是各种数据传递、组件实例互操作或者循环依赖,让代码非常难看且难以维护。所以:
Omi.Store是为了让 组件通讯几乎绝迹 。虽然:
Redux 的作者 Dan Abramov 说过:Flux 架构就像眼镜:您自会知道什么时候需要它。
但是,我不会告诉你
Omi Store 系统就像眼镜:您自会知道什么时候需要它。
因为,Omi Store使用足够简便,对架构入侵性极极极小(3个极代表比极小还要小),让数据、数据逻辑和UI展现彻底分离,所以我的观点是:
如果使用Omi,请使用Omi.Store架构。
比如连这个Todo例子都能使用Omi.Store架构。如果连复杂度都达不到Todo,那么Omi其实都没有必要使用,你可能只需要一个模板引擎便可。
关于Store详细的用法,后续再写文章阐述。
简易的插件体系
- omi-finger Omi的AlloyFinger插件,支持各种触摸事件和手势
- omi-transform Omi的transformjs插件,快速方便地设置DOM的CSS3 Transform属性
- omi-touch Omi的AlloyTouch插件,Omi项目的触摸运动解决方案(支持触摸滚动、旋转、翻页、选择等等)
- omi-jquery-date-picker Omi的时间选择插件,支持各种时间或者时间区域选择
omi插件主要是赋予dom能力,并且能和instance关联。如果主要是结构行组件,就写成Omi组件,和插件也没有太大关系。所以omi的插件不会有太多。
完善的脚手架
你可以安装omi-cli,用来初始化项目脚手架。
$ npm install omi-cli -g //安装cli
$ omi init your_project_name //初始化项目
$ cd your_project_name //转到项目目录
$ npm run dev //开发
$ npm run dist //部署发布
项目脚手架基于 Gulp + Webpack + Babel + BrowserSync ,并且支持sass生成组件局部CSS
支持HTML、JS、CSS/Sass文件分离的目录方式,也支持HTML、JS、CSS 全都写在JS里的方式,两种方式可以同时出现在项目里,按需选择。
其他
- 大量的示范例子(md2site、qq-nearby实战、各种example)
- 双版本支持,(omi.js和omi.lite.js)
其中omi.lite.js是不包含 mustache.js模板引擎的omi.js。Omi团队认为:
1.随着ES的发展,模板字符串和ES语法强大到可以不使用模板引擎(仅限于all in js的代码目录组织方式)
2.让开发者重写 Omi.template 去使用任意模板引擎
- 良好的兼容性,支持IE8(请自行引用es5-shim或es5-sham)
本来没有支持IE8的打算,后来发现babel加两个插件便可以支持IE8:
query: {
presets: 'es2015',
plugins : [
"transform-es3-property-literals",
"transform-es3-member-expression-literals"
]
}
- 轻量迅速的DOM Diff 和 HTML Parser
- 更智能的事件绑定,如:
class Hello extends Omi.Component {
handleClick(evt){
alert(evt.target.innerHTML)
}
render() {
return `
<div>
<h1 onclick="handleClick">Hello ,{{name}}!</h1>
</div>
`
}
}
你可以传递任意参数:
class Hello extends Omi.Component {
handleClick(str, num){
}
render() {
return `
<div>
<h1 onclick="handleClick('test', 1)">Hello ,{{name}}!</h1>
</div>
`
}
}
强大的Omi团队
- 来自AlloyTeam、Mars Holding、腾讯、TalkingCoder、阿里、微软的优秀的工程师会协商规划好Omi发展路线,跟进优秀的思想和模式
- 来自AlloyTeam的工程师会跟进Omi使用者的任何问题
相关
- Omi的Github地址https://github.com/AlloyTeam/omi
- 如果想体验一下Omi框架,可以访问 Omi Playground
- 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
- 如果你想获得更佳的阅读体验,可以访问 Docs Website
- 如果你懒得搭建项目脚手架,可以试试 omi-cli
- 如果你有Omi相关的问题可以 New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
Omi v1.0震撼发布 - 令人窒息的Web组件化框架的更多相关文章
- Omi v1.0震撼发布 - 开放现代的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- Omi v1.0.2发布 - 正式支持传递javascript表达式
原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标 ...
- 2017年试试Web组件化框架Omi
Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/omi ...
- 跨年呈献:HP-Socket for Linux 1.0 震撼发布
三年,三年,又三年,终于,终于,终于不用再等啦!就在今天,HP-Socket for Linux v1.0 震撼发布!还是一样的接口,一样的高效,一样的简便,一样的味道. HP-Socket ...
- PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区
PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区 PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具
- [译]ABP v1.0终于发布了!
ABP v1.0终于发布了! 今天是个大日子!经过约3年的不断开发,第一个稳定的ABP版本,1.0,已经发布了.感谢为该项目做出贡献或试用过的每个人. 立即开始使用新的ABP框架:abp.io/get ...
- mysql awr v1.0.1发布
现发布mysql awr v1.0.1 修复问题: 1.galera cluster下flush table/index_statistcs时如果系统中业务ddl频繁可能会导致很多进程处于prepar ...
- Rookey.Frame v1.0 视频教程发布了
经过昨天几个小时的折腾, Rookey.Frame v1.0开发视频教程终于发布了,由于是第一次做视频有很多地方做的不够好,后续我会慢慢改进,争取将视频教程做好. 本期发布视频: (一)Rookey. ...
- JuiceFS v1.0 beta3 发布,支持 etcd、Amazon MemoryDB、Redis Cluster
JuiceFS v1.0 beta3 在元数据引擎方面继续增强,新增 etcd 支持小于 200 万文件的使用场景,相比 Redis 可以提供更好的可用性和安全性.同时支持了 Amazon Memor ...
随机推荐
- 关于WIN10开机无法输入密码的问题
昨日,电脑 遇到了开机无法输入密码的问题,神烦. 作为一个计算狗,怎么能直接装系统(百度了一堆方法,装系统,果真万能)呢. 所以,深刻的分析了下. 1 .首先说明基本情况. 计算机品牌:ASUS 系统 ...
- InfluxDB安装及配置
这是我之前整理的InfluxDB安装及配置的笔记,这里记录下,也方便我以后查阅. 环境: CentOS6.5_x64 InfluxDB版本:1.1.0 一.安装 1.二进制安装 这里以centos6. ...
- Disruptor深入解读
将系统性能优化到极致,永远是程序爱好者所努力的一个方向.在java并发领域,也有很多的实践与创新,小到乐观锁.CAS,大到netty线程模型.纤程Quasar.kilim等.Disruptor是一个轻 ...
- oracle_plseq客户端中文乱码
1.登陆plsql,执行sql语句,输出的中文标题显示成问号????:条件包含中文,则无数据输出 输入sql语句select * from V$NLS_PARAMETERS查看字符集,查看第一行val ...
- PHP反射之类的反射
最近在琢磨如何用PHP实现站点的插件功能,需要用到反射,于是现学了一下,笔记如下: class Person { public $name = 'Lily'; public $gender = 'ma ...
- Tried to obtain the web lock from a thread other than the main thread or the web thread. This may be
有些操作只能回到主线程操作 比如: mbprogresshud只能在主线程中使用 而且注意凡是关于布局的代码也只能下载主线程
- 支付宝App支付~关于它的一些坑
坑这个词不仅在微信平台适用,在支付宝也一样的,下面我们来看一下我在做App支付时的一些坑! APP支持流程: 网站H5下单->向支付宝生成订单->回调app的js->app调用支付宝 ...
- Myeclipse 搭建Java Web 项目 《一》
今天将图文并茂的介绍如何使用myclipse 创建Java Web 项目;我使用的是myclipse 8.6 来进行创建: 1.打开Myeclipse,点击File --->然后New ---- ...
- 2月22日 《从Paxos到Zookeeper 分布式一致性原理与实践》读后感
zk的特点: 分布式一致性的解决方案,包括:顺序一致性,原子性,单一视图,可靠性,实时性 zk的基本概念: 集群角色:not Master/Slave,is Leader/Follower/Obser ...
- oracle系列笔记(1)---查询数据
查询数据 1. 查询(select .. form ..) (1)普通查询 select * from employees --代表查询employees表中所有数据 select last_n ...