您是否曾经看过自己喜欢的网站,并想知道为什么要这样布置,单击按钮时按钮的操作方式,网站的任何其他部分并想到:“我想知道这有多复杂?” 还是“ 我希望我能做到 ”?好吧,所有这些可见的站点功能都是通过前端开发(有时也称为“前端Web开发”)构建的,其背后的人有个名字:前端网页开发人员。
前端网页开发人员是一些需求最大的角色,并且有充分的理由-没有它们,我们将无法享受互联网的黑洞。稍后,我们将分解前端网页开发人员使用和需要的所有技能,但这是前端开发的快速定义:
什么是前端开发?
Web设计是网站的外观,而前端开发则是该设计实际上在Web上的实现方式。
那么,什么是前端网页开发人员?
前端Web开发人员是通过HTML,CSS和JavaScript等编码语言实现Web设计的人。尽管不再那么普遍了,前端网页开发人员有时也被称为“客户端开发人员”,以区别于对后台程序进行编程的后端开发人员,例如数据库。如果您访问任何站点,您都可以在导航,布局(包括本文页面)中看到前端网页开发人员的工作,甚至可以看到站点与手机的外观不同(由于采用了移动优先或响应式设计) 。
前端Web开发人员使用哪些技能?
前端Web开发人员使用三种主要的编码语言来编码由Web设计人员创建的网站和Web应用程序设计:
HTML
CSS
JavaScript
他们编写的代码在用户的浏览器中运行(与后端开发人员相反,后者的代码在Web服务器上运行)。可以这样想:后端开发人员就像是工程师,负责设计和创建使城市工作的系统(电力,供水和下水道,分区等),而前端网页开发人员则是由工程师在街上并确保一切都正确连接,以便人们可以过上自己的生活(简化的比喻,但您有一个大概的想法)。前端Web开发人员还负责确保前端没有错误或错误,并确保该设计在各种平台和浏览器上均按预期显示。
我梳理了数十个前端Web开发人员的工作清单,以了解哪些技能是目前最需要的技能。这些是当今真正的雇主正在求职者中寻找的东西(并且在不久的将来仍会寻找)。掌握这些东西,您肯定会找到出色的前端网页开发人员工作!
HTML和CSS
HTML(超文本标记语言)和CSS(级联样式表)是Web编码的最基本构建块。没有这两件事,您将无法创建网站设计,最终您只能得到屏幕上未格式化的纯文本。没有HTML,您甚至无法将图像添加到页面!
在开始任何Web开发职业道路之前,您必须精通HTML和CSS编码。好消息是,可以在短短几周内获得其中任何一项的扎实的工作知识。
最好的部分:仅HTML和CSS知识就可以让您建立基本的网站。
JavaScript
JavaScript使您可以为网站添加更多功能,并且可以使用HTML,CSS和JavaScript(简称JS)创建许多基本的Web应用程序。在最基本的级别上,JS用于创建和控制诸如实时更新的地图,交互式电影和在线游戏之类的东西。诸如Pinterest之类的网站大量使用JavaScript来使其用户界面易于使用(事实上,只要您固定某些内容,页面就不会重新加载,这要归功于JavaScript!)。
它也是世界上最受欢迎的编程语言,因此,无论您的开发人员职业计划如何,这都是一门非常有价值的东西。
jQuery
jQuery是一个JavaScript库:一系列插件和扩展,使使用JavaScript进行开发变得更快,更容易。jQuery不必让所有的工作从头开始编写代码,而是让前端Web开发人员向项目添加现成的元素,然后根据需要进行自定义(了解JavaScript如此重要的一个原因)。您可以将jQuery用于倒数计时器,搜索表单自动完成,甚至自动重新排列和调整网格布局大小。
JavaScript框架
JS框架(包括AngularJS,Backbone,Ember和ReactJS)为您的JavaScript代码提供了现成的结构。有多种类型的JavaScript框架可满足不同的需求,尽管提到的四种在实际工作清单中最受欢迎。这些框架通过为您提供快速入门,确实加快了开发速度,可与jQuery之类的库一起使用,以最大程度地减少必须执行的从头开始编写的代码。
前端框架
CSS和前端框架(最流行的前端框架是Bootstrap)对CSS的作用类似于JS框架对JavaScript的作用:它们为您提供了一个起点,可以加快编码速度。由于很多CSS都是从项目到项目完全相同的元素开始的,因此一个为您预先定义所有这些元素的框架非常有价值。大多数前端网页开发人员工作清单都希望您熟悉这些框架的工作方式以及如何使用它们。
具有CSS预处理器的经验
预处理器是前端网页开发人员可以用来加速CSS编码的另一个元素。CSS预处理器为CSS添加了额外的功能,以保持CSS的可伸缩性并易于使用。在将代码发布到网站之前,它会处理您的代码,并将其转换为格式良好且跨浏览器友好的CSS。根据实际工作清单,SASS和LESS是需求最大的两个预处理器。
RESTful服务和API的经验
REST并不代表太多技术,REST代表代表状态转移。从根本上讲,它是一种轻量级体系结构,可简化Web上的网络通信,而RESTful服务和API是遵循REST体系结构的那些Web服务。在此处阅读有关REST和RESTful服务的更多信息。
假设您想编写一个应用程序,按照您成为朋友的顺序向您显示所有社交媒体朋友。您可以调用Facebook的RESTful API来阅读您的朋友列表并返回该数据。Twitter也是如此(它也使用RESTful API)。对于使用RESTful API的任何服务,一般过程都是相同的,只是返回的数据会有所不同。
尽管这听起来确实很复杂且技术性强,但它是一组设定了期望的简单指南和实践,因此您知道如何与Web服务进行通信。它们还使Web服务的性能更好,扩展性更好,工作更可靠,并且更易于修改或移动。
响应式和移动设计
仅在中国,通过移动设备访问互联网的人数就比台式计算机更多,这也就不足为奇了,响应能力和移动设计技能对雇主来说至关重要。响应式设计意味着网站的布局(有时是功能和内容)会根据用户使用的屏幕尺寸和设备而变化。
例如,当从具有大型显示器的台式计算机访问网站时,用户将获得专为鼠标和键盘用户创建的多列,大型图形和交互。在移动设备上,相同的网站将显示为针对触摸交互进行优化的单个列,但使用的是相同的基本文件。
移动设计可以包括响应式设计,还可以包括创建单独的移动专用设计。有时,您希望用户在台式计算机上访问您的站点时所获得的体验与您希望他们从智能手机进行访问时所获得的体验完全不同,在这种情况下,移动站点应该完全不同。例如,拥有在线银行业务的银行网站将从一个单独的移动网站中受益,该网站可以让用户查看最近的银行位置和简化的帐户视图(由于移动屏幕较小)。
跨浏览器开发
现代浏览器在持续显示网站方面已经变得非常擅长,但是它们在后台解释代码的方式仍然存在差异。直到所有现代浏览器都可以与Web标准完美兼容之前,了解如何使每个浏览器都按照您希望的方式工作是一项重要技能。这就是跨浏览器开发的全部内容。
内容管理系统和电子商务平台
几乎每个网站都基于内容管理系统(CMS)构建。(电子商务平台是CMS的一种特定类型。)全世界最受欢迎的CMS是WordPress,它是数百万个网站(包括Skillcrush!)的幕后花絮- 使用CMS 的网站中几乎有60%使用WordPress。
其他最受欢迎的CMS包括Joomla,Drupal和Magento。虽然知道这些不会给您带来像WordPress专家那样多的需求,但它们可以为您提供一个利基市场,这是使用这些系统的公司所需要的(并且这里面很多)。
测试与调试
对于前端Web开发人员而言,这是不争的事实:会发生错误。熟悉测试和调试过程至关重要。
单元测试是测试各个源代码块(告诉网站如何工作的指令)的过程,而单元测试框架则提供了一种具体的方法和结构(每种编程语言都有不同的方法和结构)。
另一种常见的测试类型是UI测试(也称为验收测试,浏览器测试或功能测试),您可以在其中进行检查以确保网站在用户实际在网站上执行操作时表现正常。您可以编写测试,以在执行某项操作后在页面上查找诸如特定HTML之类的测试(例如,确保如果用户忘记填写必填的表单字段,则会弹出您的表单错误框)。
调试只是将那些测试发现的所有“错误”(错误)(或在您的网站启动后您的用户发现),戴上侦探帽以弄清它们发生的原因和方式,并解决问题。不同的公司为此使用略有不同的流程,但是如果您使用了一个流程,则可以轻松适应其他流程。
Git和版本控制系统
版本控制系统使您可以跟踪随着时间的推移对代码所做的更改。如果您搞砸了,它们还使您可以轻松地还原到早期版本。因此,假设您添加了一个自定义的jQuery插件,突然其他代码中断了一半。无需费力手动取消它并修复所有错误,您可以回滚到以前的版本,然后使用其他解决方案再试一次。
Git是这些版本控制管理系统中使用最广泛的。几乎所有开发工作都需要知道如何使用Git。这是开发人员需要具备的重要工作技能之一,但很少有人真正谈论。
解决问题的能力
如果所有前端网页开发人员都必须做一件事,而不管职位描述或正式职位如何,它都是出色的解决问题的技能。从弄清楚如何最好地实现设计,修复出现的错误到弄清楚如何使前端代码与正在实现的后端代码一起工作,开发都是关于创造性问题的解决。
假设您已经创建了一个功能完善的网站前端,并将其移交给了后端开发人员,以便他们将其与内容管理系统集成。突然,您很棒的功能中的一半停止工作。一个好的前端网页开发人员会将其视为要解决的难题,而不是制造过程中的灾难。当然,优秀的,高级的前端网页开发人员将预见到这些问题,并尽力防止它们!