专栏首页编程技术分享《带你入门前端工程》开源了

《带你入门前端工程》开源了

  1. 首页
  2. 专栏
  3. javascript
  4. 文章详情

0

《带你入门前端工程》开源了

谭光志发布于 42 分钟前

这是一本关于前端工程化的小书(4W 字左右 )。项目地址:

https://github.com/woai3c/int...

前端工程化,其实是软件工程在前端方面的应用。什么是软件工程?来看一下百度百科的定义:

软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科

换句话说,工程化的目的就是为了提升团队的开发效率。例如大家所熟悉的构建打包、性能优化、自动化部署等知识,都属于工程化的内容。

我写这本小书的原因,是想对过去两年的工程化实践经验和学习心得做一个总结。希望能全面地、系统地对前端工程化知识做一个总结。

小书大部分的内容都是以理论知识 + 代码示例 + 图片的方式来讲解的,努力争取让读者更容易理解。另外还有小部分的章节在讲解完理论知识后,还有相应的实践教程。例如前端监控这一节,在讲解完前端监控原理后,将会教你如何利用现有的监控工具对项目实行监控。

可能有人会问,什么时候开始做工程化?我认为在需求评审阶段就可以做工程化了,根据需求选用适当的技术栈(技术选型),然后制定相关规范...

在线访问

目录

  1. 技术选型:如何进行技术选型?
  2. 统一规范:如何制订规范并利用工具保证规范被严格执行?
  3. 前端组件化:什么是模块化、组件化?
  4. 测试:如何写单元测试和 E2E(端到端) 测试?
  5. 构建工具:构建工具有哪些?都有哪些功能和优势?
  6. 自动化部署:如何利用 Jenkins、Github Actions 自动化部署项目?
  7. 前端监控:讲解前端监控原理及如何利用 sentry 对项目实行监控。
  8. 性能优化(一):如何检测网站性能?有哪些实用的性能优化规则?
  9. 性能优化(二):如何检测网站性能?有哪些实用的性能优化规则?
  10. 重构:为什么做重构?重构有哪些手法?
  11. 微服务:微服务是什么?如何搭建微服务项目?
  12. Severless:Severless 是什么?如何使用 Severless?
  13. 参考资料

微服务、Severless 按理说不属于工程化的内容,但从提升开发效率的角度来看,也可以归纳到这一范围。

目录的顺序是以一个项目的生命周期来分配的:

  1. 接到新需求,进行需求评审后根据具体情况做技术选型。
  2. 开发前需要统一规范。
  3. 学会模块化、组件化,对于写代码很有好处。
  4. 开发完,需要对代码进行测试。
  5. 构建打包。
  6. 部署上线。
  7. 对项目进行监控,随时发现问题。
  8. 根据项目运行情况决定是否要做性能优化。
  9. 项目越来越复杂,需要重构以提高可维护性。
  10. 项目越来越大,可以考虑是否用微服务对其进行拆分(或者使用 git submodule 和 monorepo 的方式管理项目)。
  11. 不想自己管理服务器或数据库,可以考虑使用 Serverless。

注意

本书的定位是入门级教程,主要对前端能接触到的工程知识做一个较全面的介绍。适合对前端工程化不了解或了解得不多的“菜鸟”同学。如果你是个“老鸟”,那本书可能不太适合你。

另外,建议读者在阅读本书时,能够配合书本的实践部分去做实践。如果读者能够严格按照指示去做实践,在阅读完本书后,不仅会收获前端工程化的理论知识,还会获得对应的实践经验。

你会学到什么?

  • 对前端工程化有一个全面、清晰的了解
  • 为架构师之路打下扎实的基础

适宜人群

  • 想学习工程化的前端
  • 具备基础的 HTML、CSS、JavaScript 知识

License

MIT

javascript程序员前端vue.js

阅读 59发布于 42 分钟前

赞收藏

