轉(zhuǎn)自知乎 業(yè)內(nèi)人士的各種回答~~看帖子就是學(xué)習(xí)不斷~~

程慕，烏拉拉烏！

王功賀、王曉勇、葉帆 等人贊同 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。

也有個說法就是前端就是大前端嘛，如果你的工作真的那么贊的話，那就包括了web啦安卓啦ios啦甚至pc mac客戶端的界面啦。但我覺得現(xiàn)在一般大家都還是有專攻的。

Web App指的是【 Web application】，也就是以瀏覽器作為客戶端的軟件。比如你要寫文檔，一般會打開Office 2012之類的本地軟件；但是你也可以選擇在瀏覽器里輸入一個網(wǎng)址，比如我很喜歡 StackEdit — *smart* markdown editor ，然后直接在里面寫東西直接發(fā)布到gist上； 再比如用桌面客戶端來收發(fā)郵件，但你也可以直接用瀏覽器登陸gmail亦或者QQ郵箱，直接把這個當(dāng)客戶端用?？傊褪鞘褂镁W(wǎng)頁版代替本地軟件。

Mobile Web App 當(dāng)然就是指在手機(jī)端打開的Web App啦。我推薦看看Gmail的移動版。


感覺樓主問的問題還挺模糊的，所以我大概照我的理解依次解釋下：
移動客戶端的開發(fā)類型（因為我是個前端所以我是站在前端立場上來說的哈），主要是三種：

Native App（原生APP），也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端，iPhone iPad就是純Object-C，安卓就是純JAVA, 就是用戶看到的界面啦體驗到的交互啦都是原生的。這是性能最棒的開發(fā)方式，但靈活性就沒下面的好。

Web App, 這個就是在移動瀏覽器里打開的，純HTML+CSS+JS，說白了就是個網(wǎng)頁，只不過非常的富應(yīng)用，比如手機(jī)瀏覽器訪問的GMAIL啥啥的。但說白了就是在瀏覽器里打開的頁面。。IOS支持可以在桌面創(chuàng)建訪問的快捷方式，但是說到底還是打開Safari跑。。而且對設(shè)備硬件的接口什么的挺薄弱。

Hybrid App.[ HTML5 in mobile devices] 我覺得這個更為合適一些。實際上是使用原生寫了一個容器，然后使用HTML+CSS+JS來實現(xiàn)用戶界面和交互。Web App的短處便可以克服（因為自己寫的容器可以輔助暴露偏底層的接口，比如本地存儲或者麥克風(fēng)控制之類），同時比起純原生的java或者object-c開發(fā)靈活性要高（更新可以更快更迅速，也不依賴于市場，因為說白了，就是自己下載更新網(wǎng)頁資源。。）實際上這種方式已經(jīng)不限于移動端。。豌豆莢其實是個pc端的hybrid app 哇~~~ 而且說實在的，桌面開發(fā)的性能就現(xiàn)在來說要比移動好很多。。

