* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !important;}blockquote {margin: 0;padding: 0 15px;color: #777;border-left: 4px solid #ddd;}hr {background-color: #ddd;border: 0;height: 1px;margin: 15px 0;}code {font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;line-height: 1.4;margin: 0;padding: 0.2em 0;font-size: 85%;background-color: rgba(0,0,0,0.04);border-radius: 3px;}pre {margin: 0;}pre > code {margin: 0;padding: 0;font-size: 100%;word-break: normal;background: transparent;border: 0;}ol {list-style-type: decimal;}ol ol, ul ol {list-style-type: lower-latin;}ol ol ol, ul ol ol, ul ul ol, ol ul ol {list-style-type: lower-roman;}table {border-spacing: 0;border-collapse: collapse;margin-top: 0;margin-bottom: 16px;}table th {font-weight: bold;}table th, table td {padding: 6px 13px;border: 1px solid #ddd;}table tr {border-top: 1px solid #ccc;}table tr:nth-child(even) {background-color: #f8f8f8;}input[type="checkbox"] {cursor: default;margin-right: 0.5em;font-size: 13px;}.task-list-item {list-style-type: none;}.task-list-item+.task-list-item {margin-top: 3px;}.task-list-item input {float: left;margin: 0.3em 1em 0.25em -1.6em;vertical-align: middle;}#tag-field {margin: 8px 2px 10px;}#tag-field .tag {display: inline-block;background: #cadff3;border-radius: 4px;padding: 1px 8px;color: black;font-size: 12px;margin-right: 10px;line-height: 1.4;}

.ace_static_highlight {white-space: pre-wrap;}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;}.ace_static_highlight.ace_show_gutter .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line {position: relative;}.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}
.ace-chrome .ace_gutter {background: #ebebeb;color: #333;overflow : hidden;}.ace-chrome .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-chrome {background-color: #FFFFFF;color: black;}.ace-chrome .ace_cursor {color: black;}.ace-chrome .ace_invisible {color: rgb(191, 191, 191);}.ace-chrome .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-chrome .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-chrome .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-chrome .ace_invalid {background-color: rgb(153, 0, 0);color: white;}.ace-chrome .ace_fold {}.ace-chrome .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-chrome .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-chrome .ace_support.ace_type,.ace-chrome .ace_support.ace_class.ace-chrome .ace_support.ace_other {color: rgb(109, 121, 222);}.ace-chrome .ace_variable.ace_parameter {font-style:italic;color:#FD971F;}.ace-chrome .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-chrome .ace_comment {color: #236e24;}.ace-chrome .ace_comment.ace_doc {color: #236e24;}.ace-chrome .ace_comment.ace_doc.ace_tag {color: #236e24;}.ace-chrome .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-chrome .ace_variable {color: rgb(49, 132, 149);}.ace-chrome .ace_xml-pe {color: rgb(104, 104, 91);}.ace-chrome .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-chrome .ace_heading {color: rgb(12, 7, 255);}.ace-chrome .ace_list {color:rgb(185, 6, 144);}.ace-chrome .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-chrome .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-chrome .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-chrome .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-chrome .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-chrome .ace_gutter-active-line {background-color : #dcdcdc;}.ace-chrome .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-chrome .ace_storage,.ace-chrome .ace_keyword,.ace-chrome .ace_meta.ace_tag {color: rgb(147, 15, 128);}.ace-chrome .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-chrome .ace_string {color: #1A1AA6;}.ace-chrome .ace_entity.ace_other.ace_attribute-name {color: #994409;}.ace-chrome .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}

body{margin:0 auto;max-width:800px;line-height:1.4}
#nav{margin:5px 0 10px;font-size:15px}
#titlearea{border-bottom:1px solid #ccc;font-size:17px;padding:10px 0;}
#contentarea{font-size:15px;margin:16px 0}
.cell{outline:0;min-height:20px;margin:5px 0;padding:5px 0;}
.code-cell{font-family:Menlo,Consolas,'Ubuntu Mono',Monaco,'source-code-pro',monospace;font-size:12px;}
.latex-cell{white-space:pre-wrap;}


.text-cell {font-size: 15px;}.code-cell {font-size: 12px;}.markdown-cell {font-size: 15px;}.latex-cell {font-size: 15px;}

Untitled Note

http://blog.cnbang.net/tech/2495/

web前端开发与iOS终端开发的异同
2014-12-22
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。
语言
前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用object-c,前端只能javascript,当然iOS还可以用RubyMotion,前端还能用GWT/CoffeeScript,但不是主流,用的人很少,真正用了也会多出很多麻烦。iOS还可以用苹果新出的swift语言,后面可能用于取代object-c,还处于起步阶段,先不讨论。
objc和js这两者有个有意思的对比:变量/方法命名的风格正好相反。苹果一直鼓吹用户体验,写代码也不例外,程序命名都是用英文全称并且要多详细有多详细,力求看变量和方法名就能知道是干嘛的,例如application:didFinishLaunchingWithOptions:。而js因为每次都要从网络下载,要力求减少代码体积,所以变量方法名是尽量用缩写,实际上有代码压缩工具,无论变量名写多长最终上线的效果是一样的,但大家也都习惯了用短的命名,例如上述objc的application:didFinishLaunchingWithOptions:方法在js里习惯的命名是:$()。
objc与js都是动态语言,使用起来还蛮像,但objc是编译型,速度快,很多错误也能在编译过程中被发现,js是解释型,性能依赖于解释引擎,即使在强劲的v8引擎下性能也赶不上编译型语言,语言太动态,变量完全没有类型,写起来爽,debug起来稍微费点劲。一直感觉js轻巧灵活放荡不羁充满各种奇技淫巧,objc中规中矩没c++ java那么严肃也没有js那么灵活。
线程
前端开发几乎不需要线程这个概念,浏览器实现上页面HTML和CSS解析渲染可能与js不在同一个线程,但所有js代码只执行在一条线程上,不会并发执行,也就不需要考虑各种并发编程的问题。在新的JS特性中可以创建worker任务,这样的任务是可以另起一条线程并行执行的,但由于并不是所有浏览器都支持,不同线程传递数据各个标准定的还不一样,使用场景也少,似乎没有大规模用起来。对于数据库操作/发送网络请求这样的任务是在不同于js代码执行线程的,不过这些都由浏览器管理,前端无需关心也无法影响这些线程,只需接收事件回调,不需要处理任何并发问题。
终端开发需要大量使用多线程,iOS有一条主线程,UI渲染都在这个线程,其他耗时长的逻辑或者数据库IO/网络请求都需要自己另开线程执行,否则会占用主线程的时间,导致界面无法响应用户交互事件,或者渲染慢导致滚动卡顿。程序逻辑分布在多个线程里跑,需要处理好各种代码并发执行可能带来的数据不一致/时序错乱之类的问题,并发也导致有些bug难以排查,一不留神就掉坑,需要适当用一些队列/锁保证程序的执行顺序。iOS提供了一套多线程管理的方法GCD,已经把线程和队列封装得非常简单易用功能强大,比其他端或后台是好很多了,但还是会花大量功夫在处理多线程问题上。
存储
终端开发需要大量的数据存储逻辑,手机APP不像浏览器,用户打开浏览器必定是连着网,但打开一个APP时很可能是离线,也很可能处于网络状况极差的移动GPRS,所以必须把之前请求回来的数据保存好。保存数据后又需要与服务端最新的数据同步,如果全量同步数据量太大,耗流量速度也慢,于是需要增量同步,需要与服务端一起制定实现增量数据返回的方案,需要处理好客户端与服务端数据一致性的问题。当数据存储量大结构复杂时,还需要利用好有限的内存做cache,优化各类存储查询性能。
前端在桌面端很少需要存储,除非是one page app,不存储自然就不需要数据更新的一系列工作,数据都是从后台取出拼接后直接显示到页面上,即使像微博有可以在页面内不断加载更多数据,数据也只存在于内存,不会持久化存储,因为桌面端网速稳定,不计流量,所有数据可以直接从后端拿取,客户端没必要再做一套存储。移动端那些做得很像原生APP的web应用就跟终端开发一样了,数据同样保存到SQLite,存储逻辑以及要处理的问题都差不多。
框架
在第三方框架上web前端和iOS开发完全相反,web原生弱小又十分开放,让大量第三方框架和类库可以施展拳脚,而iOS原生强大又十分封闭,导致第三方框架没有多少生存空间。
浏览器一开始只为内容型的网页而设计,js也只是这个网页上能加点小特效的脚本语言,在web应用时代跟不上发展,需要很多第三方库和框架辅助,再加上前端开发是完全开放的领域,导致库和框架百花齐放多如牛毛,在初期多数库的作用集中在封装dom操作,大家不断重复造dom操作基础库的轮子,在一段时间百家争鸣后独尊jQuery,在有使用库的网站中90%以上使用jq,几乎成了个标准基础库。后期大家已经不再重复造这个基础库的轮子了,多了一些代码组织和前端架构的框架,例如一些帮助项目模块化的框架require.js,MVC框架backbone/angular.js等。
iOS开发苹果已提供了完整的开发框架cocoa,而这框架在每一代系统中都在升级优化和添砖加瓦,开发模式也已经定型,第三方框架没有多少生存空间,大量流行的开源项目是一些通用组件和库,像网络请求库AFNetworking,数据库操作库FMDB。而一些大的框架像beeFramework/ReactiveCocoa较难流行起来。
兼容
前端开发需要兼容大——量的浏览器,桌面的chrome,safari,ie6-ie10,firefox,以及各种套壳猎豹360等浏览器,移动端iOS/Android各自的浏览器,以及无限的不同的屏幕尺寸。看起来挺可怕,实际上也没那么难搞,只是拿出来吓唬下人。桌面端chrome/safari以及各种套壳的极速模式用的都是webkit,差异很小,firefox也大体遵从标准实现,与webkit差别不大,旧的ie6/7就需要特别照顾,不过很多网站都不支持ie6了,移动端更是一家亲,全是webkit,除了新特性上的支持程度不一,其他差异不大。对于不同的屏幕尺寸,高端点的会用响应式布局,针对不同屏幕尺寸自适应到不同布局,一般点的桌面端定死宽度,移动端拉伸自适应宽度就搞定。
终端开发也需要兼容各种不同的系统版本和手机尺寸,Android不用说,iOS也有3.5/4/4.7/5.5/9.7英寸这些尺寸,不过兼容起来跟web一样挺容易,就是自适应宽度,iOS的UIKit把这些都处理好了,还有autolayout,sizeClass等高级特性可用,在尺寸上并不用花太多功夫。系统版本上iOS7为分水岭,iOS7前后版本UI上差异比较大,需要做一些功夫兼容,不过iOS用户更新换代很快,预计再过一两年iOS7以下用户就可以忽略了。
性能
终端和前端都是面向用户的,性能优化目的都是尽快呈现内容,以及让程序在用户操作下流畅运行。终端主要关注的是存储/渲染性能。当一个APP存储数据量大,数据关系复杂时,数据查询很容易成为性能瓶颈,需要不断优化数据存取的效率,规划数据IO线程,设计内存cache,利用好终端设备有限的内存,渲染上避免重复渲染,尽可能复用视图,寻找最高效的渲染方案。
前端关注页面加载速度,由于web页面的结构/样式/程序/资源图片都是实时请求的,要让页面更快呈现内容,就要优化这些请求,让这些资源以最快速度加载下来,包括合并图片/合并代码减少请求数,压缩代码,并行请求,根据版本号缓存代码请求,gzip压缩,模块/图片懒加载等。此外跟终端一样也关注渲染性能,遵从一些规则避免页面reflow,避免使用CSS阴影这样耗性能的特效,用CSS3动画代替js等。
编译
终端开发需要编译的过程,把程序编译成机器语言,再与各种库链接后生成平台对应的可执行文件,最后由操作系统调度执行。在iOS终端开发中编译和链接的规则苹果已经在xcode这个开发工具上封装好,一般开发可以不用关心,但有深层需求时还是需要跟编译打很多交道,例如用编译前端Clang自定义静态代码检测规则,写编译脚本做自动化编译和持续集成,打包生成静态库,根据链接后的可执行文件的组成优化APP体积等。
前端开发的程序则不需要编译过程,只需要把代码扔给浏览器,浏览器边解析代码边执行。虽然js/css代码写完无需做任何事情浏览器就可以解析执行,但为了上面说的性能优化,前端代码上线前会对所有代码和资源文件进行处理,这些处理包括:压缩合并js/css,合并css sprite图,处理模块依赖,处理代码资源版本号,处理资源定位等。这个过程很像传统程序的编译,把给人看的代码优化处理成给机器看的,并解决一些依赖关系,可以算是前端的编译过程。像grunt.js/fis这些工具可以帮助完成这个编译过程,通常前端编译跟上线部署结合在一起,作为上线系统的一部分。
安全
前端和终端的安全性问题上虽然不需要像后端考虑得那么多,但还是有些需要注意。在请求的安全上,终端和前端都一样,用户向后端发送的请求都需要经过层层路由,不知道在哪里就被截获篡改或回放了,于是需要做一些措施防御这些情况,最常见的就是身份验证,多是采用会过期的token形式代替用户名密码,防止被抓包后黑客可以永远登陆这个账号。数据安全要求高的会用加密传输,或者使用https,另外还需要看情况处理一些DNS劫持,运营商广告植入等问题。
其他安全问题终端很少考虑,在未越狱的iOS机器上系统已经帮忙保证了整个APP运行环境的安全,而在越狱的机器下恶意程序拥有root权限可以做任何事情,APP也难以防范。前端方面浏览器的特性使前端开发有几个安全隐患,一是web页面上任意位置都可以动态插入js代码,浏览器会无区别地执行这些代码,二是身份验证信息都统一保存在cookie里,三是页面上可以随意通过iframe嵌入其他网站的页面。造成XSS、CSRF、cookie劫持这些攻击手段,所以前端写代码时都需要考虑还这些安全问题,做好相应的防范,最简单和重要的防范就是对所有用户输入输出的内容做完整的过滤,避免页面内被嵌入恶意代码。
交互/开发
最后说下对这两个领域在交互和开发上的个人感触。以前在做web前端时,感觉web让人机交互倒退了十年,交互都是硬邦邦的点击—啪一下出来结果,滚动是一格格地刷新,很多人当时在鼓吹html5可以做出多么炫的效果时,实际上FLASH在十年前就可以做出来了,还比最现代的浏览器更流畅。iPhone流行后,人机交互终于恢复了应有的水平,体验上比web流畅太多,指尖交互/流畅的动画/便捷的滑动手势/无限制的实现,主流终于恢复或超越了十年前Flash的水平。
但人机交互提升了,开发方式却大倒退,web的开发方式非常先进,用户用到的都是最新版本,发现bug可以马上上线秒修复,特别适用于互联网环境下的快速迭代,而终端APP不行,撇开iPhone的审核不说,Android也无法做到保证用户用的是最新的程序,用的都是传统的客户端更新的方式,bug的修复版无法及时给到用户,无法一天上线几十次,需要维护很多旧版本,开发方式倒退回web时代以前。这都是因为移动网络不稳定以及流量有限造成的,移动端无法像桌面端浏览器那样完全依赖网络,所以在移动网络稳定流量免费之前,开发方式都不会有多大变化。
另外并不看好HTML5,网络上说它可以取代APP说了三四年,到现在也没什么战绩,原生APP可以获得更多的系统资源,更流畅的人机交互体验,HTML5在这方面永远比不上,而它在移动端网络和流量的限制下也无法发挥web的开发优势,所以纯HTML5应用不会成为主流,能做的就是混搭开发,或者利用无需安装/获取成本低的优势,做一些轻量的东西寄生在一个平台上。

web前端开发与iOS终端开发的异同[转]的更多相关文章

  1. Web前端开发与iOS终端开发的异同

    语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...

  2. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

  3. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  4. Web前端工程师需要注意的开发规范有哪些?

    从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...

  5. web前端的渐进增强式开发模型

    渐进增强是前端开发的根本基础.从根本的层面上讲,它可以将HTML,CSS,JavaScript这三者的功能分离开来,这能让当前的项目开一个好头.我们在创建项目的开始要将这三者分开,它们对应的称呼是结构 ...

  6. Web前端框架与移动应用开发第七章:二

    3.练习3:抽奖大转盘 注意事项:需要使用Zepto.js,区别于zepto.min.js 实现效果:转盘转动抽奖 html <!DOCTYPE html><html>< ...

  7. Web前端框架与移动应用开发第七章

    1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...

  8. iOS开发系列--IOS程序开发概览

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  9. 【iOS开发】IOS界面开发使用viewWithTag:(int)findTag方法获取界面元素

    http://blog.csdn.net/lxp1021/article/details/43952551 今天在开发OS界面的时候,遇到通过界面UIview viewWithTag:(int)fin ...

随机推荐

  1. SQLServer2008 全文检索摘记

    最近在做全文搜索的内容,google了一下全文检索,发现了一些问题,现在总结如下: 全文索引和查询概念(摘自SQL 联机帮助)SQL Server 2008 为应用程序和用户提供了对 SQL Serv ...

  2. Linux系统排查——CPU负载篇

    本随笔介绍CPU负载的排查手段. 查看系统负载的工具:uptime,w,都能查看系统负载,系统平均负载是处于运行或不可打扰状态的进程的平均数, 可运行:运行态,占用CPU,或就绪态,等待CPU调度. ...

  3. 【转】DSL

    DSL DSL 时不时地会成为一个话题,所以今天想专门说一下. DSL 也就是 Domain Specific Language 的简称,是指为某些特定领域(domain)设计的专用语言.举个例子,L ...

  4. APP服务端开发遇到的问题总结(后续再整理解决方法)

    IOS  AES对称加密,加密结果不同,问题解决 IOS http post请求,使用AFNetworing 框架,默认请求content-type为application/json ,所以无法使用@ ...

  5. 转: 使用Hystrix实现自动降级与依赖隔离

    使用Hystrix实现自动降级与依赖隔离 原创 2017年06月25日 17:28:01 标签: 异步 / 降级 869 这篇文章是记录了自己的一次集成Hystrix的经验,原本写在公司内部wiki里 ...

  6. SNF平台从sql server兼容oracle的处理方式和开发方式

    前几天有这样一个需求,就是让SNF平台BS版的基础程序全面支持Oracle数据库. 初一看这是一个很大的工程,因为大家都知道 Sql和Oracle的语法有很多的不一样,如 top .日期获取.类型之间 ...

  7. 使用maven生成可执行的jar包

    从pom的xsi中可以打开描述pom的schema: 可以看到pom中,project的结构: 默认的mvn install生成的jar是不带主类入口的,需要在maven-compile-plugin ...

  8. Subversion代码提交中的org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决

    : 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: Com ...

  9. 【iOS XMPP】使用XMPPFramewok(五):好友列表

    转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/17/3082226.html 好友列表 好友列表,在 XMPP 中被称为 roster,花名 ...

  10. 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式

    断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...