# 為什么前端越來越難?越來越有意思?
## 大前端
從架構上講,軟件從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們。
我們的時代到了
- 前言
- 1 skill
- 1.1 Coding WebIDE
- 1.2 git
- 1.3 extra practice
- 1.4 預習
- 2 nodejs入門
- 2.1 入門
- 2.2 安裝
- 2.3 helloworld
- 2.4 commonJS規范
- 2.5 模塊導出
- 2.6 Nodejs代碼調試
- 2.7 編寫Nodejs模塊
- 2.8 最小化問題
- 2.9 隨堂練習
- 3 異步流程控制
- 3.1 什么時候會用到異步流程控制
- 3.2 簡單做法async模塊
- 3.3 Promise/a+規范
- 3.4 Node.js Promise/a+實現
- 3.5 生成器Generators/yield
- 3.6 Async函數/Await
- 3.7 神奇的co
- 3.8 5種 yieldable
- 3.9 學習重點
- 3.10 隨堂練習
- 4 express和微信開發入門
- 4.1 入門
- 4.2 connect
- 4.3 靜態Http服務器
- 4.4 那些預處理器
- 4.5 路由
- 4.6 視圖與模塊引擎
- 4.7 中間件
- 4.8 更多實踐
- 4.9 微信入門
- 4.10 隨堂練習:完成登錄、注冊功能
- 5 微信實例與H5實踐
- 5.1 微信基礎和sandbox
- 5.2 公眾號菜單和自動回復
- 5.3 微信OAuth用戶授權
- 5.4 微信分享
- 5.5 wechat-api
- 5.6 H5-上篇
- 5.7 H5-下篇
- 5.8 隨堂練習
- 6 weui實戰
- 6.1 使用bower
- 6.2 移動端抽象
- 6.3 優化滑動列表
- 6.4 weui
- 6.5 讓weui和iscroll結婚
- 6.6 優化事件
- 6.7 how-to-write-h5
- 6.8 優化無止境
- 6.9 隨堂練習
- 7 微信支付
- 7.1 吹個牛
- 7.2 支付概述
- 7.3 科普幾個概念
- 7.4 準備
- 7.5 調試
- 7.6 公眾號支付(JSAPI)
- 7.7 對賬單
- 7.8 數據處理
- 7.9 隨堂練習
- 8 項目實戰《付費課程系統MVP》
- 8.1 需求分析
- 8.2 ui/ue
- 8.3 技術棧
- 8.4 模型
- 8.5 靜態api
- 8.6 開發
- 8.7 部署
- 8.8 監控
- 8.9 數據統計
- 8.10 demo
- 9 高級篇
- 9.1 前后端分離實踐?
- 9.2 如何展望未來的大前端
- 9.3 容器和微服務
- 10 答疑問題收集