1. 程式人生 > >我們真的需要前端框架嗎??

我們真的需要前端框架嗎??

停止寫JavaScript框架


JavaScript框架看起來像死亡和稅收一樣不可避免。我敢肯定每次有人開始一個新的web專案時,他們問的第一個問題的肯定是: 我們用的是什麼JS框架?這真讓我著急上牆。 這就是JS框架在當今業界根深蒂固的現像。實際上,框架並不是非有不可,它需要停下來。 

讓我們來先看看我們現在都有什麼?

Angular 和 Backbone 和 Ember, 唉天哪


在相當長的一段時間內。網路平臺的技術棧可以簡潔地描述為HTML + CSS + JS,是由於缺乏一個更好的詞嗎?誰也不會忘記IE瀏覽器模型造成的一場災難。我敢肯定,所有的Web開發者都會為這些黑暗的日子抽搐。 

在很長一段時間出現了一大堆的瀏覽器,和我們之間產生大量的矛盾,作為產業的前提,必須編寫框架,來繞過他們。問題是,在一些瀏覽器中,有一些根本問題也不一致,如事件是如何傳播的,或者是標籤的支援。所以每一個框架,不僅掩蓋了這些不同,也實現了專屬於自己的瀏覽器的工作模式。其實這種模式是必然的,因為你必須發明一種事件工作的通用模式,和如何與DOM互動的統一模型。因此,很多框架就這樣產生了,百花齊放​​,給我們帶來了jQuery,Dojo,MochiKit和Ext JS 和 AngularJS 和 Backbone 和 Ember 和 React.。在過去的十年裡,我們一直在生產大量JS框架。


注* 舊版IE的事件模型與標準冒泡模型是不一樣的

但過去的十年也有發生著一些別的事情;瀏覽器變得更好。他們對標準支援得更好,現在也有四季常青的瀏覽器:自動更新的瀏覽器,每個版本的功能更強大,支援更新的標準,如: 

HTML Imports
Object.observe
Promises
HTML Templates

注* HTML Imorts 匯入複用HTML程式碼段的新特性, 參見規範(起草階段) ,示例:
<link rel="import" href="/imports/heart.html">

我認為現在是重新思考的JS框架模型的時候了。有必要去創造另一種做事的方式嗎? 還是隻需要使用純HTML+CSS+JS。


那麼,為什麼我們仍然寫新的JS框架?我認為很大一部分原因是因為慣性,這是習慣。但是,這不像框架有害的理由,對吧?好吧,讓我們首先確定什麼是web框架。首先是一些簡單的程式碼例子,到列出一些要點,再移動到越來越大的程式碼集合,然後變成一個庫,最後形成框架: 

gist(要點) -> library(庫) -> framework(框架)

框架不只是庫,他們有自己的模式,並且與DOM互動有統一的方式,所以為什麼要避免框架? 

Abstractions 抽象


嗯,這是框架通常的賣點之一,它們是抽象出來的平臺,這樣你就可以集中精力建設自己的軟體。問題是,現在你需要學習兩個系統: HTML + CSS + JS和框架。當然,如果該框架是Web平臺的一個抽象,你只需要會這個框架就夠了。但是有完美的抽象嗎?
abstractions leak抽象洩漏 。所以,你還是需要知道HTML+ CSS+ JS,因為在某些時候你的程式將無法正常工作,你希望瞭解它實現的方式,你必須向下挖掘,通過該框架的所有層,然後弄清楚哪錯了,最終到達HTML + CSS + JS。

注* 抽象是面向物件分類所依據的原則,提取特殊/共性以便繼承複用,但做好的抽象永遠無法完全滿足以後變化的需求,目前面向介面/方面,模組化,元件化的發展都在嘗試解決這個問題。 相關: 痛苦的Java程式設計師面向物件的缺陷 

Mapping the iceberg (對映的冰山)


框架就像是一座冰山,有10%浮在水面上看起來並不危險,但下面卻隱藏著90%。事實上,這個比喻很貼切,學習框架就像是對映一座冰山,你需要了解整個過程才能使用,對映所有事情的努力可能是沒有意義的,因為冰山可能有一天就會融化化。

Widgets(部件)


框架的另一個賣點,你可以訪問小工具庫。不過說真的,你不應該採用一個框架,來訪問這些小部件,他們都應該是正交的,獨立的。今天的一個很好的例子是CodeMirror,基於JavaScript的語法高亮程式碼編輯器。你可以用在任何地方,任何框架裡。

還記得你寫的那些基於MochiKit的小部件嗎?是啊,當時他們看上去多麼美好呀。現在呢?遷移到Ember 或 AngularJS怎麼樣? 

Data Binding(資料繫結)


老實說,我從來沒有需要過它,但如果你想使用他們,你應使用一個庫,而不是一個框架。 

從長期來,框架的問題的問題是,他們最終會成為孤島,專為框架A設計的部件無法在框架B上工作。這樣會浪費精力。 

那麼一個後架構的世界會是什麼樣子? 


