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

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

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

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

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

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

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

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

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

在线访问

目录

  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 知识

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。商机网仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 tenspace2022@163.com 举报,一经查实,本站将立刻删除。 本文链接:https://www.315965.com/n/53099.html 聚才发 母婴好物

(0)
上一篇 2023年12月15日 上午7:00
下一篇 2023年12月15日 上午7:09

相关推荐

  • ChatGPT访问及内容安全技术设计

    作者:黑夜路人 时间:2023/5/15 作为爆火的AIGC产品ChatGPT,以及类似的产品 Cluade、Bard、Newbing 等等,让大家趋之若鹜,如何把这些产品映射到自己的业务产品中,也是很多开发者需要面对的问题。 针对AIGC,国家部门也有一些针对AIGC的内容安全的要求,网信办征求意见稿,针对AI生成内容设定这些要求: 第十一条 提供者在提供…

    2023年12月25日
    161
  • 笔记本电脑怎么u盘装系统教程(u盘重装系统详细步骤)

    使用U盘重装系统是最普遍的做法,不管什么电脑,都可以用U盘重装系统,尤其是笔记本电脑,有部分电脑没有光驱,下面我们就来学习一下笔记本电脑用u盘重装系统怎么操作步骤吧。 更多win11安装教程小白系统重装官网 1、首先需要制作u盘启动盘。按照图中所示安装好装机吧一键重装系统工具打开后,插入一个8g以上的空白u盘,选择u盘重装系统模式,点击开始制作启动盘。 2、…

    2023年7月30日
    480
  • cad2014安装教程图解及激活方法(cad2014安装教程详细图解和激活教程)

    在电脑上安装cad2014这一款软件的时候,一些网友会遇到:cad2014安装失败的问题,系统提示:安装完成,某些产品无法安装。反复安装了好几次都是这个提示,那么,cad2014一直安装失败怎么办?cad2014安装失败解决方法。 cad2014安装失败解决方法: 控制面板——程序——打开或关闭windows功能,把.NET Framework 3.5 和4…

    2023年7月30日
    523
  • jdk安装教程(安装jdk步骤)

    Java作为当下比较流行的编程语言,学习Java的朋友也越来越多了。 万事开头难,想要学好Java,就必须学会使用JDK,本文章将详细介绍如何下载安装——JDK(Java Development Kit)。 JDK安装配置视频讲解也给大家准备好了!点击以下观看 在安装 JDK 之前,首先要到 Oracle 网站获取 JDK 安装包。JDK 安装包被集成在 J…

    2023年8月2日
    254
  • 画画教程动漫人物基础(画画教程动漫人物基础入门)

    卡通动画是伴随着每个人的童年,不同年龄阶层的人都有属于自己的卡通回忆,不过有些动画是经典的,也许爸爸妈妈那个年代的动画片,到了10后小宝宝这里还是很热门。今天果果就来教大家花5个动画人物简笔画,非常详细,1分钟速成,零基础都能学会! 皮卡丘 1、首先用线条勾勒出皮卡丘的脸颊。 2、在头部两侧画出皮卡丘长长的耳朵。 3、画出大大的眼睛,留出高光部分。 4、画出…

    2023年7月30日
    334
  • 初级瑜伽基础入门教程(基础瑜伽入门)

    初学者练瑜伽,总会感觉身体僵硬、身体打不开、很多体式做不到位!其实初接触瑜伽,由于身体肌肉、筋膜都还比较紧张,不适合练习太大幅度的体式,需要循序渐进地练习! 今天分享一套超级适合初学者练习的瑜伽序列,全身都能锻炼到,体式也不难,把这篇文章收藏起来,坚持练习! 1、下蹲式 山式站立,双脚分开略比肩宽 双脚、双膝向外打开约45度 吸气,脊柱延展,呼气,收核心 屈…

    2023年8月2日
    432
  • node.js mysql模块连接数据库 报错connect econnrefused ::1:3306

    1、检查MySQL服务是否启动,可以使用命令netstat -anp | grep 3306查看是否有监听3306端口的服务; 2、检查MySQL服务配置文件my.cnf中是否配置了正确的host地址,一般默认为127.0.0.1; 3、检查MySQL服务是否允许远程连接,可以在my.cnf中添加bind-address=0.0.0.0; 4、检查MySQL…

    2024年2月6日
    388
  • 初学编程100个代码大全(新手编程代码大全)

    我记得刚开始接触编程的时候,觉得太难了。 也很好奇,写代码的那些人也太厉害了吧?全是英文的,他们的英文水平一定很好吧? 他们是怎么记住这么多代码格式的?而且错了一个标点符号,整个程序都会有影响。 一个程序几千行,错一个标点符号都不行这也太难了吧? 带着新手的灵魂拷问,作为从业单片机编程10年的开发者,我来为大家拨开云雾。 看完以后你就会明白,其实他们也没那么…

    2023年7月31日
    1.4K
  • 白嫖谷歌搭建个人AI绘画(stable-diffusion),A卡救星

    💡 最近的AI绘画大火,满心欢喜的准备体验一下,奈何网上大多数网站都是要收费,想着本地搭建一波,结果发现自己是AMD,但是多数开源的都不支持AMD,幸好在B站找到了大佬白嫖教程,这里就小记一下自己白嫖谷歌计算资源,自己生成AI绘图的教程 前置条件:可以访问谷歌,有谷歌账号,Github 操作步骤: 1.打开Github项目 项目地址:github.com/c…

    2023年12月18日
    211
  • css菜鸟教程(CSS菜鸟教程总结)

    相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是,Css相当于Html的一个美化装置,所以它必须依赖于Html才能发挥作用,那么今天我们就来深入了解下它吧。 一、Css的用法 1.如何使用Css 要…

    2023年7月31日
    505