Jak začít se současnou webařinou?

Jak začít se současnou webařinou?
« kdy: 29. 01. 2021, 21:09:36 »
Omlouvám se za asi trochu stupidní dotaz... Chtěl bych se naučit alepoň základy technologií vytvářeni dynamických webů ale dost plavu v technikach a pojmech.

Takže spíš než detaily by mě zajimalo obecně jak to dát dohromady... Takže pokud to chápu správně, děli se na front a back end. Na straně serveru by měl být nějaký webový framework, asi bych byl schopen naučit se ASP.NET nebo Django (znám Python a C#) + nejaka SQL databáze a v případě více frameworků asi Redis.

Web server bych zvolil Nginx nejspíš dnes nejlepší volba? V dávných dobách jsem měl projektík s Apache... Jsou tam jeste potřebné jiné technologie? A u frontendu tápu úplne... JavaScript? CSS? Jak to funguje dohromady? Prosím nakopněte mě nejak.. Díky za trpělivost. :)
« Poslední změna: 29. 01. 2021, 22:54:38 od Petr Krčmář »


Re:Jak začít se současnou webařinou?
« Odpověď #1 kdy: 30. 01. 2021, 01:11:46 »
Pokud začínáš, tak zapomeň na nějaké komplikované Django nebo Ruby on Rails nebo podobné překomlikované prasečiny.

Umíš Python, napiš si za jedno odpoledne hello world web server ve Flasku, tj. minimalni batteries included web framework v pythonu (https://flask.palletsprojects.com/en/1.1.x/).

Na začátek nginx roshodně nepotřebuješ. Flask dokáže fungovat jako server i bez něj. Nginx bys použil třeba jako load balancer mezi více servery nebo server pro statický soubory.

Databáze. Když začínáš, bude ti stačit embedovaná databáze sqlite3, pokud chceš něco se sql. Postgres, nebo MySQL použiješ až při větší zátěži, ale na začátek zbytečnost.

Pokud nepotřebuješ sql, zapisuj si data na file systém. Na NoSQL databáze rovnou zapomeň. Jednak se od nich ustupuje a jednak jsou totální overkill pro organizaci menší než třeba Google nebo Facebook.

Frontend. Taky doufám, že někdo poskytne náhled jak se v roce 2021 dělá frontend, sám to nesleduji. Co jsem pochopil, frameworky minulýho desetiletí, např. Angular, jsou mrtvý, všemu dominuje React.

Re:Jak začít se současnou webařinou?
« Odpověď #2 kdy: 30. 01. 2021, 04:37:07 »
Jestli ti nevadí angličtina, tak doporučuju https://www.freecodecamp.org/
V češtině vychází video tutoriály tady https://m.youtube.com/channel/UCpUD5k7SOjsiPjlVV77TB7g

Re:Jak začít se současnou webařinou?
« Odpověď #3 kdy: 30. 01. 2021, 08:02:26 »
jestli python tak rozhodne s uwsgi a nginx.
delam si ruzny mini webovy appky prave ve flasku, driv s apache a wsgi a je to proti nginxu komplikovany.
urcite bych ti doporucil flask. je to modularni microframework - tzn nic neprekazi, zadny slozitoste, ale kdyz chces neco navic tak ma plugin kterej si dotahnes. ted zkousim oauth s google a kdyz jsem tu nedavno cetl nejakyho phpkare jak s tim valci, tak jsem se musel pousmat.
u "nas" ke vsemu zuzo dokumentace a priklady, zadny tapani ve tme.

na frontend se mi docela libil vue, ale jestli znas python a c# tak budes z js dost smutnej (aspon ja k tomu prisel v tomhle smeru a smutnej z toho jsem), bohuzel se mu na FE afaik nevyhnes.

jako ide k tomu urco pycharm, prijde mi ze dost pomaha, samo jde to i bez nej, ale proc si to neusnadnit zejo.

Re:Jak začít se současnou webařinou?
« Odpověď #4 kdy: 30. 01. 2021, 10:01:23 »
Chtěl bych se naučit alepoň základy technologií vytvářeni dynamických webů ale dost plavu v technikach a pojmech.

Tak to chce opravdu trpělivost, zkusím..
1)
Backend je jasný - server v jednom místě. Frontend být vždy nemusí. Na server může jako klient chtít příkaz, robot, aplikace pro pár dat.. Pokud tam chce prohlížeč tak máš frontend, protože odpověď se v něm má zobrazit a nějak vypadat.
Takže klient sestaví požadavek (request), nejčastěji metodou GET (vše v URL adrese) nebo POST (kromě URL jsou navíc přilepena data). Zabalí ho do HTTP (přidá pár povinných a nepovinných věcí do hlavičky).
To doputuje na server. Server si to podle URL roztřídí, jak to bude řešit (URL dispatch). Zavolá nějakou funkci (controller, v Djangu se tomu prasácky říká view), aby mu sestavila odpověď (response). Než controller sestaví odpověď, tak řeší, jestli přišla data (což je typicky v tom POST požadavku). Zvaliduje je, pokud jsou špatná, připraví jeden typ odpovědi (typicky na stejné adrese, aby se uživatel mohl snažit do blba to zadat lépe). Pokud jsou dobrá, zapíše je do databáze a obvykle v tenhle moment víc do odpovědi nedává, ale jako odpověď pošle Redirect (tedy pokyn, že prohlížeč by měl teď jít na jinou adresu).
Pokud se příchozí data neřeší (nebo už jsme je vyřešili), většinou se dále chce získat data z databáze. A to je buď celá odpověď (ve formátu JSON) nebo má být odpovědí celá stránka (HTML). Ve druhém případě se při neprasáckém přístupu rozdělí část získání dat (controller) a jejich prezentace, tj. to sestavení HTML, tj. renderování šablony (templaty). Výsledná odpověď neobsahuje přímo obrázky nebo javascriptový kód - je tam jenom pomocí src= v tagu <script> nebo <img> popsáno, na které URL se tyto statické soubory najdou. V moderním webu může být místo HTML předána nevyrenderovaná HTML šablona a renderování provede frontend (Vue nebo React) za pomoci dat. která si vyžádá ajaxem.
Ajax je požadavek, který nepřekresluje stránku. Jinak je to ale zase totéž: přijde request, vrátí se response. Response jsou typicky json data (ale mohl by to být třeba fragment html, která si javascript vloží do stránky). Pokud json data, tak se serializují na string, protože jen string můžeme přenést na klienta.
Ve všech výše uvedených případech je tedy response string a ten se obalí HTTP hlavičkou a tahle kompletní response se vrátí.


