Clever Geek Handbook

如何成为前端开发人员？前端世界的分步指南





祝福大家！我叫Anastasia Puchnina，我是DomClick的首席开发人员，我从事广告展示前端。今天，我想与您分享我对前端开发人员要了解的重要内容的看法。本文对于刚开始开发或在其他领域具有编程经验并决定切换到前端的人员很有用。



内容：



  1. 谁是前端，他做什么？
  2. 从哪里开始读什么？培训清单
  3. 会有什么困难？路径开头的错误
  4. 准备初级开发人员面试




谁是前端，他做什么？



假设您要租一间公寓：您有一台可以访问互联网的计算机，并且知道另一台功能更强大的计算机的地址，该计算机可以存储大量广告。如果您认为不存在通常的站点，并且例如在地图上看不到广告，无法通过填写方便的表格来过滤掉不必要的站点，则您将不得不自己编写一个网络请求并弄清楚如何以及在何处发送数据。



幸运的是，工程师已经提出了浏览器，并且正在开发Web技术，您只需要使用由不同公司的开发人员提供的便捷界面即可。只需单击几下，便找到了必要的信息。



前端开发人员是负责创建此类网站前端的程序员。这是用户直接在其计算机或电话上与之交互的站点的客户端部分（客户端）。



许多人都知道，网站包含了提供清晰的页面结构和设计所必需的标记和样式，但是前端开发并不仅限于此。我们经常使用的大多数站点都是功能完善的Web应用程序：邮件，在线银行，在线电影院，照片编辑器，便笺。为了使此类应用程序正常工作，前端开发人员添加了在浏览器中运行的代码，实现了所需的功能，并在必要时与服务器进行了交互，从而动态接收了必要的信息。





前端开发人员：



  • 创建用户界面，添加标记和网站页面样式；
  • 编程在客户端设备上运行的逻辑，开发客户端应用程序的体系结构；
  • 优化前端性能，以使项目快速加载，搜索引擎在SERP中提升站点，并且用户不会感到导航和与界面交互的延迟；
  • 测试开发的功能并编写自动化测试，以确保高质量并避免在更改代码时出错；
  • 配置项目的构建，这使您可以在启动应用程序之前自动执行代码和文件的附加处理；
  • 执行应用程序部署：将其上传到服务器，以便该应用程序在网络上可用并且用户可以使用它；
  • 使用监视工具监视新出现的错误，并及时消除它们：)


在不同的团队中，前端开发人员可以解决完全不同的任务，例如：



  • 开发业务Web应用程序的前端（最终用户在使用各种在线服务时会看到什么）。
  • 开发接口组件库：其他开发人员在其项目中使用的单个块（例如，按钮，弹出窗口，表单域或图形元素）。它可以是由世界各地的开发人员连接的开源库，也可以是具有特定设计的公司的内部组件库。
  • . , , - -, . !


? -



无论您要在哪个领域工作以及要创建什么解决方案，在我看来，任何前端开发人员都应该知道一定的基础。



在旅程的开始，前端中的技术，名称和缩写列表使一些人感到恐惧。有很多。但是，即使是经验丰富的开发人员也不知道，也不应该绝对了解现有的所有技术和库（有传言说，在前端世界中每一秒钟都会发布一个新库：）







HTML，CSS和JavaScript都是浏览器开发的三大难题，值得开始。



如果您没有开发经验，并且很难独自学习，那么在其中一所著名的编程学校与导师一起参加前端开发人员课程将是一个不错的解决方案。在Udemy和Coursera上也有关于布局和前端开发的好课程。但是，这根本没有必要，互联网上有许多关于必要主题的免费材料和资源。



为了帮助您进行导航，我整理了一个分步清单，以获取您需要为初学者前端开发人员进行面试的知识。还附带了俄语和英语材料和资源的链接，可能对您有用。



保存到书签并使用。



1.网络的运作方式



