Lehká modernizace javascriptu

[MirekZv]

Chci začít nějaký nový vlastní hobby projekt, backend Django, 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?

... a jedna specificky Djangovská 5) jde se vždy přes <script scr=".."> nebo se používají ty class Media: js=".." (a kdy?)

[Honza Javorek]

Ahoj,

v podstatě to chceš dělat "postaru", třeba si to projet a pospojovat gulpem nebo přes npm scripts. Jestli tam budeš mít Babel, importy, requiry, ... to je na tobě - dnes už prohlížeče celkem dost věcí umí samy, takže záleží, jestli chceš komplikovanější stack a nemuset to řešit a psát moderní JS, nebo se chceš dívat co je podporováno kde, mít jednodušší stack, a psát vanilla JS.

Moderní JS ala React nebo Vue (a potom Gatsby, Next.js, Nuxt.js, ...) dnes znamená udělat na backendu jen API a všechen zbytek renderovat na klientovi. Pokud chceš psát HTML šablony v Djangu, tak zůstáváš u jQuery, případně bys mohl možná použít Vue, které má i režim "kořeníme na backendu renderované HTML", ale osobní zkušenost nemám.

Já teď ve Flasku slepuju JS gulpem a připojuju jako jeden soubor, na CDN kašlu. Na frameworky zatím taky, na projektu kde to řeším ( https://junior.guru ) potřebuji zatím tak málo JS, že si vystačím i bez jQuery a bez ES6+. Mrkni sem https://htmldom.dev/ pokud neděláš nic moc složitého, možná se dnes už objedeš úplně bez frameworku. Do budoucna až tam budu mít složitější věci, pokukuju po tom Vue.

Nebo je ještě jedna cesta, udělat to všechno na backendu a pak použít něco jako "turbolinks" případně https://stimulusjs.org/

A co se týče "this", tak v ES6+ máš šipkové funkce (param) => { alert(param) }, což je syntaxe pro přesně to, co jsi napsal s tím bind.

Honza

--
--
E-mailová skupina djan...@googlegroups.com
Správa: http://groups.google.cz/group/django-cs
---
Tuto zprávu jste obdrželi, protože jste přihlášeni k odběru skupiny „django-cs“ ve Skupinách Google.
Chcete-li zrušit odběr skupiny a přestat dostávat e‑maily ze skupiny, zašlete e-mail na adresu django-cs+...@googlegroups.com.
Chcete-li tuto diskusi zobrazit na webu, navštivte https://groups.google.com/d/msgid/django-cs/eb2bb308-7b67-41a1-82d3-32f90f626280%40googlegroups.com.

[Petr Messner]

pá 17. 4. 2020 v 10:13 odesílatel MirekZv <mirek....@gmail.com> napsal:

Chci začít nějaký nový vlastní hobby projekt, backend Django, 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.

React se naučíš snadno. 

function Hello() {

  return <h1>Hello World!</h1>

}

A už umíš React 😀 Teda z 10 % aspoň. 

Takže asi jen jQuery a otázka k modernizaci je:

1) spouštět lokální nebo CDN/cloudovou verzi js knihoven?

Ideální je udělat webpackem (nebo podobným nástrojem) custom build přesně toho, co aplikace potřebuje - tak, aby to bylo co nejmenší (myšleno v kilobajtech). Ale začít můžeš s cdn. I React a es6 + jsx můžeš rozjet čistě přes cdn skripty bez webpacku, když na to přijde. 

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?

Ano :) 

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)

Tohle řeší arrow funkce a nová class syntaxe. V Reactu se teď hodně používají funkcionalni komponenty místo class-based, takže se s this už pomalu ani nesetkáš. 

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?

import je podle mě jen syntactic sugar nad require, ne?

Systém modulů ti umožňuje se globálním proměnným vyhnout. Ale i tak ti nikdo nezakazuje globální proměnné (window properties) použit, někdy se hodí. 

I v čistém js jsou patterny, jak si windows properties nezasvinit. Např. uzavřít cele tělo js elementu/souboru do funkce. 

... a jedna specificky Djangovská 5) jde se vždy přes <script scr=".."> nebo se používají ty class Media: js=".." (a kdy?)

Nevím :)

PM

[Petr Messner]

pá 17. 4. 2020 v 11:22 odesílatel Honza Javorek <ma...@honzajavorek.cz> napsal:

Moderní JS ala React nebo Vue (a potom Gatsby, Next.js, Nuxt.js, ...) dnes znamená udělat na backendu jen API a všechen zbytek renderovat na klientovi. Pokud chceš psát HTML šablony v Djangu, tak zůstáváš u jQuery, případně bys mohl možná použít Vue, které má i režim "kořeníme na backendu renderované HTML", ale osobní zkušenost nemám.

I s Reactem můžeš v Reactu řešit jen část stránky. Vůbec to nemusíš celé dělat jako SPA. 

I když psát SPA v Next.js je jednodušší, než psát šablony v Djangu 😇

PM

[Petr Messner]

BTW. není v Djangu nějaký plugin, který by to umožnil nějak pěkně integrovat s Reactem? Nevidím důvod, proč by místo jinja šablon (nebo co v Djangu je) nešly psát JSX šablony :) 

Pokud není, mozna by stalo za to ho vytvořit.

Mimochodem posun js frameworků serverless způsobil to, že teď je každá stránka samostatně “spustitelná”, takže i na js render v Djangu by stačil Python v8 wrapper.

Petr Messner

