Lehká modernizace JavaScriptu

Lehká modernizace JavaScriptu
« kdy: 17. 04. 2020, 10:02:07 »
Ahoj.
Chci začít nějaký nový vlastní hobby projekt, backend v klasice, frontend javascript - jen minimalisticky.
TypeScript - zásadně ne (nespamujte prosím na toto téma).
React, Vue - něco bych chtěl do budoucna, snad Vue, ale teď nedokážu najít čas se to naučit.
Takže asi jen jQuery a otázka k modernizaci je:
1) spouštět lokální nebo CDN/cloudovou verzi js knihoven?
2) je vhodné jít přes Babel a pracovat v nějaké moderní verzi js/ecmascriptu? Ve které? - což mi možná vyřeší i některou z následujících otázek?
3) jak nejlíp pracovat se šíleným javascriptovským this? Tady asi odpověď znám, jestli mě nenasměrujete ještě líp: (function() {..}).bind(this)
4) jak je dnes moderní a perspektivní js do html připojit? Jednotlivé js? Nebo bundlovat do velkého souboru a čím? Jak pracovat s externími jmény proměnných místo prastaré prasárny (jména z dříve spuštěných skriptů přístupná jako window.xxx). Používá se import? Nebo require?
Díky za tipy.


Re:Lehká modernizace JavaScriptu
« Odpověď #1 kdy: 17. 04. 2020, 10:42:43 »
Myslím že nebude ani třeba používat Babel, když ho snad všechny prohlížeče od roku 2018 podporují, i Node má podporu pro ECMAScript 6 (minimálně pro většinu věcí).

https://www.w3schools.com/js/js_es6.asp

Re:Lehká modernizace JavaScriptu
« Odpověď #2 kdy: 17. 04. 2020, 10:49:00 »
Ma dnes cenu pouzivat jquery? Vsechny prohlizece podporuji queryselektory, fetch api ...

Idris

  • *****
  • 2 263
    • Zobrazit profil
    • E-mail
Re:Lehká modernizace JavaScriptu
« Odpověď #3 kdy: 17. 04. 2020, 10:55:50 »
K tomu modernímu JS a Babelu - téměř všechny prohlížeče podporují přinejmenším ES2016, včetně obskurních jako Silk (ten u nás moc rozšířený asi není, ale jinde ano). Jediný nepodporující, na který jsem v poslední době narazil, je Safari na iOS 9, což jsou některé starší iPody, ale to už je taky předpotopní.

Re:Lehká modernizace JavaScriptu
« Odpověď #4 kdy: 17. 04. 2020, 10:59:24 »
V čem budete dělat ten backend? Mohl byste zkusit WebAssembly jako front end.


Re:Lehká modernizace JavaScriptu
« Odpověď #5 kdy: 17. 04. 2020, 14:40:47 »
3) jak nejlíp pracovat se šíleným javascriptovským this? Tady asi odpověď znám, jestli mě nenasměrujete ještě líp: (function() {..}).bind(this)

Dají se použít arrow functions. Tj. místo function (args) { body } a bindu psát args => { body }.

Imho je ale lepší to "šílené javascriptovské this" (resp. to okolo něj) pochopit. Super je série You Don't Know JS, pokud už není přečtená. :)

Re:Lehká modernizace JavaScriptu
« Odpověď #6 kdy: 17. 04. 2020, 15:20:01 »
Kodim v React/Vue + JS/TS (podla projektu) a tento prispevok mi pride ako keby som sa ocitol 3 roky dozadu...

