[技術翻譯]9個可讓你在2020年成爲前端專家的項目

本次預計翻譯三篇文章以下：

• 01.[譯]9個可讓你在2020年成爲前端專家的項目
• 02.[譯]預加載響應式圖像，從Chrome 73開始實現
• 03.[譯]您應該知道的13個有用的JavaScript數組技巧

我爲何要建立這個git倉庫？經過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translate

介紹

不管您是編程新手仍是經驗豐富的開發人員。在互聯網這個行業中，必須不斷學習新的概念和語言/框架以跟上快速變化的步伐。以React爲例 - 4年前由Facebook開源，它如今已經成爲全球JavaScript開發人員的首選。Vue和Angular固然也有其相應的追捧者。而後是Svelte，以及Next.js或Nuxt.js等通用框架，以及Gatsby，Gridsome，Quasar等等。若是您想成爲一名專業的JavaScript開發人員，那麼您至少應該在不一樣的框架和庫中擁有一些實戰經驗 - 除了使用原生的JS完成工做任務。

爲了幫助您在2020年成爲前端專家(Frontend Master)，我收集了9個不一樣的項目，每一個項目都有不一樣的主題和不一樣的JavaScript框架或庫做爲技術棧，您能夠構建這些項目並將其添加到學習目標中。請記住，沒有什麼比項目實戰(actually building stuff)對您有更大的幫助了，所以，請不斷進取(sharpen your mind)，實現這一目標！

使用React（使用鉤子）構建電影搜索應用程序

首先，您可使用React構建電影搜索應用程序。下面是應用程序最終的示例圖：

您將學到什麼

構建這個應用程序，您將使用相對較新的Hooks API來提高您的React技能。示例項目利用了React組件，鉤子，一個外部api，固然還有一些CSS樣式。

技術棧和功能

• React with Hooks
• create-react-app
• JSX
• CSS

不使用任何類，該項目爲您提供了功能的完美切入點，而且確定會在2020年爲您提供幫助。您能夠在此處找到示例項目：https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/請按照本教程進行操做，或者按照您本身的方式進行！

使用Vue構建聊天應用

對您來講，另外一個很棒的項目是使用我最喜歡的JavaScript庫VueJS構建聊天應用程序。該應用程序將以下所示：

您將學到什麼

在本教程以後，您將學習如何從頭開始配置Vue應用，建立組件，處理狀態，建立路由，鏈接到第三方服務，甚至處理身份驗證。

技術棧和功能

• Vue
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

這真的是一個很棒的項目，能夠開始使用Vue或提高您現有的技能以應對2020年的開發。您能夠在此處找到該教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/

使用Angular 8構建美麗的天氣應用

此示例將幫助您使用Google的Angular 8構建美觀的天氣應用程序：

您將學到什麼

該項目將教您一些寶貴的技能，例如從頭開始建立應用程序，從設計到開發，一直到生產部署。

技術棧和功能

• Angular 8
• Firebase
• 服務端渲染
• 使用柵格佈局和Flex佈局
• 移動端友好 & 響應式
• 暗黑模式
• 漂亮的UI

對於這個綜合性項目，我真正喜歡的是，您不是單一地學習東西，而是從設計到最終部署的整個開發過程。您應該真正作到這一點！https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

使用Svelte構建待辦應用

與React，Vue和Angular相比，Svelte kinda是新手，但還是2020年的熱門話題之一。好的，To-Do應用程序不必定是那裏最熱門的話題，但這確實能夠幫助您提升Svelte技能看起來像這樣：

您將學到什麼

本教程將向您展現如何從頭至尾使用Svelte 3製做應用。它應用了組件，樣式和事件處理程序。

技術棧和功能

• Svelte 3
• 組件
• 經過CSS樣式
• ES 6語法

那裏沒有不少優秀的Svelte入門項目，所以我以爲這是一個很好的起點。誰知道呢，也許您是在建立另外一篇更全面的Svelte教程的人，它將在本帖子的明年版本中介紹？https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

使用Next.js構建電子商務購物車

