Web前端入门知识点有哪些?
1、JAMstack术语JAMstack代表着JavaScript(在客户端上运行—例如React、Vue或VanillaJS)、API(服务器端处理是抽象的,其通过JavaScript访问HTTPS)、markup(在部署时预构建的模块化标记)三者。
这是构建具有更好性能的网站和apps的一种方式—降低扩展成本、提高安全性和更好的开发体验。
尽管这些术语本身不是新鲜事物,但它们都有一个共同点—即不依赖网站服务器。因此,如果单片应用程序依赖于Ruby或Node.js后端,或者依赖由服务器端CMS(例如Drupal或WordPress)构建的网站,那么它便不是使用JAMstack构建而成。
如果想使用JAMstack,以下有一些最佳实践:
整个项目由CDN提供服务
由于不需要任何服务器,整个项目可通过CDN获取服务,解锁无与伦比的速度和性能。
一切都存在于Git
每个人应该能够从Gitrepo上复制整个项目,而无需数据库或者复杂的设置。
自动构建
你可以完美地进行自动构建,因为所有的标记是预先构建的—例如,webhooks或云服务的使用。
原子化部署
为了避免在大型项目中重新部署成百上千的文件而造成的不一致状态,原子化部署等到所有文件上传后,才进行更改。
即时缓存失效
当网站运行时,必须确保CDN能够处理即时缓存清除,以使更改可见。
著名的Netlify、Zeit等主机都支持JAMstack应用,大公司使用它们为用户提供出色的体验。
作为一名前端开发人员,一定有在2021年想要弄清楚的事。如果想要进一步了解JAMstacks,下面是一些不错的资源:
·JAMstack
·JAMstackWTF
·“NewtoJAMstack?EverythingYouNeedtoKnowtoGetStarted”
2、静态站点生成器
静态站点生成器结合了服务器端的渲染功能(对SEO和初始加载时间都非常重要)和单页应用程序。
如今,许多项目即使不需要服务器端渲染,也会选择SSG,因为Next或Nuxt这类解决方案具有便捷的功能,例如Markdown编辑器支持、模块捆绑和集成测试运行器等。
如果你是认真对待前端开发,应该仔细研究以下项目,并尝试从中获得一些实践经验:
·Next(基于React)
·Nuxt(基于Vue)
·Gatsby(基于React)
·Gridsome(基于Vue)
尽管还有很多,但这些可能会是2021年最受欢迎的。如果想要了解更多,可以查阅这些资源:
·Next.js
·Nuxt.js
·Gatsby
·Gridsome
3、渐进式网络应用(PWA)
渐进式网络应用(PWA)会成为2021年的热点。越来越多的公司选择PWAs取代本机应用程序,为用户提供丰富的移动体验。
PWAs具有可靠(即时下载,无需网络连接)、快速(流畅的动画,对用户交互的快速响应)和高度参与感(本机应用程序感受,出色的用户体验)的特点。
它们利用服务人员提供离线功能,以及利用web-app清单文件提供全屏体验。
构建渐进式网络应用的理由如下:
·可以从浏览器添加到用户的主屏幕
·即使没有网络连接也能正常工作
·支持网络推送通知,从而提高用户参与度
·使用谷歌的Lighthouse功能
如果想了解关于PWAs的更多信息,可以随时查阅这些附加资源:
·ProgressiveWebApps
·“YourFirstProgressiveWebApp”
4、框架
2021年,我们可能会看到Facebook的ReactJS和社区驱动的VueJS之间的对决。目前,React在GitHub上拥有140,000星(用户评价),而Vue拥有更多,达到了153,000星,而Angular只有53,000星。
2019年React(蓝线)、Vue(红线)、Angular(黄线)和Svelte(绿线)的搜索量支持这一假设——Vue的搜索量稍微高于React。相比之下,Angular的搜索量无法赶超,而Svelte在这一比较中完全不占一席之地。
因此在2021年,使用JavaScript框架或想要使用它的前端开发人员应该将React和Vue作为首选。如果正在进行大型的企业项目,Angular是一个有效选择。
如果想要进一步了解这些框架,以下的资源非常好:
·React
·Vue.js
5、GraphQL
GraphQL是当前最热门的话题之一,也绝对是在2021年需要学习或提高的技能。
尽管REST通过提供无状态服务器之类的不错概念,一直被理所当然地认为是设计webAPIs的标准。但谈及跟上不断变化的客户访问时,RESTfulAPIs逐渐被认为不是那么灵活。
GraphQL由Facebook开发,旨在解决开发人员使用RestfulAPIs时面临的问题。
开发人员通过从RESTAPIsRESTAPIs中提取基于特定目的创建的多个端点—例如/users/<;id>;端点或者/tours/<;id>;/location端点,来收集数据。
GraphQL的使用将以不同的方式展开。开发人员会根据他们的数据请求向GraphQL服务器发送查询。然后服务器将返回带有全部相应数据的JSON对象。
使用GraphQL的另一优势是它使用强类型系统。GraphQL上所有内容都是通过GraphQL模式定义语言(SDL)来进行模式定义的。模式一旦创建,前端和后端开发人员就可以彼此独立工作,因为他们都知道定义的数据结构。