在开始开发站点之前，您需要了解在浏览器中打开站点时发生的情况，客户端-服务器模型的工作方式以及HTTP协议是什么。





2.开发环境



您甚至可以在记事本中编写代码和标记，但是使用特殊的编辑器更加方便。在前端开发人员中最受欢迎：



  • VSCode是一个免费的快速编辑器，带有许多用于开发的加载项。
  • JetBrains WebStorm-完善的IDE，具有试用期，并且能够根据学生许可进行访问；
  • 如果您需要向他人发送一段代码，快速在线检查或保存代码，则可以使用在线编辑器（例如Codepen）。


3. HTML基础



了解HTML文档的结构，标签是什么，标签是什么，元标签，属性，如何添加图像，创建表单。语义和可访问性是布局中的重要点。





4. CSS





为页面元素添加样式。我们研究了块模型，定位，级联样式，选择器特异性，伪元素，自适应布局（适用于计算机，平板电脑和手机）。学习使用Flexbox和Grid排版现代布局。





5. Git版本控制系统



Git可以帮助您将编码过程提高到一个新的水平。这是开发人员必不可少的工具，它使您可以逐步保存有关代码中所有更改的信息，返回到不同的状态等等。建议学习如何在终端中使用Git并进行练习：在Github或Gitlab上创建一个存储库，并在测试存储库中试用Git的基本功能。





实践。实践。实践！





在这个阶段，我建议您多做一些练习，并做一个自己的小项目，以便记住所涵盖的内容。不必自己设计网站，可以采用现成的布局。创建一个登录页面，例如，构建一个投资组合网站，在开发过程中将代码保存在Github上，然后尝试在免费托管静态网站-Github Pages上托管该网站。如果您没有足够的练习，请尝试观察其他人的代码并重复执行。YouTube上有足够的关于此主题的视频教程（例如，用于查询“使用figma布局的网站布局”）。



如果您已经对HTML和CSS进行了深入的研究，那么在通过以上各段之后，您就可以成为网站布局设计师。但是，要学习如何编写交互式Web应用程序并成为专业的前端开发人员，您需要继续您的前端世界之旅，并深入编程。



6. JavaScript编程语言



不要将JavaScript与Java混淆。学习语言的基础知识：变量，对象，数据类型，函数，上下文和闭包，类。比较新旧EcmaScript规范之间的差异。了解了基础知识之后，继续进行更复杂的事情：异步编程的复杂性（回调，承诺，异步等待）和向服务器发出请求（XmlHttpRequest，Ajax，Fetch，Cookie）。





7. DOM (Document Object Model)



DOM是文档对象模型，它是浏览器构建的树，用于在屏幕上呈现页面。一旦学习了使用DOM的知识，就可以使用JavaScript在页面上创建或修改元素，响应用户单击等等。LearnJavascript的另一部分专门处理浏览器中的DOM和事件。



Marein Haverbeck的Expressive JavaScript也详细介绍了DOM主题。



8. Node.js，NPM



多亏了Node.js软件平台，JavaScript只能在浏览器之外使用。使用此工具，您可以编写控制台程序或服务器端应用程序。



尝试编写自己的小型服务器。



您可以在JavaScript程序中使用其他开发人员编写的模块。查看NPM软件包的在线存储库。



9.通天塔



Babel Js是JavaScript代码编译器，它使您可以使用该语言的最新功能，例如箭头功能，类，可选的链接，而无需等待它们的完整浏览器支持。您只需要为所需版本的EcmaScript或支持的浏览器列表正确配置Babel，源代码将自动转换。



尝试使用官方网站上的在线代码编译器，看看现代JavaScript构造会变成什么样。通过将Babel包含为NPM软件包，为小型JavaScript应用程序设置代码编译。



10.模块构建器，Webpack



在创建应用程序时，开发人员将代码分为多个部分（模块），连接其他代码处理程序，并为不同的环境（开发和生产）配置应用程序。为了实现这一点，并且我们不必以正确的顺序手动连接HTML文件中的模块并监视更改，因此应用程序使用模块收集器（捆绑包）。