分享

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://segmentfault.com/u/woai3c/articles复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 带你入门前端工程(四):测试

    如果你的程序有数百行代码,但封装得很好,完美的践行了模块化的理念。每个模块功能单一、代码少,也可以不用写测试。

    谭光志
  • 带你入门前端工程(十):重构

    相同的地方是它们都在不改变程序功能的情况下修改代码;不同的地方是重构为了让代码变得更加容易理解、易于修改,性能优化则是为了让程序运行得更快。这里还得重点提一句,...

    谭光志
  • 带你入门前端工程(三):前端组件化

    在了解模块化、组件化之前,最好先了解一下什么是高内聚,低耦合。它能更好的帮助你理解模块化、组件化。

    谭光志
  • 带你入门前端工程(一):技术选型

    技术选型应该对很多程序员都不陌生了,无论是大到技术框架、编程语言,还是小到工具库的选择,都属于技术选型的范围。个人认为技术选型应该按照以下四个指标进行选择:

    谭光志
  • 带你入门前端工程(二):统一规范

    代码规范是指程序员在编码时要遵守的规则,规范的目的就是为了让程序员编写易于阅读、可维护的代码。

    谭光志
  • 手把手带你入门前端工程化——超详细教程

    另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode...

    谭光志
  • 手把手带你入门前端工程化——超详细教程

    另外我还写了一个前端工程化 demo 放在github上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode,具...

    若川
  • 前端工程化概述,带你全面深刻了解前端工程化思想

    大家好,今天我来和大家一起来了解前端工程化的知识,如有疑问和错误,欢迎指正,一起交流探讨哈!

    全栈加加
  • 课程 | 工程大咖带你入门深度学习+TensorFlow

    《深度学习基础与TensorFlow实践》 AI100学院有幸邀请到《深度学习原理与TensorFlow实践》作者之一、百纳信息公司AI方向负责人王琛老师6月...

    AI科技大本营
  • 写给前端工程师的 Serverless 入门

    Serverless 是前端圈近两年比较火热的词汇,但其第一次被提出已经是 7 年前的事情,那么什么是 Serverless 服务,其架构由哪些部分组成,又有什...

    政采云前端团队
  • web前端工程师新手如何入门

    有很多想要学习web前端开发的新人都想自己能够快速的学习web前端开发,部分人因为自己基础比较薄弱,不知道自己该如何系统的学习,但是有着对web前端强烈的学习动...

    企鹅号小编
  • [译] 写给前端工程师的 Docker 入门

    过去的我们,当业务发展需要部署新的应用时,DevOps 小伙伴通常会去买一台服务器,但是却不知道这个新应用具体需要多高的配置,往往都会造成资源浪费。

    savokiss
  • 面向前端工程师的Nodejs入门手册

    数据库,网站系统最重要的部分之一,它好比一个人的大脑,可以记下开发者们想让它记下任何的事情,而且它比人脑更可靠更精准。

    用户1462769
  • 爬虫工程师面试题总结,带你入门Python爬虫

    IT派
  • 面向前端工程师的Nodejs入门手册(一)

    本文面向的读者已经是了解JavaScript基本使用的前端程序员,但是缺乏服务端的经验,接下来将带你走进在服务端的世界,看看运行在服务端的JavaScript是...

    用户1462769
  • 面向前端工程师的Nodejs入门手册(四)

    数据库,网站系统最重要的部分之一,它好比一个人的大脑,可以记下开发者们想让它记下任何的事情,而且它比人脑更可靠更精准。

    用户1462769
  • 使用开源微前端框架 Luigi 创建一个基于微前端架构的工程

    微前端通常被称为“前端微服务”。 它们允许您将大型单体前端分解为独立的、可扩展的、可以协同工作的独立部分。 微前端架构对于复杂的产品或拥有众多团队的公司尤其有用...

    Jerry Wang
  • 面向前端工程师的Nodejs入门手册(二)

    继上一篇介绍了基于Nodejs的http服务和文件操作的内容后,本篇内容主要介绍前端工程师在日常工作中较少接触到的TCP相关知识内容,从Nodejs的TCP模块...

    用户1462769

扫码关注腾讯云开发者

领取腾讯云代金券