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"}}]}]}]}