# 為什么前端越來越難？越來越有意思？ ## 大前端 從架構上講，軟件從c/s到b/s過度，它的橋梁是瀏覽器，尤其是ajax促進了web2.0的成功，所以現在我們看到的絕大部分軟件的架構都是b/s的，也稱為瘦客戶端。  從prototype.js到yui，到jquery，到extjs等他們只是從用法和ui上演進，還有就是underscore等工具庫。 而backbone的出現，把mvc引入前端，于是前端開始了分層。 當angular.js橫空出世，又引入了雙向綁定，ioc依賴注入，指令等概念，這實際上在java里早有的概念，這又再一次增加了前端的復雜度。 上面說的是架構上得演進，還有一些enhance的提高，比如js方面有coffeescript和typescript，css方面有less/sass/scss/stylus等，這些不是什么新概念，是對web開發的增強。前提是你熟練使用js和css才能用。 最后是MEAN的full stack最新趨勢。有望替換LAMP. 這些還只是前端的發展，現在是移動互聯網時代，在微信淘寶等帶領下，h5正如火如荼的襲來，可以說是當下最火的技術。那么移動端h5開發和上面的前端技術如何結合就成了現下得趨勢。 我覺得大前端應該現下web的統稱，包含web開發最佳實踐，趨勢以及h5。 nodejs作為一個兼容js語法的平臺，更容易讓廣大前端開發者接受，在構建，工具等領域輔助大前端的成長。 ## 如何學習 我們來想想一般的前端有什么技能？ * html * css（兼容瀏覽器） * js會點（可能更多的是會點jquery） * ps切圖 * firebug和chrome debuger會的人都不太多 * 用過幾個框架，大部分人是僅僅會用 * 英語一般 * svn/git會一點 那么他們如果想在前端領域做的更深有哪些難點呢？ * 基礎：oo，dp，命令，shell，構建等 * 編程思想上的理解（mvc、ioc，規約等） * 區分概念 * 外圍驗收，如h5和hybird等 * 追趕趨勢，如何學習新東西 以上皆是痛點。 現在來總結一下學習有2種，1是從頭來，2是從某一種框架起 第一種學習下來，沒個幾年很難學通，第二種只會用框架，補齊概念和基礎也比較費勁。總之，無論如何學習曲線都是比較陡峭的，那么如何來讓入門的開發者快速學習到這些呢？ 軟件的精髓在應變，殊途同歸，學會如何學習才是我們最重要的道。 * 積極的心態，做好適應變化的準備 * 找到屬于自己的學習方式 * 如果有機會，改變或創新，貢獻開源社區 # 如何展望未來的前端 我先告訴未來很美好，你先做好準備。然后慢慢的等我聊聊。 ## 界面技術4個時期 界面技術從上世紀DOS字符界面到Windows圖形界面（或圖形用戶界面GUI），Browser瀏覽器界面，移動端應用4個不同的發展時期  1. Terminal終端 2. GUI圖形用戶界面 3. Browser瀏覽器 4. Mobile移動端 我們在以web開發來細分 1. Browser（曾經無數時間我們都在兼容ie） 2. Mobile Browser（html5） 不管你承認與否，現在都是移動互聯網時代 ## 2個變革的橋梁都是瀏覽器 ### 從c/s到b/s架構的演變 直白點講就是：從GUI到Browser的架構演變。 要想對“C/S”和“B/S”技術發展變化有所了解，首先必須搞清楚三個問題。 第一、什么是C/S結構。 C/S（Client/Server）結構，即大家熟知的客戶機和服務器結構。它是軟件系統體系結構，通過它可以充分利用兩端硬件環境的優勢，將任務合理分配到Client端和Server端來實現，降低了系統的通訊開銷。目前大多數應用軟件系 統都是Client/Server形式的兩層結構，由于現在的軟件應用系統正在向分布式的Web應用發展，Web和Client/Server應用都可以進行同樣的業務處理，應用不同的模塊共享邏輯組件；因此，內部的和外部的用戶都可以訪問新的和現有的應用系統，通過現有應用系統中的邏輯可以擴展出新的應用系統。這也就是目前應用系統的發展方向。 傳統的C／S體系結構雖然采用的是開放模式，但這只是系統開發一級的開放性，在特定的應用中無論是Client端還是Server端都還需要特定的軟件支持。由于沒能提供用戶真正期望的開放環境，C/S結構的軟件需要針對不同的操作系統系統開發不同版本的軟件，加之產品的更新換代十分快，已經很難適應百臺電腦以上局域網用戶同時使用。而且代價高，效率低。 第二、什么是B/S結構。 B/S（Browser/Server）結構即瀏覽器和服務器結構。它是隨著 Internet技術的興起，對C/S結構的一種變化或者改進的結構。在這種結構下，用戶工作界面是通過WWW瀏覽器來實現，極少部分事務邏輯在前端 （Browser）實現，但是主要事務邏輯在服務器端（Server）實現，形成所謂三層3-tier結構。這樣就大大簡化了客戶端電腦載荷，減輕了系統維護與升級的成本和工作量，降低了用戶的總體成本（TCO）。 以目前的技術看，局域網建立B/S結構的網絡應 用，并通過Internet/Intranet模式下數據庫應用，相對易于把握、成本也是較低的。它是一次性到位的開發，能實現不同的人員，從不同的地 點，以不同的接入方式（比如LAN,WAN,Internet/Intranet等）訪問和操作共同的數據庫；它能有效地保護數據平臺和管理訪問權限，服 務器數據庫也很安全。特別是在JAVA這樣的跨平臺語言出現之后，B/S架構管理軟件更是方便、快捷、高效。 第三、B/S相比C/S的優勢 B/S結構下軟件相比C/S結構下軟件，有著獨特的優勢。 節約投資。B/S結構下軟件一般只有初期一次性投入成本；而C/S結構下軟件則隨著應用范圍的擴大，要求不斷進行資本的投入。比如需要購買更為高級的服務器或者增加相應的管理人員等。 簡化工作。B/S結構下軟件安裝在服務器端即可解決問題，在做更改時，只需調整服務器端即可。C/S結構下軟件則需要安裝在客戶機端，調整的時候需要涉及到局域網內的每一臺機器。對于區域級服務器來講，C/S結構的軟件更新則更加復雜。 更好地保障數據安全。在C/S結構軟件的解決方案里，對于異地經營的大型集團企業，需要在各地分別安裝區域級服務器。一旦某一個區域級服務器出現問題，對數據的安全會造成一定影響，而且總部也不會得到準確的最終數據。對B/S結構下軟件來講，其數據集中存在于企業的中央數據庫，可有效地保護數據的安全，而且企業可隨時隨地掌握自己的經營狀況、市場動態，以做出最快決策。 不受網絡的限制。C/S結構軟件僅適用于局域網內部用戶或寬帶用戶（1兆以上）；而B/S結構軟件則適合于任何網絡結構（包括28.8K撥號入網方式），尤其適合于寬帶不能達到的地方。 ### 從傳統web到html5的hybrid開發演變 傳統web開發就不多講了，相信大部分人都明白。 #### 移動應用開發分類 * native原生開發 * Hybrid混搭開發 native原生開發指的使用移動設備上系統支持的語言開發的app，比如android使用java開發，iOS使用oc開發，最終開發的應用以apk和ipa包得形式上傳到應用商店，提供給移動設備進行安裝。 Hybrid混搭開發是指使用html5技術開發的跨瀏覽器應用，并最終可以將html5.js.css等打包成apk和ipa包的開發方式。它也可以上傳到應用商店，提供給移動設備進行安裝。它最大的好處是通過h5開發一次，就可以在多個平臺上安裝。 Hybrid App主要以JS+Native兩者相互調用為主，從開發層面實現“一次開發，多處運行”的機制，成為真正適合跨平臺的開發。目前已經有眾多Hybrid App開發成功應用，比如百度、網易、街旁等知名移動應用，都是采用Hybrid App開發模式。 經過眾多開發者與成功案例證明Hybrid App兼具了Native App的良好用戶體驗的優勢，也兼具了Web App使用HTML5跨平臺開發低成本的優勢。現在有更多的開發者在面臨移動平臺的選擇，所以在這里根據開發中各個平臺的使用情況，針對現在主流的平臺進行分析。 #### 主流移動平臺分析 Hybrid App開發，現階段主流的平臺包括PhoneGap，AppCan，appMobi，Titanium等，它們基于webkit開源內核，使用HTML5 標準開發，適配機型簡單，支持開發者自定義插件，并能很好的應用于商業，教育，娛樂等行業，成為移動開發者的首選開發平臺。 #### 總結 從上面的描述，我們可以知道Hybrid混搭開發是通過移動端瀏覽器為核心，作為界面和操作系統間交互的媒介。 ## h5特點 * 語義化標簽 * css3動畫 * media query * canvas * cache：localstorage,websql ,indexdb * 其他移動端特性，如陀螺儀，地圖等 ## 未來的2點 * js一統天下（nodejs做后端，傳統web和h5使用javasctipt，更智能的工具如gulp，更簡單的寫法如coffeescript等） * h5大行其道（網速變快，硬件內存增長） ## 總結 前端開發人員有更多可以嘗試和學習的機會，這是機遇也是挑戰。加油吧，前端er們。 我們的時代到了