当前位置: 首页 > 网络应用技术

什么是前端工程?

时间:2023-03-06 19:59:10 网络应用技术

  尽管前端工程的概念已经上升,但还没有几年,但是“工程”一词并不是一个新的词。在其他软件开发领域,它一直是高度工程的。例如,Web服务器端大放异彩。当时,前端工程师没有工程感,也无需在前端执行工程操作。毕竟,当时,前端开发工作只能被视为整个项目开发过程的“配件”。那么,为什么近年来前端工程的概念突然成为一个热门话题?谈论前端工程并不容易,我从以下方面开始,简单地解释了前端工程的概念。这只是个人理解。我希望每个人都会交流讨论。

  在回答前端工程问题之前,我们首先要考虑另一个问题:业务是否涉及前端开发?言语,您想将服务器一部分的业务逻辑放到正面和正面吗?这个问题没有标准答案。实际上,这应该是一个工程协作问题,应该做谁。

  最早的前端开发是实现页面,最多最多,写JS以使页面具有交互式效果。但是随着需求的增加,我们不仅必须制作Web应用程序,还必须制作应用程序,小程序和各种目的在每天增加需求的情况下,必须考虑一种新方法来优化前端的开发,例如求解代码冗余,项目维护,版本迭代速度的改进以及其他问题。在这种情况下,提出了工程学。

  实际上,当前的前端工程仍应处于早期阶段。毕竟,前端工程师的职位尚未出生几年。在互联网开发的早期,在许多Web应用程序的情况下,服务器工程师被拾取了。前端开发最多是编写HTML代码以实现页面的布局,然后将书面的HTML静态文件发送给后端工程师到后端 - 端工程师。当时的应用程序是服务器侧面渲染技术,例如Java的JSP。

  这种传统模型的合作发展效率非常低。如果在页面测试中发现了一个错误,则此错误是由于className的值较少。设置模板时终端工程师的粗心大意是什么?毕竟,网站上有成千上万的DOM节点,而且没有人能保证一行代码不会错。目前,HTML静态页面需要重新设计前端工程师,然后将其交给后端工程师,您会发现一个更严重的问题。整个项目中只有1个像素的偏差才能动员整个开发团队处理这些像素,从而大大浪费了团队资源。

  以上问题仅是传统发展中冰山一角。面对许多问题,前端分离的发展诞生了。前后端的分离为前端工程的发展提供了生存的土壤。随着市场需求的持续变化,前端开发已从传统的网页模型转变为WebApp模式。Web产品形式的变化也不断促进前端工程师的工作内容。对各种“变化”的响应,前端工程师还设计了自己的前端开发“方法论”。

  前端工程的主要目标是解放生产力并提高生产效率。通过制定一系列规格,前端开发过程中的痛点和难度以及前后协作的协作用于制定一系列规格。

  阐明前后末端发展中的劳动分工是实现前后分离的第一步,它也是后端各种优化方案的基础。正面的主要内容 -最终工程师包括:

  其中,静态资源包括.js文件,.css文件和图片,以各种格式等等。这些文件不依赖于服务器,只需在浏览器中进行分析即可。动态资源是指HTML模板。该项目不是完成服务器的SPA(单页)应用程序,然后我们必须考虑如何实现HTML模板的渲染。正面 - 端端项目部署是指静态资源的部署测试服务器上的文件,以及Node.js Middle Server上HTML模板文件的部署。

  从项目开发的整体链接来看,前端工程也需要精通以下方面:

  (1)使用WebPack实施项目构建

  建筑只是编译。前端开发的所有文件终于浏览器进行分析和渲染,并将页面呈现给用户。

  该项目的构建实际上是为了弥补浏览器本身的缺点和缺陷。这是一个面向语言的汇编过程。然后,除了语言本身外,前端构造还应考虑Web应用程序的性能优化。这些优化主要是为了减少HTTP请求并改善用户体验,包括:包括:

  在这里有必要解释,除了WebPack之外,还有其他工具,例如Gulp,Grunt等。为什么在这里只提到WebPack?实际上,Gulp和Grunt只能被视为工作流管理工具。他们不提供特定的功能。所有功能(例如构造和部署)必须通过相应的插件完成。使用Gulp和Grunt仅在项目工作流程的所有链接中很方便。CONTROL。此外,这两个工具的主题加热和使用率远低于WebPack。尽管WebPack是一种在过去两年中仅升级的构建工具,但它仍然已成为最受欢迎的施工工具之一。负载器也由官方或作者本人撰写。因此,当我们谈论沿线的构建时 -结束工程,我们建议使用WebPack工具。

  (2)使用Babel完成JavaScript编译

  可以说JavaScript是前端的核心编程语言,这就是我们经常称为“ JS”的核心编程语言。JS本身可以直接在浏览器中执行。那么,为什么还要使用Babel再次编译呢?实际上,在此处解释Ecmascript2015(ES6)之后,前端工程师的注意力的重点已从“ JS”转变为“ ES”。作为专业的前端工程师,应理解JavaScript≠Ecmascript。

  eCmascript是一个标准,JavaScript是由Ecmascript标准实现的子集。主机浏览器的API(BOM和DOM)以及JavaScript在我们的传统认知中形成JavaScript。不是发展的便利。由于浏览器对ECMAScript规范的新规格的支持相对滞后,因此即使是Chrome浏览器的最新版本也没有完全支持Ecmascript2015(ES6)所有规格,并且已发布Ecmascript2017。为了更好地允许新的ES规范无缝连接浏览器,Babel编译了JavaScript语法的角色。

  简而言之,Babel的作用是将浏览器的未实现的Ecmascript语法转换为运行低转化语法,例如将ES6的类别转换为ES5的原型。

  (3)CSS Pre -Compolation

  作为浏览器,CSS可以直接识别样式语言,从而弥补了HTML本机样式的缺点。对于早期的互联网开发,风格的要求并不复杂,只需要少量的CSS代码。但是,在追求当今用户的最终体验的趋势下,CSS的开发需求正在不断改善,并且COMPPER CSS发展已成为一件非常乏味和痛苦的事情。主要原因受到浏览器的实现和CSS本身薄弱的编程能力的限制。

  CSS预先编写的解释器的工作原理是提供方便的语法和特征来为开发人员开发源代码,然后在特殊的编译工具之后将源代码转换为CSS语法。

  (4)模块开发

  模块化开发和组件开发是两个完全不同的概念。模块化属于架构级别的概念。前端工程和模块化之间的关系类似于组装研讨会和部分之间的关系。使用模块化开发可以解决以下问题:

  在释放ES6规范之前,有三个主要规范用于前端模块化开发的开发,即:commonjs,amd,cmd。

  commonjs是仅适用于JavaScript的静态模块化规范。它适用于Node.js开发,但不适用于浏览器环境;虽然AMD/CMD规格并不完全一致,但是核心函数都是均匀的,两者均规格,两种规格都在求解对浏览器浏览器模块的需求的规格。

  在启动ES6模块规范之后,前三个的模块化规格也逐渐从前端的历史阶段逐渐撤出。ES6模块是一种语言级别的规范,与应用程序方案无关涉及运行环境API可以在任何情况下运行。但是,浏览器尚未完全支持此规范。因此,要实现ES6模块规范,有必要使用构造工具进行编译。

  (5)组件开发

  如前所述,组件化和模块化是两个完全不同的概念。模块化是在文件级别上的代码和资源的拆分,组件是在设计级别上的UI拆分。从UI的一个结构单元拆分已成为UI组件。UI组件单元包含HTML模板,CSS样式和JS Logic。在页面设计,页面上的每个元素都是组件,并且页面也是一个组件,但是页面是一个大的组件,然后是这个大的组件,然后组件由多个中小型组件组装。中等大小的组件也可以分为小分子。小组件分为DOM元素。DOM元素还属于浏览器自己的组件,并且是组件的基本单元。该组件开发是前端开发的“思想划分”。

  (6)开发环境中的本地服务器和模拟服务

  在前端工程开发中,可以通过构造工具进行编译,然后在浏览器中进行调试。这无疑是前端工程师的灾难。要完美地解决此问题,您可以使用本地服务器与修改后的构建工具,监视源代码和触发动态构造,并使用自动结构进行人工替换。这种动态构造是使用本地服务器在开发级别解决问题。

  模拟服务解决了后端协作开发的问题。前端开发人员事先同意监管。前端工程师通过本地服务器提供的模拟数据接口协助前端逻辑和功能模块的开发。如果服务器需要在项目中渲染(SSR),则本地服务器还需要具有功能为了分析HTML模板,同时,模拟服务提供了SSR所需的初始化数据。

  前端工程师可以使用本地服务器提供的模拟数据接口。在发展后端人员时,前端逻辑是在并行开发中开发的。后端 - 端真实接口开发完成后,前端请求的地址将从模拟服务转移到服务器的生产环境中。

  (7)标准化约束

  无论是服务器侧开发还是前端工程开发,标准化的约束都是至关重要的。设计项目的整体体系结构时,为了考虑可扩展性,维护性,高内部集聚和项目的其他因素,该代码将被封装并将使用配置操作为项目的开发带来便利性。商业代码编程范式必须遵循已建立的约束。尽管这种约束使开发的便利性将代码的便携性限制在一个例如,项目中使用某个某个构造工具来解决项目需求,但是如果有一天需要替换另一个构造工具,则代码中原始构造工具的配置将成为冗余代码,并且不能保证这种配置将不会与新的构造工具相抵触。eVEN如果没有冲突,则代码的性能优化将产生一定的负面影响。作为服务,工程计划应试图减少对项目的负面影响。这是制定编程范式的最重要考虑因素。

  (8)项目部署过程

  就前端开发范围而言,项目部署是指将代码包部署到测试服务器以构建生产服务器的过程,而不是将测试代码发布到生产环境的过程。在部署过程中,必须考虑目标服务器和路径信息是否与项目相对应,并配置负责部署生产环境的开发人员。部署的操作过程应尽可能简单。

  在部署过程中,使用命令行替换工具(例如FTP)本地部署可以极大地提高部署的速度和效率,但这只是主要阶段的部署过程。考虑团队合作和安全性的因素,最好的方法应该是建立一个部署平台,以进行严格审查,队列控制和简化操作,并且特殊的人负责掌握流程的进度。尽管建立部署平台的方法已经使整体部署速度放慢了一定的速度范围,它加强了团队的协作和安全。

  小程序等。从“剪切”的开始到大型前端的概念,前端工程师的定位和负责任的技术类别一直在变化,但是前端工程师生产的服务对象始终是用户。在Node.js之前,浏览器是前端工程师的“一英亩和三点”生存。Node.js的出现打破了这种情况,因此出现了“大前端”的发展趋势。

  node.js中间层+浏览器是“大前端”的基本模型。前端工程师拥有与用户相关的所有资源,可以完全掌握开发进度并实现更合理的前后端分离解决方案。该模型允许前端工程师突破浏览器的瓶颈,并朝向Web应用程序级别,这也是未来前端开发的主流趋势。

  无论是专注于浏览器还是考虑到Node.js的中间层,前端工程师的剑都总是指向浏览器的Web字段。前端工程提供服务。迭代期间的前端开发人员涉及涉及开发,构建和部署等各个方面的服务内容。

  未来前端工程师的定位将不可避免地发生变化,但是前端工程的唯一原则始终是前一个末端的发展。前端工程没有统一的行业标准,也没有固定的形式。只要前端工程师的定位不断变化,前端工程的过程就会继续下去。