NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Preco prejst z task managerov na module bundler - webpack?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Peas
Člen
Avatar
Peas:30.10.2017 23:39

Caute vsetci,

urcite uz mnohi z vas zaznamenali obrovsky boom okolo module bundlera Webpack. Mna by ale zaujimalo, preco by mohlo byt vyhodne prejst z klasickych task runnerov typu Grunt / Gulp na Webpack. Ved aj task runner dokaze prelozit lessko na cssko, es6 na es5, zbundlovat a zminifikovat skripty atd. Akosi mi unika vyznam dalsieho nastroja na trhu (webpacku), ale mozno len tomu spravne nerozumiem a velmi rad by som si vypocul radu niekoho kto s tym ma prakticke skusenosti. Dakujem :-).

 
Odpovědět
30.10.2017 23:39
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Peas
Neaktivní uživatel:31.10.2017 11:05

Velmi stručně. Webpack je module bundler - dovoluje řešit importy (resp requiry) v kódu. Hlavně umí dělat hustý věci jako tree shaking, dead code elimination. Případně se dá setupnout na to abys jednotlivé moduly stahoval ze serveru ondemand. Třeba se koukni na nějakou dokumentaci, okey ta od webpacku je docela zmatená, rozhodni jestli grunt umí to, či ono.
PS koukni ještě třeba na nástroj prepack, browserify, rollup.js

Nahoru Odpovědět
31.10.2017 11:05
Neaktivní uživatelský účet
Avatar
Peas
Člen
Avatar
Odpovídá na Neaktivní uživatel
Peas:31.10.2017 11:14

Dik za odpoved, urcite sa na to pozriem blizsie. Ale tree-shaking a eliminaciu nepotrebneho kodu nastavis aj v ktorom kolvek task runneri, to ci je to tak efektivne ako vo webpacku, to uz posudit neviem, nakolko s nim nemam skusenosti. Tym natahovanim jednotlivyvch modulov on demand si mal na mysli napriklad "substranku" s "controllerom / modulom (alebo akokolvek to uz nazveme podla frameworku)", ktory bude dotiahnuty az po prelinkovani na danu podstranku? Trochu vaham nad Webpackom koli tomu, ze vacsina navodov / komunity pocita s tym ze server bezi na Node aby bol plne vyuzity jeho potencial, avsak vo vsetkych firmach kde som bol bezali servery bud na c# alebo na jave. Povedzme ze by sme vedeli Webpack pouzivat skor "len" ako bundler, nez runtime pomocnika, a preto sa naskyta pre mna otazka ci ma vyznam prechod na neho z akehokolvek ineho task runnera - Grunt, Gulp, Npm Package... Ale urcite sa na to pozriem blizsie.

Editováno 31.10.2017 11:16
 
Nahoru Odpovědět
31.10.2017 11:14
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Peas
Neaktivní uživatel:31.10.2017 11:22

Tam jde hlavně o moduly jakožto javascriptové moduly. Jakože npm balíčky. K tomu to je. Pokud architektura webové stránky neodpovídá tomuhle vzoru, pak nejsem sto posoudit vhodnost nasazení webpacku.
Programoval jsi někdy single page application v reactu? Nebo vue.js? Nebo angular. Tam by se tohle dost projevilo. Nebo používáš jsko na webu trošku jinak?

Nahoru Odpovědět
31.10.2017 11:22
Neaktivní uživatelský účet
Avatar
Marian Benčat
Člen
Avatar
Odpovídá na Peas
Marian Benčat:31.10.2017 11:45

tak předně.. jsou to sra+ky neskutečný,.. sežere ti to 2GB RAM, bude to buildit 20 minut, po celou dobu to bude žrát 80% CPU, budeš řešit neustále sra+ky s tím, že nějakej vocas změnil někde balíček v 50tým koleni a všechno se domrd+ .. přesto to má smysl velký a je k tomu defakto pouze jeden důvod a to je tree shaking...

Je to jednoduché. Chceš vyvinout nějakou aplikaci, která si uprdne... potřebuješ k tomu nějakou knihovnu.. skončíš u toho, že se ti v node_modules objeví zhruba 900MB dat a 180 000 souborů.

Ten tree shaking funguje tak, že jde po těch importech, sestaví si nejdříve AST stromeček všech těch balíků (natahá si to vše do paměti, protože javascripteři nemají tušení co to znamená externí algoritmus - a taky z důvodu rychlosti) a pak jde od tvého "vstupního JS souboru" a označuje si v tom stromečku uzly,, které jsou někde použité (mark and sweep - úplně to samé dělá nějaký rozumnější Garbage collector, který není o počítání referencí).

No a pak ty nepoužité věci vyhodí.

TL;DR; věci jako Webpack mají smysl pouze ze dvou důvodů:

  1. Tree shaking
  2. Nejruznejsi převody jakékoliv věci do JS . je shcopný třeba i malé statické obrázky, HTMLko, atp. prostě zakodovat do jednoho souboru.

A ptáš se jestli jsi toto schopný udělat tasky? Jistě že ano.. Jsi schopný pustit 30 různých tasků a pak je propojit.. pak to můžeš vydat jako nějakou novou JS knihovnu.. a nazvat to třeba.. Webpack.

Nahoru Odpovědět
31.10.2017 11:45
Totalitní admini..
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Marian Benčat
Neaktivní uživatel:31.10.2017 11:54

Já si na tebe vzpomněl Mariane a odpovědět jsem šel jen proto, abych byl rychlejší než ty :-D

Nahoru Odpovědět
31.10.2017 11:54
Neaktivní uživatelský účet
Avatar
Peas
Člen
Avatar
Odpovídá na Neaktivní uživatel
Peas:31.10.2017 12:36

Uz nejaky ten rok vyvijame single page appku v angular 1 a pred 2 tyzdnami cca som konecne uspesne pretlacil, ze je uz dead a potrebujeme prechod na nieco novsie, tak postupne zacinam prerabat jednotlive moduly do Vue js. Preto popri tom aj premyslam ci sa nehodi upgradnut spolu s tym aj Grunt a ine prezivsie technologie. To bol moj uvodny popud blizsie pochopit Webpacku :).

 
Nahoru Odpovědět
31.10.2017 12:36
Avatar
Marian Benčat
Člen
Avatar
Odpovídá na Neaktivní uživatel
Marian Benčat:31.10.2017 14:23

Neaktivní uživatel
takže 4 : 4 ? Uvidíme příště.

Peas
Angular 1 není dead, postupně ho přiblížili co nejvíce k NG2 (třeba v 1.5 přidali componenty atp).
Vue.js je takový alibistický klon angularJS pro Reactáře, kteří si lžou do kapsy ;-) Proč tedy ne, pro nějakou menší appku.

Nahoru Odpovědět
31.10.2017 14:23
Totalitní admini..
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.