Ghiduri populare ca YouMightNotNeedJQuery.com și Nu aveți nevoie de Lodash / Underscore au provocat practicile comune din industrie.

Această postare nu este la fel de sălbatică ca, să zicem, YouMightNotNeedJS.com, dar elaborează transpilația și explică de ce s-ar putea să nu fie atât de necesar în viitorul apropiat.

StatCounter adună date despre 15+ miliarde de pagini afișate în fiecare lună de la 2,5 milioane de site-uri web pe tot globul. Din mai 2017, acesta este statu quo-ul:

Este posibil sa nu fie nevoie sa va transpileti JavaScript
Cota de piață a browserului din mai 2017 în%

Lucrul care face această diagramă interesantă este că primele 3 browsere (Chrome, Safari și FireFox) sunt vesnic verde, ceea ce înseamnă că 74% dintre utilizatori primesc automat cea mai recentă versiune a browserului lor.

Să vedem dacă această presupunere este corectă.

Iată cele mai bune versiuni de browser de pe piață:

1611988090 529 Este posibil sa nu fie nevoie sa va transpileti JavaScript
Distribuțiile versiunii browserului conform StatCounter

Chrome 58 a fost eliberat cu mai puțin de o lună în urmă, iar versiunea sa pentru desktop deține 12,77% din cota de piață globală a browserelor. Chrome 57 a fost lansat cu doar 42 de zile înainte, iar versiunea sa pentru desktop deține 9,96% din piața globală a browserelor. Din păcate, StatCounter nu face diferența între versiunile cromate de pe platformele mobile, dar presupunând același raport ca desktopul, ajungem la:

