Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
浅谈前端移动开发
Search
chenbin
November 14, 2015
Programming
0
250
浅谈前端移动开发
分析比对前端移动开发的几种形式,主要以ionic和react native为主。
chenbin
November 14, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1k
"config" ってなんだ? / What is "config"?
okashoi
0
240
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
190
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
270
ONE WEDGE_company_guide
1wedge_one
0
490
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Pragmatic Product Professional
lauravandoore
25
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Visualization
eitanlees
136
14k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building an army of robots
kneath
300
41k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
None
陈 斌 职 位 公 司 Beansmile 简 介 …
Web前端开发
None
None
移动开发的分类
1 Native App Hybrid App 2 3 Web App React
Native 4
1 Native App
1 Native App 什么是 ?
Native APP 指的是原⽣生应⽤用程序,⼀一般依托于操作系统,有很强的交互. 技术:Objective-C Java
Native App开发的优点
1. 提供最佳的⽤用户体验 2. 拥有系统级别的通知或提醒 3. 可以访问本地资源(通讯录,相册) 4. 针对不同平台提供不同体验 Native App开发的优点
Native App开发的缺点
1. 开发成本⾼高(不同平台有不同的开发语⾔言和界⾯面适配) 2. 维护成本⾼高(例如⼀一款App已更新⾄至V5版本,但仍有⽤用户在使⽤用V3 V4版本,开发⼈人员仍需维护之前的版本) 3. 更新流程慢(根据不同平台,提交–审核–上线 等等,需要经过的流程较复杂) Native App开发的缺点
2 Web App
2 什么是 ? Web App
Web App ⼀一般指采⽤用HTML5写出的App, 不需要下载安装,⽣生存在浏览器中的应⽤用, 说的简单点就是⼀一个触屏版的⺴⽹网站。
Web App 开发的优点
1. 开发成本低,主要使⽤用web开发技术 2. 更新快,更新⽆无需通知⽤用户,⽆无需⼿手动升级 3. 能够跨多个平台和终端 Web App 开发的优点
Web App 开发的缺点
1. ⽆无法获取系统级别的通知,提醒,动效等等 2. 浏览的体验短期内还⽆无法超越原⽣生应⽤用 3. 临时性的⼊入⼝口 Web App 开发的缺点
3 Hybrid App
3 什么是 ? Hybrid App
Hybrid APP指的是半原⽣生半Web的混合类App; 它虽然看上去是⼀一个Native App,⾥里⾯面访问的是⼀一个Web View; 也就是我们常说的混合型移动应⽤用.
Hybird App 开发的优点
1. 开发时可以不采⽤用原⽣生语⾔言,但是却拥有 原⽣生应⽤用的特性 3. 具有跨平台性 Hybrid App 开发的优点 2. 有利于Web开发技术⼈人员快速地构建应⽤用
Hybird App 开发的缺点
1. ⽤用户体验不如本地应⽤用 Hybird App 开发的缺点 2. 深度定制的难度⼤大
4 React Native
4 什么是 ? React Native
“React Native enables you to build world-class application experiences on
native platforms using a consistent developer experience based on JavaScript and React.” React Native 使你能够使⽤用基于 JavaScript 和 React ⼀一致的 开发体验,在本地平台上构建世界⼀一流的应⽤用程序体验
React Native开发的优点
React Native开发的优点 2. 拥有原⽣生的⽤用户体验 1. 提供了原⽣生的控件⽀支持 相对于Hybird应⽤用: 2. 可以通过更新远端JS,直接更新app 1.
拥有web的开发效率 相对于Native应⽤用:
1. 对开发⼈人员要求较⾼高,当官⽅方封装的控件、 api⽆无法满⾜足需求时 ,就必然需要懂⼀一些 native开发的⼈人去扩展 React Native开发的缺点 2. …
Native App Hybird App Web App React Native
Native App Web App Hybird App
Native App Web App Hybird App
Native App Web App Hybird App React Native
None
None
接下来主要介绍Hybrid和React Native
React Native
Github上的活跃度 20316 22342 React Native
开发思维 开发思维 React Native ! HTML,CSS,Angular,Cordova ! 单⻚页⾯面应⽤用程序(Single page application)
! 模拟原⽣生组件 ! Hybird app ! Flex,JSX ,css-layout,ReactJS ! Web Component ! 直接调⽤用React native封装过的原⽣生组件 ! React Native ! Write once, Run Anywhere ! LearnOnce,WriteAnywhere.
开发环境 React Native 1. npm install -g cordova ionic 2.
ionic start myApp blank 3. ionic start myApp blank 4. cd myapp 5. ionic platform add ios 6. ionic build ios 7. ionic emulate ios 1. npm install -g react-native-cli 2. react-native init HelloWorld 3. cd HelloWorld 4. react-native start 5. open HelloWorld.xcodeproj 6. cmd + R
ionic基本实现思路 Angular + Cordova ⼀一套前端ui控件库 + Cordova获取设备访问 及不同平台的打包能⼒力 借助Angular的MVC模式 帮我们很快地开发单⻚页应⽤用
Angular封装的⼀一套ui组件 => Hybrid App
React Native基本实现思路 Native 组件 调⽤用 React Native (Components)
React Native基本实现思路 JavaScript Objective-C 调⽤用JS 返回JSON 1. OC层调⽤用JS,加载JS源数据 JavaScriptCore 2.
利⽤用JavascriptCore搭建起OCBridge 作为和JS层通讯的⼯工具 3. JS运⾏行在JavaScriptCore,通过bridge⾥里的配置表 把模块⽅方法转为模块ID和⽅方法ID传给OC 4. OC通过bridge的模块配置表找到对应的⽅方法去执⾏行, 并返回JSON数据给Native渲染
实现⼀一个Tabs效果
None
实现⼀一个Tabs效果
ionic实现代码展⽰示
None
None
None
None
None
None
None
None
None
61
None
63 63
64
None
66
None
React Native实现代码展⽰示
None
None
None
None
None
None
None
None
None
None
None
None
None
None
案例展⽰示
Ionic app http://showcase.ionicframework.com/
React Native https://facebook.github.io/react-native/showcase.html
Native ⼈人机交互体验 + Web 开发效率和发布能⼒力 总结
! 技术服务于产品,产品服务于⼈人 ! ⽤用什么技术不重要,重要的是适合项⺫⽬目形态
招聘信息
团队介绍
None
Email:
[email protected]
Thanks
由于惯性思维,总想着往它⾝身上贴个「Web」或者 「Native」或者「Hybrid」的标签, 可是贴上去扯下来,并没有⼀一个适合的标签。 事实上,React Native重新定义了⼀一种新的模式