前端連載

[前端連載] 了解網頁發展的脈絡(中)——JavaScript 歷史 和 Framework 是什麼?

簡介

上次從靜態網頁講到了動態網頁,講到了MVC,也講到了REST API是什麼,這些都是網頁發展的過程中所留下來的精華。做網頁的時候,我們可以選擇是否依照這些原則。照著走的好處就是你已經站在巨人的肩膀上(你瞧,巨人肩膀上擠滿了人),做起事來會更加的輕鬆。而集合並規範這些原則的,就叫做Framework(等一下會提到)。

開始囉!

沒一村,我記得你第二堂課的時候,有提到前端是由html + css + javascript所構成的,你是不是漏掉什麼沒講了啊?
XDD,不小心被你發現了,我上一堂課不小心漏掉了Javascript沒講到。很好很好,其實我是在考驗你有沒有認真在聽我說!

(Javascript的遺漏,感謝網友Leo Chen提醒)

JavaScript的發軔

JavaScript,前端網頁「現在」唯一使用的程式語言,誕生於1995年,由 Netscape 的 Brendan Eich 所發明。 JavaScript 最初在Netscape瀏覽器上執行,使得網頁可以根據使用者的動作,做出不同的反應。爾後微軟也推初類似的產品JScript,一樣可以在瀏覽器上運行。

ECMAScript——JavaScript 和 JScript 的協調者

那 JScript 現在跑到哪裡去了呢?為什麼我到現在只會聽到JavaScript,壓根沒有JScript的聲音了呢?
沒錯,說的很好,由於兩個語言的存在,造成瀏覽器端程式編寫的麻煩,為了工程師的福祉,為了保護地球世界的和平,一個叫做ECMA的組織跳出來做協調。

JavaScript 和 JScript 這兩個異母異父的兄弟(不同公司,當然是異母異父的兄弟),在筆者剛出生的1996年就打得火熱,因為兩者的差異性實在是有一點大,工程師在撰寫程式碼的時候,不得不為兩種瀏覽器(Netscape 和 IE)撰寫不同的程式碼,也造成工程師間極大的不便。而關於瀏覽器的演進,可以參見本篇下方附錄,也可以順手點進我的粉絲專頁,幫我點個讚XD

為了讓工程師們可以騰出更多的時間喝杯咖啡,走出戶外和異性約會,創造國家生育率,藉以培養更多的下一代工程師坐在電腦前寫更多的程式,一個叫ECMA的組織出面來做協調。參與這場協調的,有幾個當時有名的公司(也就是說現在不有名了),包括微軟、Netscape、Sun,參與了這次的標準的制訂。這是個劃時代的標準制訂,對於網路世界的蓬勃發展,有莫大的幫助。

1997年,ECMAScript第一版推出,推出後,所有瀏覽器都會盡量去實作這個標準上的所有功能,如此一來,也更方便工程師寫出更多通用的程式。截至目前為止,ECMAScript己經出到了第6版,而第7版目前尚在制訂中。話誰如此,所有的瀏覽器目前都只有支援到第5版而已,如果要撰寫使用第6版功能的程式碼,也是可以的。不過因為主流瀏覽器都還未支援第6版的程式碼,所以我們要透過一些工具,把第6版的程式碼轉換成第5版的程式碼。

注意,在網路的世界裡,標準是十分重要的。因為能夠制訂標準的人就是老大。在家裡,你媽媽制訂標準,說你不能怎樣就是不能怎樣。因為她制訂標準,所以她是老大,財產畫在他名下,就連老公也要遵守。在學校裡,制訂規則的是校長老師們,所以他們是學校裡的老大。因此在制訂網路、網頁和程式語言的標準時,各相關公司都會出席,希望能制訂一些自己喜歡的規則。那麼在這個圈子裡,他們說的話也就會更有份量。

Java 和 Javascript 異母異父的兄弟

哈囉,可以給我來杯咖啡嗎?
好的,等我個幾分鐘。
………
來,這是你的咖啡。說到咖啡,那個以咖啡做為圖像的Java,該不會跟JavaScript也有一腿吧?
不不不,他們完全沒有關係啊,只是名字像而已……
貴圈真亂,我想我還是退出好了……
拜託別啊!網頁工程師可是很好玩的,且讓我說下去!

其實 Javascript 的前身,叫做 LiveScript,只是在 Java 大大正火紅的時候,為了討個喜氣,討個名氣,於是 Netscape 在和開發 Java 的 Sun 成協議後,便把它改名叫做 JavaScript。看來JavaScript也是個牆頭草啊!

Java 語言在當時會紅,有它的必然性,不過這和本篇的主題無關,有興趣可以查一下。雖然現在Java感覺上不是那麼的紅了,他還是世界上一個很重要的程式語言,足以和C/C++分庭抗禮。而筆者也是Java的愛好者之一。

至於 JavaScript,本身和 Java 是一個「完全不同」的語言,這點非常的重要!Javascript是屬於直譯式的語言,而Java是屬於編譯式+直譯式的語言,而我們常見的C/C++則是編譯式的語言。直譯式和編譯式最主要的分別,比較不好比喻,我直接解釋好了。

