2018年Web前端開發趨勢

介紹

2017年對於Web開發來說是一個偉大的一年，Web Components或PWAs等許多新技術第一次在大多數瀏覽器中都可以使用。儘管這些技術還是非常新的，我們在網路開發領域也有很多其他的事情發生。

趨勢1：掌握基礎

需要等什麼？我首先概述了我們擁有的令人敬畏的新技術，現在我們深入了解基礎知識？

是的，因為這些將保持你在2018年作為網頁開發人員必須知道的最重要的事情！這聽起來微不足道，但是由於我們有越來越多的技術組成網路開發，所以理解什麼是所有的東西構建基礎都是至關重要的。

Web組件？這只是JavaScript！PWA應用程序？還有JavaScript。CSS框架？猜猜看 - 它們只是使用普通的CSS。

你不一定要掌握所有這些技術，每個開發人員都有優先選擇的領域。但是你需要知道HTML，CSS和JavaScript是如何工作的以及它們是如何協同工作的。這個是沒有捷徑的。

趨勢2：深入學習Node.js

Node.js已經在過去幾年流行了。這不會在2018年改變，情況正好相反，會越來越流行。

當然，PHP，Ruby on Rails等技術還是有上升空間的，但特別是隨著無伺服器Web應用程序的興起，Node.js是一種伺服器端語言，你應該看看。而且你反正知道基礎JavaScript。Node.js只是伺服器上的JavaScript，所以為什麼不深入其中，成為全棧開發人員呢？

除此之外，沒有一個巨大的優勢可以使Node.js嚴格優於PHP等語言。它是一種高性能的語言。它具有一個充滿活力和積極的生態系統與許多第三方軟體包，你可以載入到你的應用程序。但是如此流行的頭號原因是：JavaScript變得越來越重要。2018年情況也是如此。

趨勢3：探索React、Angular和Vue.js前端框架

以下是Web開發的一部分：前端框架（如Angular，React或Vue.js）都完全是由（客戶端）JavaScript提供支持。

這些框架讓你在Web應用程序中創建高度吸引人的用戶體驗，因為一切都是通過JavaScript控制的。這允許您在載入後重新渲染頁面的一部分（或整個頁面）。這樣可以節省不必要的頁面重新載入，並向伺服器請求響應周期。原生移動應用程序般的用戶體驗就是結果 - 我們都希望有很好的用戶體驗，不是嗎？

準確地說，如果你重新渲染整個屏幕，從而產生載入不同頁面的錯覺，你創建一個所謂的單頁面應用程序（SPA），因為只有一個頁面（index.html）被載入，而且看起來仍然像Web應用程序託管多個頁面。

越來越多的網路應用程序被構建為一個SPA（Single Page Application），因為它真的給用戶的屏幕帶來了類似手機應用程序的感覺。但是即使只使用這些框架來控制伺服器端呈現頁面的一部分（除了Angular，它實際上只能創建SPA），您可以增強用戶體驗，因為您可以實現動態元素，如圖像輪播或手風琴菜單。

你可以做到這一點，例如使用jQuery。但使用React，Angular和Vue，它變得更簡單，更強大。

2018年將會有一個相對較新的趨勢，即前期渲染或伺服器端渲染。這意味著您的應用程序仍由JavaScript控制，並在瀏覽器中運行，但您也可以在第一次載入時提供預渲染版本的應用程序。這增強了搜索引擎優化（由於爬蟲看到用戶看到的內容，而不必等待一些非同步載入的內容），並可以加快你的應用程序。

你可能想看看React對應的Next.js，Angular對應的Angular Universal或者Vue.js對應的Nuxt.js項目。

所有這三個框架目前看起來都不錯。建議把它們全部了解（至少一點），然後選擇你最喜歡的一個掌握。

趨勢4：Web組件和組件編譯器

Web組件以及像Stencil一樣編譯Web組件的工具不太為人所知。

Web組件背後的想法很簡單：為什麼我們應該使用像React這樣的庫來構建只在該庫中工作的組件，而不是使用原生的JavaScript來構建這些組件，並在框架之外使用它們呢？

直到2017年底，瀏覽器支持是一個更大的問題，但到2018年初，它看起來相當不錯。構成Web組件的四個Web API：自定義元素（Custom Elements），虛擬DOM（Shadow DOM），HTML模板和HTML導入，全部被所有主流瀏覽器支持。

特別是前兩個元素 - 自定義元素和虛擬DOM， 是非常有趣的Web API。

1.使用自定義元素，你可以做它聽起來像：構建自己的HTML元素（例如）。這些元素包含了所有需要在屏幕上顯示的代碼 ，不需要框架！甚至比這更好：如果您需要該框架的其他功能（即超出其創建可重用組件的功能），則可以將這些元素與Angular等框架結合使用。

2.虛擬DOM（Shadow DOM）類型的構建，並允許您將某些CSS樣式限制到您的自定義元素。這給你真正可重用的"HTML元素"。

3.HTML模板允許您在自定義元素中定義HTML代碼（使用「普通」元素或其他自定義元素）。

4.HTML導入將允許您將HTML文件導入到HTML文件中，但是這個標準正在死亡，這並不是真的需要，因為我們通常使用構建工具和打包工具，比如Webpack。

如這些示例所示，手動構建Web組件/自定義元素可能會變得非常麻煩。

這就是為什麼像StencilJS這樣的組件編譯器看起來非常有前途的原因。Angular Elements將是另一個項目，允許您使用更好的語法，然後自動將其編譯為本地Web組件。

這些項目背後的核心思想是：給你一個很好的語法和很多輔助類 - Stencil使用TypeScript，JSX和Angular-inspired特性，Angular Elements使用Angular來構建自定義Web組件。您的代碼將被編譯為原生的JavaScript，以便您可以在任何網頁中使用創建的組件。

你並不需要使用這樣一個特定的框架或任何東西。

我們可以對Web組件感到興奮，因為使用它們給我們減少了我們的包的大小（你也許能夠在沒有任何框架的情況下構建網頁）。另外，這些自定義元素可以跨項目高度重用，聽起來對我來說是一個夢。

Web組件參考鏈接:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！