HTML + CSS + JS我的框架


我的基本的觀點是我們不需要框架,使用已經內建在HTML + CSS + JS中的能力,建立自己的小部件(Widgets)。沒有任何依賴,掰開任何一個都可以獨立工作。最後的步驟是,將他們在 Web Componetns中啟用。

注* HTML/CSS/JS不正是純天然的MVC結構嗎? HTML -> Template, CSS -> View, JS -> Controler, JSON -> Model


HTML Imports, HTML Templates, Custom Elements 和 Shadow DOM 都是有利的技術,應該讓我們減小對框架的依賴,允許建立可重複使用的元素和功能。下面這些技術可以更好地實現這一點: 

HTML Imports
Polymer
X-Tag
Bosonic

所以,我們都建立<X-flipbox>類似的東西,宣告勝利,然後回家? 

注* brick-flipbox是一個建立自定義Web Componetns的示例專案, 示例, 使用這個Web元件的方法:

<brick-flipbox>
  <div>Front</div>
  <div>Back</div>
</brick-flipbox>


不,其實,你需要確保Web元件工作的第一件事是用polyfills來實現該功能,如X-Tag和Polymer。避免那些舊版瀏覽器不支援的情況。 

注* polyfill指是開發者希望瀏覽器能原生支援的一些新特性而寫的程式碼(或者外掛)。

有一點這裡要強調的是,這些polyfills都不是介紹自己的模型來開發Web上的框架,它們在使用HTML5模型。但是,這並不是真正的唯一的需要,各個瀏覽器對標準的執行還有一些差異,這是我們需要polyfill的地方。 MDN ,是一個很有趣的社群,沒有太多的不必要的程式碼,提供大量的文件,和少量程式碼實現的polyfills。 




Q/A 問答


問:你為什麼恨框架作者。

答:我不恨他們。我的一些最好的朋友也是寫框架的。你可以看看這篇文章: 你已經毀了JavaScript , 再次強調,真的沒有嘲笑那些寫框架的。 

問:在HTML5中你無法____,因此你需要一個框架。 

答:首先,這不是一個問題。其次,感謝您指出了這一點。現在,讓我們攜手合作,將功能新增到HTML5中,允許實現____。 

問:但是___不是一個框架,這是一個庫! 

答:是的,就像我說的,這是從 gist -> framework 的漸變,可能跟我畫的線條略有不同。沒關係,這不是任何一個特定軟體的分類,只是關於不依賴框架的故事。 

問:我已經使用___和___和___ 很多年了

答:同樣,這不是一個問題,但無論如何,對你都有好處,可以幫助其他人。 

問:所以每個人都需要重寫下拉選單,標籤,滑塊和然後換成自己的? 

答:絕對不是,問題是不需要依賴一個特定的框架的來建立這些元素。 

問:哥們,所有的HTML imports會毀了我網站的效能。 

答:是的,如果你天真地實施了所以這些東西,那就會的。這就是為什麼我建議你需要工具來編譯所有的HTML,CSS和JS。 

問:所以我不應該使用任何庫? 

答:不,這不是我說的,我很謹慎地界定庫和框架之間的區別,庫(Library)提供一個個正交的功能,可與其他庫結合使用。庫是好的,我100%支援,我只希望你離開框架。 

問:但我喜歡資料繫結! 

答: 很多人都喜歡,我只是表達個人喜好。我不是說,你不應該使用資料繫結,而只是說你不需要採用整個框架來獲取資料繫結,也有獨立的繫結庫呀。

相關推薦

我們真的需要前端框架??

停止寫JavaScript框架 JavaScript框架看起來像死亡和稅收一樣不可避免。我敢肯定每次有人開始一個新的web專案時,他們問的第一個問題的肯定是: 我們用的是什麼JS框架?這真讓我著急上牆。 這就是JS框架在當今業界根深蒂固的現像。實際上,框架並不是非有不可,

【原創】我們需要學jQuery?

引言 最近擼Vue的專案,感覺的有點心累。恰巧近日,有讀者來信,就是想諮詢一下 煙哥,現在還有必要學習jQuery麼? 我明白,現在MVVM框架逐漸佔據了主要市場,很多老專案也逐漸的從jQuery轉向了MVVM架構! 例如,知名網站github在2018-09-06發了一篇文章叫《Removing jQu

前端網頁需要用網頁框架

  做前端網頁是不是必須要用網頁框架?個人感覺這分為兩種情況,一種是能力超強,時間夠用的情況,另外一種就是用前端網頁框架,可以節約開發時間和減少工作量,這可以根據自身的情況作出正確的判斷,並不是別人說什麼就是什麼。 小專案到底用不用前端網頁框架?   小專案本身就是做

現實中的大城市道路 需要無人駕駛汽車

無人駕駛汽車相信許多80後都看過一部美國譯制片《霹靂遊俠》,筆者早已忘卻了主人公的名字,但對於那輛有生命的汽車,我卻一直記憶猶新,它的名字叫基恩,外殼堅硬,如銅墻鐵壁,抗得住子彈,甚至能把子彈反彈回去;程序設定基恩會分析路況環境,恰到好處、善解人意地同主人聊天,比之Siri懂事1000倍,自然,基恩肯定能自我