生成器以正确的顺序将模块及其依赖关系连接并组合到一个或多个文件中，并且还允许进行其他代码转换。



Webpack是最受欢迎的模块构建器之一。尽管乍一看似乎令人生畏，但这是一个开发助手。它的灵活性允许您使用各种插件和加载器（CSS和HTML预处理器和后处理器，Babel等）来自定义构建，优化资源，使用热模块替换在开发过程中快速加载更改等。





11. CSS预处理器



CSS预处理器是CSS的附加组件，它为开发人员提供了方便的新语法，并添加了使开发和维护样式更加容易和快捷的新功能。



最受欢迎的预处理器：





使用CSS预处理器的主要优点是：



  • 模块化。您将能够在不同文件中创建CSS代码并根据需要导入样式。
  • 嵌套。将选择器相互嵌套，以实现紧凑和逻辑的代码结构。这将提高可读性并减少重复（如果使用BEM方法编写CSS尤其有用）。
  • 使用CSS变量和函数（mixins）。
  • 您可以选择一种语法方便的预处理器（例如，不带花括号和分号的CSS代码）。


我还建议在此阶段熟悉PostCSS样式转换工具，尤其是Autoprefixer插件。此插件可让您自动为代码的CSS属性添加供应商前缀。



12. HTML预处理器（模板）



HTML预处理器具有与CSS预处理器相同的优势。它们使您可以更有效地编写HTML标记，将代码拆分为模块，还可以使用条件，循环，混入，继承。



流行的模板引擎：





通过将加载程序添加到webpack配置中以预处理CSS和HTML代码来自定义项目。



13.代码风格和短毛猫



代码样式是一组规则，可让您使代码保持一致，并为您和其他开发人员提供尽可能易于使用和可读的代码。这些规则描述了缩进和括号的位置和位置，最大行长，变量名称，允许您确定过于混乱或不必要的代码以及许多其他方面。



一些公司提出了自己的代码风格。一个著名的前端规则集是Airbnb标准，我建议您熟悉一下以提高代码质量。



有一些特殊的工具可以自动检查您的代码，并且只需设置一次项目配置，就可以轻松以特定的样式维护代码：





请查看这些工具的文档，尝试将它们连接到您的项目和IDE，并在项目中遵循某种样式的代码，以使应用程序更好！



14.学习框架/ UI库



反应，Angular还是Vue？对于2020年，主要的斗争是这些图书馆之间的斗争。您可以选择任何一个。如果您喜欢要工作的特定公司，则可以选择他们使用的框架。



我建议您从React开始-它在开发人员和公司中非常受欢迎，并且还在不断发展，对于新手前端开发人员来说很容易理解，围绕它开发了许多其他工具和大型社区。



通过正式文档开始学习React ，它非常详细。如果发现不足，则可以找到有关Udemy的完整课程（例如，Modern React和Redux-用英语，对初学者，实践练习以及关于React和库的所有必要材料提供了非常清晰和详细的说明。



请注意描述React组件的输入参数的类型（使用PropTypes进行类型检查），以及根据JSDoc标准编写注释（有关使用JSDoc的一系列文章）。



随着您的前进，您将需要学习如何管理应用程序状态。有帮助的图书馆：Redux和Mobx。我建议从Redux开始-这是与React一起最受欢迎的库。查看官方文档或翻译。我还推荐了一位图书馆作者的课程（Dan Abramov的Redux入门）。



然后开始探索该库，以方便地执行异步操作（例如，对服务器的请求）。最容易开始的库是Redux Thunk（documentation）。



15.自动测试



测试是评估应用程序的所有模块行为均符合预期的过程。通过测试，可以避免许多您可能不会注意到的错误。了解什么是测试以及什么类型（测试“假人”）。学习使用Jest之类的测试库之一为代码编写单元测试。