NextJs是用於建立支持應用程序開箱即用的React應用程序的最受歡迎的框架。該項目將向您展現如何構建一個以下所示的電子商務購物車：

您將學到什麼

在這個項目中，您將學習如何設置Next.js開發環境，建立新頁面和組件，獲取數據，樣式並部署下一個應用程序。

技術棧和功能

• Next.js
• 組件和頁面
• 數據獲取
• 樣式
• 部署方式
• SSR和SPA

擁有一個真實的例子（例如電子商務展現櫃）來學習新的東西老是很高興。您能夠在這裏找到該教程：https://snipcart.com/blog/next-js-ecommerce-tutorial

創建完整的多語言博客網站Nuxt.js

Nuxt.js對Vue的做用是Next.js的反映。一個很好的框架，能夠結合服務器端渲染和單頁應用程序的功能。您能夠建立的最終應用程序將以下所示：

您將學到什麼

這個示例項目將教您從初始設置到最終部署，如何使用Nuxt.js構建完整的網站。它利用了Nuxt必須提供的許多優秀功能，如頁面和組件以及SCSS樣式。

技術棧和功能

• Nuxt.js
• 組件和頁面
• Storyblok模塊
• 混合(Mixins)
• Vuex狀態管理
• SCSS樣式
• Nuxt中間件

這對您來講是一個很是酷的項目，涵蓋了Nuxt.js的許多優秀功能。我我的很喜歡使用Nuxt，所以您應該真正嘗試使用它，由於它也將使您成爲更好的Vue開發人員！https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

用Gatsby創建博客

Gatsby是一個出色的靜態站點生成器，在後臺使用React和GraphQL。這是該項目的結果：

您將學到什麼

在本教程中，您將學習如何利用Gatsby構建優秀的博客，在使用React和GraphQL的同時能夠很好地編寫本身的文章。

技術棧和功能

• Gatsby
• React
• GraphQL
• 插件和主題
• MDX/Markdown
• Bootstrap
• 模板

若是您想建立博客，這是一個很好的示例，說明如何利用React和GraphQL作到這一點。我並非說Wordpress是一個很差的選擇，可是有了Gatsby，您能夠在使用React的同時建立高性能站點！https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

用Gridsome創建博客

Gridsome適用於Vue，好吧，咱們已經在Next/Nuxt中擁有了，可是Gridsome和Gatsby也是如此。二者都使用GraphQL做爲數據層，可是Gridsome使用VueJS。這也是一個很棒的靜態站點生成器，它將幫助您建立出色的博客：

您將學到什麼

該項目將教您如何構建一個簡單的博客，以開始使用Gridsome，GraphQL和Markdown。它還介紹瞭如何經過Netlify部署應用程序。

技術棧和功能

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

固然，這不是最全面的教程，但涵蓋了Gridsome和Markdown的基本概念，多是一個很好的起點。
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome

使用Quasar構建相似於SoundCloud的音頻播放器應用

Quasar是另外一個Vue框架，也能夠用於構建移動應用程序。在這個項目中，您將建立一個音頻播放器應用程序，以下所示：

您將學到什麼

儘管其餘項目主要關注Web應用程序，但該項目將向您展現如何經過Quasar框架使用Vue建立移動應用程序。您應該已經配置了Cordova工做環境，並配置了android studio/xcode。若是沒有，則在教程中有一個指向quasar網站的連接，他們向您介紹瞭如何進行設置。

技術棧和功能

• Quasar
• Vue
• Cordova
• Wavesurfer
• UI組件

一個小項目，展現了Quasar在構建移動應用程序方面的強大功能。https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

結論

在本文中，我向您展現了您能夠構建的9個項目，每一個項目專一於一個JavaScript框架或庫。如今，選擇權全由您本身決定：您是否會使用之前未使用的框架來嘗試一些新的東西？仍是要經過爲已經具有必定知識的技術進行項目來加強技能？仍是您會依賴本身喜歡的框架/庫，並在2020年完成全部項目？隨時發表評論，不要忘記關注我，以獲取更多即將發佈的帖子！

原文連接：https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h