当前位置: 首页 > 科技观察

前端开发你需要学习的10个关键技能

时间:2023-03-18 12:27:11 科技观察

毫无疑问,前端开发将是2020年技术领域最热门的职业之一。在过去,前端领域的开发者都知道一点HTML、CSS和jQuery就足以创建交互式网站;但是今天,面对广泛且不断变化的生态系统,他们需要培养各种技能;他们需要掌握很多工具、库和框架;他们还必须不断地投资自己来学习新知识。近年来,出现了一系列优秀的基于JavaScript的新库和框架,例如ReactJS、VueJS和Svelte;它们为主流网络应用程序带来了强大的力量。本文希望能给大家提供一些指导,帮助大家在2020年提升自己的前端开发水平;无论您是新手还是经验丰富的老手,这篇文章都值得一读。1.框架在2020年,我们可能会看到Facebook的ReactJS和社区驱动的VueJS之间的摊牌。目前,React在GitHub上有14万颗星,Vue甚至有15.3万颗星。相比之下,像Angular这样的项目只有53,000颗星。这一假设也得到了2019年React(蓝线)、Vue(红线)、Angular(黄线)和Svelte(绿线)的搜索趋势的支持——Vue略高于React。Angular在搜索量方面远远落后,而Svelte在这场对决中几乎没有存在感。所以在2020年,使用或者想使用JavaScript框架的前端开发者应该考虑将React和Vue作为主要选择。如果您正在从事大型企业项目,Angular也是一个可行的选择。如果您想了解有关这些框架的更多信息,请查看这些很棒的资源:ReactVue.js2.静态站点生成器静态站点生成器结合了服务器端渲染(对SEO非常重要,也会影响初始加载时间)和单页应用程序能力。如今,即使不需要服务器端渲染,许多项目也会选择SSG,因为像Next或Nuxt这样的解决方案具有许多方便的功能,例如markdown支持、模块打包器和集成测试运行器。如果你认真对待前端开发工作,你应该仔细看看以下项目并尝试获得一些实践经验:Next(React-based)Nuxt(Vue-based)Gatsby(React-based)Gridsome(Vue-based)这大概是2020Project最火的东西了,当然还有很多选择。如果您想了解更多关于它们的信息,请查看这些资源:Next.jsNuxt.jsGatsbyGridsome3.JAMstackJAMstack一词代表JavaScript(在客户端运行,例如React、Vue或VanillaJS)、API(服务器-sideprocess通过JavaScript通过HTTPS抽象和访问)和标记(在部署时预构建的模板标记)。这是一种构建性能更好的网站和应用程序的方法——降低扩展成本,提供更高的安全性,并提供更好的开发体验。尽管这些术语本身并不新鲜,但它们有一些共同点——它们不依赖于Web服务器。因此,依赖于Ruby或Node.js后端的整体应用程序,或使用服务器端CMS(例如Drupal或WordPress)构建其站点的应用程序,不是使用JAMstack构建的。如果您打算使用JAMstack,这里有一些最佳实践:(1)在一个CDN上为整个项目提供服务由于JAMstack不需要服务器,因此整个项目可以通过一个CDN提供服务,从而释放出无与伦比的速度和性能。(2)Git中的一切任何人都应该能够从单个Git存储库克隆整个项目,而无需数据库或复杂的设置。(3)自动化构建您可以完美地自动化构建,因为所有标签都是预先构建的——例如使用webhooks或云服务的预构建标签。(4)原子部署为了避免在大型项目中重新部署数百或数千个文件时出现不一致的状态,原子部署会等待所有文件上传后再进行更改。(5)即时缓存失效当站点上线时,必须确保CDN能够处理即时缓存破坏以使更改可见。Netlify或Zeit等知名主机支持JAMstack应用程序,许多大公司使用它们来为用户提供出色的体验。作为一名前端开发人员,您肯定想在2020年学习使用JAMstack。如果您想了解更多关于JAMstacks的信息,这里有一些很棒的资源:JAMstack(https://jamstack.org/)JAMstackWTF(https://jamstack.wtf/)“JAMstack的新手?你需要知道什么开始你需要知道的一切”(https://snipcart.com/blog/jamstack)4.PWA渐进式网络应用程序(PWA)绝对是2020年的热门话题。越来越多的公司选择使用PWA而不是原生应用来为用户提供丰富的移动体验。PWA可靠(即时加载,无需互联网连接工作),快速(流畅的动画,快速响应用户交互),并提供引人入胜的体验(原生应用程序般的感觉,出色的用户体验)。他们利用服务人员提供离线功能和网络应用程序清单文件来提供全屏体验。构建渐进式Web的原因应用程序可能包括:可以从浏览器添加到用户的主屏幕Works即使没有互联网也支持网络推送通知以增强用户参与度利用Google的Lighthouse功能如果您想了解有关PWA的更多信息,请随时查看以下资源:web/progressive-web-apps)“你的第一个渐进式网络应用程序”(https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0)5。GraphQLGraphQL是目前最热门的话题之一,绝对是你在2020年需要学习或改进的东西。虽然REST提供了无状态服务器等伟大的概念,并且长期以来一直被认为是设计WebAPI的事实标准,但这些相对笨拙的API是由于访问这些RESTfulAPI的客户端的快速变化,它变得越来越不灵活。GraphQL由Facebook开发,旨在解决开发人员在处理RestfulAPI时面临的一些特定问题。使用RESTAPI时,开发人员可以通过从具有特定用途的多个端点(例如/users/端点或/tours//location端点)获取数据来收集数据。使用GraphQL时,事情会有所不同。开发人员将查询连同他们的数据要求一起发送到GraphQL服务器。然后服务器将返回一个包含所有相应数据的JSON对象。使用GraphQL的另一个好处是它使用了强类型系统。GraphQL服务器上的所有内容都是通过使用GraphQL架构定义语言(SDL)的架构定义的。创建架构后,前端和后端开发人员可以相互独立工作,因为他们都了解定义的数据结构。如果您想了解有关GraphQL的更多信息,请查看这些重要资源:GraphQL如何开始使用GraphQL(https://www.howtographql.com/)“GraphQLContentAPI入门”(https://www.contentful.com/developers/docs/tutorials/general/graphql/)“GraphQL:一种数据查询语言”(https://engineering.fb.com/core-data/graphql-a-data-query-language/)6.代码编辑与2019年一样,微软的VSCode将在2020年成为大多数前端工程师的首选编辑器。它提供类似IDE的功能,例如代码完成和突出显示,并且通过其扩展市场几乎可以无限扩展。其中,扩大市场是VSCode如此优秀的最大功臣。以下是一些适用于前端开发人员的出色扩展:JavaScript(ES6)代码片段npmPrettierCSSPeekVeturESLintLiveSassCompilerDebuggerforChromeLiveServerBeautify这些是一些很酷的示例。VSCode还有很多值得探索的地方,所以如果你还没有使用过它,我建议你试一试。7.测试未经测试的代码不应投入生产。在您的个人项目中,不进行任何测试似乎很方便,但在商业和企业环境中工作时,测试是必须的。因此,尽可能将测试集成到开发工作流程中对任何开发人员来说都是一个好主意。测试用例可分为以下几类:单元测试:在隔离环境中测试单个组件或功能。集成测试:测试组件之间的交互。端到端测试:在浏览器中测试功能齐全的用户流程。测试的方式比较多,比如手动测试、快照测试等。如果你想升到高级开发人员的位置,或者打算在有一定开发水平的大公司工作,你应该努力提高自己的测试技能。8.干净的代码能够编写干净的代码是一项伟大的技能,许多组织都非常需要它。如果你想从开发人员职位晋升为高级开发人员,你应该学习干净代码的哲学。干净的代码应该优雅且可读。他们应该专注于一个目标,而你也应该这样做。所有测试都以干净的代码运行。它们不应包含重复项,并且应尽量减少类、方法和函数等实体的使用。开发人员为编写干净的代码应该做的一些事情是:为变量、类、方法和函数创建有意义的名称;函数应该很小并且应该有尽可能少的参数;完全没有评论——代码应该说明了一切。如果您想了解有关干净代码检查的更多信息,请阅读RobertC.Martin的书籍和帖子。9.Git毫无疑问,Git是当今Web开发中版本控制的标准。为了在各种规模的团队中有效地工作,了解基本的Git概念和工作流程对于每个前端工程师来说都很重要。这里有一些你应该知道的流行Git命令:gitconfiggitinitgitclonegitstatusgitaddgitcommitgitpushgitpullgitbranch这些命令可以提高你的工作效率,熟悉它们当然是好的;但是前端工程师也应该学习Git的基本概念。这里有一些资源供您参考:“解释Git的基本概念以及如何使用GitHub”(https://thepilcrow.net/explaining-basic-concepts-git-and-github/);“如何使用GitHub-使用GitHub协作开发”(https://www.edureka.co/blog/how-to-use-github/);GitHub。10.SoftSkills一个经常被忽视但对开发人员来说非常重要的一点是获得一些软技能。虽然了解事物的技术方面很有用,但了解如何在团队中沟通也同样重要。如果你关心你的技术职业和/或计划晋升到高级职位,你应该培养以下软技能:同理心沟通团队合作平易近人且乐于助人耐心开放的思维解决问题负责任的创造力时间管理永远记住:最重要的可交付成果高级开发人员是更高级的开发人员。总结在本文中,我向您展示了前端开发人员在2020年应该尝试学习、改进或掌握的10件重要事情。此列表并非详尽无遗,但希望它能给您一些启发——选择已到给你!