[技术翻译]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