在你決定之前,想想你需要APP?你真的需要網站

我冒著被同行唾棄,被業者鄙視的風險來​​寫這篇文章。如果哪天你們看到我沒有在更新網誌了,就代表我已被排擠到混不到飯吃活活餓死了。既然如此為何要還說呢,你以為我不說,別人就不知道馬桶裡面的是大便嗎?(本人稱為這個是馬桶理論) 崛起 在.com時代,泡沫後大家恢復了理智

我們真的需要複雜的密碼

目錄 {:toc} 現狀 想寫這篇文章很久了,不過作為一個安全行業的從業者,總覺得說出來有些汗顏,我們這個行業的安全人員總是引導甚至強制灌輸人們設定複雜密碼的做法,讓我一直覺得寫這篇文章是在對我們的自我否定、自我打臉,所以也就一直沒有寫。 直到我

java後臺有必要學習前端知識 以及主流框架的各自主要功能

最近又鞏固了些html,css,javaScript和jQuery的知識 回頭看看之前寫的html網頁,真的是不忍直視 在這貼一下gitHub上我醜醜的介面 為了包裝一下連我自己都忍受不了的前端介面,於是搜了一些前端框架 也許有人會疑惑 你不是走jav

10大html5前端框架

上大 說明 看到了 wbs rdp 腦細胞 都在 數列 boot Bootstrap 首先說 Bootstrap,估計你也猜到會先說或者一定會有這個( 呵呵了 ),這是說明它的強大之處,擁有框架一壁江山的勢氣。自己剛入道的時候本著代碼任何一個字母都得自己敲出來擋我者廢的決心

bootstrap前端框架使用總結分享

水平滾動 all auto 積極 component 默認 word evel 符號 1、bootstrap 排版 全局樣式style.css: 1、移除body的margin聲明 2、設置body的背景色為白色 3、為排版設置了基本的字體、字號和行高 4、設置全局鏈接顏色

java多線程讀一個變量需要加鎖

多線程 final關鍵字 一個 ati 關鍵字 java多線程 其他 同時 關聯 如果只是讀操作,沒有寫操作,則可以不用加鎖,此種情形下,建議變量加上final關鍵字; 如果有寫操作,但是變量的寫操作跟當前的值無關聯,且與其他的變量也無關聯,則可考慮變量加上volat

2017年前端框架、類庫、工具大比拼

and types 測試結果 uga 分布 aaa mage ken pic 相比於JavaScript開發人員的數量,目前JavaScript框架、類庫和工具的數量似乎更多一些。截至2017年5月,GitHub上的快速搜索顯示,有超過110萬個JavaScript項目。n

postgresql recovery.conf改變需要重啟

ask end recovery log ova pro before pre 需要 之前在研究pgpoll時,發現trigger_file參數指定的文件存在後,會自動將standby節點提升為可寫節點。不需要手動執行pg_ctl promote,但是這個時間一般有延遲,因

中後端管理系統前後分離、前端框架的實現拙見

href 之間 系統開發 out skin uil 文件 方法 ont 一、實現思路 在實踐中後臺管理系統的前後端分離時,往往會因為業務量的增加使其前端項目難以維護,以及打包時間不理想,還有業務系統與框架之間區分不在明顯。本文是本人從另一個角度提出的一種解決方案,希望各位

angular前端框架

script -1 round col cnblogs ide scrip onf -s   總所周知,在前端開發中,大家用的比較多的框架就是angular,vue,react等,今天就為大家講一下angular大家框架的原理及運用 1.本次所舉的例子是以依賴requir

前端框架React Js入門教程【精】

參考資料 react.js 功夫 入門實例 html 操作 load 通過 每一個 現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發深深的吸引了我,下

前端框架之bootstrap

對齊 esp fix 容器 控件 word 適用於 lin true 一、bootstrap按鈕 1、按鈕 <button class="btn btn-default">按鈕</button><button class="btn btn-

前端框架參考

index.php chart www ryu jquery rri morris 簡單 easyu H-ui,效果比較簡單,免費開源: http://www.h-ui.net/H-ui.admin.shtml https://adminlte.io/themes/Ad

easyUi 學習筆記 (一) 使用easyui 和ztree 創建前端框架

function itl tab javascrip div pos lan 20px wid 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncod

一款輕量級前端框架Avalon.Js

必須 ase component 使用 per 簡單 itl 前端框架 引導 avalon2是一款基於虛擬DOM與屬性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 擁有超優秀的兼容性, 支持移動開發, 後端渲染, WEB Component式組件開發, 無

一些不錯的前端框架

app trap .com http kit 版本 5.0 www. shu Bootstrap、妹子UI、MUI http://www.25xt.com 第五款前端框架:拼圖前端框架 FrozenUI – 專註於移動web的UI框架 第二款前端框架:UiKit 第三款