React v .NET projekte

[PeterS]

Ahojte, popri skole pracujem na svojom projekte, na ktorom som sa ucil ASP.NET MVC, a rad by som toto vzdelavanie rozsiril o React. Visual Studio nema prave najlepsiu podporu pre pisanie UI, a preto som trocha prechadzal fora, a narazil som na spravu ze UI chalan robi v Reacte ako samostatny projekt, napr. vo WebStorme. Cele toto studium realizujem na nejakom informacnom systeme ktory som si vymyslel, a planoval som priamo do View zakomponovat React, no po tejto informacii som zmateny ako to teda funguje v praxy. Moje otazky teda su:
1. Ti ktory vyuzivate React, pouzivate ho teda priamo vo View, alebo tiez vytvarate oddelene projekty kde UI robite zvlast.
2. Tiez ako je to s bezpecnostou? Kedze som v takychto veciach neskuseny, staci spravit v .NET Api, a na serveri nastavit SSL certifikat? Budem moct cez to riesit aj prihlasovanie uzivatelov? Pretoze taky mam momentelne plan ak mi ho niekto nevyvrati. Spravit web api v .net core ako radil chalan, a UI zvlast.
3. Ak pouzivate React priamo vo view .NETu, ako strukturujete projekt, a ktory react pouzivate? Pretoze narazil som aj na React urceny cisto pre .NET a zakomponovanie do MC. Ide mi len o to, ze pisat vo visualku HTML kod v js suboroch musi byt za trest, pokial neexistuje nejaky tool ktory by riesil tu syntax.
Dakujem za odpovede.

[Reklama]

[gll]

asi bych nejdřív zkusil něco o tom přečíst.

třeba tohle:

https://reactjs.net/getting-started/tutorial.html

[PeterS]

to som nasiel, ale niektory vyuzivaju cisty ReactJS, takze fakt neviem ktory zvolit, nevyznam sa v tom ... cakal som nejaku radu z praxe.

[pepe]

Asi pouzit to co mistr predemnou poslal, udelat si api a zkouset, vic googlit mene se ptat, servirovat si to primo dotnetem

[PeterS]

Chcel som pocut nazory ludi ktory to pouzli v praxy ... odpovede typu "vygoogli si" maju nulovu hodnotu, a touto logikou by ziadne fora nemuseli existovat

btw. googlil som a nasiel som obe moznosti, lenze to mi nic nepovie o tom co sa realne (castejsie) vyuziva

[Reklama]

[gll]

Chcel som pocut nazory ludi ktory to pouzli v praxy ... odpovede typu "vygoogli si" maju nulovu hodnotu, a touto logikou by ziadne fora nemuseli existovat

btw. googlil som a nasiel som obe moznosti, lenze to mi nic nepovie o tom co sa realne (castejsie) vyuziva

Já v tom tutoriálu vidím jen jeden způsob. O žádném odděleném projektu ve webstormu se tam nepíše.

[PeterS]

lenze ja nehovorim o tomto tutoriale ale vseobecne, ten react.net ma nejaku funkcionalitu vraj obmedzenu, ale neviem ako to je realne .. ci su to len nejake drobnosti alebo nieco co treba zvazit

[TJK]

Pouzivam podobne technologie v architekture stavajiciho projektu.

1) backend v .NET - ciste backend web service - dava API - ted jsem v Linuxu a developim v Jetbrains Rider - early access program zadarmo, kdysi jsem vyvijel ve Visual Studiu.

2) frontend v HTML Javascript - cisty frontend klient, data si natahne pres API z backendu pres AJAX. Javascript framework pouzivam Aurelia - coz je ale srovnatelne s React. Editor pouzivam Jetbrains WebStorm (je pro Windows i Linux - placene, pokud jde o open source projekt, lze pozadat o licenci zdarma).

V projektu mam zdrojove kody .NETu a HTML Javascriptu oddelene v ruznych adresarich.

Pokud nejsi jeste definitivne rozhodnuty pro React a umis anglicky, stoji za shlednuti prednaska Roba Eisenberga - Choosing Javascript Framework https://www.youtube.com/watch?v=6I_GwgoGm1w
Kdo nema cas, tak shrnuti: doporucuje jako Javascript framework spise Aurelia (on je autorem) nebo Ember, pred React a Angular (Angular 2). Proc? - viz prednaska.

[Mirek Prýmek]

