image.png

【实践经验】

1、分分钟教会你搭建企业级的 npm 私有仓库

https://www.zoo.team/article/npm-registry

npm 作为一种包管理工具,无论你是泛前端还是大前端都已经离不开它。它的出现方便了万千少年。让我们跨过了 Ctrl+C、Ctrl+V ,通过 npm install x的方式将别人的优秀代码模块引入到自己的项目中。这些优秀的模块能被共享的原因,一方面是有 npm 这么一个包管理工具,另外就是 npm 仓库。
对于 npm 仓库,如果你还停留在使用 npm 或者 cnpm 这类官方源的情况下。那么你有必要想想如何搭建一个私有的 npm 仓库。下面从三个方面讲解企业级 npm 私有仓库搭建那些事儿,分分钟教会你。

  • 为什么需要搭建公司的私有 npm 仓库
  • 如何搭建私有仓库
  • 搭建私有仓库扩展篇


2、用js写一个js解释器

https://juejin.cn/post/6898093501376905230

在这篇文章中,我们将通过 JS 构建我们自己的 JS 解释器,用 JS 写 JS,这听起来很奇怪,尽管如此,这样做我们将更熟悉 JS,也可以学习 JS 引擎是如何工作的!

3、Node.js Serverless 助力业务研发提效 38.89%,并保障双11大流量下稳定可靠

https://mp.weixin.qq.com/s?__biz=MzIyNDU2NTc5Mw==&mid=2247489067&idx=1&sn=92ecb92825eebaf9d315b2b3f2e15907&chksm=e80c5965df7bd07307e20835e70a274e161807aad7ed125eb0b57de0999de7985db4b5e9639f&xtrack=1&scene=90&subscene=93&sessionid=1606182248

Serverless 一块深水的坚冰,逐步从深海付出了水面,阿里淘系从去年在大促实践开始,逐渐将 Serverless 应用到前端领域方方面面。而 Node.js 作为前端最有价值的武器,在这其中,发挥了其灵活,轻量的本质,让业务提效。如今,Node.js Serverless 从幕后走向前台,本篇就跟随我们来一一解开 2020 双十一 Serverless 如何让业务落地,开发提效,以及规模化的面纱。

依托阿里云 Serverless 函数计算等基础设施,今年(2020)淘系前端在行业导购、会场、营销v榜等业务场景中规模化使用了 Node.js Serverless 技术,请求相比去年(2千QPS)今年达到新的水平(峰值总计5万QPS),同时将CPU水位,相比去年 FaaS 平均水位(20%)提升到(40%)。在业务价值方面,Node.js Serverless 支撑的云端一体研发模式交付平均提效 38.89%。今年更是依托 Serverless 的便利性和可靠性,帮助双十一特色的淘宝、天猫、飞猪等会场页面快捷地落地 SSR 技术提高页面体验。在运维方面,今年优化大促态和日常态流程,让开发者在应对更高 QPS 规模时,精力花费降低约50%。在研发体验方面,打造解决方案体系,降低研发门槛,支持外包快速入场。

本文将介绍我们在淘系双十一,从日常开发到作战的方案与经验,为大家提供一些 Node.js Serverless 的经验参考,也欢迎大家提出宝贵的意见。
image.png

4、面向 Model 编程的前端架构设计

https://mp.weixin.qq.com/s/g4hnfirDmyeuXAdEt-zk9w

这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。

主要内容分成几个部分:
1)当前的前端方案及其解决的问题
2)现在面对的新挑战
3)我们的前端方案设计和选择。

希望我们的经验能带给大家一些启发。

5、Element3开发内幕 - Vue CLI插件开发

https://juejin.cn/post/6899334776860180494#comment

【基础夯实】

1、Vue 在哪些方面比 React 做得更好?

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651563906&idx=1&sn=0d47a66598c5e6beb174d56145561d8a&chksm=80257043b752f955fecba191b6dee1aa08f601c97bb811e60c972699d9f64498ac412f867f7e&scene=27

  • 不同的理念
  • 单文件组件
  • 官方支持的相关库
  • 风格指南
  • 类和样式绑定
  • 插槽
  • 指令修饰符
  • ……

2、手写CommonJS 中的 require函数

https://mp.weixin.qq.com/s/ZzFOXtmPQIhpnDJpi1l9gQ

require的实现流程:

  • 拿到要加载的文件绝对路径。没有后缀的尝试添加后缀
  • 尝试从缓存中读取导出内容。如果缓存有,返回缓存内容。没有,下一步处理
  • 新建一个模块实例,并输入进缓存对象
  • 尝试加载模块
  • 根据文件类型,分类处理
  • 如果是js文件,读取到文件内容,拼接自执行函数文本,用vm模块创建沙箱实例加载函数文本,获得导出内容,返回内容
  • 如果是json文件,读取到文件内容,用JSON.parse 函数转成js对象,返回内容 获取导出返回值

