reamweaver對(duì)一個(gè)web前端工作者來(lái)說(shuō),再熟悉不過(guò)了,像我07年接觸web前端開(kāi)發(fā)就是用的dreamweaver,一直用到現(xiàn)在,身邊的朋友有跟我推薦過(guò)各種更好用的可替代dreamweaver的工具,一開(kāi)始我是拒絕的,但是后來(lái)我發(fā)現(xiàn)竟然真有比dreamweaver好用的工具,智能提示,自動(dòng)補(bǔ)全工具,模糊編碼這些用上手了以后根本停不下來(lái),sublime text當(dāng)之不愧是最佳替代方案第一選擇。
1. Sublime Text
Sublime Text2是一款跨平臺(tái)的編輯器,再也不用為換平臺(tái)而找不到合適的、熟悉的編輯器擔(dān)憂了。
Sublime Text2 是一款具有代碼高亮、語(yǔ)法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件,不僅具有華麗的界面,還支持插件擴(kuò)展機(jī)制,用她來(lái)寫(xiě)代碼,絕對(duì)是一種享受。
Sublime Text 2 的特色功能:
良好的擴(kuò)展功能,官方稱(chēng)之為安裝包(Package)。
右邊沒(méi)有滾動(dòng)條,取而代之的是代碼縮略圖,這個(gè)功能非常贊
強(qiáng)大的快捷命令“可以實(shí)時(shí)搜索到相應(yīng)的命令、選項(xiàng)、snippet 和 syntex, 按下回車(chē)就可以直接執(zhí)行,減少了查找的麻煩。”
即時(shí)的文件切換。
隨心所欲的跳轉(zhuǎn)到任意文件的任意位置。
多重選擇(Multi-Selection)功能允許在頁(yè)面中同時(shí)存在多個(gè)光標(biāo)。
支持 VIM 模式
支持宏,簡(jiǎn)單地說(shuō)就是把操作錄制下來(lái)或者自己編寫(xiě)命令,然后播放剛才錄制的操作或者命令。
更新非常勤快
2. TopStyle5
TopStyle 是一款 CSS 開(kāi)發(fā)輔助工具,即 HTML5 / CSS3 編輯器,它專(zhuān)注于 HTML CSS 設(shè)計(jì)輔助,提供比較多的功能,如 CSS 代碼檢查等,據(jù)稱(chēng) TopStyle 的幫助文件非常好,有詳細(xì)的 CSS 指令,適于初次接觸 CSS 的學(xué)習(xí)之用。
不過(guò)如果你想對(duì) CSS 了如指掌,對(duì) CSS 網(wǎng)頁(yè)布局非常熟練,還是扔掉一切輔助軟件,用記事本開(kāi)發(fā),而熟練 CSS 之后,再使用此類(lèi)輔助軟件,可以提高工作效率和開(kāi)發(fā)速度。
TopStyle 5 在 CSS3 / HTML5 方面的增強(qiáng):
*??CSS3 for Inspector, Insight and Style Checker
*??Prefixr
*??CSS3 Media Queries
*??CSS Gradient Generator
*??Text Shadow Generator
*??Improved options for Preview Files (CSS-only)
*??HTML5 for Inspector and Insight
*??HTML5-only Validator
*??HTML Structure Panel
*??Wrap HTML Tag
*??Image Map Editor (HTML-only)
3. Chocolat
Chocolat是Mac系統(tǒng)上最新出現(xiàn)的一款強(qiáng)大的文本編輯器,兼具原生的Cocoa及強(qiáng)大的文本編輯功能。Chocolat支持多種編程語(yǔ)言的關(guān)鍵字高亮顯示、窗口分割、標(biāo)簽頁(yè)、色彩主題等功能。界面和MacVim非常相似。
4. Aptana
Aptana 是一個(gè)非常強(qiáng)大,開(kāi)源,專(zhuān)注于JavaScript的Ajax開(kāi)發(fā)IDE。它的特性包括: *JavaScript,JavaScript函數(shù),HTML,CSS語(yǔ)言的Code Assist功能。 *Outliner(大綱):顯示JavaScript,HTML和CSS的代碼結(jié)構(gòu)。
*支持JavaScript,HTML,CSS代碼提示,包括JavaScript 自定函數(shù)
*代碼語(yǔ)法錯(cuò)誤提示。
*支持Aptana UI自定義和擴(kuò)展。
*支持跨平臺(tái)。
*支持FTP/SFTP
*調(diào)試JavaScript
*支持流行AJAX框架的Code Assist功能:AFLAX,Dojo,JQuery,MochiKit,Prototype,Rico,script.aculo.us,Yahoo UI,Ext。
*Adobe AIR與iPhone開(kāi)發(fā)工具
5. Komodo IDE
Komodo 是一個(gè)跨平臺(tái)支持多種程序語(yǔ)言的Integrated Development Environment (IDE)軟件,目前他支持了在Windows與Linux上 ,Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序語(yǔ)言開(kāi)發(fā),以及多種程序語(yǔ)言語(yǔ)法著色。
6. Eclipse
Eclipse是 著名的跨平臺(tái)的自由集成開(kāi)發(fā)環(huán)境(IDE)。最初主要用來(lái)Java語(yǔ)言開(kāi)發(fā),但是目前亦有人通過(guò)插件使其作為其他計(jì)算機(jī)語(yǔ)言比如C++和Python的開(kāi) 發(fā)工具。Eclipse的本身只是一個(gè)框架平臺(tái),但是眾多插件的支持使得Eclipse擁有其他功能相對(duì)固定的IDE軟件很難具有的靈活性。許多軟件開(kāi)發(fā) 商以Eclipse為框架開(kāi)發(fā)自己的IDE。
Eclipse的基礎(chǔ)是富客戶(hù)機(jī)平臺(tái)(Rich Client Platform, 即RCP)。RCP包括下列組件:
核心平臺(tái)(啟動(dòng)Eclipse,運(yùn)行插件)
OSGi(標(biāo)準(zhǔn)集束框架)
SWT(可移植構(gòu)件工具包)
JFace(文件緩沖,文本處理,文本編輯器)
Eclipse工作臺(tái)(即Workbench ,包含視圖(views)、編輯器(editors)、視角(perspectives)、和向?qū)В╳izards))
Eclipse采用的技術(shù)是IBM公司開(kāi)發(fā)的(SWT),這是一種基于Java的窗口組件,類(lèi)似Java本身提供的AWT和Swing窗口組件;不 過(guò)IBM聲稱(chēng)SWT比其他Java窗口組件更有效率。Eclipse的用戶(hù)界面還使用了GUI中間層JFace,從而簡(jiǎn)化了基于SWT的應(yīng)用程序的構(gòu)建。
Eclipse的插件機(jī)制是輕型軟件組件化架構(gòu)。在富客戶(hù)機(jī)平臺(tái)上,Eclipse使用插件來(lái)提供所有的附加功能,例如支持Java以外的其他語(yǔ) 言。 已有的分離的插件已經(jīng)能夠支持C/C++(CDT)、Perl、Ruby,Python、telnet和數(shù)據(jù)庫(kù)開(kāi)發(fā)。插件架構(gòu)能夠支持將任意的擴(kuò)展加入到 現(xiàn)有環(huán)境中,例如配置管理,而決不僅僅限于支持各種編程語(yǔ)言。
Eclipse的設(shè)計(jì)思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。Eclipse基本內(nèi)核包括:圖形API (SWT/Jface), Java開(kāi)發(fā)環(huán)境插件(JDT ),插件開(kāi)發(fā)環(huán)境(PDE)等。
Eclipse由各種不同的計(jì)劃組成。以下列出了部分計(jì)劃。
Eclipse計(jì)劃:本身包括Eclipse平臺(tái),Eclipse富客戶(hù)端平臺(tái)(RCP)和Java開(kāi)發(fā)工具(JDT)。
Eclipse測(cè)試和性能工具平臺(tái)(TPTP):提供一個(gè)允許軟件開(kāi)發(fā)者構(gòu)建諸如測(cè)試調(diào)試、概況分析、基準(zhǔn)評(píng)測(cè)等測(cè)試和性能工具的平臺(tái)。
Eclipse Web工具平臺(tái)計(jì)劃 (WTP):用Java企業(yè)版Web應(yīng)用程序開(kāi)發(fā)工具來(lái)擴(kuò)展Eclipse平臺(tái)。它由以下部分組成:HTML、JavaScript、CSS、JSP、SQL、XML、DTD、XSD和 WSDL的 源代碼編輯器;XSD和WSDL的圖形界面編輯器;Java企業(yè)版的“項(xiàng)目性質(zhì)”(project nature)、建構(gòu)器(builder)和模型(model),與一個(gè)Java企業(yè)版的導(dǎo)航(navigator);一個(gè)Web服務(wù)(Web service)向?qū)Ш蜑g覽器,還有一個(gè)WS-I測(cè)試工具;最后是數(shù)據(jù)庫(kù)訪問(wèn)查詢(xún)的工具與模型。
Eclipse商業(yè)智能和報(bào)表工具計(jì)劃(BIRT):提供Web應(yīng)用程序(特別是基于Java企業(yè)版的)的報(bào)表開(kāi)發(fā)工具。
Eclipse可視化界面編輯器計(jì)劃(VEP):一個(gè)Eclipse下創(chuàng)建圖形用戶(hù)界面代碼生成器的框架。
Eclipse建模框架(EMF):依據(jù)使用XMI描述的建模規(guī)格,生成結(jié)構(gòu)化數(shù)據(jù)模型的工具和其他應(yīng)用程序的代碼。
圖形化編輯器框架(GEF):能讓開(kāi)發(fā)者采用一個(gè)現(xiàn)成的應(yīng)用程序模型來(lái)輕松地創(chuàng)建富圖形化編輯器。
UML2:Eclipse平臺(tái)下的一個(gè)UML 2.0元模型的實(shí)現(xiàn),用以支持建模工具的開(kāi)發(fā)。
AspectJ:一種針對(duì)Java的面向側(cè)面語(yǔ)言擴(kuò)展。
Eclipse通訊框架(ECF):專(zhuān)注于在Eclipse平臺(tái)上創(chuàng)建通訊應(yīng)用程序的工作。
Eclipse數(shù)據(jù)工具平臺(tái)計(jì)劃(DTP)
Eclipse設(shè)備驅(qū)動(dòng)軟件開(kāi)發(fā)計(jì)劃(DSDP)
C/C++開(kāi)發(fā)工具計(jì)劃(CDT):努力為Eclipse平臺(tái)提供一個(gè)全功能C和C++的集成開(kāi)發(fā)環(huán)境(IDE),它使用GCC作為編譯器。
Eclipse平臺(tái)COBOL集成開(kāi)發(fā)環(huán)境子計(jì)劃(COBOL):將構(gòu)建一個(gè)Eclipse平臺(tái)上的全功能COBOL集成開(kāi)發(fā)環(huán)境。
并行工具平臺(tái)(PTP):將開(kāi)發(fā)一個(gè)對(duì)并行計(jì)算機(jī)架構(gòu)下的一組工具進(jìn)行集成的平行工具平臺(tái),而且這個(gè)平臺(tái)是可移植的,可伸縮的并基于標(biāo)準(zhǔn)的。
嵌入式富客戶(hù)端平臺(tái)(eRCP):計(jì)劃將Eclipse富客戶(hù)端平臺(tái)擴(kuò)展到嵌入式設(shè)備上。這個(gè)平臺(tái)主要是一個(gè)富客戶(hù)端平臺(tái)(RCP)組件子集的集合。它能讓桌面環(huán)境下的應(yīng)用程序模型能夠大致同樣地能運(yùn)用在嵌入式設(shè)備上。
但是我個(gè)人用的其實(shí)還是國(guó)產(chǎn)的hbuilder,有點(diǎn)像中文版的sublime text,sublime text提供了很多自動(dòng)補(bǔ)全,提示等插件,而hbuilder則集成了這些,像我這種懶人就更偏向于傻瓜化點(diǎn)的。
----------------------------
切圖網(wǎng)(qietu.com)是一家專(zhuān)門(mén)從事web前端開(kāi)發(fā)的服務(wù)機(jī)構(gòu),長(zhǎng)期致力于提供高品質(zhì)的psd轉(zhuǎn)html5、響應(yīng)適配、webapp切圖,h5切圖等web前端開(kāi)發(fā)服務(wù)。
專(zhuān)注web前端開(kāi)發(fā)技術(shù),關(guān)注用戶(hù)體驗(yàn),加我們公眾微信賬號(hào):qietuwang(長(zhǎng)按復(fù)制)
言
以前的項(xiàng)目大多數(shù)都是Java程序猿又當(dāng)?shù)之?dāng)媽?zhuān)雀闱埃指愫蠖恕?/p>
隨著時(shí)代的發(fā)展,漸漸的許多大中小公司開(kāi)始把前后端的界限分的越來(lái)越明確,前端工程師只負(fù)責(zé)前端的事情,后端工程師只管后端的事情。正所謂術(shù)業(yè)有專(zhuān)攻,一個(gè)人如果什么都會(huì),那么每一樣都很難達(dá)到精通。
大中型公司需要專(zhuān)業(yè)人才,小公司需要全才,但是對(duì)于個(gè)人職業(yè)發(fā)展來(lái)說(shuō),我建議是分開(kāi)。你要是這輩子就吃 Java 這碗飯,就不要去研究什么 css,js 等等。
把你的精力專(zhuān)注在 Java,JVM 原理,Spring原理,mysql鎖,事務(wù),多線程,大并發(fā),分布式架構(gòu),微服務(wù),以及相關(guān)的項(xiàng)目管理等等,這樣你的核心競(jìng)爭(zhēng)力才會(huì)越來(lái)越高,正所謂你往生活中投入什么,生活就會(huì)反饋給你什么。
曾幾何時(shí)
我們的Java Web項(xiàng)目都是使用了若干后臺(tái)框架進(jìn)行開(kāi)發(fā),Spring、Spring MVC、MyBatis、Hibernate等等。
而且大多數(shù)項(xiàng)目在Java后端都是分了三層,控制層、業(yè)務(wù)層、持久層。控制層負(fù)責(zé)接收參數(shù),調(diào)用相關(guān)業(yè)務(wù)層,封裝數(shù)據(jù),以及路由到JSP頁(yè)面。然后Jsp頁(yè)面上使用各種標(biāo)簽(jstl/el)表達(dá)式將后臺(tái)的數(shù)據(jù)展現(xiàn)出來(lái)。
我們先看上述這種情況,需求定完了,代碼寫(xiě)完了,測(cè)試測(cè)完了,然后發(fā)布:
你需要用maven或者eclipse等工具把你的代碼打成一個(gè)war包,然后把這個(gè)war包發(fā)布到你的生產(chǎn)環(huán)境下的Web容器里,發(fā)布完了之后,你要啟動(dòng)你的Web容器,開(kāi)始提供服務(wù),這時(shí)候你通過(guò)配置域名,dns等等相關(guān),你的網(wǎng)站就可以訪問(wèn)了。
那我們來(lái)看,你的前后端代碼是不是全都在那個(gè)war包里?包括你的js,css,圖片,各種第三方的庫(kù),對(duì)吧?
好,下面在瀏覽器中輸入你的網(wǎng)站域名:www.xxx.com,之后發(fā)生了什么?
瀏覽器在通過(guò)ip路由到你的服務(wù),在tcp3次握手之后,通過(guò)tcp協(xié)議開(kāi)始訪問(wèn)你的Web服務(wù)器,你的Web服務(wù)器得到請(qǐng)求后,開(kāi)始提供服務(wù),接收請(qǐng)求,之后通過(guò)response返回你的應(yīng)答給瀏覽器。
我們先假設(shè)你的首頁(yè)中有100張圖片,以及一個(gè)單表的查詢(xún),此時(shí),用戶(hù)的看似一次http請(qǐng)求,其實(shí)并不是一次,用戶(hù)在第一次訪問(wèn)的時(shí)候,瀏覽器中不會(huì)有緩存,你的100張圖片,瀏覽器要連著請(qǐng)求100次http請(qǐng)求(有人會(huì)跟我說(shuō)http長(zhǎng)鏈短鏈的問(wèn)題,不在這里討論),你的Web服務(wù)器接收這些請(qǐng)求,都需要耗費(fèi)內(nèi)存去創(chuàng)建socket來(lái)玩tcp傳輸。
重點(diǎn)來(lái)了,這樣的話,你的Web服務(wù)器的壓力會(huì)非常大,因?yàn)轫?yè)面中的所有請(qǐng)求都是只請(qǐng)求到你這臺(tái)服務(wù)器上,如果1個(gè)人還好,如果10000個(gè)人并發(fā)訪問(wèn)呢(先不聊web服務(wù)器集群,這里就說(shuō)是單實(shí)例Web服務(wù)器),那你的服務(wù)器能扛住多少個(gè)tcp鏈接?你的服務(wù)器的內(nèi)存有多大?你能抗住多少I(mǎi)O?你給web服務(wù)器分的內(nèi)存有多大?會(huì)不會(huì)宕機(jī)?
這就是為什么,越是大中型的Web應(yīng)用,他們?cè)绞且怦睢?/p>
理論上你可以把你的數(shù)據(jù)庫(kù)+應(yīng)用服務(wù)+消息隊(duì)列+緩存+用戶(hù)上傳的文件+日志+等等都扔在一臺(tái)主機(jī)上,但是這樣就好像是你把雞蛋都放在一個(gè)籃子里,隱患非常大。
正常的分布式架構(gòu),是都要拆開(kāi)的,你的應(yīng)用服務(wù)器集群(前,后)+文件服務(wù)器集群+數(shù)據(jù)庫(kù)服務(wù)器集群+消息隊(duì)列集群+緩存集群等等。
步入正題
下面步入正題,首先以后的 Java web項(xiàng)目都盡量要避免使用JSP,要搞前后臺(tái)解耦,玩分布式架構(gòu),這樣我們的應(yīng)用架構(gòu)才更強(qiáng)。
使用 JSP 的痛點(diǎn):
1. 動(dòng)態(tài)資源和靜態(tài)資源全部耦合在一起,無(wú)法做到真正的動(dòng)靜分離。服務(wù)器壓力大,因?yàn)榉?wù)器會(huì)收到各種http請(qǐng)求,例如css的http請(qǐng)求、js的、圖片的、動(dòng)態(tài)代碼的等等。一旦服務(wù)器出現(xiàn)狀況,前后臺(tái)一起玩完,用戶(hù)體驗(yàn)極差。
2. 前端工程師做好html后,需要由Java工程師來(lái)將html修改成jsp頁(yè)面,出錯(cuò)率較高(因?yàn)轫?yè)面中經(jīng)常會(huì)出現(xiàn)大量的js代碼),修改問(wèn)題時(shí)需要雙方協(xié)同開(kāi)發(fā),效率低下。
3. JSP 必須要在支持Sava的Web服務(wù)器里運(yùn)行(例如tomcat等),無(wú)法使用nginx等(nginx據(jù)說(shuō)單實(shí)例http并發(fā)高達(dá)5w,這個(gè)優(yōu)勢(shì)要用上),性能提不上來(lái)。
4. 第一次請(qǐng)JSP,必須要在web服務(wù)器中編譯成servlet,第一次運(yùn)行會(huì)較慢。
5. 每次請(qǐng)求JSP都是訪問(wèn)Servlet再用輸出流輸出的html頁(yè)面,效率沒(méi)有直接使用html高。
6. JSP 內(nèi)有較多標(biāo)簽和表達(dá)式,前端工程師在修改頁(yè)面時(shí)會(huì)捉襟見(jiàn)肘,遇到很多痛點(diǎn)。
7. 如果JSP中的內(nèi)容很多,頁(yè)面響應(yīng)會(huì)很慢,因?yàn)槭峭郊虞d。
基于上述的一些痛點(diǎn),我們應(yīng)該把整個(gè)項(xiàng)目的開(kāi)發(fā)權(quán)重往前移,實(shí)現(xiàn)前后端真正的解耦!
老的方式:
1. 客戶(hù)端請(qǐng)求
2. 服務(wù)端的servlet或controller接收請(qǐng)求(路由規(guī)則由后端制定,整個(gè)項(xiàng)目開(kāi)發(fā)的權(quán)重大部分在后端)
3. 調(diào)用service,dao代碼完成業(yè)務(wù)邏輯
4. 返回JSP
5. jsp展現(xiàn)一些動(dòng)態(tài)的代碼
新的方式:
1. 瀏覽器發(fā)送請(qǐng)求
2. 直接到達(dá)html頁(yè)面(路由規(guī)則由前端制定,整個(gè)項(xiàng)目開(kāi)發(fā)的權(quán)重前移)
3. html頁(yè)面負(fù)責(zé)調(diào)用服務(wù)端接口產(chǎn)生數(shù)據(jù)(通過(guò)ajax等等)
4. 填充html,展現(xiàn)動(dòng)態(tài)效果。
有興趣的童鞋可以訪問(wèn)一下阿里巴巴等大型網(wǎng)站,然后按一下F12,監(jiān)控一下你刷新一次頁(yè)面,他的http是怎么玩的,大多數(shù)都是單獨(dú)請(qǐng)求后臺(tái)數(shù)據(jù),使用 json傳輸數(shù)據(jù),而不是一個(gè)大而全的http請(qǐng)求把整個(gè)頁(yè)面包括動(dòng)+靜全部返回過(guò)來(lái)
這樣做的好處是:
1. 可以實(shí)現(xiàn)真正的前后端解耦,前端服務(wù)器使用nginx。
前端服務(wù)器放的是css,js,圖片等等一系列靜態(tài)資源。甚至你還可以css,js,圖片等資源放到特定的文件服務(wù)器,例如阿里云的oss,并使用cdn加速,前端服務(wù)器負(fù)責(zé)控制頁(yè)面引用,跳轉(zhuǎn),調(diào)用后端的接口,后端服務(wù)器使用tomcat。
這里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack
2. 發(fā)現(xiàn)bug,可以快速定位是誰(shuí)的問(wèn)題,不會(huì)出現(xiàn)互相踢皮球的現(xiàn)象。
頁(yè)面邏輯,跳轉(zhuǎn)錯(cuò)誤,瀏覽器兼容性問(wèn)題,腳本錯(cuò)誤,頁(yè)面樣式等問(wèn)題,全部由前端工程師來(lái)負(fù)責(zé)。
接口數(shù)據(jù)出錯(cuò),數(shù)據(jù)沒(méi)有提交成功,應(yīng)答超時(shí)等問(wèn)題,全部由后端工程師來(lái)解決。
雙方互不干擾,前端與后端是相親相愛(ài)的一家人。
3. 在大并發(fā)情況下,我可以同時(shí)水平擴(kuò)展前后端服務(wù)器,比如淘寶的一個(gè)首頁(yè)就需要2000臺(tái)前端服務(wù)器做集群來(lái)抗住日均多少億+的日均pv。
去參加阿里的技術(shù)峰會(huì),聽(tīng)他們說(shuō)他們的web容器都是自己寫(xiě)的,就算他單實(shí)例抗10萬(wàn)http并發(fā),2000臺(tái)是2億http并發(fā),并且他們還可以根據(jù)預(yù)知洪峰來(lái)無(wú)限拓展,很恐怖,就一個(gè)首頁(yè)。
4. 減少后端服務(wù)器的并發(fā)壓力,除了接口以外的其他所有http請(qǐng)求全部轉(zhuǎn)移到前端nginx上。
5. 即使后端服務(wù)暫時(shí)超時(shí)或者宕機(jī)了,前端頁(yè)面也會(huì)正常訪問(wèn),只不過(guò)數(shù)據(jù)刷不出來(lái)而已。
6. 也許你也需要有微信相關(guān)的輕應(yīng)用,那樣你的接口完全可以共用,如果也有app相關(guān)的服務(wù),那么只要通過(guò)一些代碼重構(gòu),也可以大量復(fù)用接口,提升效率。
7. 頁(yè)面顯示的東西再多也不怕,因?yàn)槭钱惒郊虞d。
注意:
1. 在開(kāi)需求會(huì)議的時(shí)候,前后端工程師必須全部參加,并且需要制定好接口文檔,后端工程師要寫(xiě)好測(cè)試用例,不要讓前端工程師充當(dāng)你的組專(zhuān)職測(cè)試,推薦使用
chrome的插件postman,service層的測(cè)試用例拿junit寫(xiě)。
2. 上述的接口并不是java里的interface,說(shuō)白了調(diào)用接口就是調(diào)用你controler里的方法。
3. 加重了前端團(tuán)隊(duì)的工作量,減輕了后端團(tuán)隊(duì)的工作量,提高了性能和可擴(kuò)展性。
4. 我們需要一些前端的框架來(lái)解決類(lèi)似于頁(yè)面嵌套,分頁(yè),頁(yè)面跳轉(zhuǎn)控制等功能。(上面提到的那些前端框架)。
5. 如果你的項(xiàng)目很小,或者是一個(gè)單純的內(nèi)網(wǎng)項(xiàng)目,那你大可放心,不用任何架構(gòu)而言,但是如果你的項(xiàng)目是外網(wǎng)項(xiàng)目,呵呵噠。
6. 以前還有人在使用類(lèi)似于velocity/freemarker等模板框架來(lái)生成靜態(tài)頁(yè)面,現(xiàn)在這種做法也被淘汰掉了。
7. 這篇文章主要的目的是說(shuō)JSP在大型外網(wǎng)Java web項(xiàng)目中被淘汰掉,可沒(méi)說(shuō)JSP可以完全不學(xué),對(duì)于一些學(xué)生朋友來(lái)說(shuō),servlet等相關(guān)的Java web基礎(chǔ)還是要掌握牢的,不然你以為Spring MVC這種框架是基于什么來(lái)寫(xiě)的?
我是一個(gè)從事IT行業(yè)十多年的技術(shù)熱愛(ài)者,如果大家對(duì)于學(xué)習(xí)Java有任何問(wèn)題。比如如何提升技術(shù)、學(xué)習(xí)方法應(yīng)該注意什么、以及如何才能提升薪資或者缺少比較新的Java學(xué)習(xí)資料,都可以隨時(shí)來(lái)咨詢(xún)我,私信我“Java”會(huì)自動(dòng)回復(fù)我的交流方式以及全面的Java系統(tǒng)學(xué)習(xí)教程,希望大家可以多交流,找到屬于自己的圈子。
苑?2015/05/28 16:28
這是「 NEXT Collections | Google I/O」系列的開(kāi)篇。NEXT Collections 是NEXT 用戶(hù)基于產(chǎn)品集的干貨分享專(zhuān)欄。Google I/O 期間,我們邀請(qǐng)和聚集了 NEXT 用戶(hù)中的 Google 工程師、國(guó)內(nèi) Android 頂尖開(kāi)發(fā)者,為大家分享和呈現(xiàn)關(guān)于 Google 的最干貨信息與觀點(diǎn)碰撞。
文章的作者 CJ 是 Google 八年的資深工程師,現(xiàn)回國(guó)創(chuàng)辦了在線協(xié)作文檔「一起寫(xiě)」,這篇文章也是他與 geek 范的同事們?cè)凇敢黄饘?xiě)」協(xié)作完成的。點(diǎn)擊 NEXT 產(chǎn)品集「Google 開(kāi)源項(xiàng)目」,完整查看文中提到的技術(shù)與開(kāi)源項(xiàng)目。
過(guò)去十幾年來(lái), Web 開(kāi)發(fā)技術(shù)從最初的純 HTML 到 CGI、PHP / JSP / ASP、Ajax、Rails、Node.js,已經(jīng)發(fā)展到了一個(gè)非常成熟的階段。去年的 Google I/O,谷歌開(kāi)發(fā)者中心推出了關(guān)于 Web 開(kāi)發(fā)的最佳實(shí)踐手冊(cè);而今年的 Google I/O ,「The Next Generation of Mobile Web」依然是其中的一個(gè)重要議程。
不過(guò),前人栽樹(shù),后人乘涼。現(xiàn)在大家拷貝的代碼可不是自己從土里自己長(zhǎng)出來(lái)的,而是技術(shù)大牛一行行敲出來(lái)。即便是谷歌這樣的互聯(lián)網(wǎng)巨鱷,在 Web 開(kāi)發(fā)上也經(jīng)歷過(guò)無(wú)數(shù)的努力和踩過(guò)一個(gè)又一個(gè)的坑。今晚 Google I/O 正式開(kāi)啟之前,我就給大家講講這些事兒,聊聊從 Desktop 時(shí)代到今天的 Mobile 時(shí)代,谷歌 Web 開(kāi)發(fā)技術(shù)的變遷、踩過(guò)的坑。
| Gmail、Google Map : 世界瘋了兩次
大家知道,最早期的 web 開(kāi)發(fā)指的就是 HTML,CSS,JavaScript,很多剛畢業(yè)的學(xué)生就會(huì)說(shuō),“切,會(huì)寫(xiě) HTML,JS, CSS 不算寫(xiě)程序, 會(huì)寫(xiě) C++ 的才算”, 這可大錯(cuò)特錯(cuò)了。你們想想,寫(xiě)一個(gè) C++ 程序只需要會(huì)一種語(yǔ)言,寫(xiě)個(gè) Web 應(yīng)用得學(xué)三種語(yǔ)言,而且這三種語(yǔ)言還以一些神秘的、很多時(shí)候還沒(méi)有文檔的奇怪方式聯(lián)系在了一起,再加上某些西北角的公司在里面再搗搗亂,導(dǎo)致 Web 應(yīng)用非常的難以維護(hù),直接的后果就是 99% 的應(yīng)用都是簡(jiǎn)單的網(wǎng)頁(yè)加上一點(diǎn)點(diǎn)可憐的邏輯,完全無(wú)法取代桌面上的應(yīng)用。
這個(gè)時(shí)候,英雄出現(xiàn)了。Google 在 2004 年愚人節(jié)那天發(fā)布了一個(gè)叫做 Gmail 的東西,當(dāng)時(shí) email 的容量只有可憐的 10MB 或者 20MB,Google 突然說(shuō)提供 1GB 的郵箱并且不斷增長(zhǎng),于是,全世界瘋了。可是在大容量的背后,大家發(fā)現(xiàn)原來(lái) Gmail 不僅僅只是大,而且讓你覺(jué)得你在使用一個(gè)桌面的應(yīng)用,而不是一個(gè)以前傳統(tǒng)的網(wǎng)頁(yè)的應(yīng)用。所以可以說(shuō),Gmail 是 Web 開(kāi)發(fā)的一個(gè)里程碑,第一個(gè)大規(guī)模部署的 Ajax 的應(yīng)用程序。
緊接下來(lái)的一年,也就是 2005 年的情人節(jié)前后,Google Map 神奇般地出現(xiàn)了,世界再一次瘋了。所有人都覺(jué)得不可思議,原來(lái)網(wǎng)頁(yè)的程序可以做得那么酷炫,而 2000 年左右科技泡沫鼎盛時(shí)期的那些網(wǎng)站是多么的可笑。當(dāng)時(shí) Map 的組里面有 2 個(gè)人很值得一提,一個(gè)叫 Lars Rasmussen 的澳大利亞人,一個(gè)叫 Bret Taylor 的美國(guó)人,后面我們會(huì)慢慢的提到。
| 重寫(xiě) Gmail
在開(kāi)發(fā) Map 和 Gmail 的過(guò)程中,Google 的工程師逐漸意識(shí)到一個(gè)高度結(jié)構(gòu)化的JavaScript 庫(kù)的重要性。因?yàn)檫壿嬙絹?lái)越復(fù)雜,代碼量越來(lái)越多,功能也越堆越多,之前寫(xiě)得那些代碼已經(jīng)根本滿足不了不斷變化的需求了。于是偉大的工程師們做了一個(gè) Googler 經(jīng)常做的決定:我們重寫(xiě)吧。
一個(gè)偉大的重寫(xiě) Gmail 的計(jì)劃逐漸張開(kāi)了,也就是今天大家看到的 Gmail 的前身。在整個(gè)重寫(xiě)的過(guò)程中,一個(gè)高度獨(dú)立、結(jié)構(gòu)化的 JavaScript 的庫(kù)被抽象出,這就是可能很多前端工程師們知道的 Google Closure。用今天的話來(lái)說(shuō),Closure 不是一個(gè)簡(jiǎn)單的 JavaScript 的庫(kù),他是一種方法論,一種情懷,所以任何拿 jQuery 和 Closure 相對(duì)比的言論都是一種對(duì) Closure 的侮辱。Closure告訴大家,大家應(yīng)該像寫(xiě) java 一樣的去寫(xiě) javaScript,分清楚什么是一個(gè)類(lèi),什么是類(lèi)的成員變量,什么是成員方法,什么繼承,什么是接口等等...所有你熟悉的面向?qū)ο蟮母拍疃伎梢栽?Closure 里面找到。Closure 的出現(xiàn)極大地改變 Google 內(nèi)部寫(xiě) JavaScript 的效率,導(dǎo)致復(fù)雜的 Ajax 的應(yīng)用如雨后春筍一樣在 Google 內(nèi)部迅速出現(xiàn)。
| 聰明人太多的產(chǎn)物:奇葩技術(shù) GWT
如果讓 Google 的工程師們自己找 Google 一個(gè)不好的地方,一定有一點(diǎn),那就是聰明人太多,沒(méi)法管理。就在 Gmail 如火如荼重寫(xiě)的時(shí)候,另外一個(gè)團(tuán)隊(duì)在悄無(wú)聲息的做著另外一個(gè)類(lèi)似的努力去改變 Web 開(kāi)發(fā),那就是 2006 年發(fā)布的 GWT(Google Web Toolkit)。這是一個(gè)無(wú)比奇葩的技術(shù),程序員寫(xiě)的代碼是 java,出來(lái)的是 JavaScript,就像你吃的是草,擠出來(lái)的是奶一樣。這個(gè)技術(shù)的根本目的和 Closure 是一樣的,就是為了讓程序員用寫(xiě) java 的方式去寫(xiě) Web 應(yīng)用,只是他的方式更直接,連 JavaScript 都省了。其實(shí)原理也很簡(jiǎn)單,就是通過(guò)編譯器在編譯階段把 java 轉(zhuǎn)成了 JavaScript 代碼。可是,這個(gè)技術(shù)有一個(gè)致命的缺點(diǎn):你想想,要有多麻煩才能在瀏覽器里面調(diào)試一堆由編譯器生產(chǎn)的JavaScript 代碼。于是無(wú)數(shù)的各種附加調(diào)試技術(shù)出現(xiàn),告訴大家怎么去簡(jiǎn)化 GWT 的調(diào)試,但是都沒(méi)有解決根本問(wèn)題。GWT 的最大的好處就是如果你的網(wǎng)頁(yè)是由標(biāo)準(zhǔn)的控件組成的,比如輸入框、選擇框、多選等,那么 GWT 會(huì)極大的簡(jiǎn)化你的代碼量.就是因?yàn)檫@個(gè)好處,GWT 一直活到了今天,因?yàn)?Google 最賺錢(qián)的廣告系統(tǒng)的前端是就是用 GWT 寫(xiě)的。可見(jiàn),計(jì)算機(jī)語(yǔ)言的世界也是看爹的哈哈。
2007,2008 貌似很平靜,Google 也沒(méi)發(fā)布什么驚人的、大的前端產(chǎn)品和框架。事實(shí)上,他們并沒(méi)閑著。Google 在那兩年期間做了幾個(gè)重要的收購(gòu),奠定了后面著名的 Google docs 的基礎(chǔ)。
2009 年,在 Google 內(nèi)部雪藏了很久的 Closure 庫(kù)終于開(kāi)源了,同時(shí)開(kāi)源的還有一個(gè)對(duì)應(yīng)的叫做 Closure Compiler 的東西,一般人理解 Closure Compiler 不就是另外 jQuery Minifier 嘛,其實(shí)可沒(méi)那么簡(jiǎn)單,Closure 的 Compier 是可以真的理解你的 JavaScript 代碼的類(lèi)型的。通過(guò)一個(gè)叫 JsDoc 的注釋形式的語(yǔ)法,你可以完全地把 JavaScript 當(dāng)做是一種強(qiáng)類(lèi)型的語(yǔ)言來(lái)寫(xiě),并且有一個(gè)編譯器來(lái)幫你查錯(cuò)。在強(qiáng)大的工具面前,jQuery 被無(wú)情地碾壓。在接下來(lái)幾年,Google又陸陸續(xù)續(xù)的發(fā)布了對(duì)應(yīng)的 Closure 的模板語(yǔ)言,和對(duì)應(yīng)的 Closure Stylesheet 編譯器,于是 Web 的三件套,HTML + JS + CSS 在 Closure 的世界里都有了對(duì)應(yīng)的工具,在 Google 內(nèi)部,大部分的前端項(xiàng)目也都是基于這套工具來(lái)開(kāi)發(fā)的。
與此同時(shí),GWT 的小組也沒(méi)閑著,一方面更好的支持 Google 最賺錢(qián)的廣告系統(tǒng)前端;一方面默默的憋了一個(gè)超級(jí)大招 -- 大名鼎鼎的 Google Wave。對(duì),Google Wave 是用 GWT 寫(xiě)的,Wave 的 founder 就是我們前面提到的 Map 的創(chuàng)始人 Lars 。
| 又把最賺錢(qián)的廣告系統(tǒng)重寫(xiě)了一遍
2011,2012 的 IO 上,關(guān)于 web 開(kāi)發(fā)的主題很多都是基于 GWT 、Closure 展開(kāi)的,一直風(fēng)平浪靜地到了 2013 年。但與此同時(shí),Google 內(nèi)部已出現(xiàn)了一股暗黑勢(shì)力,悄悄地開(kāi)發(fā)了一個(gè)完全顛覆式的前端框架 -- AngularJS 。它,就是以HTML 標(biāo)簽起始符形狀命名的 AngularJS,簡(jiǎn)稱(chēng) Angular。顛覆在哪呢?Google 的 web 前端開(kāi)發(fā)框架基本采用著名的 MVC (Model-View-Controller) 結(jié)構(gòu),有效地分離數(shù)據(jù)模型和最后顯示的視圖,使代碼更清晰、更容易維護(hù)。早先的 MVC 大都是在服務(wù)器端實(shí)現(xiàn)的,包括先前提到的 GWT 神器。但是 AngularJS 不一樣,是一個(gè)完全在客戶(hù)端也就是瀏覽器里的 MVC 框架。這個(gè)框架在 HTML 中標(biāo)注新的屬性,運(yùn)行時(shí)用 JavaScript 動(dòng)態(tài)解析和綁定數(shù)據(jù)關(guān)聯(lián),簡(jiǎn)化了 web 應(yīng)用尤其是單頁(yè)應(yīng)用 (single-page application) 的開(kāi)發(fā)。不少數(shù)據(jù)雙向同步邏輯甚至不用手工編寫(xiě) JavaScript 就能實(shí)現(xiàn)了。更重要的是它制定了一整套前端組件的開(kāi)發(fā)規(guī)范。雖然各種繁雜的條條框框讓它無(wú)論在 Google 內(nèi)部還是開(kāi)源社區(qū)都備受微詞,但它還是迅速獲得很多企業(yè)的青睞,近幾年來(lái)以異軍突起之勢(shì)成為眾多公司招募前端程序員的一項(xiàng)標(biāo)準(zhǔn)需求。于是瘋狂的程序員們又瘋了,開(kāi)始把很多陳舊的系統(tǒng)用 Angular 重寫(xiě),包括前面提到了那個(gè)最賺錢(qián)的廣告系統(tǒng)前端。甚至Angular 一出來(lái)的時(shí)候就有人預(yù)測(cè),Angular 就是早期的 HTML6 。
| 異類(lèi)語(yǔ)言的誕生
說(shuō)到這里,不能不提一個(gè)異類(lèi)語(yǔ)言了,叫做 Dart 。這個(gè) Dart 可是出自名門(mén),是由 V8 的首席程序員 Lars Bak 在他工作之余發(fā)明的, 他一邊改善 V8 的性能,一邊琢磨如何能突破 JavaScript 語(yǔ)言本身諸如弱類(lèi)型等限制,讓 web 程序執(zhí)行速度更上一層樓。他最后決定,干脆擺脫 JavaScript 的束縛,重起爐灶設(shè)計(jì)一門(mén)全新的、為新時(shí)代 Web App 專(zhuān)門(mén)打造的語(yǔ)言 -- Dart。
在了解 Dart 前,簡(jiǎn)單科普一下同父同母的兄弟 V8。 Google 的 Chrome 瀏覽器當(dāng)年發(fā)布時(shí)以其遠(yuǎn)超 Internet Explorer 和 Firefox的網(wǎng)頁(yè)渲染速度震撼了世界。其中一個(gè)核心優(yōu)勢(shì)就在于全新的 V8 JavaScript 引擎。當(dāng)競(jìng)爭(zhēng)對(duì)手還在吭哧吭哧解釋執(zhí)行 (interpret) 網(wǎng)頁(yè)中的腳本時(shí),強(qiáng)大的 V8 引擎采用即時(shí)編譯 (JIT) 技術(shù)把 JavaScript 的運(yùn)行速度提升到了一個(gè)全新的層次。在之后的幾年里,各家瀏覽器廠商紛紛效仿,推進(jìn)了整個(gè) Web 平臺(tái)的發(fā)展。目前深受追捧的 Node.js / io.js 其實(shí)也都是 V8 開(kāi)源后的衍生產(chǎn)品,造就了一個(gè)前后端用同一種編程語(yǔ)言的新興開(kāi)發(fā)生態(tài)。
Dart 語(yǔ)言借鑒了廣大程序員熟悉的 Java 語(yǔ)法,支持面向?qū)ο蟆卫^承、interface、泛型、非強(qiáng)制的類(lèi)型標(biāo)記等語(yǔ)言特性。Dart 的虛擬機(jī)在 V8 大牛的打造下性能當(dāng)然也是超強(qiáng)的。Dart 程序還能被編譯成 JavaScript,運(yùn)行在沒(méi)有 Dart VM 的環(huán)境中。
然而,Dart 從發(fā)布日起一直倍受爭(zhēng)議和質(zhì)疑。它被認(rèn)為是一項(xiàng)分裂 web 之舉,而且長(zhǎng)期以來(lái)沒(méi)有得到任何其他瀏覽器廠商的支持。2015 年初,Google 宣布取消將 Dart VM 綁定在 Chrome 瀏覽器里的計(jì)劃。不過(guò)這并不是 Dart 的死刑判決。Google 仍然支持并使用 Dart 開(kāi)發(fā)大型 web 應(yīng)用,因?yàn)楸绕?JavaScript,Dart 更能提高開(kāi)發(fā)效率和保證代碼質(zhì)量。
綜上,大家可以看到,web 在開(kāi)發(fā)上兩個(gè)趨勢(shì),第一個(gè)是從腳本語(yǔ)言層面去改善代碼的質(zhì)量,提高效率,第二是從 web 標(biāo)準(zhǔn)入手,提供更多抽象的模塊化的組件,讓編寫(xiě) web 應(yīng)用更加容易。
而說(shuō)到第二點(diǎn),不得不提提 Google 的一個(gè)項(xiàng)目叫做 Polymer ,如果你們?nèi)?Polymer 的網(wǎng)站,你會(huì)發(fā)現(xiàn) Polymer 的口號(hào)是「leverage the future of web platform now」。 的確,Polymer 是一個(gè)庫(kù)用來(lái)實(shí)現(xiàn) Web component 的,而 web component 是 W3C 關(guān)于下一代 HTML 的一個(gè)標(biāo)準(zhǔn),這可是根正苗紅的一個(gè)項(xiàng)目。可以說(shuō) Polymer 項(xiàng)目的進(jìn)展某種程度上就代表了下一代 HTML 標(biāo)準(zhǔn)制定的進(jìn)展。讓我們一起期待在本次 IO 上 Google 會(huì)對(duì) Polymer 做出怎樣的更新吧。
「 NEXT Collections | Google I/O」系列將持續(xù)更新,請(qǐng)保持關(guān)注。你也是一枚 Googler 或 Android 開(kāi)發(fā),并且有話要說(shuō)?對(duì)文章觀點(diǎn)有質(zhì)疑?想加入 Google 工程師和 Android 開(kāi)發(fā)大牛的線下討論?歡迎郵件 xinyuan@36kr.com。文章作者的新項(xiàng)目「一起寫(xiě)」也在招聘 geek 范的同事,歡迎簡(jiǎn)歷快遞至 CEO 直聘郵箱:c@yiqixie.com。
原創(chuàng)文章,作者:馨苑
作者
歡迎專(zhuān)心練劍的產(chǎn)品人和技術(shù)宅來(lái)聊:xinyuan@36kr.com :)
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。