最近一直在做weex的调研工作,整理之后给公司做了一次技术分享。

分享内容如下:

1:Weex是什么?

2:  Weex目前能做什么?

3:  Weex 如何调试

4:  剖析一下Weex原理

5:  跨平台通用组件

6:  Weex的未来发展

1:weex 是什么?

进入到官网:http://alibaba.github.io/weex,简单明了的几个词,揭开了weex的神秘面纱 : write once run everywhere  &&  Native Speed in Native Platform

2:  Weex目前能做什么?

我觉得weex还处在高速发展的一个情况,目前而言还是有很多缺陷,不管是weex 的 issues 还是 weex 的 gitter 聊天室里都不断的有人提出一些关于weex的问题。对于开发简单的逻辑不复杂的app项目,我觉得weex已经完全可以满足你的需求了。我相信weex后续会慢慢的完善起来,对于开发复杂的应用也终将变成可能。我也利用weex快速的开发了一个简单的点餐app应用,确实让我体会到开发速度之快,如图:

3: Weex 如何调试?

weex 的调试也非常的方便,直接用 weex-devtool 神器就可以了,教程如下:

weex 调试神器:https://github.com/weexteam/article/issues/50

4: 剖析一下Weex原理

  weex 对动态化原理方案的思考一:https://github.com/amfe/article/issues/13

weex 对动态化原理方案的思考二:https://github.com/amfe/article/issues/14

weex 对动态化原理方案的思考三:https://github.com/amfe/article/issues/15

weex 动态技术方案原理:http://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=502916418&idx=1&sn=63a1f708f46c392df355cb9cd6106e26&scene=1&srcid=09098QFiuG16onJoYcEVvuRV#rd

weex 详细原理流程图如下:

weex 能让一套代码能做成 native 级别的app,主要是做了三件事:

  1. 在本地用一个叫做 transformer 的工具把这套代码转成纯 JavaScript 代码
  2. 在客户端运行一个 JavaScript 引擎,随时接收 JavaScript 代码
  3. 在客户端设计一套 JS Bridge,让 native 代码可以和 JavaScript 引擎相互通信

整个 Weex 的工作原理大致可以用一张图:

5: 跨平台通用组件

我觉得 weex的跨平台通用组件 有可能会成为一个商业化的市场,如果阿里后续把 weex组件做成商业化的形式,可能会带来很多商机,有可能会有公司单独出来做weex通用组件来赚钱,值得期待。我感觉weex正是想依靠开源的力量把weex的整个组件化生态圈丰富起来。

如图所示:

6: Weex的未来发展

对于刚过去的ningJs大会上,尤雨溪宣布联手 Weex。我想现在终于可以明正言顺的叫它:"vue-native" ,哈哈哈~~~

 ==============weex 相关知识===================

weex 文章:  https://github.com/weexteam/article/issues

weex 调试:https://github.com/weexteam/article/issues/50

weex 文档: http://alibaba.github.io/weex/doc/

weex中使用数据流工具Vuex实践 : http://www.kmhaoshuai.com/#!/articles/use-vuex-in-weex

weex交流室: https://gitter.im/weexteam/cn?utm_source=share-link&utm_medium=link&utm_campaign=share-link

==============大神的新浪微博====================

尤雨溪http://weibo.com/arttechdesign?is_hot=1

勾股http://weibo.com/mx006?from=hissimilar_home&refer_flag=1005050003_&is_hot=1

鬼道http://weibo.com/777865156?is_all=1#_loginLayer_1473131847118

原创《weex面向未来的架构》的更多相关文章

  1. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  2. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  3. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  4. vue 按需加载,缓存,导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  5. vue按需加载组件,异步组件

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...

  6. 关于VUE首屏加载过长的优化,VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

  7. vue 按需加载

    vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了 vue-router提供了懒加载的方式 const Foo = resolve => r ...

  8. 三步解决 vue 按需加载

    1  webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js  " 这一步是配合第三步, 生 ...

  9. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  10. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

随机推荐

  1. IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目

    IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目 1.确认 IDEA 是否启用了 tomcat 插件 2.添加 tomcat 选择 tomcat 存放路 ...

  2. 2018-2019-2 网络对抗技术 20165311 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165311 Exp2 后门原理与实践 后门的基本概念 常用后门工具 netcat Win获得Linux Shell Linux获得Win Shell Met ...

  3. TCP断开那些事

    继上一篇后,我们再来看一下四次挥手的过程 这里其实没有必要过多阐述,一张图胜过千言万语. 与三次握手一样,四次挥手的过程中也有许多扩展问题. 当然问的最多的还是:为什么要四次握手?为什么要等待2MSL ...

  4. python panda::dataframe常用操作

    1.条件查询: result = df.query("((a==1 and b=="x") or c/d < 3))" print result 2.遍历 ...

  5. ASM: Active Shape Models--Their Training and Application

    这篇论文的前半部分基本就是论文<Training Models of Shape from Sets of Examples>的全部内容,只不过多两个应用示例,后半部分在PDM模型的基础上 ...

  6. WCF部署失败

    HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. 最可能的原因:•可能是缺少处理程 ...

  7. springcloud第八步:hystrix解决服务雪崩

    断路器(Hystrix) 为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...

  8. vs code中文扩展包

    vs code 中文拓展安装失败时,可以手动下载安装,下载对版本的中文包. https://marketplace.visualstudio.com/_apis/public/gallery/publ ...

  9. Python selenium根据class定位页面元素

    在日常的网页源码中,我们基于元素的id去定位是最万无一失的,id在单个页面中是不会重复的.但是实际工作中,很多前端开发人员并未给每个元素都编写id属性.通常一段html代码如下: <div cl ...

  10. python项目推荐(转载知乎)

    作者:Wayne Shi链接:https://www.zhihu.com/question/29372574/answer/88744491来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...