3、前端 API 请求缓存数据的 5 种方案

https://mp.weixin.qq.com/s/cr40UtTqrgqzjLUdqxE4xw

在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 —modern 指令生成新旧两份浏览器代码来对程序进行优化。

而事实上,缓存一定是提升web应用程序有效方法之一,尤其是用户受限于网速的情况下。提升系统的响应能力,降低网络的消耗。当然,内容越接近于用户,则缓存的速度就会越快,缓存的有效性则会越高。

以客户端而言,我们有很多缓存数据与资源的方法,例如 标准的浏览器缓存 以及 目前火热的 Service worker。但是,他们更适合静态内容的缓存。例如 html,js,css以及图片等文件。而缓存系统数据,笔者采用另外的方案。

笔者将应用到项目中的各种 api 请求缓存方案,从简单到复杂依次介绍一下。

4、CSS 奇技淫巧 icss

https://github.com/chokcoco/iCSS

本系列文章围绕 CSS/web动画 展开,谈一些有趣的话题,内容天马行空,想到什么说什么,不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节。

5、大型小程序如何研发提效

https://mp.weixin.qq.com/s/QiPSCHtN8EqaTEiQhfltYg

本篇文章主要分享使用 Chameleon 框架在开发业务小程序应用过程中遇到的痛点问题,以及如何解决的心路历程。

6、优化 JS 条件语句的 5 个技巧

https://mp.weixin.qq.com/s/HoC1K52yx-Ox91tYr296nA

在使用 JavaScript 时,我们会处理很多条件语句,这里有 5 个技巧可以帮助您编写更好、更简洁的条件语句。

7、webpack异步加载原理及分包策略

https://mp.weixin.qq.com/s/vaCeQEl7xvYB7inBSuV0gg

8、快速使用 Vue3 最新的 15 个常用 API

https://juejin.cn/post/6897030228867022856

9、你会用到的 15 个前端小知识

https://mp.weixin.qq.com/s/IMQhGAS_TaCDDITgl4Ekew

【实用工具】

1、前端高效开发必备的 js 库梳理

https://juejin.cn/post/6898962197335490573

前端由于入行门槛低, 更新换代很快, 每年都会有大量新的框架和库出现, 也有大量库被淘汰(比如 JQuery, 但是学习它的设计思想很有必要). 所以我们大可不必担心, 保持自己的学习步伐, 按需学习即可. 比如说你对移动端比较感兴趣, 工作中也刚好涉及到一些技术的应用,那么我可以专门研究移动端相关的技术和框架, 又或者你对企业后台/中台产品感兴趣, 比较喜欢开发PC端项目, 那么我们可以专门研究这种类型的js库或者框架, 接下来笔者也是按照不同前端业务的需求, 来整理一份能快速应用到工作中的js库, 以提高大家的开发效率。

2、最强大的屏幕录制和 Chrome🎥 注释工具 — screenity

https://github.com/alyssaxuu/screenity

【动态与研究关注】

1、Electron 11 正式发布:支持苹果 M1 芯片

https://mp.weixin.qq.com/s/hY4fIj1QNI03iblxmUm73g

本月 17 日,Electron 11.0.0 正式发布了。该版本包括对 Chromium 87、V8 8.7 和 Node.js 12.18.3 的升级。我们还添加了对 Apple silicon 的支持和一些常规改进。请阅读本文了解升级细节!

Electron 团队很高兴发布了 Electron 11.0.0 版本!你可以使用 npm install electro@latest 命令,通过 npm 安装它,或从我们的发行版网站下载:https://electronjs.org/releases/stable,该版本添加了对 Apple M1 硬件的全新支持,还有一些修复和更新。

2、AntV 与业务的故事

https://www.yuque.com/antv/blog/2020story

AntV 是一个数据可视化项目,也是一个团队,蚂蚁集团数据可视化团队,一群有爱有梦的人,怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行, 希望成就智能时代全球领先的数据可视化解决方案,满足与日俱增的数据洞察需求。

AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化多个领域,主要包含 G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战,AntV 经历多年积累与不断打磨,已支撑起阿里集团内外 20000+ 业务系统,通过了日均千万级 UV 产品的严苛考验,是阿里经济体数据可视化最重要的基础设施。

从 2017.11.22「 开源·开放 」、2018.11.22「 知新·知心 」到2019.11.22「 知源·致远 」,这是 AntV 的第4个品牌日,今年的主题是「 利业·立业 」我们想和大家分享 AntV 将数据可视化能力赋能蚂蚁集团、阿里集团内部业务的故事。

3、开箱即用图表库 cloud-charts

https://cloud-charts.gitee.io/