17. 4. 2020 v 11:24, Petr Messner <petr.m...@gmail.com>:



[Petr Messner]

17. 4. 2020 v 11:41, Petr Messner <petr.m...@gmail.com>:

Nevidím důvod, proč by místo jinja šablon (nebo co v Djangu je) nešly psát JSX šablony :) 

Viz Next.js getServerSideProps. Úplně by stačilo udělat to tak (nějaký Django plugin), který mi umožní napsat funkci getServerSideProps v Pythonu.

GraphQL by pak bylo pro náročnější. Umí Django GraphQL, že jo 🙂

PM

[Karol Bujaček]

Dobrý deň,

Vue – na prečítanie dokumentácie budete potrebovať možno týždeň času.
Určite to stojí za to.

1) lokálne / CDN: záleží na kontexte. Osobne nevidím výhody pre ktoré by
som na hobby projekt mal používať CDN. Na takýto projekt nepotrebujete
využiť možnosti cache, alebo nemáte klientov so slabým pripojením do
sveta, ktorí by využívali loklány mirror (napr. ostrov s obmedzeným
pripojením do sveta).

2) Babel áno. Ak budete používať vhodné nástroje, tak nad babelom ani
nebudete premýšlať – nebudete musieť, iba ho budete používať. Za
predpokladu, že by ste sa rozhodol pre Vue, prezrite si stránku Vue CLI:
<https://cli.vuejs.org/>

3) Ako pracovať s JavaScriptovým this? Naučiť sa ako funguje. Pridávam
odkaz na výbornú knihu You Don't Know JS: this & Object Prototypes:

<https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes>

4) Súbory, bundle, premenné, lokálne a globálne. Používajte nástroj,
ktorý vám s tým pomôže. Opäť dávam do pozornosti Vue a Vue CLI. Pre
produkciu z toho spravíte bundle a počas vývoja používate development
server s hot reload. Na pozadí pracuje s webpack.

5) class Media som nikdy nepoužil, neviem. Ak však chcete hobby projekt
na učenie sa, skúste sa pozrieť na Single Page Applications a Django
používať ako REST framework. Tak, ako to už niekto v predchádzajúcej
odpovedi radil. Myslím, že to je zaujímavejší prístup a určite to stojí
za vyskúšanie.



S pozdravom,
Karol Bujaček

> ... a jedna specificky Djangovská 5) jde se vždy přes <scriptscr="..">

> nebo se používají ty class Media: js=".." (a kdy?)
>

[Jiri Fait]

Ahoj,

tak hodně realizací jsem viděl a něco i dělal na pricipu Django jako backend (REST) a React jako frontend....na webu je spusta příkladů

Jinak jak se naučíš s reactem, tak zjistíš že Django šablony jsou trochu těžkopádné, ale nějaké weby jsem udělal i v čistém Djangu :)

s pozdravem

Jiří Fait

jednatel společnosti

mobilní číslo: +420 603 877 493

email: fa...@orkasolutions.cz

ORKA Solutions, s.r.o.

Pesvice 18, 43111 Pesvice

www.rapidnet.cz

pá 17. 4. 2020 v 11:41 odesílatel Petr Messner <petr.m...@gmail.com> napsal:

--

--
E-mailová skupina djan...@googlegroups.com
Správa: http://groups.google.cz/group/django-cs

---
Tuto zprávu jste obdrželi, protože jste přihlášeni k odběru skupiny „django-cs“ ve Skupinách Google.
Chcete-li zrušit odběr skupiny a přestat dostávat e‑maily ze skupiny, zašlete e-mail na adresu django-cs+...@googlegroups.com.

Chcete-li tuto diskusi zobrazit na webu, navštivte https://groups.google.com/d/msgid/django-cs/A65B4A47-3D61-44D3-BC4E-0D85ED2E39C5%40gmail.com.

[Daniel Kopecký]

Ahoj/dobrý den,

když jsme u toho Vue, tak bych k němu doporučil Qusar Framework(https://quasar.dev/), který je postavený nad Vue a obsahuje spoustu hotových komponent. 

A kdo je zvyklý na objektové programování, tak je možné psát komponenty ve Vue objektově s těmito knihovnami: vue-class-component, vue-property-decorator a vuex-class-modules.

A na závěr ještě přidávám cheat sheet, který porovnává syntaxy pythonu a JS, což člověku dá rychlý náhled jak něco napsat v JS (nebo obráceně). https://github.com/LambdaSchool/CS-Wiki/wiki/Javascript-Python-cheatsheet a https://sayazamurai.github.io/python-vs-javascript/

S pozdravem

Daniel Kopecký

pá 17. 4. 2020 v 10:13 odesílatel MirekZv <mirek....@gmail.com> napsal:

Chci začít nějaký nový vlastní hobby projekt, backend Django, frontend javascript - jen minimalisticky.

--

--
E-mailová skupina djan...@googlegroups.com
Správa: http://groups.google.cz/group/django-cs
---
Tuto zprávu jste obdrželi, protože jste přihlášeni k odběru skupiny „django-cs“ ve Skupinách Google.
Chcete-li zrušit odběr skupiny a přestat dostávat e‑maily ze skupiny, zašlete e-mail na adresu django-cs+...@googlegroups.com.

Chcete-li tuto diskusi zobrazit na webu, navštivte https://groups.google.com/d/msgid/django-cs/eb2bb308-7b67-41a1-82d3-32f90f626280%40googlegroups.com.