16.深入





会有什么困难？路径开头的错误







学习框架而不是基础知识



有时似乎立即学习流行的框架或库似乎更好。这是一个相当普遍的错误，尤其是在前端：人们开始学习React或使用Bootstrap和Material UI进行编码，而又不了解基础知识并且对HTML，CSS和JavaScript没有足够的了解。如果您正在“短距离奔跑”并且需要快速完成一个项目，则可以使用这种方法。但是，如果您打算成为一名开发人员，则不会带来预期的结果。





您不必完全知道JS中的每个CSS属性或方法，如果忘记了就可以搜索它们。了解基本概念和复杂性很重要：这将是您进行前端开发的坚实基础。



学习是努力工作，自律和大量练习



期望您在一周内处理所有材料或在一天内学习JS是错误的。您需要的时间是一个非常单独的问题，并且很可能该过程将花费一个多月的时间。



不要惊慌，逐步学习，逐步练习-这样您可以更快地学习。每个人都需要一些时间来学习新事物。



确定为什么以及为什么要成为前端开发人员。Frontend是一个您可以在其中实现有趣的解决方案并从事将被全世界大量人使用的项目的领域！除此之外，您获得的知识和经验越多，您的薪水就越高。



记住激励您的时刻，当您的代码行不通，而下一个模块将无法按照您想要的方式对齐时：)如果您想查看工作的结果，通过实际的任务或创建项目来学习材料，这样您会更快得到回报。



复制别人的代码



如果遇到无法解决的问题和错误，请随时在Google上寻求帮助。学会使用搜索来查找问题的原因，但不要盲目复制别人的代码。



确保找出解决方案中正在发生的事情以及为什么这样做。它将花费更长的时间和更高的成本，但是如果您不弄清楚它，您将更有可能遇到类似的问题，并且再次无法自行解决，并且由于复制了别人的代码，您的代码将变成不同样式的面条。



不要100％相信您找到的代码



其他人可能是错误的或缺乏经验。如果您从JavaScript或Layout大师那里找到视频教程，这并不总是意味着您所呈现的是完美的解决方案和可能的最佳代码。



查看各种来源，并对发现的任何内容都持批评态度。随着经验的积累，您将了解哪些代码和方法更好，哪些只会使您的应用程序复杂化，并增加了一些毛病，以后您会碰到它们。



准备初级开发人员面试



不同公司的面试可以完全不同的方式进行，我想根据我的经验谈谈必要的知识。



前端开发人员最常被访问的领域是布局，JavaScript，尤其是异步性以及对前端框架或库之一的了解。对于初级职位，将更多的注意力放在布局和JavaScript上。



对于解决小问题，问题可以是理论性的也可以是实践性的。



开发人员社区已编制了一个访谈问题的样本清单。仔细研究所有问题，然后尝试给出答案。如果您无法回答某些问题，则表示您正在重复该主题。



对问题站点进行编程可以帮助您为解决JavaScript问题做准备，在这里您可以在线练习和测试技能（从“简单问题”部分开始）。特别流行的任务是那些涉及数组工作方法应用的任务。此类任务的示例：检查回文或七巧板。



具有编程任务的网站：





具有JavaScript任务和测试的电报频道（例如，@ js_test）也可以帮助检查知识。



对于初级前端开发人员，在采访中几乎从来没有使用过非常复杂的算法以及对数据结构（例如树和图）的知识的任务。因此，请不要害怕：即使您对面试感到非常恐惧，实际上，如果您能够回答上述所有问题，那么您很有可能能够获得面试。



小提示：如果您对自己的能力不自信，仍然可以接受一些公司的采访。即使没有报价，您也会了解自己的弱点。您可以为下一次面试做更好的准备！





感谢您阅读到底。希望本文对您有所帮助。如果您知道它对其他人可能有用，请共享它。



祝您在征服新高峰时万事如意！


More articles:


All Articles