面向中后台的开箱即用图表库,功能优势:

  • React ES6 语法
  • 可视化、大屏设计理念
  • 配置化图表,无需学习 G2 复杂的语法和数据映射
  • 一键切换主题


4、AntV 图可视分析解决方案,来啦!

https://mp.weixin.qq.com/s/8QZUJC7Cf5V2cqXhZnl0-w

此篇白皮书,全文共计两万三千字,54页PDF,来自内部各条业务线共计20+同学参与编写。调研了国内外50+的产品,整个白皮书,从图业务的不同角色入手,针对不同人群所面临的图可视分析问题,在不同的章节里论述。

image.png

5、Chrome 87新功能:支持操作相机、访问本地字体

https://mp.weixin.qq.com/s/S78Qa5GOmtGfXQm2nG4QPQ

Chrome 87 稳定版已对外发布,本次主要带来三个重大更新:

  • 相机操作AP:平移,倾斜,变焦
  • 范围请求的service worker支持
  • 字体访问API


6、从HTTP到HTTP/3的发展简史

https://mp.weixin.qq.com/s/A4OYoKFVu2nZCyDJcoFrQA

虽然 HTTP/3 规范仍处于起草阶段,但最新版本的 Chrome 浏览器已经默认支持它了。Chrome 拥有约 70%的浏览器市场份额,所以,可以说 HTTP/3 已经进入主流世界。

这一基础协议的最新修订版旨在让 Web 更加高效、安全并缩短内容交付延迟。从某些角度来说,它是 HTTP2 的完善:通过使用新的专用协议 QUIC 替换基础 TCP 协议来解决和之前类似的目标。

想要弄明白 QUIC 的优点,最好的办法是讲清楚 TCP 作为 HTTP 请求的传输方式有哪些不足之处。
为此,我们将从头开始细细道来。

7、那些高效的界面设计工具

https://mp.weixin.qq.com/s/N_bEPts0-2waZiToK3ICpQ

近年来界面设计工具不断推陈出新,一些新兴的实用界面设计工具渐渐走进设计师们的视野,逐步改变着设计师的工作模式。作为互联网设计师,效率至上的工作原则敦促我们不断尝试新工具,建立新的工作模式。本文将回顾界面设计工具的发展历程,并着眼界面设计工具的发展趋势,为大家推荐一些新兴、高效的界面设计工具,涉及UI、动效设计领域,希望对大家有所帮助。
image.png

【程序之外】

1、苹果换芯成开发者噩梦:Docker运行受影响,众多工具和库不支持ARM64

https://mp.weixin.qq.com/s/d9Ba1JSZhj_UA3gkO8vcsQ

很明显,这次换芯行动将给消费者们带来巨大助益,包括获得更长的电池续航并改善运行过热问题(2018 款 MacBook Pro 就是款强大的「暖宝宝」)。软件与硬件之间的紧密集成,也将进一步优化用户的使用体验。另外,产品价格也有可能随之下降。
苹果的芯片迁移决定,自然也激起了开发者们的担忧,特别是在开发者体验方面。苹果虽然表示提供了相应的解决方案,强调新的芯片将提高开发人员的生产力,但是换芯行动也同样会沉重打击高度依赖其产品及生态系统的专业开发者。

  • 现有Mac应用运行速度可能减慢
  • 相当一部分工具和库并不支持 ARM64
  • 对虚拟化的支持也只能运行在 ARM64 操作系统上
  • Docker 受到的影响


2、如何突破自己的技术瓶颈期

https://juejin.cn/post/6892315162657685518

从事前端3年左右的时候,大多会遇到职业的第一个瓶颈,这个时候,什么都会一点,又好像什么都不会,看不清未来发展方向,在新手面前是大佬,大佬面前是小弟,简单知识不屑看,想学高深知识却无从入手,内心浮躁和焦虑。那这种情况,该如何着手解决呢?

瓶颈出现的时候,大多有以下现象:觉得工作乏味,整日业务都熟悉,代码就是CV,闲着就摸鱼聊天;不知道目前自己技术水平如何,对自己前端知识的掌握程度边界含糊不清;知道该努力学习,想要学习,但不知道从哪入手;知识架构不清晰,无法形成知识网;时常技术焦虑,思维怠惰;

这种情况,就好像高考完,一直笃定的目标突然消失了,整天不知道该做什么,回想一下那个阶段你是如何度过的,如果你现在依然记得并且在那段日子里学到了东西,那么不妨试试,再找到相同的感觉,重新调整自己,找到学习的动力;如果在高考结束的那段时间内就是荒废的,并且现在遇到瓶颈依然找不到解决办法,那么不妨静下心来,慢慢读下去,在文中,笔者会提到一些小技巧,助你摆脱现在的困境。



更多精彩资讯,欢迎扫码入群交流~🚀**🚀🚀**
扫码入群.png

注:所有资讯均来自网络,不代表编者观点。