整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS似乎是一種非常簡(jiǎn)單的語言，很難在其中犯錯(cuò)誤。你只需添加樣式規(guī)則，就可以對(duì)網(wǎng)站進(jìn)行樣式設(shè)置了，對(duì)嗎？對(duì)于只需要幾個(gè)CSS文件的小型網(wǎng)站，情況可能就是這樣。但是在大型應(yīng)用程序中，樣式可能會(huì)迅速失控。你如何使它們易于管理？
事實(shí)是，就像其他任何語言一樣，CSS可能會(huì)影響或破壞你的設(shè)計(jì)。這是CSS的10條最佳實(shí)踐技巧，可以幫助你從樣式中獲得最大的收益。
首先，確定你是否真的需要使用CSS框架。現(xiàn)在，有許多輕量級(jí)的替代健壯框架。通常，你不會(huì)使用框架中的每個(gè)選擇器，因此你的軟件包將包含無效代碼。
如果僅對(duì)按鈕樣式使用，則將樣式外包給你的CSS文件，然后刪除其余樣式。另外，你可以使用DevTools中的代碼覆蓋率來識(shí)別未使用的CSS規(guī)則。
要打開它，請(qǐng)?jiān)凇肮ぞ摺泵姘逯兴阉鰿overage。你也可以通過單擊Ctrl+ Shift+ 打開“工具”面板P。打開后，單擊重新加載圖標(biāo)開始錄制。紅色顯示的所有內(nèi)容均未使用。
你可以在上面的示例中看到，它說沒有使用98％的CSS。請(qǐng)注意，實(shí)際上并非如此，某些CSS樣式僅在用戶與網(wǎng)站互動(dòng)后才應(yīng)用。移動(dòng)設(shè)備的樣式也標(biāo)記為未使用的字節(jié)。因此，在刪除所有內(nèi)容之前，請(qǐng)確保確認(rèn)確實(shí)沒有在任何地方使用它。
考慮為你的項(xiàng)目使用CSS方法。CSS方法用于在CSS文件中創(chuàng)建一致性。它們有助于擴(kuò)展和維護(hù)你的項(xiàng)目。這是我可以推薦的一些流行的CSS方法。
BEM
BEM（塊，元素，修飾符）是最流行的CSS方法之一。它是命名約定的集合，可用于輕松制作可重復(fù)使用的組件。命名約定遵循以下模式：
.block { ... }.block__element { ... }.block--modifier { ... }倒三角CSS通過將不同的圖層引入不同的特性來幫助你更好地組織文件。你走得越深，就越具體。
面向?qū)ο蟮腃SS或OOCSS具有兩個(gè)主要原理。
1.分離結(jié)構(gòu)和皮膚
這意味著你要與結(jié)構(gòu)代碼分開定義視覺效果。實(shí)際上這是什么意思？
/* Instead of */
.box {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}
/* Do */
.box {
width: 250px;
height: 250px;
padding: 10px;}
.elevated {
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}2、分隔容器和內(nèi)容
這意味著你不希望任何元素取決于其位置。相同的元素?zé)o論在頁面上的什么位置，都應(yīng)看起來相同。
/* Instead */.main span.breadcumb { ... }/* Do */.breadcrumb { ... }設(shè)置預(yù)處理器可以使你受益匪淺。預(yù)處理器是一種工具，可讓你使用CSS中不存在的高級(jí)功能。這些可能是循環(huán)變量甚至函數(shù)之類的東西。
有很多預(yù)處理器。最著名的三個(gè)大概就是Sass，Less和Stylus。我建議使用Sass，因?yàn)樗且粋€(gè)繁榮的社區(qū)，并且你可以在網(wǎng)上找到它的大量文檔。
那么，預(yù)處理器如何為你提供幫助？更好地組織你的風(fēng)格
預(yù)處理程序可幫助你更好地組織樣式。他們具有將你的文件分解為較小的可重用文件的能力。這些可以相互導(dǎo)入，也可以以后分別導(dǎo)入你的應(yīng)用程序。
// Import different modules into one SCSS file@import 'settings';@import 'tools';@import 'generic';@import 'elements';@import 'objects';@import 'components';@import 'trumps';增強(qiáng)可讀性的另一種好方法是嵌套選擇器。這是CSS缺少的一個(gè)簡(jiǎn)單而強(qiáng)大的功能。
.wrapper {
.sidebar {
&.collapsed {
display: none;
}
.list {
.list-item { ...
&.list-item--active { ... }
}
}
}
}分層結(jié)構(gòu)使更容易可視化不同元素如何結(jié)合在一起。
CSS中有一些非標(biāo)準(zhǔn)或?qū)嶒?yàn)性功能的前綴。不同的瀏覽器為其使用不同的前綴，例如：
為了支持所有主流瀏覽器，我們必須多次定義某些屬性。
.gradient {
background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}預(yù)處理器通過mixins幫助我們解決此問題-可以代替硬編碼值使用的函數(shù)。
@mixin gradient() {
background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}
.gradient { @include gradient();}不必一遍又一遍地寫出相同的內(nèi)容，而只需mixin在需要時(shí)添加即可。
更好的選擇是后處理器。一旦CSS由預(yù)處理器生成，則后處理器可以運(yùn)行其他優(yōu)化步驟。最受歡迎的后處理器之一是PostCSS。
你可以使用PostCSS來自動(dòng)為CSS規(guī)則添加前綴，因此你不必?fù)?dān)心會(huì)遺漏主要的瀏覽器。他們使用“ 我可以使用”中的值，因此它始終是最新的。
另一個(gè)很棒的后處理器是autoprefixer。使用autoprefixer，當(dāng)你要支持最后四個(gè)版本時(shí)，無需在CSS文件中寫入任何瀏覽器前綴就可以完成所有工作！
const autoprefixer = require('autoprefixer')({
browsers: [ 'last 4 versions', 'not ie < 9' ]
});除mixins外，你還可以選擇使用變量。用短線連接一起，你可以執(zhí)行設(shè)計(jì)規(guī)則。
// Font definitions$font-12: 12px;$font-21: 21px;
// Color definitions$color-white: #FAFAFA;$color-black: #212121;我們接著繼續(xù)討論實(shí)際的CSS。這個(gè)也是經(jīng)常被忽略。通常，你可以通過簡(jiǎn)單地使用正確的HTML元素來減小CSS文件的大小。假設(shè)你的標(biāo)題包含以下規(guī)則：
span.heading {
display: block;
font-size: 1.2em;
margin-top: 1em;
margin-bottom: 1em;
}如果你正在使用span元素作為標(biāo)題。它將覆蓋默認(rèn)的顯示，間距或字體樣式。可以通過使用h1，h2或h3來避免這種情況。默認(rèn)情況下，它們具有你要與其他元素一起實(shí)現(xiàn)的樣式。你可以立即擺脫四個(gè)不必要的規(guī)則。
為了進(jìn)一步減少規(guī)則數(shù)量，請(qǐng)始終嘗試使用簡(jiǎn)寫屬性。對(duì)于上面的示例，我們可以說：
.heading { margin: 1em 0;}對(duì)于其他屬性（例如，填充，邊框或背景），也是如此。
這與上一點(diǎn)緊密相關(guān)。有時(shí)很難發(fā)現(xiàn)冗余，特別是當(dāng)兩個(gè)選擇器中的重復(fù)規(guī)則未遵循相同順序時(shí)。但是，如果你的類僅在一個(gè)或兩個(gè)規(guī)則中有所不同，則最好外包這些規(guī)則并將它們用作額外的類。代替這個(gè)：
<style>
.warning {
width: 100%;
height: 50px;
background: yellow;
border-radius: 5px;
}
.elevated-warning {
width: 100%;
height: 50px; f
ont-size: 150%; background: yellow; box-shadow: 1px 2px 5px #CCC; border-radius: 5px; }</style>
<div class="warning">??</div><div class="elevated-warning"></div>嘗試使用類似的方法：
<style>
.warning {
width: 100%;
height: 50px;
background: yellow;
border-radius: 5px;
}
.warning--elevated {
font-size: 150%;
box-shadow: 1px 2px 5px #CCC;
}
</style>
<div class="warning">??</div><div class="warning warning--elevated"></div>使用復(fù)雜的選擇器有兩個(gè)主要問題。首先，提高的特異性不僅會(huì)使以后更難重寫現(xiàn)有規(guī)則，而且會(huì)增加瀏覽器匹配選擇器的時(shí)間。
當(dāng)你的瀏覽器試圖解釋選擇器并確定它與哪個(gè)元素匹配時(shí)，它們從右到左。就性能而言，這比其他方法要快。讓我們以下面的選擇器為例。
.deeply .nested .selector span { ...}你的瀏覽器將首先從開始span。它將匹配所有span標(biāo)簽，然后轉(zhuǎn)到下一個(gè)標(biāo)簽。它將濾除類中的spans，.selector依此類推。
不建議將標(biāo)記用于CSS選擇器，因?yàn)樗鼤?huì)與每個(gè)標(biāo)記匹配。雖然差異只能在幾分之一毫秒內(nèi)測(cè)量，但總的來說很少。更重要的是，減少其他原因的復(fù)雜性是一個(gè)好習(xí)慣。
機(jī)器解析不僅困難，而且人類也難以解析。以下面代碼為例：
[type="checkbox"]:checked + [class$="-confirmation"]::after { ...}你認(rèn)為上述規(guī)則何時(shí)適用？通過創(chuàng)建自定義類并使用JavaScript進(jìn)行切換，可以簡(jiǎn)化此過程。
.confirmation-icon::after { ...}現(xiàn)在看起來更加愉快。如果你仍然需要一個(gè)過于復(fù)雜的選擇器，并且認(rèn)為別無選擇，請(qǐng)?jiān)谙旅媪粝略u(píng)論以解釋你的解決方案。
/** * Creates a confirmation icon after a checkbox is selected. * Select all labels ending with a class name of "-confirmation" * that are preceeded by a checked checkbox. * PS.: There's no other way to get around this, don't try to fix it. **/.checkbox:checked + label[class$="-confirmation"]::after { ...}這是開發(fā)人員在編寫CSS時(shí)最常犯的錯(cuò)誤之一。盡管你可能認(rèn)為刪除輪廓?jiǎng)?chuàng)建的突出顯示沒有任何問題，但實(shí)際上，你使網(wǎng)站無法訪問。通常將此規(guī)則添加為CSS的重置值。
:focus { outline: none;}但是，通過這種方式，僅使用鍵盤導(dǎo)航的用戶就不會(huì)知道他們正在關(guān)注你的網(wǎng)站。
如果默認(rèn)樣式對(duì)你的品牌不利，請(qǐng)創(chuàng)建自定義輪廓。只要確保在聚焦元素方面有某種指示即可。
當(dāng)你必須處理媒體查詢時(shí)，請(qǐng)始終使用移動(dòng)優(yōu)先。以移動(dòng)設(shè)備為先的方法意味著你首先要開始為小屏幕設(shè)備編寫CSS并從那里開始構(gòu)建。這也稱為漸進(jìn)增強(qiáng)。
這將確保你主要添加額外的規(guī)則來迎合大屏幕設(shè)備，而不是重寫現(xiàn)有的CSS規(guī)則。這樣可以減少最終使用的規(guī)則數(shù)量。
你如何判斷是否使用移動(dòng)優(yōu)先？如果你的媒體查詢使用min-width，那么你將走上正確的道路。
/* Mobile-first media query, everything above 600px will get the below styles */
@media (min-width: 600px) { /* your CSS rules */}
/* Non mobile-first media query, everything below 600px will get the below styles */
@media (max-width: 600px) { /* your CSS rules */}最后，壓縮捆綁文件以減小其大小。壓縮刪除注釋和空白，你的捆綁軟件就可以快速的獲取數(shù)據(jù)。
如果還沒有，請(qǐng)?jiān)诜?wù)器端也啟用壓縮。
進(jìn)一步減少CSS 和標(biāo)記大小的另一種好方法是混淆類名。
為此，你可以根據(jù)項(xiàng)目設(shè)置選擇幾個(gè)選項(xiàng)：
總結(jié)遵循以上10個(gè)簡(jiǎn)單步驟將有助于你編寫的CSS文件，更輕輕，易維護(hù)，更好擴(kuò)展。不僅如此，而且使用諸如預(yù)定義的調(diào)色板或版式規(guī)則之類的實(shí)用程序，將幫助你創(chuàng)建更一致的設(shè)計(jì)。你的樣式也將更可重用，因此可以節(jié)省下一個(gè)項(xiàng)目的時(shí)間。
i網(wǎng)頁設(shè)計(jì)之前端基礎(chǔ)教程html介紹優(yōu)秀網(wǎng)頁設(shè)計(jì)必備web前端講解
譯局是36氪旗下編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場(chǎng)、生活等領(lǐng)域，重點(diǎn)介紹國(guó)外的新技術(shù)、新觀點(diǎn)、新風(fēng)向。
編者按：JavaScript在前端的地位不可撼動(dòng)，相關(guān)職位的薪資待遇也在穩(wěn)步提升。在這種繁榮的局面下，各種框架和工具層出不窮，一時(shí)間令初學(xué)的開發(fā)者眼花繚亂，不知該做何選擇。為此，從事軟件開發(fā)教學(xué)創(chuàng)業(yè)的Eric Elliott通過分析Google搜索趨勢(shì)、State of JS Survey、Stack Overflow等調(diào)查數(shù)據(jù)，以及NPM下載量、匯總的職位發(fā)布情況等，給出了有助于獲得一份JS編程工作的相關(guān)推薦，并且對(duì)未來十年的前沿技術(shù)進(jìn)行了展望。原文發(fā)表在medium上，標(biāo)題是：Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade
如果您想獲得一份出色的JavaScript工作，或者想跟上2020及今后10年的重要技術(shù)，那這篇文章你找對(duì)了。本文的目的不是要告訴你哪些技術(shù)棧和框架是“最好的”或者最受歡迎的技術(shù)，而是要介紹一下哪些技術(shù)棧和框架能為你在2020年及今后拿到一份好工作提供最佳機(jī)會(huì)。
我們會(huì)研究各種來源的數(shù)據(jù)：
按照主題跟蹤Google Search趨勢(shì)
State of JS Survey的數(shù)據(jù)
Stack Overflow Survey調(diào)查
Npm下載量
匯總的職位發(fā)布情況
這些指標(biāo)都不完美，但就我們的目的而言，npm下載量和職位發(fā)布情況最為重要，當(dāng)我們把這些指標(biāo)匯總起來看的時(shí)候，就能清晰一致地描繪出JavaScript技術(shù)的版圖和趨勢(shì)。根據(jù)這些指標(biāo)來選擇要學(xué)習(xí)什么框架是個(gè)好主意嗎？那要取決于你的目標(biāo)是什么。
既然我們有一個(gè)明確的目標(biāo)——為求職者尋找學(xué)習(xí)的投資回報(bào)率——那這項(xiàng)任務(wù)就比告訴每個(gè)人什么是最好的要容易多了。盡管沒有對(duì)所有目的而言都是最佳的東西，但客觀地定義什么能為你實(shí)現(xiàn)特定的具體目標(biāo)提供最大的機(jī)會(huì)還是比較容易的。我們不妨看一些數(shù)據(jù)。
在你開始太過操心技術(shù)棧之前，還是請(qǐng)先學(xué)習(xí)好JavaScript以及怎么用它來編寫軟件吧。如果你還沒有辦法解釋什么是函數(shù)組合，什么是對(duì)象組合，什么模塊，請(qǐng)從此處開始（https://medium.com/javascript-scene/composing-software-the-book-f31c77fc3ddc）。一切軟件開發(fā)都是組合：我們把一個(gè)龐大而復(fù)雜的問題分解成可以用軟件的建構(gòu)塊（函數(shù)、對(duì)象、模塊等）解決的小問題。然后再把這些解決方案組裝成我們的應(yīng)用。我們的2020就先從充分了解JavaScript和軟件組合開始吧。
我喜歡npm下載量這個(gè)指標(biāo)，因?yàn)樗軌蚝芎玫卣f明框架使用的活躍度*。業(yè)界常用的框架中下載量方面的得分會(huì)高得離譜，因?yàn)橛脩羰窃诒镜貦C(jī)器上跑npm install的。
注：此處并不包括jQuery ，因?yàn)楹芏鄇Query 項(xiàng)目都是不用npm的老項(xiàng)目，所以不管怎樣它都會(huì)被嚴(yán)重低估。把Svelte放進(jìn)來是為了讓大家看看它在市場(chǎng)當(dāng)中的相對(duì)地位如何，并解釋為什么它會(huì)缺席圖表的其他地方——因?yàn)檫€沒有足夠的數(shù)據(jù)可供Svelte做出有意義的展示。比方說，Google搜索趨勢(shì)里面還沒有這個(gè)主題。
此圖統(tǒng)計(jì)了目前提到了某個(gè)特定框架的職位空缺。*
按UI框架統(tǒng)計(jì)的崗位需求
跟去年相比，React的領(lǐng)先優(yōu)勢(shì)擴(kuò)大了，而Angular和jQuery都輸給了Vue 。這個(gè)餅圖顯示了每個(gè)框架的相對(duì)就業(yè)市場(chǎng)份額：
頂級(jí)框架在工作市場(chǎng)的份額
2019年，JavaScript開發(fā)人員的平均工資再次上漲，從11.1萬美元年收入增加到11.4萬美元。
*統(tǒng)計(jì)方法：在Indeed.com上搜索求職情況。為了消除假陽性，我把搜索跟關(guān)鍵字“軟件”進(jìn)行配對(duì)以增強(qiáng)相關(guān)性，然后乘以?1.5（這大概是編程崗位列表中使用了“軟件”與與不使用“軟件”的之間的差異。 ）所有搜索結(jié)果頁均按日期排序，并抽查過相關(guān)性。這里得出的數(shù)字不是100％準(zhǔn)確的，但是對(duì)于本文來說，這種精度已經(jīng)足夠好了。
就像你可能會(huì)想到的那樣，搜索興趣*多少反映出就業(yè)市場(chǎng)的份額情況，但有一些有趣的差異。我們可以清楚地看到，從2017年到今天，大家對(duì)jQuery的興趣正在減弱，而對(duì)Vue.js的搜索興趣出現(xiàn)了強(qiáng)勁增長(zhǎng)。以下是搜索的份額情況：
跟招聘廣告一樣，React有很大的領(lǐng)先優(yōu)勢(shì)，吸引了前端框架36％的搜索量，其次是Angular（約27％）和jQuery （25％）。對(duì)Vue.js的搜索興趣比其在招聘市場(chǎng)的份額要大得多，但該數(shù)據(jù)通常與排名中的招聘市場(chǎng)數(shù)據(jù)一致。看來我們已經(jīng)成功地證實(shí)了這一點(diǎn)。
*研究方法：所有術(shù)語、數(shù)據(jù)均按主題而不是搜索字收集，以便從無關(guān)的關(guān)鍵字匹配中排除掉假陽性。
跟其他受歡迎但使用不那么廣泛的框架（比方說Svelte或Vue，這兩個(gè)的滿意度排名都很高，但行業(yè)采用率相對(duì)較小）相比，更多的崗位要找的是具備React技能的人。
學(xué)習(xí)Svelte或Vue 可能顯得很酷——但是，如果你的目標(biāo)是找到一份工作的話，如果你先去學(xué)習(xí)React就會(huì)有更好的機(jī)會(huì)。
盡管如此，Svelte和Vue 在《State of JavaScript 2019》調(diào)查當(dāng)中都獲得了很高的用戶滿意度分?jǐn)?shù)。在過去，React的用戶滿意度得分高預(yù)示著會(huì)搶占當(dāng)時(shí)占主導(dǎo)地位但滿意度得分相對(duì)不高的Angular的份額。
2019年，React的用戶滿意度排名最高，用戶滿意度達(dá)到了89％。緊隨其后的是Svelte（88％）和Vue.js（87％，低于去年的91％）。Svelte或Vue 不太可能搶奪太多的React用戶，但是還有有很多的Angular和jQuery 用戶可能會(huì)變節(jié)轉(zhuǎn)投Svelte或Vue ，從而在2020年推動(dòng)這兩個(gè)框架取得進(jìn)一步的強(qiáng)勁增長(zhǎng)。
可以肯定的是，掌握React會(huì)增加你在2020年找到并保住好工作的幾率。
毫無疑問，過去幾年的時(shí)間里TypeScript的增長(zhǎng)非常迅速，根據(jù)State of JavaScript調(diào)查，89％的TypeScript 用戶會(huì)再次選擇使用這門語言，有66％的受訪者要么用過TypeScript ，要么對(duì)使用TypeScript感興趣（略低于去年的71％）。
但是，盡管大家對(duì)TypeScript很感興趣，且使用率似乎也在迅速增長(zhǎng)，但是招聘市場(chǎng)對(duì)具備TypeScript經(jīng)驗(yàn)的要求還不高。只有約7％的JavaScript招聘廣告的崗位描述中提到了TypeScript。當(dāng)然這可能會(huì)低估了對(duì)TypeScript 職位的需求情況，因?yàn)檎衅附?jīng)理一般預(yù)期JavaScript開發(fā)人員掌握起TypeScript來不會(huì)有太大麻煩 所以有可能不會(huì)在崗位描述中提及TypeScript 。
但我個(gè)人堅(jiān)持認(rèn)為學(xué)TypeScript這門語言的投資回報(bào)率可能會(huì)比較低，甚至是負(fù)的。這有可能會(huì)降低而不是提高生產(chǎn)率，并且，如果您已經(jīng)有TDD，代碼審查和設(shè)計(jì)審查等很好的漏洞預(yù)防措施的話，則用TypeScript編程不太可能會(huì)帶來顯著的減少漏洞的好處。
話雖如此，并不缺少對(duì)TypeScript的熱愛，所以你當(dāng)然不應(yīng)該怕它，或者因?yàn)槿思矣玫氖荰ypeScript 而不是JavaScript而拒絕別人求職。由于TypeScript 是JavaScript的超集，所以從JavaScript轉(zhuǎn)到學(xué)TypeScript并不像學(xué)習(xí)完全不同的語言那樣具有挑戰(zhàn)性。
想在2020年的就業(yè)市場(chǎng)競(jìng)爭(zhēng)中脫穎而出你也許不需要學(xué)習(xí)TypeScript，但是TypeScript 引擎相當(dāng)有用，哪怕對(duì)于標(biāo)準(zhǔn)JavaScript也是如此。
我每天用Visual Studio Code的時(shí)候都用他來給標(biāo)準(zhǔn)JavaScript 提供智能感知。甚至還可以利用JSDoc （TypeScript引擎可理解并解釋這種類型注釋）或外部d.ts 文件來增強(qiáng)這種智能感知，VS Code會(huì)自動(dòng)獲取你所使用的模塊的TypeScript 定義。
注：用TernJS 和Atom這么多年我也一直享受著類似的好處，但是這種結(jié)合缺乏TypeScript 引擎+ VS Code 的維護(hù)性和社區(qū)支持。
如果你還沒用過Visual Studio Code，你可以先試用一下VS Code。順便說一句，VS Code在JSState調(diào)查受訪者心目當(dāng)中是JavaScript IDE市場(chǎng)的領(lǐng)導(dǎo)者，占有57％的市場(chǎng)份額（其次是WebStorm ，占有14％的市場(chǎng)份額）。
Redux 在狀態(tài)管理器的競(jìng)賽中仍然具有領(lǐng)先優(yōu)勢(shì)，但是GraphQL 和Apollo在滿意度和興趣方面是增加的。預(yù)計(jì)2020年GraphQL會(huì)繼續(xù)保持增長(zhǎng)。
話雖如此，哪怕你用的是GraphQL ，我仍然認(rèn)為使用Redux 狀態(tài)管理有充分的理由，而且我認(rèn)為即使不用框架，每個(gè)人都將從學(xué)習(xí)Redux中受益。
GraphQL 是近年來流行的查詢語言。它的語法簡(jiǎn)單，但是由于它是跨整個(gè)技術(shù)棧使用的，而且學(xué)這個(gè)東西意味著必須學(xué)習(xí)怎么把它連接到數(shù)據(jù)存儲(chǔ)層，因此集成可能會(huì)令人生畏——但這是值得付出的努力。
GraphQL 不會(huì)在短期內(nèi)完全取代JSON REST API，但是它在2019年的增長(zhǎng)甚至變得更快了，我預(yù)計(jì)這種強(qiáng)勁的增長(zhǎng)會(huì)持續(xù)到2020年。
Express 是主導(dǎo)性的Node框架，用戶滿意度很高，2020年Express不會(huì)遇到重大的挑戰(zhàn)者，但是隨著無服務(wù)器（serverless）的興起，我預(yù)計(jì)在新的十年到來之際，Express的統(tǒng)治地位會(huì)逐漸下滑。
Next.js是一個(gè)一開始建構(gòu)在Express基礎(chǔ)之上的全棧React框架，但此后已從Express轉(zhuǎn)換到到無服務(wù)器和靜態(tài)優(yōu)化，然后就像瘋了一樣發(fā)展起來。
當(dāng)我們把EricElliottJS.com從Express換到無服務(wù)器的Next.js時(shí)，我們的托管費(fèi)用降低了90％，而且頁面加載速度也加快了。所以我再怎么強(qiáng)烈推薦這個(gè)都不夠。我們現(xiàn)所有的應(yīng)用都是用Next.js和Zeit 托管的。
Jest和Cypress分別單元測(cè)試和功能測(cè)試最受歡迎的工具，但是我個(gè)人非常喜歡RITEWay 和TestCafe 。RITEWay 是單元測(cè)試之禪 ：一個(gè)始終回答了每個(gè)單元測(cè)試必須要回答的5個(gè)問題的測(cè)試框架。
跟Cypress一樣，TestCafe也是一種功能測(cè)試工具，這個(gè)工具不需要你跟Selenium糾纏不清，但是擁有更好的跨瀏覽器支持和一個(gè)很酷的測(cè)試記錄器/ IDE。我強(qiáng)烈建議QA小組試試TestCafe 。
Lodash 、Ramda 、Immer、Redux以及RxJS都是我經(jīng)常使用的函數(shù)工具。
Ramda在 2019年進(jìn)步神速，它提供了一些Lodash 所沒有的工具，比如lenses（透鏡）和transducer（變形器）。RxJS通過pipeable運(yùn)算符提供transducer風(fēng)格的函數(shù)性。
Immer使得在不改變JavaScript對(duì)象的情況下對(duì)其進(jìn)行操作變得很容易。而Redux 是一種狀態(tài)管理工具。
在接下來的十年時(shí)間里，有幾種新興技術(shù)即將對(duì)人類生活產(chǎn)生巨大影響。以下是這些技術(shù)最新發(fā)展情況的概要：
AI
人工智能也許是有史以來最具變革性的技術(shù)。不同的學(xué)者和自以為是的億萬富翁都把AI說成是奇跡般的烏托邦，或者人類的終結(jié)。
這肯定是我們所知的人類的終結(jié)，但也可能是人類與機(jī)器之間美好合作的開始。我們才剛剛開始瞥見AI可能會(huì)變成什么樣子。其中有些令人恐懼（比方說深度偽造），而另一些則非常有用（比方說Adobe Premiere對(duì)視頻編輯的新的auto-reframe功能）。事實(shí)上，到目前為止，人工智能既極其可怕又極其有用。人工智能會(huì)繼續(xù)制造一些令人恐懼的事情，但是通過人工智能改善人類生活的潛力是巨大的。潘多拉的盒子已經(jīng)打開，再也無法關(guān)閉，所以我希望你善加利用好AI，用來解決重要問題和改善生活。
2019年在AI領(lǐng)域取得了許多重要突破。近年來，研究團(tuán)隊(duì)一直在各種視頻游戲領(lǐng)域爭(zhēng)相實(shí)現(xiàn)超人的表現(xiàn)，但有些游戲類型對(duì)AI來說仍然充滿挑戰(zhàn)，比方說像《星際爭(zhēng)霸》II這樣的策略游戲。DeepMind的AlphaStar程序利用跟人類玩家能用到的相同資源，在Battle.net官方服務(wù)器實(shí)現(xiàn)了大師級(jí)的水平。《星際爭(zhēng)霸》是一款復(fù)雜的游戲，需要進(jìn)行長(zhǎng)期的策略思考，這種能力曾經(jīng)被認(rèn)為是AI所不能及的。戰(zhàn)略思維代表了通向通用AI道路上的一個(gè)重大的里程碑。
如果說把資源用到游戲上看起來似乎很愚蠢的話，不妨想想DeepMind 這樣的項(xiàng)目在文本轉(zhuǎn)語音方面也取得了令人難以置信的進(jìn)步， AI代理和私人助理被賦予了表現(xiàn)更自然的聲音，但同樣重要的是，通過這樣可以把聲音還給那些失聲的人。
人工智能還被用來診斷癌癥，預(yù)測(cè)蛋白質(zhì)折疊（可用于了解疾病和發(fā)現(xiàn)新藥），恢復(fù)殘疾人的肢體控制，生成逼真的圖像等。
無人車
無人車在變革性AI技術(shù)當(dāng)中應(yīng)該有自己的一席之地。這個(gè)生態(tài)體系的大玩家主要包括Cruise、Uber、Waymo、Nuro\Aurora以及福特等。這項(xiàng)技術(shù)仍處在初級(jí)階段，過分樂觀已給這個(gè)行業(yè)帶來了真正的問題，但毫無疑問，2020年代我們將見證超越人類水平的自動(dòng)駕駛能力。2015年我曾對(duì)自動(dòng)駕駛技術(shù)做出過預(yù)測(cè)：
“到2045年的時(shí)候，一倆人開的車看起來會(huì)像馬拉的雙輪單座車一樣。”
現(xiàn)在距離這一預(yù)測(cè)已過去5年，我想我可能低估了自動(dòng)駕駛汽車進(jìn)入市場(chǎng)的速度。Waymo的車在2018年的行駛里程超過了100萬英里，美國(guó)已經(jīng)有24座城市的道路上有無人車上路。現(xiàn)在我的預(yù)測(cè)是到2025年，多個(gè)制造商將會(huì)推出多種L5級(jí)（全自動(dòng)）的車型。請(qǐng)密切關(guān)注Tesla、通用、福特及寶馬的表現(xiàn)。
在過去十年的時(shí)間里，AI研究論文的出版量增長(zhǎng)了10倍，現(xiàn)在，AI正在把實(shí)用、有用的工具交到主流用戶手中，預(yù)計(jì)這種趨勢(shì)在未來十年仍將持續(xù)。
我們已經(jīng)開始看到AI能做到一些幾年前大多數(shù)人都不敢相信的事情。預(yù)期AI在2020年代會(huì)取得更大的奇跡。
區(qū)塊鏈和加密貨幣
2019年對(duì)于區(qū)塊鏈和加密貨幣來說是具有里程碑意義的一年。區(qū)塊鏈技術(shù)開始進(jìn)入主流。我預(yù)計(jì)2020年會(huì)有更大的發(fā)展并為主流所采用。
對(duì)用戶友好，實(shí)現(xiàn)無需許可，無需銀行的借貸的DeFi （去中心化金融）出現(xiàn)了爆發(fā)式增長(zhǎng)。目前，有6.5億美元（包括4.5億美元的無銀行貸款）被鎖定進(jìn)DeFi 合同里面，而2019年是該技術(shù)出現(xiàn)的元年。隨著越來越多的人投資于加密貨幣，我預(yù)計(jì)將來會(huì)出現(xiàn)更多有加密支持的DeFi 貸款。
大家可以在不犧牲自己的加密貨幣投資機(jī)會(huì)成本的情況下獲得流動(dòng)性，或利用DeFi貸款對(duì)加密貨幣進(jìn)行杠桿投資（投資的風(fēng)險(xiǎn)/回報(bào)均增加了）。
加密貨幣和區(qū)塊鏈技術(shù)正在突破主流。比特幣和以太坊的日活地址在2018年1月達(dá)到了頂峰，隨后一年，由于市場(chǎng)下跌，大家的興趣變?nèi)趿耍可蠞q10倍之后，加密貨幣的價(jià)格就會(huì)大幅回落，然后又會(huì)在下一個(gè)周期攀爬到比上一個(gè)高峰高出10倍的新高）。
比特幣和以太坊區(qū)塊鏈上的日活地址數(shù)
Square的Cash App的Android下載量已超過1000萬次，在有著出色UX的簡(jiǎn)單app里面，用戶可以購買，出售，接收比特幣。
Coinbase 的Android下載也超過一千萬。
Brave推出了內(nèi)置的以太坊錢包，月活用戶數(shù)一下子從2019年10月的870萬增加到11月底的1040萬。
因?yàn)橛辛薙liver.tv和DLive，2000萬視頻游戲迷正在利用Theta網(wǎng)絡(luò)進(jìn)行去中心化的流媒體直播。
2019年我最喜歡的進(jìn)展是Fortmatic 的推出。不管你是不是在開發(fā)加密應(yīng)用，你都可以用Fortmatic來替換用戶身份驗(yàn)證并提高安全性，并且擺脫被供應(yīng)商鎖定，還可以增加諸如端到端加密，簽名交易等功能。
如果你打算在2020年開發(fā)新應(yīng)用，不妨考慮一下Fortmatic，而不是再得輸入自己的用戶名/密碼進(jìn)行身份驗(yàn)證（2020年沒人應(yīng)該再這樣做了），或者把身份驗(yàn)證這件事交給Google、Facebook等。
我曾經(jīng)寫過一篇文章討論如何利用加密技術(shù)來改善應(yīng)用的身份驗(yàn)證和安全性。我很期待在2020年能看到主流應(yīng)用開始采用Fortmatic等技術(shù)。
2019年以太坊輕松贏下了智能合約平臺(tái)大戰(zhàn)的勝利。我預(yù)計(jì)2020年以太坊仍將繼續(xù)占據(jù)主導(dǎo)地位。
擴(kuò)展現(xiàn)實(shí)（XR）
自2015年以來，我每年都對(duì)AR未來充滿希望我，從小就夢(mèng)想著它的實(shí)現(xiàn)。將來，XR將會(huì)取代手機(jī)。這只是個(gè)時(shí)間問題。需要多長(zhǎng)時(shí)間仍然有待討論，但似乎這種轉(zhuǎn)變可能會(huì)在未來十年內(nèi)出現(xiàn)。甚至可能在未來5年內(nèi)開始。
隨著VR與AR之間的界限逐漸模糊，該行業(yè)現(xiàn)在正在把整個(gè)領(lǐng)域泛指為XR（擴(kuò)展現(xiàn)實(shí)）。自問世以來，ARKit 和ARCore （分別是蘋果和Google的增強(qiáng)現(xiàn)實(shí)SDK）自引入以來已取得了長(zhǎng)足的發(fā)展。月活用戶數(shù)已從2017年的4700萬增長(zhǎng)到2019年5月的1.5億。
WebAR 在2019年已站穩(wěn)了腳跟，2020年很可能會(huì)繼續(xù)發(fā)展。如果你對(duì)此感到好奇的話，不妨看看AR.js、React 360或Viro React。
硬件也取得了很多進(jìn)展。2016年推出的Hololens 1大概是5000美元。自此之后又發(fā)生了什么呢？
Hololens 2的價(jià)格仍然高達(dá)3500美元，他們還沒有為消費(fèi)者準(zhǔn)備。剪切、SLAM（實(shí)時(shí)定位與地圖構(gòu)建）及視野等方面仍然存在問題。你不會(huì)想一整天都戴著這樣的東西。但是，因?yàn)楝F(xiàn)在它的定價(jià)是每月99美元上手個(gè)開發(fā)者工具包還是有可能的，雖說你得在等待名單上等一段時(shí)間。
無人機(jī)
在美國(guó)已經(jīng)售出了大約200萬架無人機(jī)，它們已經(jīng)改變了建筑，地理調(diào)查，制圖，電影，航空攝影，農(nóng)業(yè)，環(huán)境科學(xué)和娛樂等領(lǐng)域。2020年商用無人機(jī)物流配送最終可能在美國(guó)成為現(xiàn)實(shí)。
FPV無人機(jī)比賽是我最喜歡的觀賞運(yùn)動(dòng)，還有Drone Racing League直播賽事。如果你想了解它是什么樣的，他們還提供了精心設(shè)計(jì)的模擬器。
所有這些新的無人機(jī)活動(dòng)均需要大量軟件支持，包括圖像處理，無人機(jī)地圖軟件，物流飛行規(guī)劃，遙測(cè)記錄和處理，分析，行業(yè)應(yīng)用集成等。
這跟AI也有很多重合之處——自主飛行的無人機(jī)需要圖像處理，碰撞避免等。
2010年代為我們提供了大量變革性技術(shù)，其中許多我們已經(jīng)視為理所當(dāng)然，但其實(shí)是產(chǎn)生了巨大影響的：
Spotify
虛擬助手
無線耳機(jī)
主流VR
增強(qiáng)現(xiàn)實(shí)（熱門游戲“精靈寶可夢(mèng)”就用這個(gè)）
經(jīng)濟(jì)實(shí)惠的Tesla
共享經(jīng)濟(jì)（汽車，電動(dòng)滑板車，自行車）
主流平板電腦
主流生物識(shí)別技術(shù)（觸摸ID，面部ID）
眾籌
我已經(jīng)迫不及待想看看你在新的十年會(huì)創(chuàng)造出什么樣的東西。
開始表演你的魔術(shù)吧。
譯者：boxi。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
