作者:龍鼎網(wǎng)絡(luò)發(fā)布時間:2015-07-14 10:20:16瀏覽次數(shù):15386文章出處:晉城自適應(yīng)網(wǎng)站制作
在 iPhone 出現(xiàn)之前,大家訪問 Web 的主要方式還是通過桌面瀏覽器,所以設(shè)計網(wǎng)頁時只要考慮桌面瀏覽器的顯示效果就足夠了。但是在 iPhone 和 iPad 出現(xiàn)之后,就需要考慮同一個網(wǎng)頁在不同設(shè)備上的顯示效果,第一個問題的答案就是響應(yīng)式,響應(yīng)式的核心就是讓同一個網(wǎng)頁可以在不同設(shè)備上呈現(xiàn)出不同的顯示效果,主要是通過CSS來實現(xiàn)的。
主講者張元一,產(chǎn)品原型工具墨刀的創(chuàng)始人,見證了 Web 開發(fā)從 99 年 HTML4.0 到去年 12 月 HTML5 最終定稿這之間整個 Web 開發(fā)變遷史的 15 年「碼齡」全棧工程師。
概覽
以下這張圖就是元一分享的干貨內(nèi)容,它基本涵蓋了一個初級碼農(nóng)需要知道的所有基礎(chǔ)入門知識。但這張圖的目的并非用來嚇人,這其中的所有技術(shù)名詞,將以最通俗易懂的方式串聯(lián)起來—— 即我們上網(wǎng)時的慢動作解析:打開一個網(wǎng)頁或 App,這背后都運用了那些技術(shù)來讓這個網(wǎng)頁和 App 的內(nèi)容呈現(xiàn)在瀏覽器和手機上;驅(qū)動這些動作背后的技術(shù)名詞都是什么,各自有著怎樣的優(yōu)缺點,彼此間是如何協(xié)作和運轉(zhuǎn)的,以及怎樣合理地評估技術(shù)能力和開發(fā)難度。當(dāng)然,元一也推薦了豐富的學(xué)習(xí)資料。
這中間涉及的技術(shù)知識,前端包括 HTML,CSS,JavaScript,jQuery 以及 Bootstrap ;后端包括 HTTP 服務(wù)器,后端編程語言,數(shù)據(jù)庫以及 Cookie 和 Session;移動開發(fā)分為原生,混合式,HTML5,以及不同的移動端技術(shù)選擇在功能和開發(fā)成本上的比較。
什么是前端?什么是后端?二者是如何配合運轉(zhuǎn)的?
前后端的劃分,可以簡單地理解為凡是運行在用戶設(shè)備上的技術(shù)都可以稱為前端技術(shù)( 比如 HTML / CSS / JS,甚至移動設(shè)備的 Obj-C / Swift );而后端的作用就是負責(zé)將這些東西封裝在 HTTP 的數(shù)據(jù)包中然后通過網(wǎng)絡(luò)傳送到前端。當(dāng)然除了這些前端文件,后端還有一個更重要的職能,即保存和提供用戶數(shù)據(jù),比如移動端常見的 JSON 就是目前最流行的在后端和前端之間傳輸?shù)囊粋€文件格式。
前端與后端是如何配合的?如上圖,以 Web 端為例,在瀏覽器輸入一個網(wǎng)址后,瀏覽器向服務(wù)器發(fā)送了一個 HTTP 請求;服務(wù)器通過一個 HTTP 響應(yīng),把顯示這個網(wǎng)頁所需要的資源傳回給了瀏覽器。而需要在瀏覽器中執(zhí)行的技術(shù),HTML / CSS / Javascript 等就叫做前端;需要在服務(wù)器端執(zhí)行的、通常我們看不到技術(shù)就叫做后端。
Web 前端的運行邏輯
假設(shè)我們要訪問 Google,從我們在瀏覽器輸入 Google.com 到最后這個頁面出現(xiàn)在眼前,這其中涉及許多前端的技術(shù)反應(yīng)和代碼組合,總體而言可以簡化為兩步:
1/ 瀏覽器向 Google 的服務(wù)器發(fā)送了一個請求。
2/ 服務(wù)器收到了一個 HTTP 響應(yīng),這個響應(yīng)中就包含了執(zhí)行這個命令所需要的所有資源(注:可以通過 Chrome 瀏覽器的開發(fā)者工具來進一步觀察 HTTP 協(xié)議的運行情況;下圖為 Google 的 HTTP 協(xié)議運行情況)。
上圖這個界面看起來很復(fù)雜,但對于非程序員而言,HTTP 協(xié)議運行情況只要關(guān)注其中的幾個關(guān)鍵部分:第一列,即資源的 URL;第四列是這個資源的類型。在第一個請求和后續(xù)的請求之間有一根藍線,即進度條。而 HTTP 協(xié)議中運行的項目越少,瀏覽器加載的速度越快。圖中 Google 就處理得很好,只有 10 個左右的請求。
Web 前端技術(shù)語言介紹
HTML 和帶樣式的 HTML
HTML 就是一組標(biāo)簽和文本的組合,是一個最基本的網(wǎng)頁。它已經(jīng)包含了網(wǎng)頁常見的元素,實際上在 Web 早期的很長一段時期內(nèi),網(wǎng)頁都是這個樣子。后來隨著使用網(wǎng)絡(luò)的人群越來越廣泛,在 HTML3.0 中引入了對網(wǎng)頁樣式的定義,某種程度上可以說,也是從這個時候開始產(chǎn)生了網(wǎng)頁設(shè)計師的角色。
CSS
帶樣式的 HTML 也擁有一個缺點,它需要為每個標(biāo)題和文字都設(shè)定樣式,工作量非常龐大。 CSS 就是在這樣的情況下誕生了。CSS ,又稱疊層樣式表,簡言之是一種用來表現(xiàn) HTML 文件樣式的樣式設(shè)計語言。CSS 能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制,實現(xiàn)基礎(chǔ)的靜態(tài)的交互設(shè)計;而CSS 目前的最新版本 CSS3 能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離。
Javascript
差不多在 CSS 誕生的同一時間,大家開始覺得這樣靜態(tài)的網(wǎng)頁似乎略顯無聊,能不能給網(wǎng)頁加入一些可以動起來的元素?比如點擊一個按鈕之后變個顏色。當(dāng)時網(wǎng)景公司的工程師Brendan Eich 就給他們自家的瀏覽器引入了這種實現(xiàn)動態(tài)效果的腳本語言,這就是 Javascript(簡稱 JS)的誕生。所以通俗來說,Javascript 就是用來給 HTML 網(wǎng)頁增加動態(tài)功能,實現(xiàn)更炫酷的交互。
提到 Javascript ,就得提一下 jQuery 。 jQuery 是一個優(yōu)秀的 Javascript 庫。jQuery 使用戶能更方便地處理 HTML ,它能夠使用戶的 HTML 頁面保持代碼和 HTML 內(nèi)容分離,通過 jQuery ,可以不用在 HTML 里面插入一堆 JS 來調(diào)用命令,只需要定義 ID 即可。此外,由 Twitter 設(shè)計師 Mark Otto 和 Jacob Thornton 合作開發(fā)的 Bootstrap 也是一個受歡迎的前端框架。
HTML5 簡史和響應(yīng)式設(shè)計
HTML 在剛誕生的前 10 年發(fā)展是非常迅速的,在 1999 年,我們現(xiàn)在常說的 HTML5 的上一個版本 HTML4.0.1 就已經(jīng)發(fā)布了,那么為什么從 4.0 到 5.0 會拖了 15 年之久?
首先,HTML4 的發(fā)布時間和門戶時代(即 Web 1.0 時代)是基本吻合的,也就是說 HTML4 實際上是為門戶型網(wǎng)站設(shè)計的。在門戶網(wǎng)站經(jīng)歷的 4,5 的年發(fā)展之后,大家開始覺得只是單一接受信息的互聯(lián)網(wǎng)太過無聊枯燥了,差不多 2004、2005 年開始,大家希望在網(wǎng)頁中加入更多的互動元素,也就是我們常說的 Web 2.0。
但是這個時候大家就發(fā)現(xiàn),為 Web 1.0 設(shè)計的 HTML4 無法勝任這個工作,但是有另外一個技術(shù)卻非常適合,那就是 Flash。所以在 Web 2.0 的早期,當(dāng)時最炫酷的網(wǎng)站有很多是完全用 Flash 開發(fā)的,在以后的很長一段時間里,有很多網(wǎng)站都是 HTML 和 Flash 的混合式網(wǎng)站。所以在 2005 – 2010 年這段時間,HTML5 中的新標(biāo)準(zhǔn)主要是為了取代 Flash。
剛剛搞定了 Flash,又進入了移動開發(fā)時代,所以 HTML5 又花了 5 年時間制定各種針對移動平臺的標(biāo)準(zhǔn)。但是到目前為止,雖然 HTML5 已定定稿,但是對移動平臺的適應(yīng)其實還在進行中,所以在未來很長一段時間內(nèi),就像當(dāng)初的 Flash 一樣,我們會看到越來越多的混合式應(yīng)用。
在 iPhone 出現(xiàn)之前,大家訪問 Web 的主要方式還是通過桌面瀏覽器,所以設(shè)計網(wǎng)頁時只要考慮桌面瀏覽器的顯示效果就足夠了。但是在 iPhone 和 iPad 出現(xiàn)之后,就需要考慮同一個網(wǎng)頁在不同設(shè)備上的顯示效果,第一個問題的答案就是響應(yīng)式,響應(yīng)式的核心就是讓同一個網(wǎng)頁可以在不同設(shè)備上呈現(xiàn)出不同的顯示效果,主要是通過CSS來實現(xiàn)的。
除了響應(yīng)式設(shè)計,HTML 在移動端遇到的另外兩個問題就是如何利用移動設(shè)備的各種傳感器,比如 GPS,攝像頭等等;以及性能問題。為了解決這些問題,HTML5中添加了地理位置,拍照,3D 動畫加速等等 API,可以部分的利用手機設(shè)備的一些新硬件,并且新的 API 還在不斷的加入進來,這也是為什么現(xiàn)在的 HTML5 應(yīng)用可以越來越炫酷的原因。但是,HTML5 并不是專為移動設(shè)備設(shè)計的,它是由 HTML5,CSS3 以及大量的 Javascript API 共同組成的一個標(biāo)準(zhǔn)合集,微信中的 HTML5 應(yīng)用只是 HTML5 應(yīng)用場景中的很小一部分。
如何判斷一個前端的能力?
關(guān)于前端,可以簡單的把它理解為,凡是在我們的電腦,手機上運行的技術(shù),HTML,CSS,Javascript,這些都屬于前端技術(shù),使用這些技術(shù)的我們就稱為前端工程師。如何判斷一個前端的能力呢?下面是一個簡單的前端能力鏈:
只會 HTML/CSS 的,這種我們俗稱切圖的,基本上就是淘寶幾十塊切一張圖的;
懂一些簡單的 Javascript,主要是使用一些現(xiàn)成的框架,比如 jQuery,bootstrap 等等;
知道 jQuery 和 Bootstrap 的局限,必要時能寫一些原生的 JS/CSS 代碼;
對JS/CSS非常了解,執(zhí)著于使用瀏覽器的各種最新特性來實現(xiàn)各種炫酷效果,這種我們成為炫技派;
可以自己寫出類似 jQuery / Bootstrap 這樣的前端框架供其他人使用。
前端學(xué)習(xí)資料
http://www.w3schools.com
http://onemonth.com
http://www.codecademy.com/
https://github.com/alex/what-happens-when
https://qdan.me/list/VNBugw7ObupFRdlE
大家可能比較關(guān)心如果我要開發(fā)一個網(wǎng)站需要多少時間?這個問題雖然很難回答,元一還是來試著回答了?,F(xiàn)在前端有了 jQuery,bootstrap 這樣的框架,后端又有了 Ruby on Rails 這樣的快速 Web 開發(fā)框架,如果從頭學(xué)的話,像是一個簡易的 Pinterest,大概一個月就可以了。如果是一個有經(jīng)驗的程序員,可能 1 個星期就可以開發(fā)出一個大概的原型出來。
后端服務(wù)器
后端的任務(wù)實際上就是向前端提供需要顯示網(wǎng)頁和 APP 內(nèi)容的數(shù)據(jù),可能是 HTML,也可能是JSON 數(shù)據(jù),也可以是音視頻或者 PDF 文件。簡單的來劃分,一個服務(wù)器包含3個部分:
1/ HTTP 服務(wù)器
2/ 應(yīng)用服務(wù)器
3/ 數(shù)據(jù)庫
HTTP 服務(wù)器的唯一任務(wù)就是把需要返回給客戶端的資源文件封裝在 HTTP 數(shù)據(jù)包里,這個資源有可能是它后面的應(yīng)用服務(wù)器動態(tài)生成的,也有可能是保存在硬盤上的靜態(tài)文件。這是所有后端程序都必須有的,也是直接和我們的瀏覽器通信,返回給我們數(shù)據(jù)的程序。它的作用就是把它后面的編程語言生成的各種 HTML/CSS/Javascript,打包成一個 HTTP 請求,然后再封裝到一個 TCP/IP 的數(shù)據(jù)包里發(fā)回給我們。而最常用的兩個 HTTP 服務(wù)器叫做 Apach 和 Nginx。
應(yīng)用服務(wù)器就是通常意義上所說的碼農(nóng)負責(zé)的部分。他們的職責(zé)就是生成前端需要的HTML/CSS/JS 交給瀏覽器。
后端語言
1/ .net/java
龐大,復(fù)雜。但 Java 的優(yōu)點就是適合處理特別大的數(shù)據(jù)量,如果你的項目會很快實現(xiàn)大爆發(fā),需要處理海量的請求,那么 Java 是一個不錯的選擇。
2/ PHP
可以快速上手,相比其他語言,可以更快的為應(yīng)用添加各種新功能。當(dāng)然,可維護性就另當(dāng)別論了。
3/ Ruby
非常接近自然語言,基本上即使不懂編程,也能看明白 70% 或 80%。04 年出現(xiàn)了一個用 Ruby 編寫的 Web 開發(fā)框架 Ruby on Rails,當(dāng)時的效果是非常震撼的,以前需要一個團隊才能搞定的事情,使用 Ruby on Rails 后 1 個人就可以勝任了,所以 Ruby on Rails 在極短的時間內(nèi)就成為了 Ruby 的代名詞,也成為了新手學(xué)習(xí) Web 開發(fā)的不二選擇,但是 Ruby 語言也并非十全十美,快的同時,他的最大短板就是性能。Twitter 最早就是使用 Ruby on Rails 開發(fā)的,但是隨著用戶數(shù)的逐步增長,Twitter 的宕機開始變得非常頻繁,后來他們迫不得已將整個系統(tǒng)從 Ruby 遷移到到了一個從 Java 派生出來的語言 Scala。
4/ node.js
簡單來說,可以把 node.js 理解為跑在服務(wù)器上的 javascript,再直白一點,就是一個跑在服務(wù)器上的瀏覽器,因為 node.js 最早就是從 chrome 瀏覽器的Javascript 引擎 V8 中剝離出來的。相比 Ruby,Node.js 程序可以獲得更高的并發(fā)性能,這在一些高并發(fā)的場景下(比如群聊,多人協(xié)作等)會很有優(yōu)勢。
5/ 其它(python,closure 等)
6/ 無后端(leancloud)
無后端編程是最近的一個新趨勢,但她并非說是真的沒有后端,而只是把后端交給一些第三方的云平臺,比如 Leancloud,F(xiàn)irebase 等。如果你開發(fā)一個手機 App,這樣的好處就是你可以在早期沒有后端程序員的情況下快速開工,像Leancloud 這樣的云平臺已經(jīng)可以勝任大部分的應(yīng)用場景,如果后期業(yè)務(wù)邏輯復(fù)雜之后再尋找合適的后端工程師遷移也不遲。
7/ 最強編程語言 Lisp
如果要評選一個最強的編程語言,該是哪個呢?答案就是Lisp。為什么是 Lisp?Lisp 的作者在很早以前就從數(shù)學(xué)的層面總結(jié)了一個完美的編程語言應(yīng)該具備的 9 種能力,而 Lisp 就是為了配合他的這個理論而產(chǎn)生出來的語言。Hacker News 是由 YC 的創(chuàng)始人 Paul Graham 開發(fā)的,而 Paul Graham 本身就是一個 Lisp 程序員,他為了開發(fā) Hacker News,專門發(fā)明了一種新語言叫做 Arc,但因為它是基于 Lisp 的,所以也被歸為了 Lisp 的方言之一。
數(shù)據(jù)庫
我們平常訪問的大部分網(wǎng)站都是需要登錄操作的,登錄之后我們看到的就是只和自己相關(guān)的那部分內(nèi)容。這些用戶信息是保存在什么地方的呢?這就需要用到數(shù)據(jù)庫。關(guān)于數(shù)據(jù)庫,代表性的有兩個:
1/ MySQL
2/ MongoDB
MySQL 是最常用的結(jié)構(gòu)化數(shù)據(jù)庫,也是大多數(shù)創(chuàng)業(yè)公司的選擇。為什么是結(jié)構(gòu)化的?就是說它的表的結(jié)構(gòu)是固定的,比如我們常見的 User 表在 MySQL 中就是這樣的:
如果我們需要取得一條用戶記錄來檢查他輸入的密碼是否正確,這時我們就需要使用 SQL,SQL 就是結(jié)構(gòu)化查詢語言。
簡單來說,SQL 數(shù)據(jù)庫保存的是結(jié)構(gòu)化數(shù)據(jù),NOSQL 數(shù)據(jù)庫則可以保存非結(jié)構(gòu)化數(shù)據(jù)。舉個例子,還拿上面的用戶表來舉例,如果我們現(xiàn)在想要給產(chǎn)品集小妹增加一些額外的屬性,比如她給某個產(chǎn)品點贊可以效果 x2,那么如果是 SQL 數(shù)據(jù)庫,我們就需要給數(shù)據(jù)庫增加一個新的字段來保存這個屬性:
但是如果是 MongoDB 這樣的 NOSQL 數(shù)據(jù)庫,我們就不需要給所有用戶都增加一個x2的屬性,只需要給產(chǎn)品集小妹單獨增加就可以了,NOSQL 中保存到數(shù)據(jù)是如下這個樣子的:
Cookie 和 Session
服務(wù)器要處理成千上萬用戶的請求,那么他是如何區(qū)分每個用戶,并返回給每個用戶他所需要的內(nèi)容的 ?這就要涉及到 Cookie 和 Session。我們可以將 Cookie 理解為是服務(wù)器給每個用戶分配的唯一 ID,這個 ID 由用戶瀏覽器保存,而 Session 則是服務(wù)器為了維護這個會話在服務(wù)器端保存的與 cookie 對應(yīng)的用戶數(shù)據(jù)。
移動端開發(fā)
移動端和瀏覽器的區(qū)別就在于,大部分 App,我們打開的一瞬間,就已經(jīng)看到了它的界面,而不用再去向服務(wù)器來拿顯示界面的 HTML 等文件。所以移動端,開發(fā)原生應(yīng)用所運用到的技術(shù)(比如 Objective C,swift)就相當(dāng)于前端的 HTML,只不過它是直接保存在應(yīng)用本地的。這樣就產(chǎn)生了一個問題:如何來獲取應(yīng)用數(shù)據(jù)?如果是網(wǎng)頁應(yīng)用,我們可以直接將數(shù)據(jù)包含在HTML 中一并反饋給瀏覽器;但是對于移動應(yīng)用就需要有一個專門的協(xié)議來傳送應(yīng)用需要的數(shù)據(jù),這就是 JSON。
移動應(yīng)用的前端技術(shù),目前來說主要有以下三種:
原生
混合式
HTML5
HTML5 必經(jīng)要經(jīng)過瀏覽器這個中間層,所以在性能上多少會有些損失,所以如果你的應(yīng)用對性能特別敏感,原生就會是比較好的選擇;對于普通的性能要求沒那么嚴(yán)格的應(yīng)用來說,HTML5是完全可以滿足的。而如果已經(jīng)有了一個移動端的網(wǎng)站,這種情況下混合式就會是一個比較好的選擇,它可以最大程度的利用已有的資源。如果說你是從頭開發(fā)一個移動應(yīng)用,并且這個應(yīng)用對用戶體驗的要求也不是特別嚴(yán)格,那么 HTML5 就會是一個很好的選擇,HTML5 移動應(yīng)用比較顯著的應(yīng)用就是 Dailycost 。
如果說開發(fā)一個原生應(yīng)用需要 4-6 周,那么同樣功能的應(yīng)用如果我們把其中的一部分用 HTML來實現(xiàn),那么可能就只需要 3-4 周的時間,但是如果我們?nèi)渴褂?HTML ,可能就只需要1-2周。
晉城龍鼎 - 晉城網(wǎng)站建設(shè)為您解答!
專業(yè)的網(wǎng)站建設(shè)、響應(yīng)式、手機站微信公眾號開發(fā)
© 2010-2020 龍鼎網(wǎng)絡(luò) 版權(quán)所有 晉ICP備14008335號-1微信聯(lián)系
進入手機版