2021年前端开发的下一步发展预测

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文将探讨过去一年中Web技术的主要发展趋势，特别是JavaScript，并尝试预测下2021年前端开发的下一步发展。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"},{"type":"color","attrs":{"color":"#333333","name":"user"}},{"type":"strong"}],"text":"本文最初发布于"},{"type":"text","marks":[{"type":"italic"},{"type":"strong"}],"text":"codeburst"},{"type":"text","marks":[{"type":"italic"},{"type":"color","attrs":{"color":"#333333","name":"user"}},{"type":"strong"}],"text":"，经原作者授权由InfoQ中文站翻译并分享。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/9b\/04\/9b81c3a20241cae046eab7a1e46d6e04.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"2020年，新冠肺炎疫情给世界带来了沉重的打击。这一前所未有的危机影响到了人类活动的所有领域。该病毒的不良后果也影响了Web开发领域，但该领域是2020年全球各个行业中仍在迈步向前的行业之一。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"因此，现在是时候看看过去一年中Web技术的主要发展趋势了，特别是JavaScript。本文将尝试预测下2021年前端开发的下一步发展。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"JavaScript居首"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"许多Web开发人员都承认JavaScript有一些缺点和棘手的地方，但它仍然是使用最广泛的编程语言。根据"},{"type":"link","attrs":{"href":"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-programming-scripting-and-markup-languages-professional-developers","title":null,"type":null},"content":[{"type":"text","text":"Stack Overflow 2020年开发者调查"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"，在47184名接受调查的专业开发人员中，69.7%的人优先选择JavaScript。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/af\/a5\/af873082d986f5f3eda257e8a23f6ca5.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"尽管JavaScript并不完美，但它拥有丰富的框架、库和其他有用的工具，以及庞大的JS开发者社区，其生态系统之丰富让人赞赏不已。此外，还有一个专门的技术委员会（称为"},{"type":"link","attrs":{"href":"https:\/\/tc39.es\/","title":null,"type":null},"content":[{"type":"text","text":"TC39"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"）致力于改进JavaScript。因此，在短时间内，JavaScript在Web开发中的领先地位几乎不可撼动，但TypeScript很可能会成为一个更有吸引力的替代方案。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"TypeScript达新高度"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript经常被说成是JavaScript的改进版本，这是有原因的。TypeScript不仅利用了JavaScript的所有优势（它会编译成JS），而且还带来了自己强大的特性，如静态类型、对模块和接口的支持等。此外，TypeScript在学习、可维护性和调试方面更简单。Stack Overflow调查的参与者认为，Typescript（67.1%）是仅次于Rust（86.1%）的"},{"type":"link","attrs":{"href":"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-most-loved-dreaded-and-wanted-languages-loved","title":null,"type":null},"content":[{"type":"text","text":"最受欢迎的编程语言"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/octoverse.github.com\/","title":null,"type":null},"content":[{"type":"text","text":"GitHub"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"的最新报告也证实了目前JavaScript在流行度方面的主导地位，但同时，也清楚地显示了近年来TypeScript需求的快速增长。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/50\/8a\/507ca14ebf594bb7b4208761bddea98a.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"可以预计，在2021年，这一趋势将会继续下去，因为微软将继续扩展TypeScript的功能，会有更多的Web应用程序使用这种语言编写。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"JavaScript框架：2021年，我们熟悉的情况可能会发生变化"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"我们已经习惯于看到React、Angular和Vue.js等JavaScript框架占据主导地位。根据"},{"type":"link","attrs":{"href":"https:\/\/tsh.io\/state-of-frontend\/#frameworks","title":null,"type":null},"content":[{"type":"text","text":"2020年前端现状报告"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"，在超过4500名专业前端开发者中，对框架的偏好没有什么新变化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/8e\/ec\/8e5e91c8cc91b5e00ec4e4c375bbcfec.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"但是，如果你看看受访者对于“在未来的项目中想要继续使用或学习什么框架”的回复，前三名中出现了一个新的名字。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/70\/02\/70e804dc4d2bab0dec0f4c33c66a3302.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"这就是Svelte。那么它有什么特别之处呢？让我们更详细地了解下这个有前途的框架。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Svelte：不够成熟，但有潜力"}]},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/51\/dd\/513a0ccd558ae3ca1cf74419151a03dd.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/svelte.dev\/","title":null,"type":null},"content":[{"type":"text","text":"Svelte"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"是一个用TypeScript编写的下一代轻量级组件框架，它提供了一种创建高性能Web应用的新方法。与更流行的框架React和Vue.js不同，它不是在运行时将应用转换为普通JS代码，而是在构建时完成。换句话说，作为一个编译器，Svelte可以在没有任何抽象层的情况下在浏览器中运行代码，提高了应用程序的性能，并提供了更好的用户体验。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"因此，在第一次加载时，使用Svelte创建的Web应用程序就比基于其他框架的应用程序要快得多。Svelte可以单独使用，也可以与其他框架结合使用来生成Web应用程序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"现在看来，Svelte可能还不够成熟，无法与React这样的巨头竞争，但它肯定有潜力在2021年的Web应用中获得更广泛的应用。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Deno：游戏规则改变者或Node.js的替代品？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/d6\/3b\/d63820c4213e6ce36d4ccfcae3236f3b.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"2020年，Web开发人员得到了一个新的功能强大的工具，让他们可以在服务器端实现自己的代码——"},{"type":"link","attrs":{"href":"https:\/\/deno.land\/","title":null,"type":null},"content":[{"type":"text","text":"Deno"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。这是一个用Rust编写的新的运行时环境，它利用了V8 JS引擎和内置的TypeScript支持。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"Deno的主要意图是克服Node.js的主要缺点，如安全漏洞和包管理问题，并利用现代JavaScript的特性。它附带了许多集成工具，可以方便开发人员进行测试、调试和格式化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"Deno的出现并不意味着Node.js已经走到了尽头，因为它仍然是一个被广泛使用、有良好支持的环境。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/b1\/5b\/b1007b91b0079ff92fa45eeaf1b0665b.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"但"},{"type":"link","attrs":{"href":"https:\/\/github.com\/denoland\/deno","title":null,"type":null},"content":[{"type":"text","text":"GitHub统计数据"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"显示，Deno已经引起了Web开发社区的极大兴趣，因此，在2021年跟踪它的进展将非常令人兴奋。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"CSS领域的新东西"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"CSS的新趋势经常笼罩在JavaScript的阴影中，许多开发人员都不会注意。对于2020年新出现的以及早已投入使用的CSS技术，"},{"type":"link","attrs":{"href":"https:\/\/2020.stateofcss.com\/en-US\/","title":null,"type":null},"content":[{"type":"text","text":"CSS现状调查"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"提供了关于采用率和认知率的有趣见解，对于那些需要额外的Web应用程序设计工具的人，这很有帮助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"例如，CSS Grid成了一种生成动态和响应式布局的更流行的工具。与使用全局样式表不同，将样式与组件结合起来创建主题化设计系统会更有效。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/4b\/f1\/4b98f066f0f5f2e70b98106cab4b01f1.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"当谈到CSS框架时，Bootstrap可能会第一个浮现在脑海中。但统计数据显示，开发人员对Bootstrap和其他成熟工具（如Foundation）的兴趣和满意度严重下降。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在过去两年中，"},{"type":"link","attrs":{"href":"https:\/\/tailwindcss.com\/","title":null,"type":null},"content":[{"type":"text","text":"Tailwind CSS"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"一直处于领先地位。与Bootstrap不同，这个轻量级框架不会将任何内置组件强加给开发人员，他们可以自由地使用一组CSS辅助类和其他强大的特性创建独特的设计。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}},{"type":"strong"}],"text":"英文原文链接"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"："},{"type":"link","attrs":{"href":"https:\/\/codeburst.io\/top-javascript-frameworks-and-web-development-trends-in-2021-313194c0cd92","title":null,"type":null},"content":[{"type":"text","text":"Top JavaScript Frameworks and Web Development Trends in 2021"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]}]}]}