以上三種開發(fā)方式的比較和分析谷歌里面一搜一大堆我就不廢話啦哈。我記得2011年的Google io上就有一場talk是android native和web app等開發(fā)方式的大PK。?？磦z工程師吵還是很有意思的。我順手找著了 [ http://www.youtube.com/watch?v=4f2Zky_YyyQ ]



題主似乎是想學(xué)移動方向的前端開發(fā)？那是針對哪個方向的捏？個人覺得其實如果還是html+CSS+js的話核心都是一樣的，只不過移動端可能在頁面建構(gòu)時有些關(guān)于尺寸方面（物理像素css像素設(shè)備獨立像素這一堆）的細(xì)節(jié)需要注意下，包括圖片處理之類的，這些可以參見蘋果和安卓的官方文檔，雖然是針對原生開發(fā)者的，但很多地方前端是完全該知道的；此外js方面可能就是注意性能方面的問題，我覺得就眼下的情形來說國內(nèi)要做依賴于html css js又要非常富應(yīng)用和高性能的移動端可能不太現(xiàn)實。。。而且我覺得移動端開發(fā)就目前現(xiàn)狀而言。。拼的完全是痛苦的設(shè)備測試和調(diào)試。。


然后我跑題感慨下。。。這種遍地都是坑的節(jié)奏。。。在我剛開始高興哈哈不用兼容IE了的時候，我發(fā)現(xiàn)webkit和安卓碎片化的坑才是最大頭的。。。



---------
知乎說我的內(nèi)容不符合社區(qū)規(guī)范？！why? 編輯于 2014-01-09 7 條評論 感謝 分享 收藏 ? 沒有幫助 ? 舉報 贊同1 反對，不會顯示你的姓名

季楠，三流的前端開發(fā)者，二流的音樂愛好者，好…

陳大衛(wèi) 贊同 平臺不同，所以用戶體驗的設(shè)計上也會不同， 觸屏的交互方式和鼠標(biāo)有很多不同 。比如相對手機(jī)來說，屏幕比較下，而手指相對有比較大，所以要把可進(jìn)行操作的按鈕做的大一些；再比如觸屏還包括多手指的操作，等等。 發(fā)布于 2012-05-31 添加評論 贊同15 反對，不會顯示你的姓名

車三七，前端轉(zhuǎn)產(chǎn)品 http://chesanqi.com

王功賀、林瞎、厘米2014 等人贊同 移動前端開發(fā)可分為：

1、手機(jī)網(wǎng)頁開發(fā)。這部分跟web前端開發(fā)差別不大，使用的技術(shù)都是html+css+js。區(qū)別為手機(jī)瀏覽器是webkit的天下，pc端是IE的天下。手機(jī)網(wǎng)頁可以理解成pc網(wǎng)頁的縮小版加一些觸摸特性。因為是在瀏覽器中進(jìn)行的網(wǎng)頁開發(fā)，所有最終代碼具有跨系統(tǒng)平臺的特性。

2、app前端開發(fā)。使用的技術(shù)也是html+css+js，但它需要基于PhoneGap等開發(fā)平臺調(diào)用手機(jī)核心功能接口（包括地理定位，加速器，聯(lián)系人，聲音和振動等）模擬native app，這部分跟web前端開發(fā)完全不同。最終代碼發(fā)布要分別編譯成各系統(tǒng)平臺的app。 編輯于 2012-05-31 6 條評論 贊同8 反對，不會顯示你的姓名

Leon，內(nèi)心的強(qiáng)大才能戰(zhàn)勝一切人生的不如意！

鄭三、譚小譚、舍遠(yuǎn) 等人贊同 可以分成兩部分理解
1.服務(wù)器端開發(fā)，也叫后臺開發(fā)，這是唯一的，對應(yīng)不同的平臺，他負(fù)責(zé)數(shù)據(jù)的分發(fā)與存儲，和一些邏輯的處理.邏輯處理的多少由業(yè)務(wù)的復(fù)雜程度決定。服務(wù)端相對獨立，與平臺沒啥關(guān)系.

2..1中不同的平臺指web平臺、移動設(shè)備平臺等，移動設(shè)備又可分為andriod平臺、iPhone平臺等
每個平臺都有自己的規(guī)范和開發(fā)技術(shù)。web平臺的規(guī)范是鍵盤+鼠標(biāo)，開發(fā)技術(shù)是html+css+javascript；移動設(shè)備平臺的規(guī)范是鍵盤+手指（觸摸和手勢），技術(shù)iphone是Objective-C，android是java。

業(yè)界很少有說移動web前端開發(fā)的，都是移動web開發(fā).而web app特指的是用html5技術(shù)開發(fā)，之所以叫web app是因為他比較接近客戶端應(yīng)用程序的用戶體驗，可以和系統(tǒng)深度融合，調(diào)用一些只有客戶端才能調(diào)用的功能（比如在移動設(shè)備上利用html5開發(fā)出的網(wǎng)頁可以訪問電話、攝像頭等本地功能）.
通常你看到的一些文章中會提到web app 和native app,這里的web app指的是mobile web app,而移動web和web開發(fā)沒本質(zhì)的區(qū)別，但需要不同的開發(fā)框架，以解決在移動設(shè)備上的適配問題和一些特殊的操作以及功能調(diào)用。

最后總結(jié)一下，web開發(fā)利用的是基于瀏覽器的網(wǎng)頁語言技術(shù)，native app開發(fā)利用的是基于操作系統(tǒng)的程序語言技術(shù)，web app介于兩者之間.當(dāng)然現(xiàn)在比較流行混合型app，這個可以多百度一下. 編輯于 2012-07-12 1 條評論 贊同1 反對，不會顯示你的姓名

張錚錚，不攻城的前端攻城尸

雷澤爾曼 贊同 1,操作兼容性和各移動版瀏覽器的兼容性
2.各種不同的尺寸，包括寬高比（橫屏豎屏）
3.觸摸或手機(jī)鍵盤的操作
----------------
app是應(yīng)用，每個操作系統(tǒng)有專門的開發(fā)工具和語言
web是網(wǎng)頁，使用html+css+js，有工具可以生成轉(zhuǎn)化為app，不過效果一般 發(fā)布于 2012-05-31 添加評論 贊同6 反對，不會顯示你的姓名

劉楊，小白程序員

何某某、garfield、知乎用戶 等人贊同 移動前端開發(fā) 主要來說的是Native Client的開發(fā)Android為Java，iOS為Objective-C，然后么HTML5應(yīng)用號稱跨平臺其實差異很大。
Web前端開發(fā)么基本上就是HTML JavaScript CSS，不過有些人把Servelt/JSP, PHP,Ruby,Python,C#之類的只要關(guān)系到頁面的也叫做Web前端開發(fā)。 發(fā)布于 2012-05-31 4 條評論 贊同2 反對，不會顯示你的姓名

沈金根，web 前端 .

陳大衛(wèi)、何某某 贊同 大體應(yīng)該是類似的吧！移動前端使用新技術(shù) Html5+Css3+JavaScript 發(fā)布于 2012-05-31 2 條評論 贊同1 反對，不會顯示你的姓名

waynelu，http://mt.tencent.com webapp

知乎用戶 贊同 總體上應(yīng)該一樣，技術(shù)體系都差不多。不過pc需要兼容的瀏覽器更多些,mobile下andorid,ios都是基于webkit，所以相對好些。不過android下也是一堆坑，另外現(xiàn)在各種第三方瀏覽器也越來越多。。。 發(fā)布于 2014-06-26 添加評論 贊同0 反對，不會顯示你的姓名

王煒，前端痞子

一個基于webview的開發(fā) 一個是基于瀏覽器的開發(fā) 發(fā)布于 2014-08-01 添加評論 贊同0 反對，不會顯示你的姓名

張少南，前端開發(fā)

前端開發(fā)在pc和mobile通常使用js CSS html，但兩者不同。技術(shù)上可以嘗試css3和h5,使用情景也不相同，移動端禁止頁面跳轉(zhuǎn)，移動端還可以包括ios等。其實兩者差別很大，主要是行為吧 發(fā)布于 2014-11-30 添加評論 贊同5 反對，不會顯示你的姓名

耿彪，我很幸運，活在了移動互聯(lián)網(wǎng)的時代

陳大衛(wèi)、知乎用戶、匿名用戶 等人贊同 1.比如說具體的應(yīng)用在不同地方的形態(tài)。
一款計算器：
web app： 其實就是在網(wǎng)頁上的應(yīng)用。這個很廣泛，只不過大家平時都不這么叫而已，你在 網(wǎng)頁上使用一款計算器都可以稱作web app。
mobile web app：額，就是能在手機(jī)瀏覽器中打開使用的計算器，只不過根據(jù)手機(jī)的屏幕，調(diào)整了 自己的按鍵大小，布局等等。
mobile app： 你在應(yīng)用商店下載了一個計算器。
2.比如說如何用代碼編寫：
web前端：
基本上就是html+css+javascript。至于html5，css3什么的就是具體到你應(yīng)該用什么規(guī)則的代碼去寫了。這個如果樓主想要入門學(xué)習(xí)的話，推薦 w3school 在線教程（中文）。
mobile web 前端：
其實還是那套東西，但是加入了一個叫做響應(yīng)式設(shè)計的東西。而且據(jù)我了解，這個概念還要從html 5標(biāo)準(zhǔn)的普及說起，說通俗點就是屏幕多大的時候布局，字體是什么樣的。網(wǎng)上有很多前端模板都提供了這個功能。比如比較火的 Bootstrap中文網(wǎng)（中文）深層次點，比如通過html5的API調(diào)用手機(jī)的硬件等。
mobile 前端：
這個目前還分兩大陣營，一個是Android，一個是iOS。而且就我的了解，web前端有專門的崗位叫前端攻城師，但是很少聽說過只寫mobile前端的移動工程師，至少我至今沒有聽到過。
Android：
靜態(tài)的話就是xml，動態(tài)的話就是android的layout那堆東西。
https://developer.android.com/guide/topics/ui/declaring-layout.html(可能需要翻墻)
比較簡單的layout，比如:
Linear Layout(可能需要翻墻)
FrameLayout | Android Developers(可能需要翻墻)，想學(xué)習(xí)的話可以參考下。
還有一些動畫效果。
https://developer.android.com/guide/topics/graphics/index.html l(可能需要翻墻)
當(dāng)然，提到Android的UI，不得不提的是那坑爹的適配。只能說，學(xué)習(xí)Android UI需謹(jǐn)慎。
iOS：
UIKit那套東西，其實現(xiàn)在感覺如果不是太復(fù)雜，.xib直接拖界面也還可以。 UIKit Framework Reference 。storyboard就算了，不是太推薦。簡單的頁面還可以，想試也可以試試。反正我用的不是很舒服。當(dāng)然還有一些動畫效果。 Graphics and Animation
3.比如說其他區(qū)別：
其實最顯著的區(qū)別就是，web app是不依賴于具體的設(shè)備的，通用性較強(qiáng)，只要手機(jī)或PC有相應(yīng)內(nèi)核的瀏覽器就基本OK。而mobile的app則依賴于具體的設(shè)備，一旦更換設(shè)備，需要重新下載才能繼續(xù)使用。

暫時就想到這么多，以后想到了再補(bǔ)充吧。

如有侵權(quán)~聯(lián)系我 立即刪帖~~