本系列文章,主要围绕Rax/Weex
展开,由浅入深讲解《如何一站式开发一个·跨平台应用·》。
在学习本文档之前:
本文档主要由「基础篇」、「高级篇」、「原理篇」和「实战篇」四部分部分组成。
- 基础篇:从「Hello World」例子说起,介绍如何使用Rax编写一个简单的Weex应用。
- 高级篇:一个完整的Weex应用在上线前,区别于传统的Web应用,需要注意哪些优化点。
- 原理篇:将会深入Weex和Rax源代码,了解它的
运行原理
和架构思路
。 - 实战篇:将实际的
上线项目
作为案例,讲解如何从0到1
开发一个复杂的Weex应用。
本系列,所有示例代码大部分均使用Rax
编写。
所以,在进入下一个话题之前,请务必先弄懂以下几个问题:
- Weex是什么?
- Rax是什么?
What is Weex
A framework for building Mobile cross-platform UI.
官方描述:一个构建移动端跨平台UI的框架。
关键词:
- mobile:移动端
- framework:框架
- cross-platform:跨平台(Web/IOS/Android)
Why use Weex
Weex之所以能够在前端社区中脱颖而出,主要归功于它的两大特性:
- Cross-Platform:跨平台/容器
- Native Speed:Native性能和体验
如果说,早前的Hybrid API
开放了前端开发者调用Native Module的能力,那么Weex做到的远不止于此,它还赋予了前端开发者渲染Native UI的能力。
相较于,早前React带来的Learn Once, Write Anywhere
,Weex所提倡的Write Once Run Everywhere
,100%的代码跨平台复用,减少的不仅是学习成本,还有真真实实合二为一的开发成本!
What is Rax
A universal React-compatible render engine.
官方描述:一个通用的跨容器的渲染引擎。
关键词:
- universal:跨容器(Browser/Native/Node)
- React-compatible:React语法基本兼容
Rax,除了像React一样支持Browser和Node端渲染之外,通过weex-rax-framework
还实现了基于Weex的Native端渲染,简而言之:使用Rax – React DSL,可以开发Browser/Native/Node三端的应用。
Why use Rax
Weex本身是Vue@1.x
的语法糖,如果你和你的团队的技术栈之前就是React,并没有Vue,那么Rax将是一个不错的选择。
由于Rax基于React DSL,所以天生就享有React社区所带来的一些资源,比如:Redux
。
此外,相比于React,它的优势:
- 渐进渲染模式,白屏时间更短
- 8.5kb(min+gzip),文件体积更小