- za posledne 3 roky som nenapisal snad ani jediny `this`, pred 4 rokmi (ked sa ES2016 este volal ES6) uz sme novych programatorov ucili, ze ak nemaju specialny dovod tak nerobit, vsade pouzivat arrow functions a tam je this porieseny ( () => {..}` je ekvivalent (function() {..}).bind(this) )...
- prave na hobby projekt mi pride ze je idealna moznost vyskusat nejaky novy framework..., react som sa ucil na hobby projektoch ked som robil s jQuery 5 rokov dozadu.., angular a vue na hobby projektoch za posledne 2-3 roky...

no a k tvojim otazkam (zober si z nich co chces)
1. ak viac cenis rychlost ako bezvypadkovu sluzbu, tak produkcny build CDN, na lokalny development urcite lokalne kopie nech nemas problemy kodit ak si na pomalej wifi / vo vlaku / whatever..
2/4a. prekladac / bundler podla vybrateho frameworku.. create-react-app, vue-cli alebo angular-cli v dnesnej dobe uz riesia vacsinu veci za teba a manualne setupovat veci si potrebujes iba ak potrebujes nieco nestandardneho nastavit..
2/4b. ak chces fakt ist bez frameworku, a nepotrebujes podporovat IE11 v dnesnej dobe vsetky najpouzivanejsie browsre (firefox, chrome, safari, edge) podporuju ES moduly a rozumnu podmnozinu ESnext, takze vacsinou nepotrebujes babel ani bundler a staci ti priamo pouzivat importy..
3. () => {} namiesto (function() {}).bind(this), idealne nepouzivat this vobec...


Re:Lehká modernizace JavaScriptu
« Odpověď #7 kdy: 17. 04. 2020, 16:09:11 »
jQuery bych už dnes nepoužíval. Není k tomu důvod, máme lepší nástroje. Šílenému this se vyhnete tím, že budete používat ES2016 a arrow funkce. Používejte importy – je to součástí standardu, na rozdíl od require to tedy má budoucnost. Bundler použijte nejlíp podle toho, co budete mít ve stacku s frameworkem. Teda nejlepší by bylo nepoužívat žádný bundler, už nějaký pátek tu máme HTTP/2. Jenže autoři bundlerů vám budou tvrdit, že i s HTTP/2 jsou potřeba (nejsou) – přišli by o práci. Takže je dnes těžké nakonfigurovat celý stack tak, abyste tam měl Babel, minifikaci apod., ale na rozdělení do souborů aby se nesahalo.

Mlocik97

  • *****
  • 683
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Lehká modernizace JavaScriptu
« Odpověď #8 kdy: 17. 04. 2020, 16:52:36 »
Použijte Svelte/Sapper, je to jednoduché ako jQuery, a zároveň rýchlejšie, kvalitnejšie. Popravde Svelte/Sapper sa naučíte za 40 minut úplne v pohode, a to môžete byť úplny začiatočník vo frameworkoch.

ZAJDAN

  • *****
  • 2 060
    • Zobrazit profil
    • E-mail
Re:Lehká modernizace JavaScriptu
« Odpověď #9 kdy: 17. 04. 2020, 17:07:42 »
Vážně je nutné ten JavaScript mít?
Zkuste popřemýšlet zda by stálo zato používat RubyOnRails, protože v nich vyřešíte jak backend tak frontend a je to mocný nástroj.
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.

Kit

  • *****
  • 661
    • Zobrazit profil
    • E-mail
Re:Lehká modernizace JavaScriptu
« Odpověď #10 kdy: 17. 04. 2020, 17:17:57 »
Vážně je nutné ten JavaScript mít?
Zkuste popřemýšlet zda by stálo zato používat RubyOnRails, protože v nich vyřešíte jak backend tak frontend a je to mocný nástroj.

Jak funguje RubyOnRails v prohlížečích?

Za mne by mohla být celá webová technologie v Lispu, protože je dokonalým jazykem, kterému ostatní nesahají ani po sériové rozhraní. Jenže v prohlížečích není Lisp, ale Javascript.

ZAJDAN

  • *****
  • 2 060
    • Zobrazit profil
    • E-mail
Re:Lehká modernizace JavaScriptu
« Odpověď #11 kdy: 17. 04. 2020, 17:28:31 »
otázkou je přesně chce tím javasciptem řešit, protože hodně těch pozlátek se dá řešit pomocí css
jinak Rails jsou na weby naprosto parádní
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.

Re:Lehká modernizace JavaScriptu
« Odpověď #12 kdy: 17. 04. 2020, 17:31:25 »
- za posledne 3 roky som nenapisal snad ani jediny `this`

To spíš vypovídá o práci než o `this`.

uz sme novych programatorov ucili, ze ak nemaju specialny dovod tak nerobit, vsade pouzivat arrow functions a tam je this porieseny ( () => {..}` je ekvivalent (function() {..}).bind(this) )...

Proč? Zvlášť pokud jsi `this` tři roky nenapsal, tak moc nedává smysl to řešit...

pred 4 rokmi (ked sa ES2016 este volal ES6)

Tady něco nesedí.

Re:Lehká modernizace JavaScriptu
« Odpověď #13 kdy: 17. 04. 2020, 17:44:51 »
Babel a TypeScript je 99% to isté - sú to transpilery novšieho EcmaScriptu do staršieho. Akurát TS má pár vychytávok ktoré babel zatiaľ nemá a Babel sa dá zase rozšíriť pomocou pluginov.

JQuery je najhoršia javascriptová knižnica s akou som kedy robil. Je to knižnica ktorá ide proti filozofii JS, ale keď to niekomu vyhovuje a miluje špagety jeho vec.
« Poslední změna: 17. 04. 2020, 17:47:13 od fortran1986 »

Re:Lehká modernizace JavaScriptu
« Odpověď #14 kdy: 17. 04. 2020, 18:43:45 »
Babel a TypeScript je 99% to isté
TypeScript je programovací jazyk. Babel je nástroj, transpiler, který umí překládat novější verze JavaScriptu a mimo jiné i TypeScript do starších verzí JavaScriptu (a pro starší prohlížeče).