Re:Jak začít se současnou webařinou?
« Odpověď #5 kdy: 30. 01. 2021, 10:33:58 »
2)
U (skoro) každého frameworku (já dělám se Djangem) máš vývojový server. Ten není vůbec vhodný pro finální nasazení (produkci), ale je fajn pro vývoj tedy na URL localhost (např. v Djangu se Ti automaticky refreshuje s každou změnou zdrojáku).
Proč ne pro produkci? Není vůbec myšleno na věci jako je bezpečnost a práce pod zátěží. Django jako takové dokáže vzít jeden požadavek, zpracovat, vrátit, a pak další.
Na produkci před Djangem potřebuješ něco, co bude požadavky rozhazovat do vláken, která poběží paralelně. To je gunicorn nebo uwsgi (asi skoro rovnocenné, možná jednodušší a dnes běžnější je gunicorn). Ale ani gunicorn není specializován na zátěž a další starosti webového serveru. Kvůli tomu se předřadí ještě nginx. Až budeš mít aplikaci trochu hotovou a půjdeš s ní na produkci, najdeš si návod nginx+gunicorn+django a podle toho to zprovozníš. Jedna služba pod systemd je nginx, druhá služba je gunicorn. Ještě se používal hlídač-restartér supervisor, ale to ti dnes bude dělat sám systemd.
Nginx přebírá část toho URL dispatche. Má nějaké sites-available (a -enabled), které to roztřídí podle domén (když jich obsluhuješ víc). Uvnitř každé sites-available můžeš dál třídit na to, co pustíš Djangu a na to, co vrátí hned Nginx (třeba statické soubory). Nebo když potřebuješ třeba streamovat, může to Nginx pouštět jinam (třeba k Falconu).
U těch statických souborů (obrázky, javascript) je otázka cachování: Je fajn je cachovat na klientu, aby je prohlížeč netahal stále znova (to mu dovolí hlavička HTTP). Ale je potřeba mít možnost na klientu vynutit změnu, když vývojář soubor změní. U nginxu to cca můžeš zajistit tím, že nedovolíš cache moc dlouho.
Nebo máš druhou možnost, přepouštět i požadavky na statické soubory Djangu. Přidáš tam knihovnu Whitenoise a ta to řeší přejmenováním těch statických souborů na unikátní jména po každé jejich změně (na disku i v HTML). Trochu pomalejší, ale získáš výhodu, že s tím můžeš jít i do cloudu, kde nemáš kontrolu nad tím, jestli je tam nějaký nginx.