1611988090 514 Este posibil sa nu fie nevoie sa va transpileti JavaScript
Toate versiunile de crom de pe piață (până la

Ce înseamnă codul meu?

Conform Tabelul de compatibilitate ES cea mai recentă versiune a tuturor browserelor majore are un suport foarte bun pentru funcțiile ES6:

1611988091 253 Este posibil sa nu fie nevoie sa va transpileti JavaScript
Toate browserele majore au un suport ES6 foarte bun

Cu alte cuvinte, dacă transpuneți JavaScript în ES5, vă faceți codul inutil de mare și lent pentru a sprijini o minoritate de utilizatori care probabil își vor actualiza sistemul până când veți reuși să vă configurați Webpack-ul și Babel! ?

De ce ai transpile încă?

Este posibil să doriți să vă transpileți codul, dar, sperăm, după ce ați cântărit dezavantajele și avantajele sau posibilele alternative:

  • Folosiți React JSX (care este destul de popular în acest moment, așa că presupun că mulți dezvoltatori se încadrează în această categorie). JSX la bază este un transformare de cod XHTML la JS și nu este necesar un transpilator complet ca Babel. În plus, dacă tot ce ai nevoie este VirtualDom, folosește asta în schimb.
  • Doriți să încercați cele mai recente caracteristici ale limbii. Cu excepția cazului în care faceți parte din TC39 sau aveți o dorință aprinsă de a injecta caracteristici de limbaj instabile în codul de producție, probabil că sunteți bine cu ES6. În zilele noastre avem un limbaj decent, majoritatea browserelor și nevoia de transpile se estompează.
  • Folosiți TypeScript și, sperăm a cântărit contra și pro. Compilatorul TypeScript, atunci când vizează o versiune modernă a ES6, elimină mai ales informațiile de tip decât să transforme sintaxa.
  • Vrei să reduci dimensiunea codului folosind tremurarea copacilor (Iată cum se face în webpack și rulează). Doriți să vă ascundeți codul sau să reduceți dimensiunea acestuia prin reducere. Doriți să excludeți condiționat o parte din cod. Acest lucru necesită o analiză statică a codului. Puteți utiliza un pachet inteligent pentru servicii de producție sensibile la dimensiuni, cum ar fi dispozitivele mobile, dar vom vedea evaluări mai atente ale costurilor atunci când vom crea astfel de implementări alternative. Aceste tipuri de analize de cod static vor continua să fie utile ca „tehnici avansate de optimizare” pentru codul de producție. Tu nu trebuie să micșorați-vă fișierele. UglifyJS nu poate minimiza ES6 în acest moment (deși există o ramură harmoney), dar Babili se poate descurca. Algoritmii de compresie fac o treabă destul de decentă (nu atunci când fișierele sunt prea mici) și dacă nu expediați un sistem de operare în fiecare încărcare a paginii, ar trebui să funcționeze bine fără compresie. În prezent, imaginile și conținutul multimedia necesită mult mai multă lățime de bandă decât codul.
  • Vrei elefantul din cameră:
1611988091 324 Este posibil sa nu fie nevoie sa va transpileti JavaScript

NPM este cel mai mare manager de pachete pe planetă. Majoritatea aplicațiilor web non-banale folosesc un anumit cod de la NPM și asta implică utilizarea unui pachet de module. Asta se va schimba în curând! Chrome acceptă deja module ES6 în Canar (Chrome 60 va livra oficial această caracteristică în luna august) și Safari este aproape de a-l expedia în timp ce Firefox și Edge lucrează la asta.

in afara de asta HTTP / 2 permite împingerea voluntară a resurselor către browser. Asta înseamnă dacă a.js se importă b.js și c.js, serverul poate împinge b.js și c.js de fiecare dată a.js este preluat, ceea ce minimizează timpul dintre solicitări. Aceasta este, desigur, o vizualizare simplificată, deoarece în practică browserul ar putea avea deja b.js și c.js în cache-ul său. HTTP / 2 este acceptat în majoritatea browserelor.

Viitorul fără Transpilație

Având în vedere statisticile de mai sus, acest lucru înseamnă că 2018 va fi anul în care majoritatea aplicațiilor web pot scăpa de pachetele de module sau transpilere.

Transpilația este o soluție. Am fi putut să o facem prea mult timp pentru a ne obișnui, dar gândiți-vă la asta. „Compilăm” un limbaj „interpretat” într-un limbaj „interpretat”! In afara de asta:

  • Configurarea Webpack / Browserify este o taxă inutilă în multe cazuri
  • Depanarea folosind surcemap-uri este întotdeauna mai dificilă decât depanarea script-ului real care se execută (oricine s-a distrat încercând să depaneze this sau variabile când sursele de hărți nu funcționează corect?)
  • Omoară DX atunci când trebuie să așteptați câteva secunde (uneori jumătate de minut) după fiecare editare pentru a vedea cel mai recent cod. Hot Module Reloading (HMR) este un răspuns la acest lucru, dar nu este întotdeauna ușor și rapid de configurat. Fără transpilare, tot ce trebuie să faceți este să reîmprospătați pagina și în mai puțin de o secundă ultima dvs. pagină este acolo!

În luna august, când sunt livrate module ES6, unele tipuri de aplicații nu vor folosi deloc transpilarea:

  • Extensii Chrome
  • Aplicații desktop electronice
  • Aplicații web B2B care sunt create pentru a fi conduse de utilizatori de afaceri care au deja unelte bune furnizate de companie

Când transpilarea devine un lucru din trecut, biblioteci cu sintaxă Hyperscript va aduce ideile React la POJS (JavaScript simplu, vechi, care nu este transpus și ușor de depanat pe consolă).

Nu transpile, dar compilează pe bune!

WASM este noul copil din oraș și este ținta oficială de compilare care promite viteză de execuție mai mare și dimensiune mai mică a codului. În prezent Chrome și Firefox acceptă WASM, dar există un consens bun între marii furnizori de browsere că WASM va fi timpul de execuție comun al viitorului. Dacă ai Chrome, poți incearca.

Dacă sunteți genul de dezvoltator care mănâncă după ceva nou, aruncați o privire Rugini. Aceasta compilează în WASM dar nu se limitează la web. Oamenii îl folosesc de fapt pentru a scrie sistem de operare sau motor browser. Pe lângă dezvoltatorii C / C ++ din vechime aprobă și îți place și are o comunitate foarte primitoare.

Câteva note

  • Potrivit fostului CTO Mozilla Chrome a câștigat și este puțin probabil să existe un alt război al browserului. Interesant este că Chrome a câștigat-o cu meritocrație. Este open source și Google a definit clar ce informații culege de la utilizatori. Chrome câștigă chiar și utilizatorii de afaceri care folosesc în mod tradițional Windows. Cu toate acestea, în timp ce utilizatorii finali aleg Chrome datorită vitezei, securității și simplității sale, programatorii adoră instrumentele sale pentru dezvoltatori. Google are un rol activ în TC39, care conduce viitorul JavaScript și, în general, este cel mai puternic susținător al platformei web, chiar dacă poate concura cu propriul său sistem de operare mobil. Nu numai asta, dar și Google își ajută concurenții. Google a fost unul dintre cei mai mari susținători financiari ai Mozilla și ai săi motor de redare este folosit de Opera.
  • Microsoft oficial a renunțat la asistență pentru IE acum aproximativ 17 luni. IE 11 va primi în continuare actualizări de securitate până în 2025, dar depinde de dvs. să decideți cheltuielile resurse semnificative pentru a accepta un browser pe care îl folosește doar 3,24% din piață. De asemenea, rețineți că Edge este browserul implicit în Windows 10. Dacă cineva nu dorește să-și actualizeze Windows-ul la cea mai recentă versiune, cea mai recentă WannaCrypt atac probabil le oferă un motiv să reconsidere! Personal mă interesează orice cercetare de piață privind veniturile provenite din acest segment de clienți.
  • Apple a pus un set de restricții neloiale pentru a ține ceilalți furnizori de browsere în afara platformei lor iOS. De exemplu, Chrome pe iOS este limitat din punct de vedere tehnic la anumite părți ale motorului Safari! Safari a fost noul IE, până în 2016, au făcut o treabă bună și au devenit browserul cu cel mai bun suport ES6:
1611988091 260 Este posibil sa nu fie nevoie sa va transpileti JavaScript
Lansat acum 16 luni, Safari 10 a adus un nivel bun de suport ES6 pe platformele iOS

În general, ponderea globală a iOS / Safari este mai mică decât Android / Chrome. Acesta variază în funcție de țară, de exemplu, în țările mai bogate iOS are o penetrare puțin mai mare, în timp ce în lumea în curs de dezvoltare Android este câștigătorul absolut, dar la nivel global iată statisticile:

1611988091 820 Este posibil sa nu fie nevoie sa va transpileti JavaScript
Partajare globală a browserului pentru Android și iOS

Apel la acțiune!

Dacă aveți vârsta suficientă, probabil că vă amintiți zilele enervante în care unele site-uri web au forțat (sau au sugerat politicos) browserul ales (în principal IE):

Este posibil sa nu fie nevoie sa va transpileti JavaScript

Nu vrem să facem asta! Indiferent cât de încântați suntem de Chrome, nu vrem să ignorăm 46% din traficul web care nu este redat de Chrome.

Doar pentru că s-ar putea să avem asistență pentru module ES6 în browsere în curând, nu înseamnă că putem scăpa de un proces de compilare și de o „strategie de pachet” adecvată. – Stefan Judis

Vom avea întotdeauna oameni blocați cu un browser vechi în firmware-ul televizorului sau în sistemul de infotainment al mașinii. Vom avea întotdeauna acel bunic încăpățânat care nu vede nevoia să investească în modernizarea mașinii sale doar pentru a o lăsa ca moștenire. Copiii vor continua să utilizeze iPhone-ul sau tableta veche a părinților și 1 laptop per copil nu va crește o anumită putere de procesare peste noapte. Nu vrem să blocăm pe nimeni.

Totuși, aceasta nu este o problemă nouă. În ciuda faptului că ES6 este una dintre cele mai mari schimbări de pe web, degradare grațioasă poate oferi în continuare o anumită utilizare pentru minoritate ținând în același timp sub control majoritatea costurilor de dezvoltare.

Într-o postare viitoare voi discuta latura practică a modului de expediere a codului modern în timp ce am un plan de rezervă pentru degradarea grațioasă. Poți să mă urmărești pe Twitter sau Medium pentru a fi la curent.

PRIMĂ: Aruncăm o privire la JS Codeshift. Este un CLI pentru conversia codului javascript vechi în cod javascript nou, actualizând chiar și apelurile vechi ale bibliotecii javascript la cel mai recent API. Încearcă să păstreze cât mai mult stilul original. Flux de lucru: după ce ați efectuat modificările la controlul versiunii, executați acest lucru și faceți o comparație amănunțită și rulați testele automate și manuale. Terminat!

Actualizare 1 (2017-09-8): Chrome 61 a aterizat acum câteva zile, cu suport complet al modulului ES6. Are 54% din piața globală a browserelor. Safari (14% din piața globală) a acceptat module ES6 pentru o vreme.

Actualizare 2 (2017-09-10): puteți suporta în continuare browsere care nu acceptă module ES6 datorită acest truc pt nomodule src = ”compiled.js”> <; / script>. Atributul nomodule le spune browserelor cu suport pentru modulul ES6 să nu încarce scriptul. Pe Safari există câteva avertismente pe care le puteți citi în pagina care vorbește despre truc. Read spec.

Actualizare 3 (2017-09-12): Modulele ES6 acceptă terenurile în browsere: este timpul să regândim gruparea?

Actualizare 4 (2017-09-12): modulul sunt amânaroșu în mod implicit. Dacă doriți să ocoliți acest lucru, adăugați un asincron atributul etichetei script pentru a preveni Punct unic de eșec (SPOF).

Actualizare 5 (2017-09-13): Nodul LTS 8.5 acceptă module ES6 (numit ESM) în spatele unui steag când fișierul are un * .msj extindere. Iată un frumos intro despre modul în care sunt folosite.

Actualizare 6 (2017-09-22): Aici este un mare sfat practic pentru sprijinirea browserelor noi și vechi. Economiile de lățime de bandă pentru evitarea transpilării sunt grozave!

Actualizare 7 (2018-01-15): Lebab (reversul lui Babel) are un CLI pentru modernizarea Javascriptului în stil vechi. Acest lucru este un pic similar cu cel al Facebook CodeShift deoarece ambii modernizează codul vechi.

Cea mai răspândită eroare din istoria informaticii ne-a deschis o mare oportunitate! Citit De ce ar trebui să ne convingem utilizatorii să își actualizeze browserele?