我看到的前端

前端開發在移動浪潮的到來中，越演越烈，在web app的強勢驅動下，在native化交互的硬需求下，前端的需求從原先的操做操做dom，來個小動畫，轉變成了全數據流的末尾處理端。前端不再是什麼ui，不再是一個bootstrap+jquery就能夠解決全部問題的領域。在數據處理的下垂之中，如何在最短的時間內處理用戶的交互數據，用戶的統計數據，用戶的分析數據，成爲了前端數據鏈當中的重中之重。如何處理這些數據，如何處理這些數據和native交互的連接，成爲了前端必需要解決的問題。而，由此帶來的前端人員的增長，工具的增長，如何有效，有質量的解決這些問題的工程化思惟被提上了歷史的舞臺。

從ui到數據鏈處理

好久以前，咱們pp圖，寫寫html，寫寫css，寫寫jquery，以爲前端如此美好，數據由CGI處理，咱們不用擔憂，調用就好，3我的能夠解決前端的全部問題。可是，忽然，有一天，數據的高牆被推倒，咱們看到了牆外面的世界，原來，牆的外面真的有巨人。

是前端，但不只僅是前端

這裏所說的前端，並非單單指的是前端，而是之前端爲表明的ui開發。整個ui開發，實際上是一體的，很長時間以來，在整個軟件工程體系當中，ui開發一直得不到足夠的重視，協議層，數據層的東西才被認爲是軟件工程的核心，可是當UX愈來愈被重視，協議層和數據層的發展遇到瓶頸，前端工程才從新被認知和重視，而此時的前端，已經不當當是當初那個寫寫xml/html接口集，寫寫css樣式集，寫寫javascript/java/OC/swift腳本的前端，而是一個要求處理數據末端處理的工做流的前端。數據的高牆被推倒以後，前端要怎麼去處理呢？

數據纔是程序存在的根本要義

那麼，咱們爲何要把數據放入到前端開發的範疇中來呢，這樣是否是有意義的呢？事情是很清楚的，最重要的緣由是，數據是程序存在的根本要義。沒有人花時間在程序上面，只是爲了看代碼運行完以後的success，哦，除了程序員。

交互需求是數據存在的根本原因

而數據的來源又是由於人對機器發出的指令，也就是咱們所說的交互需求。換句話來講，前端開發決毫不是什麼簡單ui處理，而是一個完整的交互開發，一我的與數據處理的開發。

那麼，從這個角度出發，前端工程徹底是一個獨立的軟件工程範疇。咱們來討論下工程化，這個問題。

工程化

所謂工程化，表達出來的是，如何將一個看起來簡單的事情作的更好。不少時候，咱們或許並不關心這樣作的根本緣由，這樣作的理論依據，這樣作的專業性知識，可是，咱們絕逼會這樣去作，由於此，纔可能把事情作好呀，這不就是工程師要作的嘛？

工具化

因爲前端任務的繁重，因此出現了大量的工具來處理一些人來很容易犯錯的任務，好比說合並文件，混淆文件，壓縮文件，標註md5碼。等等。。。將工做細分，而後引入工具去處理一些問題，成爲趨勢。各類gulp/grunt/webpack的插件能夠說明問題。

模塊化，組件化

在以往的前端，一個頁面大多都是一個循環生成的。：D，可是如今，不僅僅是一個個循環能夠解決的啦，愈來愈細小的業務需求，致使咱們必須對每一個業務有很清晰的是認識，可是，一我的的精力是有限的，人員的增長和代碼複用的需求，致使了模塊化的出現，而模塊化的出現，致使了功能組合和複用的需求，資源和尋求的組合，這就是一個單獨的交互的組件。webpack，seajs，requirejs，AMD，CMD以及react，vue是前端模塊化組件化的先驅

自動化

工具化的應用和模塊化的思惟，使得自動化成爲了可能。管道的處理方式，和node帶來的系統級數據處理能力，致使了前端自動化成爲了一個不可阻擋的大趨勢。gulp，grunt這類工具是自動化的表明。

標準化

自動化的應用，給前端帶來的是對標準化的需求。沒有規矩不成方圓。如何處理css module，js module，這些組件要怎麼組合，一個組件應該要具有什麼基本的要素，這些都是前端標準化的過程。瀏覽器對ECMAscript標準的統一和對html5，css3標準的統一，也使得前端的開發變的有章可循。

可預測化

工程化帶來的，是咱們能夠很明白的知道，數據的input和output的直接關聯。function從一個Object變成一個factory。react的實際作法，就是將pre-function引入到DOM render當中來處理，使得DOM render變的能夠預見，能夠處理。

流水可處理

前面的這一切，爲流水化工業生產打下的理論基礎。也就是說，前端的代碼編寫變的更加的平民化，和普及化。同時，前端的開發效率會有一個質的提示。

可控的前端

全部的這一切，最終的目的，是爲了一個高效開發，高可控的前端。而可控的前端，包括了下面的方面。而正是這些需求，促成了函數式編程在前端開發的領域愈來愈被重視。同時數據上報也成爲了末端數據開發的重要部分。

數據可控

在開發階段，你能知道你要什麼樣的數據，你獲得了什麼樣的數據。
在部署階段，你能知道數據哪裏錯了。

錯誤可控

發生了什麼錯誤，哪些錯誤是高頻發生的，這些錯誤是怎麼發生的，在什麼場景下發生的。錯誤發生以後，對業務的直接影響是什麼。

反饋可控

咱們能知道用戶對產品的使用狀況是如何的。這些產品本身會關心的。

開發可控

咱們要知道，具體的代碼執行狀況，頁面請求的時間，頁面渲染的時間，首屏可見的時間，等等，這些開發想要的優化數據要可控，可見。而這些就要求，數據上報。