K volbě frameworku: Jestli to myslíš vážně, vol fullstack framework (v Pythonu: Django). S mikroframeworky (Flask) se nezdržuj. Django není velká výhra, je přesložitělé, některá vývojářská rozhodnutí jsou dost rigidní. Ale 70% těch složitostí si webová aplikace opravdu vyžaduje, 30% bude overhead na tu rigiditu. Naivně jsem si myslel, že Django řeší skoro všechno, ve skutečnosti počítej, že i tak budeš ke každé aplikaci muset přidat 5-30 thirdparty knihoven. Výhoda je, že knihovny jsou, musí se samozřejmě pozorně vybírat, aby to byl mainstream s pár vývojáři, co jsou za danou knihovnou, delší historií a častými aktualizacemi. Když půjdeš do mikroframeworku, budeš tam k těm 5-30 mít ještě X dalších, aby ses dotáhl na level Djanga. Navíc si tenhle stack vybereš sám a musel bys být ultra profík, abys vybral lépe, než za Tebe vybírá tým Djanga. V reálu spíš vytvoříš bezpečnostní díry atp.

Např. s Djangem nebudeš psát SQL (použiješ jeho (slušné) ORM). Nebudeš řešit migrace mezi verzemi databáze apod, máš vestavěnou autentifikaci/autorizaci, máš admin pro údržbu číselníkových dat apod.

ETNyx

Re:Jak začít se současnou webařinou?
« Odpověď #6 kdy: 30. 01. 2021, 10:36:42 »
Frontend. Taky doufám, že někdo poskytne náhled jak se v roce 2021 dělá frontend, sám to nesleduji. Co jsem pochopil, frameworky minulýho desetiletí, např. Angular, jsou mrtvý, všemu dominuje React.

No tak asi bude záležet na tom jak se na to budeme koukat a jak by jsme to vlastně měřili. V současný době pokud chce člověk web-frontend framework tak současní lídři jsou furt stejní Angular, React, Vue (v abecedním pořadí). Osobně bych řekl že nejvíc teď jede Vue, ale jsme opět u toho jak to měřit?

Ono pro různé projekty asi bude vhodnější to a pro jiné asi ono,.. nicméně můžete používat i další,...

- Foundation
- Semantic-UI
- Backbone
- jQuery (ano stále se použivá a to hojně, v kombinaci s CSS frameworky Tailwind, Materialize, Skeleton, Bootstrap,...)
- Ember
- Svelte

A super moderní bude se obejít bez tradičníého ASP/PHP a sáhnout po "JAMStack"
- Nuxt
- Gridsome
- Jekyll
- Gatsby
- Next.js
- Hugo

A asi by jsme mohli pokračovat,..

Nicméně když ty věci začnete nějak studovat tak stejně narazíte na to že Vám řeknou: "předpokládáme, že umíte HTML/JS/CSS na pokročilé úrovni". Takže asi nejlepší bude začít s čistejma věcma, pak si aspoň osahat preprocesory/kompilátory (sccs, less, postcss, babel, typescript, grunt, webpack,...). A pak začít s těma hypstr dobrotama,..



Re:Jak začít se současnou webařinou?
« Odpověď #7 kdy: 30. 01. 2021, 10:59:12 »
3)
O frontendu moc nevím. Design? Styluje se pomocí css a když místo .css budeš požívat .sass, přidáš si tam např. proměnné (umožní něco zadat napříč softem, třeba barvu, co pak můžeš jednoduše změnit, dávat o 20% tmavší apod. - nemáš to zadané natvrdo), teoreticky lepší deskriptory stylovaných prvků - v reálu to chce extrémní kázeň, abys nevytvořil nepochopitelné a neudržovatelné monstrum. Platí to i kdybys do toho šel jako jednotlivec, i když by to dělal tým.

Potřebuješ responzivní chování (pro mobily). To Ti dá spoustu práce. Styloval bych (sass/css) co nejmíň a určitě do toho vložil Bootstrap, který Ti rychle (pár třídami v HTML) zajistí slušné responzivní chování.

Javascript je neskutečná prasárna. Mluvím o jeho historickém dědictví. Od těch nových specifikací (ECMAScript 201x) už je to slušné (jednak okolo tříd a okolo používání this, jednak okolo modularity). Proto se začal používat Babel, aby se mohlo psát už v tom slušném a jednotném a Babel to přeložil pro starší prohlížeče, které nové vlastnosti ještě neuměly. Dnes už je podpora lepší, asi by se vyplatilo jít už bez Babelu a psát co nejstriktněji pomocí nové syntaxe - jenže do toho se těžko dostaneš, protože každý spíš máme nějaké základy toho historického balastu.
No a nějaký ten moderní framework (Vue, React) by to chtělo. Renderování až v prohlížeči, zrcadlení mezi nějakým datovým úložištěm a mezi html prvky stránky.