首先是直譯式語言,Javascript的程式碼是放在一個JS檔上的,這點我們在第二篇(我是傳送門)時有提過。之後,我們的直譯器會一行一行的去執行,執行到一半,因為程式碼寫錯而發生錯誤了,該怎麼辦?就爆給你看,而該完成的功能就無法完成,會影響網站的執行嗎?可能會可能不會,這點不能保證。有可能這個功能壞掉了,但是其它的功能還是可以用的。一般來說,大型網站多少都會有一些bug,想要知道有什麼bug,開啟Chrome Developer Tool (F12)後,在網站上隨便按一按,有出現紅字,那就是有錯誤發生了,但是網站有crash掉嗎?那可不一定。

以下這張包含一個error和一個warning:

web-error

以下這張圖也出現了一個error,不過這是我自己的chrome extension有問題,和該網頁的網頁工程師沒有關係。(感謝網友Andre Lee指正)

web-error-chrome-extension.png

而編譯式語言,會先把檔案編譯成一個可以執行的執行檔,中間如果程式碼有寫錯,那就無法編譯。此時就要去修改程式碼,直到它可以編譯成功為止。當然也有可能執行檔執行到一半時,執行檔crash掉,這種error叫做runtime error。詳細內容,也可以自行查閱。

而Java,則是總和編譯和直譯的語言,詳細內容亦不在我們討論範圍。總之,很重要的一點,Java和JavaScript很不一樣,千萬別搞混了!

Framework——網頁撰寫加速器

我剛剛右鍵把網頁原始碼點開來看,覺得程式碼好多喔,看的我都快昏了,工程師要親手弄那麼多東西嗎?也太複雜了吧?
你這個人怎麼意見這麼多。好啦,其實工程師是很懶的,為了加速網頁開發和去除重複的步驟,大型網站的開發都會搭配一個網頁的framework來進行。選擇有利的framework,做起事來可是事半功倍的!

因為網頁分工越來越明確,為了加速網頁的開發,於是framework(框架)出現了。以Ruby on Rails(後面簡稱RoR)這個 framework 來說, 它在2004年出現,到現在為止,都還是一個很火紅的framework。

如果說 Ruby on Rails 是一個框架,那它是用什麼語言寫的?那跟函式庫(library)又有什麼差別?
很好,你提了一個很棒的問題。Framework、library、程式語言,這三個的差別,絕對有必要說清楚,且讓我為你分析。

RoR 是一個前後端整合性的framework,使用這個framework,你可以輕鬆鬆的實踐MVC這個概念。在程式碼中把需要的library 給 import進來,就能快速的搭建一個網站。而在撰寫程式碼時,我們所需要的程式語言是Ruby。

還是很不好懂嗎?這麼說好了,以廚房來做比喻好了(天啊,你哪來這些奇奇怪怪的比喻),如果你現在要設計很多種廚房,這幾種廚房分別做

  • 美式料理
  • 台菜
  • 法國料理
  • 咖啡廳

那你就會需要4種不同framework的廚房。根據不同的煮菜需求,你會需要適合的廚具、刀具、餐盤,而這些就是你的library。比如你現在想要蒸一籠蒸餃,那你就要import一個蒸籠,這樣你才能蒸出一盤好吃的蒸餃。當然你也可以用電鍋來蒸蒸餃,而且如果你技術夠好的話,可以蒸的一樣好吃。這說明了不同的library,有時候也可以完成相同的功能。

library間彼此的差異是可大可小的。有的library非常健全,就像大同電鍋一樣,功能包山包海。也有的library寫來就只是為了完成一個小小的功能。

Framework是一種程式總體的規範,大部分是比較嚴謹的。它規範的範圍是可大可小的,譬如檔案位置、程式碼風格、library如何管理……。一般來說,照著某個Framework既定的規範或傳統下去走,可以很快的完成一個成品,因為中間很多的過程,都有別人撰寫的library幫你完成雜事了。

以RoR 來說,他是一個全端(前端加後端)的framework,按照它的規範下去做網頁,前端的檔案放哪裡,後端的檔案放哪裡,request和response的串接,都有現成的規定和做法,可以很快的完成一個網頁,而且是照著MVC的架構下去做的。

下面舉例一些常見的framework,使用的語言,想要完成的事:

  • bootstrap,CSS,快速建造一個網站的畫面配置
  • Ruby on Rails,Ruby,全端framework
  • Nodejs+Express,Javascript,後端framework
  • AngularJs,Javascript,前端framework
  • Laravel,PHP,前後端framework

真有意思,那我該如何選擇我想要的framework呢?
哈哈,聽出興趣了齁,我的連載都還沒講到程式的部分,你就想要開始寫了XD,孺子可教也!

以前端來說,我的建議是先不要貿然進一個framework,由 CSS 和 html 開始慢慢寫,寫著寫著,就會知道哪裡寫起來很廢事,很花時間。這時候,你自然而然就會去找一個你覺得OK的framework了。

以武打來說,framework是花招,而基本的javascript、css、html是基本功,學好基本功,才能把花招發揮的更有威力!

結語

這一篇只介紹了兩個東西,分別是 javascript 和 framework。雖然只介紹了兩樣東西,卻花了一篇文章去慢慢解釋,因為我認為這兩個觀念對未來是很有幫助的。

本來想要談到一些AJAX的東西,時間不早了,就留到下次再說吧:)

嘿,你這杯Java真好喝!可以再給我來隻Chicken嗎?

附錄

瀏覽器和網路的演進

ECMAScript

JavaScript

Ruby on Rails

Chicken

粉絲專頁

https://www.facebook.com/noootownnotes/

4 thoughts on “[前端連載] 了解網頁發展的脈絡(中)——JavaScript 歷史 和 Framework 是什麼?

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s