1.前言先问你一个问题。市场上有太多相关的技术和解决方案。如果让你设计一个web系统,你会如何选择?大家都知道,一个完整的高可用、高性能的Web系统本身的组成是比较复杂的。除了我们熟悉的前端部分,比如静态网页生成器、JS库、UI框架、监控工具等,还有WebServer、云服务、CDN内容分发、代理服务、HTTP缓存还有加速等等。有人会说,我就按照我最熟悉的方案来设计,这样风险最小。有人会说,我先google一些成熟的方案,然后分别预研,用最好的方案。有人会说,我直接去找技术专家,他肯定能做。其实只要结果好,最终实施成功,效果很好,那么选择技术方案就无可厚非。但是如果我告诉你,我知道现在市面上各大网站60%到70%的技术栈,什么是前端框架用的,什么是服务端用的,什么是后端用的,CDN用的什么等等,先采纳我的意见好吗?我相信你会的。Wappalzer就是这样一个强大的浏览器插件。它拥有超过100万用户,而且使用超级简单。您只需点击即可查看您当前访问的网站所使用的技术栈。我们先看看Segmentfault使用了哪些技术。2.发现你不知道的技术。那么第二个问题来了。如果你是一位经验丰富的架构师,那么Wappalzer可能对你帮助不大。但是如果你只是一个前端工程师或者后端工程师,现在你要承担全栈的工作,负责自己不熟悉的部分内容,给出技术方案,这可能会头疼。因为对于前端工程师来说,服务器是用来做什么的?后台语言是什么?数据库是做什么用的?搜索引擎使用什么?您是否使用亚马逊、微软或阿里巴巴或腾讯的云服务?这一系列的问题对于那些接触服务器很少的人来说,都是不小的挑战。因为很多技术我都没听说过,更不用说选择了?这时候,Wappalzer就派上用场了。你只需要不断打开各种网站,看看它为你列出的技术列表,你就会很快知道一些你不熟悉的技术。接下来我们测试一下测试是否真的有效。先打开Github看看他们用的一些技术就OK了。从它给出的技术列表来看,lit-html、AmazonS3、Turbo这三种技术我都不知道,所以我们只需要点进去看看就可以了。以Turbo为例。点击后Wappalyzer简单介绍了Turbo的作用,并给出了官网链接。我知道它是一个用于快速构建Web应用程序的JS框架。那么这种闻所未闻的技术是不是很冷门呢?向下滚动,它还列出了使用该技术的前10个访问量最大的网站。我们来看看AmazonS3是什么?这是Amazon的对象存储服务,让我们看看哪些站点使用它。可以看到,非常有名的网站都在用它,包括linkedin、figma、notion、spotify等等。足以说明亚马逊的对象存储是一个非常靠谱的服务,选择它是没有问题的。好了,上面我们以Github为例简单介绍一下Wappalzer的使用方法。您可能会发现,实际上列出的技术并不多,这与您访问的网站密不可分,有些技术很难被发现。3、同领域所用技术的横向比较第三个问题,我知道了一些我不知道的技术后,是否可以直接采用这个技术?不是的,一项技术的落地一定要和整个生态链、项目的整体技术架构紧密相关。所以我们不能单枪匹马地决定我们是否可以采用这项技术。最好的方法之一就是我们可以对同一种类型的网站进行分析,看看它们是否针对单一功能使用了相同或不同的技术,以便我们分析和选择技术。接下来我们以StackoverFlow和Segmentfault为例。两者都是拥有大量用户的问答技术网站。让我们比较一下他们使用的技术。SegmentfaultStackoverFlow从上面两张图的技术列表来看,相同的技术还有GoogleAnalytics、Webpack、Highlight.js、GoogleTagManager。前端技术先不说,先来看看这个GoogleTagManager是个什么东西。它是一个标签管理系统(TMS),可以快速轻松地将测量代码和相关代码片段更新为网站或移动应用程序上的标签。让我们看看哪些网站使用它。经过横向比较,我们现在知道博客系统、招聘网站、问答系统都在使用这种技术。如果您的系统也有类似的标签功能,您可以放心使用GoogleTagManager。4、这项技术真的过时了吗?第四个问题,众所周知,前端工程化之后,随着各种前端框架的出现,jQuery的技术明显受到了排挤和抹黑,甚至有很多人看不起使用jQuery的前端,认为这是一种低性能。作为一个经常使用jQuery的前端工程师,想反驳又不知道从何反驳。这时候,Wappalzer就成了我最好的帮手。我们只需要点击最著名的网站,看看他们是否还在使用jQuery。我们看到Github和StackoverFlow还在使用jQuery,那么我们点进去看看还有哪些网站在使用它。可以看到Wordpress、codeopen、gitlab、CSDN等网站都在使用它。不管是历史原因还是现实需要,都证明了jQuery并没有过时。它的定位不同于现代前端框架本身,不应对其评价不公。5.寻找替代品Wappalzer还有一个强大的功能,就是列出今年最流行的替代技术。以刚才的GoogleTagManager为例,看看它的替代品有哪些。当我们点击替代方案时,会列出两种技术的比较。六、更多的功能Wappalzer还有很多其他的功能,包括告诉你这项技术在哪些方面用的最多。甚至还有充电功能,你可以找到更多的技术细节。希望你能用好这个工具,开阔你的眼界。
