app---hybird app混合开发介绍
一 概念
1 Hybird App,是用现有前端(html,js,css)技术来开发的app。
特点:1 灵活(开发灵活 ,部署灵活) 2 拥有类似原生的性能体验。
2 不是h5页面,也不是在webview里面加载的。
而是通过例如webpack打包工具生成的js bundle资源文件,放到原生本地渲染(原生需集成环境)。
二 优点
1 拥有web/h5的灵活性,支持随时热更新(增量更新); 同时拥有原生app的性能。
2 编写一次, 多端通用,跨平台,体验一致。
3 组件可以modules和compontents化,开发效率及复用率高。
4 支持扩展: 可直接调用原生组件(需要按规则封装),原生也可以反过来和混合页面交互;当然也可以调用三方modules组件模块。
三 原理
1 主要通过javascript 内核引擎(JsCore 内核),虚拟化技术解析,将js控件转成对应的原生组件 渲染。(例如:div、img 等转成原生的 View、Image 等组件)
当然weex里-----------Android 下使用 UC 提供的 v8 内核。
---每个端都基于 DOM 模型设计并实现了标准的界面渲染接口 供 JavaScript 引擎调用。
---采用了内存 Dom tree Diff 计算,优化了 view 的渲染效率和体验。
ps: weex在版本上支持降级成h5,从而当weex渲染失败的时候,使用webview加载url。
四 应用及场景
1 页面功能模块频繁变动,需要快速更新迭代(或者能快速的fix线上bug)。
2 页面展示性的内容为主(影响用户输入的及固定的,一般用原生;
分享出去的用h5页面)。
五 发展形势
一 用JavaScript 开发app应用已经是客户端(甚至前端)必备的技能
能解决:
1 开发一次,2端(甚至3端)通用。
2 ios快速发布及修复功能模块(原生不支持热更新 ;提交审核缓慢)
二 目前流行框架解决方案有:
React Native -----facebook 已开源-----https://reactnative.cn/
weex/Rax------alibaba 已开源(支持vue和react2个版本)--- https://weex.apache.org/cn/guide/
三 案例
手机百度,微信小程序(Rn改造),携程,qq空间,电商类,金融类app,支付宝,天猫,手淘,淘票票,飞猪,淘宝头条。。。
六 适用人员
1 有前端和原生经验的app开发者
2 前端开发人员(vue.js/react.js)
七 weex框架 和 React Native框架对比
一 Weex 对现有项目兼容性较好,入侵性较低:
1 weex允许项目里面部分页面使用weex;也可以整个项目都使用,而且它自带webview,tab, navigator…
2 写法更贴近前端(单位用px)。
3 原生可以封装方法和组件 ,供weex页面调用。
4 可以引用三方组件。
二 React Native 要求最好整个项目都用它改造,现有项目重构改动大。
1 他里面自带了android/ios目录 ,有项目结构,必须按照它的写法。
2 写法更贴近原生。
3 原生也可以封装方法和组件 ,供页面调用。
4 也可以引用三方组件。
八 weex简单介绍
一 Weex 是一套简单易用的跨平台开发方案
能以 web 的开发体验构建高性能、可扩展的 native 应用,遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。 目前支持vue和rax(react) 2个dsl分支。
二 涉及到的相关知识
1 前端基础html,js,css (flexbox布局)
2 ES6语法基础
3 Vue.js 基础
4 Weex 相关api
5 原生知识
1 android使用java开发,只要按java写法,外加熟悉下android的控件和组件即可。
2 weex使用vue.js开发,只要按vue.js写法(js),外加熟悉下weex的控件 和 功能module即可。
Vue.js 是一套构建用户界面的渐进式框架.
1 简单,用熟悉的html,css来编写。
2 清晰,专注于MVVM 模型的 ViewModel 层。
3 使用了虚拟化DOM,不直接操作DOM.性能较高。 4 组件化思想,复用率高。
三 demo演示
http://dotwe.org/vue/14ef9c678038b54d992fb0bc9d462f6e
九 必备组件介绍
BindingX———https://alibaba.github.io/bindingx/
阿里巴巴开源的一套基于 Weex、React Native 的富交互解决方案 「BindingX」。提供了一种称之 为 「Expression Binding」 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行,而不会导致卡顿,因而带来了更优秀的用户体验。
进一步介绍
https://www.jianshu.com/p/14729b28d15f
GCanvas—————https://alibaba.github.io/GCanvas/
阿里开源绘图,兼容web,weex,React Native
Weex UI组件库(飞猪提供)----------https://alibaba.github.io/weex-ui/#/
基于vue.js里面有封面的组件效果,对开发非常有帮助
网易也用weex----https://github.com/zwwill/yanxuan-weex-demo
网易严选
其他
谷歌的flutter (用dart语言开发)混合开发框架开始流行不拘一格,不用js去开发及jscore虚拟机转换。直接拥有jit即时编译及静态语言aot编译成字节码功能。
工作1-3年,基础知识,多看书。多跟着别人做项目,学习经验。 工作3-5年,新知识,高级知识,自己独立做项目,总结经验。尝试不同的语言。 工作5-8年,工作职位,要从设计,管理方面要求自己,可以尝试走管理路线(项目经理或cto)。 工作10年及以上, 自己做些项目,产品,尝试为创业做准备。 上大学和不上大学区别很大,上品牌大学和普通大学区别也很大,后天的努力最大。 ---无论它是在遥远的远方,还是在出发的地方、哪里有希望哪里就是我们的方向;终点、只不过是梦想起飞的地方。