Nouveau dans le livret | De 0 à 1 ingénierie frontale d'atterrissage !

Ces dernières années, avec la complexité croissante des projets front-end, de 前端工程化plus en plus d'entreprises et de développeurs y ont prêté attention.

D'un point de vue commercial, l'ingénierie front-end est devenue la norme pour les équipes front-end Internet front-end.Des équipes à petite échelle concevront une architecture front-end qui répond aux besoins actuels de l'entreprise en fonction de leur propre activité. Pour les développeurs front-end, l'ingénierie front-end est progressivement devenue la ligne de démarcation entre le front-end débutant et intermédiaire et le front-end senior . Par exemple, les frontaux principaux et intermédiaires de nombreuses grandes usines ne sont responsables que de l'écriture du code métier, tandis que les frontaux seniors utilisent l'ingénierie frontale pour contacter la conception d'architecture frontale de niveau supérieur et accéder à des postes de gestion technique.

C'est pourquoi de nombreux développeurs front-end maîtrisent l'utilisation react/vue/next/nust/webpack/koad'autres frameworks front-end, mais les promotions et les augmentations de salaire sont toujours hors de portée. Par conséquent , si les développeurs front-end veulent briser les limites de leur travail et obtenir des augmentations de salaire fulgurantes, la maîtrise de l'ingénierie front-end est essentielle !

Qu'est-ce que l'ingénierie frontale

Cela dit, qu'est-ce que l'ingénierie frontale ? L'ingénierie frontale fait référence à l'utilisation de technologies et de méthodes de génie logiciel pour standardiser les technologies, outils, processus, expériences, solutions et autres indicateurs de développement frontal. Elle présente quatre caractéristiques de modularisation, de composantisation, de normalisation et 降低成本d'automatisation 提升效率.

WechatIMG675.jpeg

  • La modularisation est la priorité absolue de l'ingénierie frontale. Sa 前端工程化performance ci-dessus est de diviser et d'assembler du code et des ressources au niveau du fichier. Plus précisément, il s'agit de diviser un gros fichier en petits fichiers interdépendants, puis de les assembler avec chargement.

  • La composition est une base importante de l'ingénierie frontale, se concentrant sur le fractionnement et l'assemblage de l'interaction et de la conception au niveau fonctionnel. Plus précisément, il s'agit de diviser une conception d'interaction avec des fonctions générales en unités fonctionnelles composées de modèles, de styles et de logique pour obtenir un code efficace. Réutiliser et améliorer l'efficacité du développement.

  • 规范化是前端工程化的重要部分,主要作用是将松散的规范通过指定标准凝聚在一起,将所有工作流程标准化,协同所有开发者以标准化的方式去定义工作流程,每一个成熟的前端团队都有一套身经百战的规范化方案。

  • 自动化指将一系列繁琐重复的工程工序交由程序根据预设脚本自动处理,整个工作流程无需人工参与,解放开发者双手让其更专注业务需求的开发

很多同学在不了解前端工程化前,遇到以下情况经常不知所措:

  • 构建配置、打包配置、公共组件、工具函数等代码片段,每次新开项目都要复制粘贴;

  • 团队成员的编码风格大相径庭,导致从仓库拉取下来的代码运行起来令控制台一片红;

  • 团队协作的规范、环境、模块、仓库和文档,太多基建措施导致团队新成员无从入手;

  • 随着需求迭代引起项目结构与工程文件不断变化,处理不当让项目直接走向重构道路。

事实上,只要将前端工程化的开发思维与解决方案应用到项目中,利用好它的优势,就能轻松实现这些需求,为业务降本增效。

总之,前端工程化不是某个具体的工具,而是对项目的整体架构与整体规划,使我们能在未来可判时间内动态规划项目的发展走向,以提升整个项目对用户的服务周期。学习前端工程化不仅能理解清楚一个项目的完整流程,遇到困难也能在复杂的流程中快速定位并解决问题,还能根据自身知识储备制定一些可扩展流程或预见项目的未来发展方向。

如何系统学习前端工程化?

但是,想要系统学习前端工程化不是一件容易的事情。看到这,有些同学可能会说:“前端工程化不就是封装组件库吗?那我也会前端工程化!”

前端工程化可不知识会封装组件库就可以了。首先,我们要有明确前后端分离的任务能力。简而言之,就是要能一眼看出该任务属于前端还是后端,划分好前后端的职责更利于前端工程化的接入。这也是基于前端工程化解决问题的基础。其次,我们要掌握前端工程化的四大核心特性,模块化、组件化、规范化和自动化。知道它们是怎么实现的,它们各自的标准是什么,因为所有前端工作流程都离不开这些核心内容,

虽然很多社区也都有前端工程化相关文章教程,但它们只针对前端工程化的某个技能,零零星星的知识点与断层式的学习很难充分实践前端工程化。

作者简介(2100x389).jpg

作为一名网易的资深前端工程师,近三年来,JowayYoung 一直在前端工程化领域实践,利用工程架构的知识重构了众多项目,包括但不限于服务器脚手架组件库工具库多包仓库私有仓库服务部署文档系统监控系统CI/CD可移植容器等。有了这些前端工程化技术的加持, JowayYoung 负责的项目也从手动处理流程全部替换为自动处理流程,以解放团队双手,让其他成员更专注于自身业务需求。

基于此,JowayYoung 将这些经验总结了下来,希望能在这本小册中与你分享。为了让前端工程化小册适合更多开发者,JowayYoung 会以小白的身份,与你一起深入工程的各个环节,带你走完前端工程化落地的全过程

WechatIMG677.jpeg

具体来说,小册主要分为 6 大模块

  • 规范篇:熟悉模块/代码/提交三大开发阶段规范,通过规范约束自己,保障工作质量与提升开发效率。
  • 服务篇:熟悉云服务器/域名系统/站服务器部署服务环境,掌握整体部署与工具配置,学会独立上线网站与应用。
  • 环境篇:熟悉Node/Nvm/Npm部署开发环境,独立搭建一个接口服务,实践环境/镜像/数据/进程四种Node应用方式。
  • 构建篇:熟悉构建工具打包类库模块,独立封装一个类库模块,结合测试用例保障代码的生产质量。
  • 组织篇:熟悉Monorepo模式管理多包仓库,独立维护一个多包仓库,结合Npm Scope发布模块到公共仓库。
  • 部署篇:熟悉自动化工具部署前端项目,独立打造一个私有仓库文档站点,结合CICD在提交代码时自动部署到公网。

总之,在学习具体技能的同时我们要重视工程化的解决思路,灵活运用它对我们的工作能力与自身竞争力都会有很大的提升。

小册正值上新特惠期,限时 6 折~

仅需 ¥17.94 就能落地前端工程化,告别纸上谈兵!

还等什么,快来加入学习吧!

宣传海报(1242x2650)-【站内文章】.jpg

Je suppose que tu aimes

Origine juejin.im/post/7099108367011938334
conseillé
Classement