----------
Řekl bych, že pro jednoho člověka to dnes není - pokrýt to všechno. Můžeš to zkusit. Ale bude to trvat než to dáš (3 roky? 5 let?).
Lépe třeba jen Django a frontend buď odbýt jen nejjednodušším bootstrapem, jestli na něm zas moc nezáleží, nebo s někým spolupracovat.
Taky na to produkční nasazení by se hodil extra člověk, ale ty návody jsou a do týdne nebo 14 dnů to někde na virtuálním serveru (Forpsi?) rozchodíš. Nebo do cloudu, kde nebudeš řešit nginx+gunicorn+systemd, ale zas má každá služba svá specifika. Můžeš zkusit třeba pythonanywhere.com, přečti si to na Django girls.
Cloud Tě může dost omezovat (speciální knihovny), na virtuálním serveru zprovozníš cokoli. Do cloudu můžeš šoupnout jen média (typicky obrázky uploadnuté uživatelem), viz django-storages.

.. hodně štěstí :)

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:Jak začít se současnou webařinou?
« Odpověď #8 kdy: 30. 01. 2021, 12:01:23 »
Ad "dělí se na frontend a backend": V tom je trochu bordel. V poslední době mi přijde, že se názvosloví kloní k tomuto:

- backend: Poskytuje (REST) API, které volá frontend, buď ze serveru, nebo z prohlížeče, nebo z obojího
- (frontend) server-side: Renderování HTML na serveru
- (frontend) client-side: Vytváření HTML na klientovi

Předpokládám, že tebe budou zajímat ty dvě části frontendu.

Původně byl web jen server-side (statické stránky, stránky generované SSI, PHP, ASP.NET, JSP, atp.). Postupně se do něj kvůli interaktivitě dodělávalo víc a víc client-side, tedy Javascriptu (začalo to cca 20 let zpátky), vznikly knihovny jako jQuery atp. Nicméně jak se do client-side přesouvalo víc a víc funkčnosti, tak začal být nepříjemný problém s tím, že server-side a client-side technologie byly různé, což znemožňovalo sdílení kódu mezi nimi.

Tedy vznikly technologie, které umožňují udělat celý web client-side. Víc začaly být rozšířené tak před pěti lety, kdy vznikly věci jako Angular a React. Nicméně čisté client-side má taky své nevýhody. Velmi špatně na takových webech funguje SEO, aplikace se musí načíst, než uživatel něco rozumného uvidí atp.

Takže pokud chceš opravdu moderní webové technologie, tak jsou to ty, kterým se říká isomorfní a které spojují výhody server-side a client-side přístupu. Pro React ekosystém je to třeba Next.JS. První render aplikace proběhne na serveru. Uživatel dostane už vyrenderované HTML, takže rychle vidí aplikaci zobrazenou, stejně tak vyhledávače dostanou normálně HTML k indexování. Dál aplikace běží na klientovi, takže je tu i potřebná interaktivita. Přitom to všechno je jeden jazyk a jeden framework. Úplně bezešvé to není, člověk musí na sever-side myslet (třeba při používání window objektu, který na serveru logicky není dostupný), ale to je většinou pár míst v kódu.

Ohledně React vs Angular vs Vue je to tak, že Angular a Vue staví na technologii HTML šablon. To je přístup, který vychází se starších JSP / ASP.NET frameworků. Má výhodu v tom, že lidé, co ty starší technologie znají na ně snáze přejdou. React na to šel "od lesa" a strom komponent se tam generuje čistě funkcionálně, žádné HTML šablony. Mě to přijde jednodušší, pružnější a lépe využívající možností nové technologie, ale to je můj osobní názor.

Každopádně, celé je to velmi rozsáhlá problematika, lepší je, vybrat si nějakou z těch technologií a věnovat se jí víc do hloubky.

Re:Jak začít se současnou webařinou?
« Odpověď #9 kdy: 30. 01. 2021, 14:24:49 »
Moderni weby se hlavne prestehovaly na klienta.

Zjednodusene receno, postaru mas ma serveru nejaky Tomcat/Symphony/whatever a tam bezi klasicka ModelVieverController aplikace, jejim vystupem je HTML kod, ktery se na pozadani soupne do browseru. Server drzi stav a session.

