如果你想成为一名专业的JavaScript开发人员,那么除了掌握JavaScript之外,至少还应该具备一些其他框架和库的开发经验。本文收集了9个不同的项目,其中每个项目都使用了不同的JavaScript框架或库,相信通过练习,你一定可以成为2020年的前端开发大师!

 

作者 | Simon Holdorf

译者 | 弯月,责编 | 郭芮

出品 | CSDN(ID:CSDNnews)

以下为译文:

无论你是编程新手还是经验丰富的开发人员,既然踏入这个行业,你就必须不断学习新概念和语言/框架,才能跟上这个世界瞬息万变的步伐。以React为例,4年前Facebook开源了React,随后它成为了全球JavaScript开发人员的首选。然而,Vue和Angular也不甘落后。再到后来的Svelte、以及Next.js或Nuxt.js等通用框架,还有Gatsby、Gridsome、Quasar等等。

如果你想成为一名专业的JavaScript开发人员,那么除了掌握JavaScript之外,至少还应该具备一些其他框架和库的开发经验。

为了帮助你成为2020年的前端开发大师,我收集了9个不同的项目,其中每个项目都有不同的主题,并使用了不同的JavaScript框架或库,希望你能尝试构建这些项目,并建立自己的展示成果。请记住,纸上谈兵并没有太大益处,不如现在就开始动手,逐个攻克这些难题!

 

 

使用React构建电影搜索应用

 

首先,你可以用React构建一款电影搜索应用。该应用最终大致如下:

 

你可以学习到的技术

构建这个应用程序可以让你更进一步掌握React以及新兴的Hooks API。上图中的项目利用了React组件、许多钩子、一个外部API、当然还有一些CSS样式。

技术栈与功能

  • React与钩子

  • 创建React应用

  • JSX

  • CSS

这个项目不需要使用任何类,可以为你提供一个接触函数式React的完美契机,并帮助你在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

  • 服务器端渲染

  • CSS、Grid Layout和Flexbox

  • 人性化设计、响应式移动应用

  • 夜间模式

  • 漂亮的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是一款新兴的框架,但仍是2020年的热门话题之一。虽然待办事项这类的应用有点老套,但这个项目确实可以帮助你进一步掌握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与React。一个好的框架可以结合服务器端渲染和单页应用程序的功能。该应用最终大致如下:

 

你可以学习到的技术

这个示例项目将教你如何使用Nuxt.js,从初始设置到最终部署构建完整的网站。这个项目利用了Nuxt必须提供的许多出色功能,例如页面、组件以及SCSS样式。

技术栈与功能

  • Nuxt.js

  • 组件和页面

  • Storyblok模块

  • 混合组件

  • 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 CSS

  • 模板

如果你想创建一个博客,那么可以通过这个例子来学习如何利用React和GraphQL创建博客网站。我并不是说选择Wordpress不好,但是你可以使用Gatsby,创建高性能的React网站!教程链接如下:

  • https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

 

 

使用Gridsome建立博客

 

Gridsome与Vue的关系嘛……我们已经在介绍Nuxt的时候拿Next做类比了,然而Gridsome和Gatsby也是如此。两者都使用GraphQL作为数据层,只不过Gridsome使用VueJS。Gridsome是一个非常出色的网站生成工具,它可以帮助创建优秀的博客:

 

你可以学习到的技术

这个项目将教你如何利用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

作者:Simon Holdorf,JavaScript全栈开发。

本文为 CSDN 翻译,转载请注明来源出处。

Logo

20年前,《新程序员》创刊时,我们的心愿是全面关注程序员成长,中国将拥有新一代世界级的程序员。20年后的今天,我们有了新的使命:助力中国IT技术人成长,成就一亿技术人!

更多推荐