lenze ja nehovorim o tomto tutoriale ale vseobecne

Všeobecně máš s jakýmkoliv backendem a jakýmkoliv frontendem několik možností, jak to celé řešit. V principu se liší v tom, kolik funkcionality/logiky/kódu máš na BE a kolik na FE:

1. BE řeší routování, servírování jednotlivých stránek a částečně i templaty - na stránku jenom vložíš pár Reactem (nebo libovolným jiným FE nástrojem) vykreslovaných prvků
2. BE řeší routování, servírování jednotlivých stránek, ale stránka se kompletně vykresluje frontendovým nástrojem
3. SPA = BE jenom servíruje data (nějaké HTTP nebo websocket API), vše ostatní se děje na frontendu

Tohle jsou takové základní typy, mezi nimi je spoustu odstínů šedi podle toho, jaké části aplikace umístíš kam. Obecná rada, kam co máš dát, není. To záleží na tobě, jestli chceš víc psát v backendovém frameworku (ve tvém případě .NET), nebo ve frontendovém (React, Vue.js, klidně i Elm... cokoli). Všechny tyhle možnosti dávají v nějaké situaci smysl a každá má svoje výhody a nevýhody. Je to designerské rozhodnutí, žádný silver bullet není.

[PeterS]

Skor by som asi uprednostnil verziu s WEB API ka strane servera a klien samotny SPA. Otazka je ci je mozem informacie o prihlasenom uzivatelovi ukladat napr. do localStorage/sesionStorage? Pretoze sme to vacsinou ukladali uzivatela do Session v Controlleri.

[Mirek Prýmek]

Skor by som asi uprednostnil verziu s WEB API ka strane servera a klien samotny SPA. Otazka je ci je mozem informacie o prihlasenom uzivatelovi ukladat napr. do localStorage/sesionStorage? Pretoze sme to vacsinou ukladali uzivatela do Session v Controlleri.

Dobře udělaná SPA je asi nejlepší pro UX (nemusí se načítat pořád dokola ta stejná data), ale zároveň je to asi nejtěžší varianta. K té otázce: hlavně musíš vycházet z toho, že klientovi nesmíš v ničem věřit. Tj. tak jako tak nemůžeš od klienta převzít informaci "jsem uživatel Pepa". Musíš ho nechat se autorizovat, po úspěšné autorizaci mu předat třeba nějaký token a při každém dotazu na API pak ověřovat, že daný token je platný a že uživatel, kterému patří, tuhle operaci smí udělat.

Existují i způsoby komunikace, kde uživatele ověříš jednou při otevření komunikačního kanálu a pak už máš otevřený kanál svázaný s uživatelem, takže token nepotřebuješ. Jde to takhle třeba u websocketů, ale jestli to takhle umí udělat .NET, to ti neřeknu

Prostě, u téhle varianty musíš dost zapojit mozek, abys to udělal dobře. Pro začátečníka to asi není úplně vhodná varianta, pokud nepracuješ s frameworkem, který to všechno vyřeší za tebe...

[PeterS]

Urcite sa s tym rad pohram, a o tej autorizacii tokenom som tiez uvazoval. Tu komunikaciu by som si predstavoval asi v takejto podobe:
Uzivatel posle HTTP pozadavek na server s menom a heslom, kde mu v pripade validnych udajov pride obratom token. Token sa ulozi niekde do localStorage, a pri kazdom poziadavku na server, sa prida ako parameter aj dany token. Pri odhlaseni sa vycisti aj localStorage.

Mohlo by to takto byt? Len neviem ako overovat casovu platnost tokenu. Mam ho ulozit do db s casom vytvorenia, alebo ten token by mal obsahovat zakodovany cas vytvorenia?

[Mirek Prýmek]

Mohlo by to takto byt?

Asi jo. Anebo použít cookies.

Len neviem ako overovat casovu platnost tokenu. Mam ho ulozit do db s casom vytvorenia, alebo ten token by mal obsahovat zakodovany cas vytvorenia?

To je asi jedno. Ale typicky k tomu tokenu budeš mít v DB nějaké informace a stejně je budeš načítat, tak proč tam nedat timestamp?

[PeterS]

To je asi jedno. Ale typicky k tomu tokenu budeš mít v DB nějaké informace a stejně je budeš načítat, tak proč tam nedat timestamp?

Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?

[Mirek Prýmek]

Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?

Jo, neco takovyho.