A. web前端開發如何入門提高
Web前端開發是一個非常熱門的職業,但是要成為一個優秀的web前端開發師需要掌握的知識可不少。有碼互聯可以大概簡單的來說,web前端需要掌握的知識是包括了:CSS、JAVASCRIPT、XML、HTML、JSON、伺服器腳本語言、頁面優化性能、開發服務api接入...
B. 做前端需要什麼技術
想要成為一個好的前端程序員,需要掌握的技術還是比較多的,比如HTML5開發、JavaScript、Veu.js框架開發等等。
前端就是展現給用戶瀏覽的部分。我們通常說的前端,其實是指前端開發,也就是創建PC端或移動端等前端界面給用戶的過程,通過HTML,CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。
學習的內容包括:
①計算機基礎以及PS基礎
②前端開發基礎(HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架)
③移動開發
④前端高級開發(ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等)
⑤小程序開發
⑥全棧開發(MySQL資料庫、Python編程語言、Django框架等)
⑦就業拓展(網站SEO與前端安全技術)
互聯網行業目前還是最熱門的行業之一,學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的,發展前景非常好,普通人也可以學習。
想要系統學習,你可以考察對比一下開設有相關專業的熱門學校,好的學校擁有根據當下企業需求自主研發課程的能力,能夠在校期間取得大專或本科學歷,中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的,建議實地考察對比一下。
祝你學有所成,望採納。
C. 前端主要學什麼
前端框架
學好Web框架,熟悉掌握HTML、伺服器端腳本語言、CSS和JavaScript之後,學習Web框架可以加快Web開發速度,節約時間。PHP程序員可選的框架包括CakePHP、CodeIgniter、Zend等,Python程序員喜歡使用Django和 webpy,Ruby程序員常用RoR。
隨著Web 越來越規范和標準的統一,Web組件化技術不斷革新,移動端開發不斷升華,以下是一些常見開源前端框架:
Bootstrap
主流框架之一,Bootstrap 是基於 HTML、CSS、JavaScript的,它簡潔靈活,使得 Web 開發更加快捷。
html5-boilerplate
該框架可以快速構建健壯,且適應力強的web app或網站。
Meteor
Meteor是新一代的開發即時web應用的開源框架,它能在較短時間內完成開發。
Semantic UI
基於自然語言有效原則的UI組件框架
Foundation
優秀的響應式前端框架
Materialize
基於材料設計的現代化響應式前端框架。可提供默認的樣式,自定義組件。此外,Materialize還改進動畫和過渡,為開發人員提供流暢的體驗。
Pure
幾乎可以在每一個web項目中使用的一組小的和響應式的CSS模塊。
Vue
Vue.js 是用於構建互動式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統,具有簡單、靈活的 API。
Skeleton
Skeleton 是一個小的 JS 和 CSS 文件的集合,可快速開發漂亮的網站,適合各種屏幕設備包括手機。Skeleton 基於 960 grid 開發。它是一個 UI 框架。
Amaze UI
國內首個開源HTML5跨屏前端框架產品系列,中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。其中,Amaze UI Touch可以幫助開發者通過豐富的組件,快速構建出與原生APP相媲美的專屬移動端的HTML5應用。
UIkit
一個輕量級的和模塊化的前端框架,用於快速開發和功能強大的web介面。
Yui
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫,為了能建立一個高互動的網頁,它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證。
kissy
一款跨終端、模塊化、高性能、使用簡單的 JavaScript 框架。
MUI
最接近原生App體驗的前端框架的框架。
Arale
一個開放、簡單、易用的前端基礎類庫。
JX
JX 是模塊化的非侵入式Web前端框架,特別適合構建和組織大規模、工業級的Web App。
GMU
GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件! Web App。
ZUI
開源HTML5前端框架
Clouda Touch.js
Touch.js是移動設備上的手勢識別與事件庫,也是在網路內部廣泛使用的開發。
D. 在2022年作為程序員,最值得投入的技術有哪些
首先是LINUX源代碼,甚至寫一個類似LINUX的大作來展示你的才華。你需要做的就是按照要求寫代碼。寫代碼的意義就是規定了一切。如果你按照規定去寫,你很快就會發現你昨天寫的代碼和你今天寫的代碼差不多。當你寫完代碼一段時間後,你會體會到復制、拷貝、粘貼對你來說有多重要。
快速的技術革命本質上是為我們的前端工程師創造紅利。快速的技術變革讓前端工程師的“生產效率”迅速提高,互聯網產品目前的市場價值相對較高。在這樣的環境下,前端程序員的需求和薪資在業務和技術相互成就的循環中不斷提升。這一點從每年加入前端崗位的應屆畢業生薪資不斷上漲可以得到印證。
E. 關於後端程序員寫前端用什麼框架更好
各大前端框架可以按照「封裝度」的標准來區分。 設計剛出的一套網頁皮膚,封裝度為0。層層封裝到可以直接用後台語言寫頁面,封裝度為10。那麼我是這樣來區分前端框架的。
1級——純html+css 放5年前,基本就是用Dreamweaver剛排出來的頁面或者網頁查看源代碼扒下來的皮膚。不涉及到js,就是純頁麵皮膚。
2級—— bootstrap系列 bootstrap的出現是一個里程碑事件。發源於twitter,引入了不少html5/css3的特性。由於它對響應式的支持以及良好的體驗,給人一種耳目一新的感覺。其源碼,不管是css還是js都值得學習一下,看後經常會有「原來還可以這樣做」這種恍然大悟的感覺。不過歸根結底是一套ui皮膚+少量js組成的框架,屬於封裝度偏低的框架。
3~4級—— metronic/adminLTE系列 基於bootstrap或者其他1級框架,然後集成了各種jQuery插件、富文本編輯器等js庫,組成的一個大雜燴工具包和案例庫。皮膚基本是基於bootstrap自定義的一套主題。案例比較詳盡,開發的時候找到需要的組件把前端代碼復制粘貼,再稍微調試一下就能達到良好的視覺效果。根據集成的第三方庫的多少,基本可以劃分到3~4級封裝度這樣的范圍。這個級別的框架的代碼更多的是屬於粘合劑,將各種不同的第三方庫的前端代碼粘合起來。
5級—— jQuery-ui 這里要單獨把jQuery-ui拿出來講,並不是因為它的封裝度有多高,而是我認為它是一個分界點。jQuery以下級別的框架,代碼以css為主,自身的js代碼少,框架量級更輕,更靈活,更適合互聯網web產品。jQuery以上級別的框架,屬於前端的重度封裝,通過框架暴露的介面進行開發,開發人員甚至不需要太多前端知識,只需要詳細查看框架的開發文檔即可。jQuery以上級別的框架更適合傳統管理軟體的開發。
6~7級—— easy-ui/DWZ easy-ui基於jQuery-ui,不過具有更豐富的組件庫。貌似商業版收費很高。聽說某大型國企花了大價錢購買下來使用。DWZ是國產框架中我認為綜合表現還不錯的,完全免費,有問題可以在他們的QQ群里提。其餘的之前還用過金蝶的operamasks-ui,不過現在好像已經不更新了。這一類級別的框架還有一個另外的稱呼——「富客戶端框架」,意思就是重度js框架。使用起來開發效率很高,當年也是一度百花齊放,框架輩出。
8級—— extjs系列 extjs屬於前端框架領域中的龐然大物,封裝程度很高,具有自成體系的元素選擇引擎和瀏覽器兼容方案,js寫法上也有自己的方式。組件很多很全。只看extjs的官方文檔和示例幾乎不必學習任何其他的前端知識就可以做出「很漂亮」的前端頁面。當然頁面很容易「撞衫」。使用時間長了,會對其產生嚴重依賴,離開extjs,幾乎不會寫前端頁面了。
9級——vaadin/GWT 最後一級,也是封裝度最高的一級,也就是所謂的使用後台語言寫前端。如果說之前的八級至少前端和後端還是相對分離的,後台程序在java中寫,前台程序在html或者js中寫;那麼這一級別的框架簡直會顛覆你的認知!只需在後台使用java寫好了類和對象,並設置好相關的屬性,網頁的元素是自動通過後台對象生成的。這當然有好處,媽媽再也不用擔心我不會寫js和css了。然而就學一下html/css/js真的那麼難嗎?個人認為,盡管GWT有google的這么強悍的背書,但是這種9級封裝的本質上把前後台耦合得更緊密。一個人做一個項目還可以考慮,但是一個團隊前後台分離、模塊化開發的時候,使用這種框架是一種災難!所以我是極度不建議使用9級封裝框架的。
F. Vue框架為什麼得到了前端程序員很高的評價
很多使用過vue的程序員這樣評價它,「vue.js兼具angular.js和react.js的優點,並剔除了它們的缺點」。授予了這么高的評價的vue.js,也是開源世界華人的驕傲,因為它的作者是位中國人–尤雨溪(EvanYou)
如果你是一個已經在學習開發的初學者亦或是一名在代碼界縱橫多年的程序員,那你一定對前端不陌生。它不像其他編程語言那樣晦澀難懂,可以做到「所見即所得」,或許這也是很多初學者選擇前端的原因之一。昨天在刷微博的時候,看到了這樣一個觀點,說前端開發的vue.js很有趣,然後今天就准備和大家聊聊這個「有趣」的前端框架—Vue。
Vue的優勢
1)Vue確實小而美,開發體驗非常好。Vue 的核心庫只關注視圖層,它不僅易於上手,還便於與第三方庫或既有項目整合。另一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為復雜的單頁應用程序提供驅動。
2)Vue 不支持 IE8 及以下版本,因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性,這可能算是一個小的不完美,但它支持所有兼容ECMAScript 5的瀏覽器。
3)在 Vue 里,一個組件本質上是一個擁有預定義選項的一個Vue 實例。在 Vue 中注冊組件很簡單,也是它的一大優勢。
Vue的應用
1)Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。Vue的使用非常的簡單,創建一個本地的 .html 文件,然後通過如下方式引入Vue:
這樣, 我們就已經成功創建了第一個 Vue 應用!
2)現在有很多大公司都在使用Vue
餓了么,有越來越多的項目在使用 vue。這些項目裡面,有桌面端(比如餓了么安全應急響應中心)也有移動端(比如餓了么招聘),有面向用戶的,也有後台系統。
掘金,全網都是用 Vue.js + Webpack 實現的,算是一個純前端應用。
蘇寧易購,觸屏版的購物車結算頁面已經用 Vue 重構,在眾多框架中還是選擇了 Vue,主要還是因為 API 比較友好,體驗上也流暢了。
據不完全統計,包括美團、天貓、Laravel、htmlBurger等國內外知名大公司都在使用vue進行新項目的開發和舊項目的前端重構工作。
你會用嗎?
1)對於前端初學者不建議學習,一門語言的入門一定是從基礎語法開始的,掌握了基本知識,才能更加靈活的使用框架,為之後的工作打下良好的基礎。
2)在熟練掌握了基礎之後,建議個人可以用vue。練練手,為後續大項目做技術儲備。已經在從事前端開發的小夥伴們也可以多接觸,多學習些。
3)招聘網站搜索來的薪資,部分截圖給大家看下
現在學習還不晚喲~
G. 小白學習前端的路線大概是怎樣的
html、css
js 原生語法基礎,然後熟悉下 vue 或者 react,就能開始幹活了。
然後邊學邊做。
H. 一個合格的web前端需要會什麼
1. div和table
這個是最簡單的,也是最基礎的。要熟練掌握div、form table、ul li 、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本 table是用來和數據打交道。
2.html
HTML是指超文本標簽語言,是目前web領域應用廣泛的語言,我們只需要在html文檔中插入對應的標簽,即可實現web頁面的編寫與排列,所以要熟練掌握HTML基本知識,包括每個標簽的用法等。
3. CSS
CSS指層疊樣式表,可以為HTML標簽自定義樣式,通過設置HTML標簽的樣式,來改變其外形,達到美化與排版web頁面的目的。
4.Javascript
Javascript是網頁腳本語言,它可以在html中運行,設置並修改瀏覽器中的各種對象與變數。例如用來改進設計、驗證表單、檢測瀏覽器、創建 cookies等等,現在各大網站都可以看見 Javascript的蹤影,常見的網站首頁大眼晴、警告提示框、頁面動畫效果等等。Javascript更是一種在客戶端廣泛使用的腳步語言,在 Javascript當中提供了一些內置函數、對象和DOM操作,藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等!
5.Jquery
Jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少。 Jquery是一個免費、開源的輕量級的Javascript庫,並且兼容各種瀏覽器,同時現在有很多基於 Jquery的插件可供選擇,這樣在我們實現一些豐富的動態效果時更方便快捷,大大節省了我們開發的時間,提高了開發速度。
6.框架
從 bootstrap開始,響應式的珊格系統被後來框架一直沿用,建議學一套主流mvc框架,vue,react, angular兩選一種。
7.會點後台語言
對於前端工程師來說,並不需要像網站程序員樣,編寫對象、開發特殊功能、搭建資料庫。但是前端工程師要掌握基本的頁面GET&POST傳參、程序判斷語法、程序輸出語法、頁面提交、資料庫查詢與記錄插入,以及掌握HTTP與WEB工作原理、掌握Socket長連接實時網路通信技術、掌握 NOSQL中的 MONGODB的應用、了解PHP語法、了解 MYSQL資料庫的基本操作。
當然,以上技能能夠幫助你成為一個合格的前端工程師,但要成為一個優秀的前端,必須掌握除技術以外的東西,例如設計,用戶等等,因此還需不斷的堅持學習。
I. 作為前端,我為什麼選擇 Angular 2
ALL-IN-ONE
不管是1還是2,Angular最顯著的特徵就是其整合性。它是由單一項目組常年開發維護的一體化框架,涵蓋了M、V、C/VM等各個層面,不需要組合、評估其它技術就能完成大部分前端開發任務。這樣可以有效降低決策成本,提高決策速度,對需要快速起步的團隊是非常有幫助的。
讓我們換一種問法吧:你想用樂高搭一個客廳,還是買宜家套裝?
Angular 2就是前端開發領域的「宜家套裝」,它經過精心的前期設計,涵蓋了開發中的各個層面,層與層之間都經過了精心調適,是一個「開箱即用」的框架。
當然,你可能還記著Angular 1帶給你的那些快樂以及……痛苦。這是有歷史原因的。由於它是從一個用來做原型的框架演化而來的,加上誕生時間很早(2009年,作為對比,jQuery誕生於2006年),當時生態不完善,連模塊化機制都得自己實現(這就是angular.mole的由來,也是Angular 2中拋棄它的理由)。在長達七年的演化過程中,各種進化的遺跡非常明顯,留下了不少「闌尾」。
但Angular 2就不同了,它的起點更高,整合了現代前端的各種先進理念,在框架、文檔、工具等各個層面提供了全方位的支持。比如它的「組件樣式」能讓你在無需了解CSS Mole的前提下獲得CSS Mole的好處,它的Starter工程能讓你在無需了解Webpack的前提下獲得Hot Mole Replacement等先進特性,它能讓你從Web Worker(你知道這是什麼嗎?)中獲得顯著的性能提升。
你只管在前台秀肌肉吧!剩下的,讓Angular在幕後幫你搞定!
模塊化的技術
雖然Angular是一個ALL-IN-ONE的框架,但這並不妨礙它同時是一個靈活的框架。還記得OCP(開閉原則)嗎?一個好的設計,對擴展應該是開放的,對修改應該是關閉的。
Angular 2很好的踐行了OCP原則以及SoC(關注點分離)原則。
它非常有效的分離了渲染與交互邏輯,這就讓它可以很好的跟包括React在內的渲染引擎搭配使用,除此之外,它還可以使用內存渲染引擎,以實現服務端渲染;還可以使用Native渲染引擎,以編譯出真正的原生程序(NativeScript)。
它還分離了數據供應與變更檢測邏輯,從而讓它可以自由使用包括RxJS以及ImmutableJS在內的第三方數據框架/工具。
不僅如此。
在Angular 1和Angular 2中最具特色的應該算是依賴注入(DI)系統了,它把後端開發中用來解決復雜問題、實現高彈性設計的DI技術引入了前端。Angular 2中更是通過引入TypeScript賦予它更高的靈活性和便利性。
不過,Angular 2並沒有敝帚自珍,把它跟框架本身緊緊黏結在一起,而是把它設計成了一個獨立可用的模塊。這就意味著,無論你正在使用什麼前端框架,甚至NodeJS後端框架,都可以自由使用它,並從中獲益。
全生命周期支持
除非你打算寫一個一次性應用,否則軟體的生命周期會很長。宏觀來看,真正的挑戰來自多個方面,而且在不斷變化。
開始的階段,我們需要非常快速的建立原型,讓它跑起來,引入最終用戶來試用,這個時候,挑戰來自開發速度以及可復用資產。
之後,會建立一個逐漸擴大的項目組,來完善這個原型的功能。主要的挑戰是讓這個原型通過重構不斷進行演化,特別是在演化的後半個階段,產品需要保持隨時可以上線的狀態。但技術上的挑戰那都不是事兒!關鍵是人。
如何讓新人快速融入項目組,貢獻生產力?這可沒那麼簡單。「你先去學xxx 0.5、yyy 0.9、zzz 5.3...還要了解它們前後版本之間的差異,我再給你講代碼」,這種話,我可說不出口。一個優秀的框架需要對分工提供良好的支持,每個人都可以先從一些簡單任務開始,逐步的從修改一個文件擴大到修改一個目錄再到獨立實現一個特性。
有了這種分工,每個團隊成員就可以從一個成功走向一個更大的成功。這就需要框架在設計上具有良好的局部性:你可以放心大膽的修改一部分,而不用擔心影響另一部分。你可以只修改CSS,可以只修改HTML,可以只修改TS/js,而不用擔心自己的修改破壞了其他部分。而Angular 2通過聲明式界面、組件樣式以及獨立模板文件等對這種安全感提供了有力的保障。
再然後,如果你的軟體順利的進入了線上維護階段,那麼恭喜你,你終於迎來真正的大Boss了!這個大Boss就是可維護性。Angular開發組有很多程序員來自Google,如果要問誰的軟體維護經驗最豐富,Google和微軟必然名列前茅。微軟通過TypeScript的強類型機制體現了自己的經驗,而Google則通過將OCP、SoC、SRP等一系列軟體設計原則融入Angular體現了自己的經驗。具體技術上則體現為:DI、生命周期鉤子、組件等等。
最後,如果你的軟體完成了歷史使命需要逐步退出,是不是就能鬆口氣了?不行,你還得繼續留人維護它。如果你選擇的是一個閉源的或某個社區很羸弱的開源技術,你就把以前的主力架構師、資深程序員留下來繼續維護它吧。或者你就得鼓起勇氣跟用戶說:你們玩兒,我先走了。而Angular是一個大型開源項目,並得到了Google的鼎力支持。即使經歷過Angular 2項目組初期的公關失敗,它仍然有著其它競品無法企及的繁榮社區 —— 無論在全球還是在中國。顯然,無論是對傳統社區資源的繼承,還是對新社區資源的開拓,我們都有理由相信,Angular社區仍將一如既往地繁榮。至少,如果你不想讓自己的軟體建立在一大堆由個人維護的核心庫上,那麼Angular毫無疑問是最好的選擇。
逃離「版本地獄」
如果是一兩個人開發一個預期壽命不到一年的系統,那麼任何框架都可以勝任。但,現實中我們都把這種系統稱之為「坑」。作為一個高度專業、高度工程化的開發組,我們不能把「坑」留給友軍。這些坑中,最明顯的就是「版本地獄」。
想像一下,你僅僅升級了庫的次版本號,原來的軟體就不能用了,損壞了N處單元測試以及M個E2E場景。這種情況對於開發組來說簡直是一個噩夢 —— 畢竟,誰也不想做無用功,更何況是一而再、再而三的。或者,它每次小的改動都會修改主版本號 —— 對,我就是不向後兼容,你能咋地?你所能做的就是每一次決定升級都如臨大敵,不但要小心翼翼的升級這個庫本身還要升級與它協作的幾乎所有庫。
可見,亂標版本號可能會讓使用者付出巨大的代價。這不但體現在工作量上,還會體現在研發團隊的招募與培養上,想像一下,對小版本之間都不兼容的框架,研發團隊都需要記住多少東西?那簡直是噩夢!
但是,版本號的問題在業內早就有了事實性標准,那就是SemVer語義化版本標准。唯一的問題是,作為框架/庫的作者,遵循SemVer標准需要付出的努力是巨大的。是否願意付出這些代價,是一個框架(及其開發組)是否成熟的重要標志。
Angular就是這樣一個框架,其開發組曾作出的努力是有目共睹的。如果你是從Angular 1.2開始使用的,那麼你為1.2所寫的代碼都可以毫無障礙的遷移到最新的1.5版,新的版本只是引入了新特性,而沒有破壞老特性。這是因為Angular開發組寫了大量單元測試和E2E測試,藉助CI來保障這種平滑過渡。只有在從1.0到1.2的遷移過程中(1.1一直是beta,忽略不計),出現了一系列破壞性變更,這些變更被明確的記錄在文檔中,並且解釋了做出這些變更的理由 —— 大多數是因為提升前端代碼安全性。即使你恰好遇到了這些破壞性變更,它也會給出明確的錯誤提示。
這些必要而無聊的工作,正是幫助我們逃離「版本地獄」的關鍵。是否願意做這些無聊而瑣碎的工作,是一個框架的開發組是否成熟、專業的關鍵特徵。而Angular的開發組已經證明了它值得你信任!
遇見未來的標准
編程領域,創新無處不在。但對一個工程團隊來說,最難得的是標准。標准意味著:
招人容易。因為標準的東西會的人最多,而且人們願意學它 —— 因為知道學了就不會浪費。
養人容易。因為網上有很多教程可用,即使不得已自己做教程,性價比也是最高的。
換人容易。標准就意味著不是私有技術,一個人離開了,就能用另一個人補上,而不會出現長期空缺,影響業務。
但是,標准永遠會比創新慢一拍或N拍。這就意味著如果你追新,那麼在獲得技術上的收益的同時,也要付出工程上的代價。固然,兩者不可兼得,但是還是有一些策略能夠調和兩者的。最簡單的策略就是:遇見未來的標准。
所謂未來的標准,就是某個標準的草案,它很有希望成為未來的標准,這代表了業界對某項技術的認可,於是,即使它還不成熟,人們也願意為之投資。比如雖然Google曾經提出過N種自有技術,包括SPDY、Gears、OGG等,但卻並沒有把它們變成私有技術,而是對社區開放以及並入W3C的標准草案。
Angular 2採用的就是這種策略。它所參照的標准草案比較多,一個是WebWorker,它藉助WebWorker來把繁重的計算工作移入輔助線程,讓界面線程不受影響;另一個是WebComponents,Angular 2的組件化體系就是對WebComponents的一種實現;最後是CSS scoping,現在雖然市面上有了很多CSS模塊化技術,但事實上最終還是會被統一到CSS Scoping標准上,屆時,如果:local等關鍵字無法進入標准,就會成為私有技術。而Angular 2選擇的方式是直接實現CSS scoping標准草案,比如:host、:host-context等。顯然,採用這種策略,「遇見未來的標准」的成功率會高得多。
可以看到,Angular 2的設計哲學中貫穿著對標准化的熱烈擁抱,這是我判斷它將贏得未來的另一個信心來源。
速度與激情
Angular 2終於擺脫了舊的技術框架束縛,開始了對速度的極致追求。在Angular 1中,雖然絕大多數場景下性能都不是問題,不過還是因為其代碼中存在的一個用來實現臟檢查的三重循環而飽受抨擊 —— 似乎真有人能感受到30毫秒和100毫秒的差異似的。
不過,有軟肋總是不太好。於是,在Angular 2中,通過重新設計和引入新技術,從原理上對速度進行了提升,據官方以前提供的一個數據說是把「變更檢測」的效率提升了500%。
它在「變更檢測」演算法上做了兩項主要的改進:
在設計上,把以前的「多輪檢查、直到穩定」策略改成了「一輪檢查、直接穩定」策略。
當然,這會對自己的代碼產生一定的限制,但實際上只在有限的少數幾個場景下才會遇到這個限制,而且官方文檔中也給出了明確的提示。
在實現上,把「變更檢測」演算法移入了由WebWorker創建的輔助線程中執行。
現代的家用電腦很多都已經是多核超線程的,但是瀏覽網頁時實際上無法充分利用全部線程,而WebWorker提供了一個新的機制,
讓一些相對繁重的計算工作運行在輔助線程中,等執行完了再通知主線程。即使你不明白WebWorker的工作原理,
至少也能知道Ajax請求是不會阻塞界面響應的,WebWorker也一樣。
除此之外,Angular還對數據源進行了抽象,你完全可以用ImmutableJS來作為Angular的數據源,獲得其在提升「變更檢測」速度方面的所有優勢。
除了「變更檢測」外,Angular以及所有前端SPA程序,都有一個通病:首次載入太慢,要下載完所有js和css才能渲染出完整的界面來。react通過虛擬DOM解決了此問題,而Angular 2則通過獨立的服務端渲染引擎解決了這個問題。我們前面說過,Angular 2把渲染引擎獨立了出來,因此可以在NodeJS中實現服務端的內存渲染。所謂內存渲染就是在內存中把DOM結構渲染出來並發回給瀏覽器,這樣,客戶端不需要等JS代碼下載完就可以顯示出完整的界面了。這種分離還帶來了另一個好處,那就是SEO。SEO同樣是傳統SPA的一個難點,它和服務端渲染是同一個問題的兩個方面,因此隨著服務端渲染的完成,SEO問題也被順便解決了。
讓你無縫升級
Angular 2開發組在早期階段曾犯下一個嚴重的公關錯誤:過早宣布不兼容Angular 1,也不提供從Angular 1到2的升級方案。
這讓Angular 2開發組付出了沉重的代價,可謂傷透了粉絲的心。作為技術人員,這種失誤固然是可以理解的,但卻需要付出更多的努力來彌補它。而Angular 2確實這么做了。
在Angular 2中,開發組提供了一個UpgradeAdapter類,這個升級適配器讓Angular 1.x的所有部件都能和Angular 2.x中的所有部件協同工作。
而最牛的地方在於,它讓你可以一個文件一個文件的逐步升級到Angular 2,而在整個升級過程中,應用可以繼續在線上跑!看著神奇嗎?其實也算不了啥,Google做這種事早就是輕車熟路了。這只不過是對Angular開發組出色的工程化開發能力的一點小小證明而已。
不過,既然如此,當初又何必急匆匆宣布不兼容呢?可見,再出色的工程團隊,如果缺少了和社區溝通的產品運營技巧,也會付出巨大代價。希望Angular開發組以後能謹言慎行,多用行動來平息質疑。
幕後 —— 當Google牽手微軟
當年的瀏覽器大戰,讓人記憶猶新,Chrome的出品商Google和IE的出品商微軟正是瀏覽器大戰的兩大主角。
俗話說:沒有永遠的朋友,也沒有永遠的敵人,只有永遠的…… 精益求精。
正是在這樣的「俗話」指導下,Google與微軟相逢一笑泯恩仇,撤銷了很多針對彼此的訴訟,甚至在一些領域開始合作。而實際上,在他們公開和解之前,就已經開始公開合作了,其契機就是Angular 2。
這就要扯出一點小八卦了。
在Angular 2開發的早期階段,由於傳統JS(ES5)以及當時的ES6草案無法滿足項目組的開發需求,項目組有點煩。後來有人靈機一動開發了一種叫做AtScript的新語言,它是什麼呢?一個帶類型支持和Annotation支持的升級版JS。其實在類型支持方面,TypeScript早就已經做了,而且那時候已經比較成熟,唯一的遺憾是不支持Annotation,也就是像Java中那樣通過@符號定義元數據的方式。
Angular開發組就這樣孤獨的走過了一小段兒時間,後來也不知道怎麼這兩個歡喜冤家就公然牽手了。總之,最後的結果是:TypeScript中加入了與Annotation相似的Decorator特性,而Angular放棄了AtScript改用TypeScript。
這次結合無論對兩大廠商還是對各自的粉絲,都是一個皆大歡喜的結局,稱其為世紀聯手也不為過。此後,Google與微軟不再止於暗送秋波,而是開始了一系列秀恩愛的動作。無論如何,對於開發者來說,這都是一個好消息。
軟粉們可能還記得在6.1的微軟開發者大會上,微軟曾公開提及Angular 2。事實上,TypeScript目前雖然已經相當完備,但應用度仍然不高。就個人感覺來說,Angular 2將是TypeScript的一個殺手級應用。TypeScript如果當選TIOBE年度語言,Angular 2的推出功不可沒。
為什麼我要特意插播這段兒故事呢?那是因為我認為一個產品的未來最終取決於開發組的未來,而不是相反。軟體的本質是人!一個心態開放、講究合作、勇於打破陳規陋習的開發組,才是框架給人信心的根本保障。
後端程序員的終南捷徑
前端程序員自不必說,因為有很多人就是靠Angular進入專業前端領域的。下面這段話主要寫給後端程序員。
不管是想學習新技術還是出於工作需要,都有很多後端程序員對前端技術躍躍欲試。但面對前端讓人眼花繚亂的大量候選技術以及未知的概念,他們往往感覺感覺無所適從。如果你是其中的一員,那麼Angular可以「治癒」你的選擇恐懼症。
正如前面所說,Angular是一個「ALL-IN-ONE」的框架,這就意味著你只要掌握了Angular就可以完成大量的前端工作了。
這首先得益於它對各種技術的封裝,讓你不用關心它的實現細節。Angular隔離了瀏覽器的細節,大多數工作你甚至都不需要知道DOM等前端知識就可以完成。
其次,Angular選擇了TypeScript作為主語言。如果你是個C#程序員,一定會對它的語法感覺似曾相識。沒錯,TypeScript和C#、Delphi有同一個「爹」 —— 傳奇人物Anders Hejlsberg。即使是Java程序員,也不會覺得陌生:強類型、類、介面、註解等等,無一不是後端程序員們耳熟能詳的概念。說到底,並沒有什麼前端語言和後端語言,在語言領域耕耘多年的Anders太熟悉優秀語言的共性了,他所做的取捨值得你信賴。
再次,Angular在前端實現了服務與依賴注入的概念。隨著前端需求的進一步膨脹,即使只算邏輯代碼,其需求復雜度也即將甚至已經趕上了大部分後端程序。所以,後端遇到過的挑戰前端也遲早會遇到,這正是後端程序員彎道超車的好機會,而依賴注入正是後端程序員的看家本領。
最後,Angular對團隊作戰提供了良好的支持,比如模板與代碼的分離、樣式表的局部化、組件化的設計、服務與依賴注入體系等。這些特性讓後端程序員可以先專注於跟後端代碼最像的模型和交互邏輯部分,而把諸如樣式、模板等自己不擅長的部分交給隊友。
J. Angular有何優勢為何備受程序猿喜愛
Angular是目前前端開發使用率比較高的一個框架,它開發簡單,不用做過多的頁面,擴展性強,讓很多程序員都非常喜愛。
單頁面模式讓程序員快速開發很久以前開發前端頁面都需要一個頁面一個頁面的編寫。比如一個網站有商品列表頁,商品詳情頁,以往的開發方式都是編寫2個頁面,加重了程序員開發的壓力。而Angular則比較注重單頁面模式,程序員可以快速的搭建頁面,不用在一個頁面一個頁面的寫了。
針對Angular的優勢你還知道哪些點呢?歡迎大家在底下留言評論,大家一起學習吧!