最近前端又新出了一款框架 vanillajs,当你打开他的官网时会发现大小是 0kb,因为他其实就是让你用原生 JS 写代码,至于他为什么能引起关注,这就涉及到前端的生态了; - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
mascteen
V2EX    Javascript

最近前端又新出了一款框架 vanillajs,当你打开他的官网时会发现大小是 0kb,因为他其实就是让你用原生 JS 写代码,至于他为什么能引起关注,这就涉及到前端的生态了;

  •  
  •   mascteen 2020-12-29 09:36:28 +08:00 11053 次点击
    这是一个创建于 1747 天前的主题,其中的信息可能已经有所发展或是发生改变。

    npm 拥有所有语言中最多的包;每隔两周打开 hackernews 就会有一个新的框架出来; JS 每隔一年语法就让人不认识了;前端众多的框架不知道从何下手,很多框架是有功能上的重叠的和学习成本的;

    而 vanillajs 框架就是推荐你用原生,框架里面没有任何代码只有一行注释。而 JS 通过多年的进化也已经成为了功能强大的语言了,确实也没必要在其上再覆盖一层框架和学习成本去完成项目。

    框架的使用反而会增加项目的维护难度,原生提供更好代码体验,甚者如果你一定要使用框架,原生对所有框架更友好。

    63 条回复    2020-12-30 14:21:11 +08:00
    Kasumi20
        1
    Kasumi20  
       2020-12-29 09:39:15 +08:00   34
    重新定义最近
    jowan
        2
    jowan  
       2020-12-29 09:40:45 +08:00   6
    村通网
    37Y37
        3
    37Y37  
       2020-12-29 09:41:01 +08:00
    这个 6 啊
    fjj666
        4
    fjj666  
       2020-12-29 09:42:56 +08:00   12
    JS 每年加几个 api 就不认识了?原生写的代码好维护?是没参加过工作吗?
    clino
        5
    clino  
       2020-12-29 09:43:25 +08:00
    “The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive.”
    哈哈,行为艺术啊。
    lancelock
        6
    lancelock  
       2020-12-29 09:44:00 +08:00
    想笑
    liuzhaowei55
        7
    liuzhaowei55  
       2020-12-29 09:45:09 +08:00 via Android
    然而只不过是因为它被使用的比较多,成为了事实标准,然后所有浏览器都内置了。
    n37r09u3
        8
    n37r09u3  
       2020-12-29 09:45:20 +08:00   1
    5 年前的老玩意
    tabris17
        9
    tabris17  
       2020-12-29 09:46:02 +08:00
    前端 js 代码又不跑在服务器上,效率低下关我什么事 /doge
    hellangel2020
        10
    hellangel2020  
       2020-12-29 09:46:13 +08:00
    村通网
    PinkRabbit
        11
    PinkRabbit  
       2020-12-29 09:46:44 +08:00
    老哥搞笑的?
    P233
        12
    P233  
       2020-12-29 09:47:00 +08:00   2
    vanilla 不就是原生的意思吗?
    xiangbohua/td>
        13
    xiangbohua  
       2020-12-29 09:47:46 +08:00
    no code
    u6pM63mMZ34z32cE
        14
    u6pM63mMZ34z32cE  
       2020-12-29 09:48:14 +08:00
    这个网站存在 10 年了吧 lz 的最近定义有点长啊
    mascteen
        15
    mascteen  
    OP
       2020-12-29 09:48:47 +08:00
    @n37r09u3 8 年前
    Chikaku
        16
    Chikaku  
       2020-12-29 09:50:02 +08:00
    这个不是六七年前就有了?
    nuanyang
        17
    nuanyang  
       2020-12-29 09:51:22 +08:00
    所以是哪个框架呢?
    kop1989
        18
    kop1989  
       2020-12-29 09:51:22 +08:00
    吾之蜜糖 汝之砒霜
    我了解并理解目前 web 前端庞大臃肿的架构和设计逻辑现状。
    但我负责的产品中我选择了 JQuery+我自己实现的页面栈来做单页面应用。这是我结合产品和公司条件的决策。

    无脑上当前流行架构 or 死守原生 js,都是不负责任的行为。
    crclz
        19
    crclz  
       2020-12-29 09:54:16 +08:00   1
    如果一个前端开发人员这样说的话,我会称之为“低能”
    duan602728596
        20
    duan602728596  
       2020-12-29 09:56:43 +08:00   9
    前端上框架叫不好维护,后端上框架叫生态丰富。
    前端加新的 api 叫瞎折腾,看不明白,后端加新的 api 叫 feature 。
    老双标了
    nthhdy
        21
    nthhdy  
       2020-12-29 09:58:26 +08:00
    这框架是搞笑的吗
    gzf6
        22
    gzf6  
       2020-12-29 10:05:12 +08:00
    框架更多的是约束代码组织结构吧,用原生的写,最后也会形成自己的一套框架
    waiaan
        23
    waiaan  
       2020-12-29 10:06:15 +08:00
    不仔细看还真以为是框架了
    vision1900
        24
    vision1900  
       2020-12-29 10:11:23 +08:00
    同意,Vue 和 React 最多再流行 5 年。等到新的 HTML 标准以及 Web Components 普及, 原生会重新夺回它的地位
    cslive
        25
    cslive  
       2020-12-29 10:15:11 +08:00
    3g 网速是真的快
    bnm965321
        26
    bnm965321  
       2020-12-29 10:15:42 +08:00
    很多组件如果不用框架我写不出来。。
    shintendo
        27
    shintendo  
       2020-12-29 10:17:31 +08:00
    JS 每隔一年语法就让人不认识了
    -------------
    楼主能举个例子吗?一个就行。
    newbieRenew
        28
    newbieRenew  
       2020-12-29 10:24:33 +08:00 via iPhone
    不用框架?完成同样的项目,你的工作时间大概需要增加 N 倍。
    libook
        29
    libook  
       2020-12-29 10:34:19 +08:00
    原生 JS 现在确实很强大了,手撸页面已经不像以前那么难了,很多以前主要由框架和库提供的功能,现在 JS 也有类似的原生 API 可以直接用了。

    不过框架也是在发展的,一些原生 JS 具备的功能会逐渐被从框架中移除,而框架也会增加其他特性来增强原生特性的高效运用。比如之前各个框架都有自己的组件机制,后来 WebComponent 出来之后各个框架都开始对 WebComponent 进行支持,从完全自己实现组件机制到底层复用 WebComponent,然后表层再根据框架架构思想封装成更易用的特性。

    原生特性是分散的,而框架往往是提供了一种现成的解决方案,让大部分需求场景可以直接套用,让开发者把精力更多放在业务上。
    mascteen
        30
    mascteen  
    OP
       2020-12-29 10:35:19 +08:00
    @fjj666 5 年后,10 年后你的项目中的框架还能招到人维护?
    wr516516
        31
    wr516516  
       2020-12-29 10:40:37 +08:00
    @tiglapiles 项目坚持十年都在使用维护,不重构的吗
    love
        32
    love  
       2020-12-29 10:47:21 +08:00
    一看就是没写过复杂 App 的,现在的普通 react 单向数据流架构能使复杂度线性增长,而 jquery 时代是指数增长,代码很容易乱得一 B
    mascteen
        33
    mascteen  
    OP
       2020-12-29 11:04:37 +08:00
    @shintendo

    const proto = new Proxy({}, {
    get(target, propertyKey, receiver) {
    console.log('GET '+propertyKey);
    return target[propertyKey];
    }
    });

    const obj = Object.create(proto);
    obj.weight;

    只看代码,这个在终端输出什么?
    tremblingblue
        34
    tremblingblue  
       2020-12-29 11:16:47 +08:00
    @tiglapiles 话说,这个看字眼都能猜到。。。
    nightwitch
        35
    nightwitch  
       2020-12-29 11:25:42 +08:00
    vanilla 本身就是原生无修改的意思。。
    um1ng
        36
    um1ng  
       2020-12-29 11:27:04 +08:00
    这尼玛不就是原生 js 吗
    KuroNekoFan
        37
    KuroNekoFan  
       2020-12-29 11:30:16 +08:00
    @tiglapiles 实际工作中用这样的写法可能会被人打死
    JerryCha
        38
    JerryCha  
       2020-12-29 11:42:04 +08:00
    我是老实人

    Vanilia JS 意思就是原生 JS
    AV1
        39
    AV1  
       2020-12-29 11:46:57 +08:00
    我一直觉得把 Web API 或 DOM API 叫做“原生 JS”就跟外行把“硬盘”误叫作“内存”一样。这就是典型的语言和 API 分不清的结果。
    “vanilla”这个称呼倒是比“原生 JS”好十倍。
    所谓的“原生 JS”这种称呼,应该拿来跟 TS 、coffee 相比才对。
    shroxd
        40
    shroxd  
       2020-12-29 12:09:51 +08:00 via iPhone
    框架是一种解决复杂问题的抽象,比如现代前端框架主要解决的问题是如何同步 UI 和 state 。你当然可以不用任何框架,但当代码量增长,你所做的对 UI 和 state 同步代码的抽象最终还是会变成一个低配版的 Vue/React 。还大概率没有他们封装的好,或者说根本不可能。
    chengs
        41
    chengs  
       2020-12-29 13:09:54 +08:00 via iPhone
    @tabris17 可以跑在服务器上,nextjs
    okcdz
        42
    okcdz  
       2020-12-29 13:28:36 +08:00
    这是在搞笑?还是认真的
    no1xsyzy
        43
    no1xsyzy  
       2020-12-29 13:33:56 +08:00   2
    再说亿遍,vanilla 是香草的意思(
    liubian
        44
    liubian  
       2020-12-29 13:50:05 +08:00
    名字就能看出 玩你了
    xianxiaobo
        45
    xianxiaobo  
       2020-12-29 13:51:06 +08:00
    钓鱼贴?有种贴吧的感觉
    nannanziyu
        46
    nannanziyu  
       2020-12-29 13:51:34 +08:00
    @no1xsyzy

    vanilla
    adjective
    UK /vnl./ US /vnl./

    used to describe a product or service that is basic and has no special features:
    sample: I just want a vanilla bank account with low charges.
    MIUIOS
        47
    MIUIOS  
       2020-12-29 13:57:21 +08:00
    前排那些喷的 这是钓鱼贴啊 vanillajs 翻译过来就是原生 JS 这个东西起初就是为了调侃现在的人框架用多了,连最基础的原生写法都不知道是啥了
    zooeymango
        48
    zooeymango  
       2020-12-29 14:48:26 +08:00
    哈哈哈哈,这可真最近了
    sockpuppet9527
        49
    sockpuppet9527  
       2020-12-29 17:00:47 +08:00
    披头士
    mascteen
        50
    mascteen  
    OP
       2020-12-29 18:23:12 +08:00
    @libook 当业务发展到一定规模就有可能受制于框架
    no1xsyzy
        51
    no1xsyzy  
       2020-12-29 18:23:58 +08:00
    @nannanziyu 我只是想发图罢了(
    anguiao
        52
    anguiao  
       2020-12-29 18:29:57 +08:00 via Android
    不用框架的结果,就是自己造了一个更蹩脚的框架。
    mascteen
        53
    mascteen  
    OP
       2020-12-29 18:38:06 +08:00
    @shroxd js 已经是相当抽象的高级语言了,你说的一些页面当然用框架完成没有问题,可是如何要写大型应用就不行了,例如 d3js, chartjs, videojs..., 至于你说的相似页面的状态管理,这个就见仁见智,像 sveltejs 就把状态全部交给 js 来做了。
    libook
        54
    libook  
       2020-12-29 18:40:31 +08:00
    @tiglapiles 大多数企业生产来说,没有啥是一成不变的,业务会变,技术会变,体量会变,所以技术上所有决策都是针对于当前情况权衡评估的结果,过一阵子发生了各种变数,可能就要有新的结论了。

    比如产品发展初期需要大量 MVP 试错,那么不管用不用框架,能最大速率迭代就能加速产品试错,从而尽早找到一个可靠的发展方向。

    但到了成熟期,已经产生了大量的代码,就不能像初期那样为快不破,而是要有有效的方案在保障开发效率的同时减少新的技术债的产生。

    之后随着市场、业务、组织结构等变化,每隔一段时间就需要对项目进行重构,同时引入新的技术和淘汰旧的技术。

    所以如果说抱着始终用一种方案的想法去使用或不使用框架,都是肯定靠不住的;得对未来一段时间的需求走势做预测,然后从现在设计的时候就选择一种能满足未来一段时间需求的方案就好,时限到了就拥抱变化,重新设计方案。
    crysislinux
        55
    crysislinux  
       2020-12-29 18:44:22 +08:00 via Android
    不知道 webcomponent 你们用过没。那是真的难用。。
    SuperMild
        56
    SuperMild  
       2020-12-29 18:47:17 +08:00   2
    vanilla 表示原味,来源于冰淇淋的口味,因为最基础的冰淇淋味道就是香草味,后来才被其他行业引申用来指基本款。因此对于英文母语的人来说,看到 vanillajs 就能猜到大概,减轻了恶作剧成分,变成一个很轻的开玩笑。
    mascteen
        57
    mascteen  
    OP
       2020-12-29 18:48:22 +08:00
    @libook 好吧,没有什么是多加几次班不能解决的
    libook
        58
    libook  
       2020-12-29 18:54:02 +08:00
    @tiglapiles 我理解你的意思,但现实就是这样,现在大多行业发展都是不断推陈出新的过程,只不过互联网行业这个速度很快而已。

    作为一个面试官来说,如果一个前端开发人员有能力用原生 JS 写出复杂交互的页面,意味着这个人基本功足够扎实,框架学起来很快,但解决问题还是要回归基础。

    另外加班其实通常属于管理问题,只要不是故意压榨的话,又加班显现通常都是因为管理无能,没法控制项目风险,也没法发挥团队的最大产能。
    msg7086
        59
    msg7086  
       2020-12-29 18:56:13 +08:00 via Android
    你用着原生代码天天加班,我用着框架每天改完业务逻辑就能回家,我们都有美好的未来。
    dsnake1984
        60
    dsnake1984  
       2020-12-30 01:53:37 +08:00
    从来不用 php 框架 影响我速度。
    xrr2016
        61
    xrr2016  
       2020-12-30 09:20:02 +08:00
    @no1xsyzy 为啥还要配个图
    iwh718
        62
    iwh718  
       2020-12-30 11:28:12 +08:00 via iPhone
    香草 js 出来多少年了。又炒剩饭啊
    WishMeLz
        63
    WishMeLz  
       2020-12-30 14:21:11 +08:00
    被骗人数 = 被骗人数 + 1
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5970 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 34ms UTC 02:48 PVG 10:48 LAX 19:48 JFK 22:48
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86