Ponovu bezi obdobna MVC aplikace jako javascript kod v browseru, a ten javascript si jenom saha pomoci RESTu na bezestavovy backend, ktery na pozadani poskytne data, na zaklade techto dat javascript updatuje DOM. A pak ten backend muze byd sada hlopouckych kubernetes kontaku, co defacto jenom obsahuji prevadec REST/JSON na SQL dodaz do DB vespod. Vlastni zatez aplikace je offloadovana na klienta.

Zjednoduseny lifecycle:
1. Browser po prvnim pristupu na stranku stahne Jvascript balik aplikace a spusti jej
2. Tento javascript kontroluje uzivatelske vstupy a pomoci REST si taha z backendu data.

Pokud se tohle chces naucit, tutorialu je hafo.
Doporucuju Angular nebo VUE, jsou to plne frameworky, pro React potrebujes dalsi knihovny, napr. Redux.
Angular ma velkou vyhodu, ze je psany v Typescriptu, VUE teprve planuje na Typescript prejit. Zakladni Javascript je pro slozitejsi projekty nevhodny.







Mlocik97

  • *****
  • 831
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak začít se současnou webařinou?
« Odpověď #10 kdy: 30. 01. 2021, 14:47:42 »
Osobne by som odporučil Svelte https://svelte.dev/

qelurg

  • ****
  • 372
    • Zobrazit profil
    • E-mail
Re:Jak začít se současnou webařinou?
« Odpověď #11 kdy: 30. 01. 2021, 17:04:55 »
Např. s Djangem nebudeš psát SQL (použiješ jeho (slušné) ORM).

Pro mě důvod Django nepoužít.

Re:Jak začít se současnou webařinou?
« Odpověď #12 kdy: 30. 01. 2021, 20:00:15 »
neposlouchaj tady ty srace, co si odskocili od programovani CNC naprogramovat appku na pocitani piv jednu sobotu a delaji hned odborniky. Radsi se podivej na vysledky dotazniku https://stateofjs.com/, kde mas pruzkum co se realne pouziva od lidi, co si tim vydelavaji 500x vic

Re:Jak začít se současnou webařinou?
« Odpověď #13 kdy: 11. 02. 2021, 09:32:20 »
Třetina internetu jede na WordPressu a za mě je to na start dobrá cesta. Není složité ho rozjet a na pro nenáročný provoz stačí prakticky libovolný PHP hosting za pár korun. Když se web připraví, tak je pak rychlý, bezpečný, jednoduše spravovatelný a dobře rozšiřitelný.

Je kolem něj rozsáhlý ekosystém a tak je možnost stále se někam posouvat. Jsou zde možnosti, jak si celý web naklikat ve vizuálním builderu se spoustou hotových komponent https://elementor.com/ - to se samozřejmě projeví ve složitosti (a rychlosti) výsledného kódu. S větší znalostí CSS lze pak použít komplikovanější builder https://oxygenbuilder.com/. Se zkušenostmi s MVC frameworky lze použít oblíbený šablonovací engine Twig (https://cs.wordpress.org/plugins/timber-library/). S dobrou znalostí Javasriptu lze stavět přímo na blokovém editoru Gutenberg, který se postupně rozrůstá a bude ho brzy možné použít i na tvorbu komplet layoutu. S tím už se začíná otevírat svět Reactu, kde lze využít WP REST API a třeba https://frontity.org/. A nebo jít ještě dále a využít GraphQL s https://www.gatsbyjs.com/.

Další výhodou WP je velká, aktivní a vcelku přátelská celosvětová komunita, která pořádá spousty akcí, kde si sdílí své zkušenosti.

Samozřejmě má WP i spousty nevýhod, ale když o nich člověk ví, tak s nimi lze bez větších problémů žít. Velkou nevýhodou je třeba zastaralá codebase. V tomto ohledu WP brzdí právě jeho rozšířenost a důraz na zpětnou kompatibilitu (stále je například podporovaná 8 let stará verze 3.7 a vycházejí pro ní patche), kdy není možné provádět velké zásahy.

Re:Jak začít se současnou webařinou?
« Odpověď #14 kdy: 11. 02. 2021, 13:50:19 »
Třetina internetu jede na WordPressu a za mě je to na start dobrá cesta. Není složité ho rozjet a na pro nenáročný provoz stačí prakticky libovolný PHP hosting za pár korun. Když se web připraví, tak je pak rychlý, bezpečný, jednoduše spravovatelný a dobře rozšiřitelný.

On se chce ale neco naucit. Tim, ze v nejakem udelatku upravi wordpress sablonu se nauci kulovy.
Jednoznacny trend jsou(jak uz tady bylo mnohokrat zmineno) primitivni RESTovky na serveru a tlusty klient napr. v Reactu.