Proces vývoje e-shopu –⁠ 1. díl: Technologie používané při vývoji e-shopů

Tak jako se dům staví na pevných pilířích, tak i e-shop musí být vybudován na stabilních základech. Správně navržená architektura e-shopového řešení umožňuje jeho rozšiřitelnost a udržitelnost i do budoucna. Ale podle čeho vybírat a na co si dát pozor při vývoji e-shopu? Jaké technologie jsou na trhu nejpoužívanější pro vývoj e-shopu? Vyzpovídali jsme leadera našeho vývoje, Petra Humplíka.

Jaké technologie se využívají na trhu nejvíce a jsou nejznámější pro stavbu e-shopů?

Co se týče nejpoužívanějších technologií, je v oblasti e-commerce situace stejná jako u všech ostatních webových aplikací. Pravděpodobně nejpoužívanější u vývoje e-shopů je PHP (popřípadě některý z frameworků postavených nad PHP), Java, Ruby on Rails a technologie Microsoftu, zejména Microsoft MVC.

Samostatnou rodinou, která co do počtu postavených řešení zatím představuje spíše menšinu, jsou tzv. SPA – Single Page Applications, tedy aplikace, u kterých dojde na počátku k načtení „jedné stránky“, jejíž obsah se v průběhu života aplikace přepisuje po částech. Sem patří stále populárnější frameworky, jako jsou Angular, React a Vue.js. Zatímco na domácím trhu e-commerce, který je z hlediska použitých technologií hodně konzervativní, jde o menšinu, ve světě je pomocí těchto aplikací postavena celá řada velkých aplikací, které většina z nás používá každý den. Jako příklad Facebook, Twitter, Instagram a mnohé jiné. SPA byla také naší volbou, a to konkrétně Angular, vyvíjený společností Google.

Jak je zdrojový kód důležitý pro samotný vývoj e-shopu nebo aplikace?

Význam kvality a „zdraví“ zdrojového kódu je pro vývoj webové aplikace naprosto zásadní. Nejen pro prvotní vývoj, ale především pro další rozvoj produktu s ohledem na specifické požadavky zákazníků (rozšiřitelnost) a dlouhodobé udržení funkčního produktu, jehož údržba je ekonomicky výhodná a relativně snadná (udržitelnost). Toto jsou dva faktory, které mají zcela zásadní vliv na budoucnost celého produktu. Správně napsaný zdrojový kód se vyznačuje tím, že jakákoliv změna je časově mnohem méně náročná než u kódu, u jehož architektury se příliš nepřemýšlelo.

“Vždycky říkám, že barák se staví od základů (zdravá technologická báze). Jaké máš v obýváku stereo, ti může být jedno, pokud ti tam sklepem teče voda.”

Jaké jsou mezi výše zmíněnými technologiemi rozdíly a v čem spočívají výhody našeho řešení?

Drobných rozdílů jsou tisíce. Nejpodstatnějším rozdílem je však rozdíl v koncepci vykreslování výsledné stránky. Zatímco u PHP, Javy a ostatních výše zmíněných technologií se při přechodu z jedné URL na druhou vykresluje celá stránka, u SPA aplikací, například u námi používaného Angularu, zůstává statická kostra stránky stále načtená, a ze serveru se dotahují do prohlížeče pouze „rozdíly“. Toto má za následek mnohem rychlejší vykreslování stránky bez otravného bílého pozadí při načítání. Technicky vzato, žádáme po serveru mnohem méně dat a mnohem méně také server webové aplikace zatěžujeme. Pozitivní vliv tohoto přístupu je zřejmý zejména na pomalejších mobilních zařízeních. Částečné vykreslování webové stránky a její výsledné sestavování ve webovém prohlížeči je v současné době trend používaný u aplikací, ke kterým se denně připojují miliony klientů.

Dalším faktorem, a teď budu hovořit z vlastní zkušenosti, je fakt, že se u SPA mnohem snáze dosáhne modularity řešení a dodržení jednoho ze zásadních pravidel správné architektury, kterým je SOC (Separation of Concern – oddělení zodpovědnosti). Laicky řečeno, správně napsaná SPA je složena z nezávislých bloků, které dělají jen to, co mají. Této modularity lze samozřejmě docílit v kterékoli technologii, ale u SPA, a v případě Angularu zejména, to jde mnohem rychleji a čistěji. Z tohoto faktu se potom přímo odvíjí snadnější rozšiřitelnost a udržitelnost takové aplikace

No, a v neposlední řadě tu je JavaScript, bez kterého se v současnosti neobejde žádná webová aplikace. Jen připomenu, že pomocí JavaScriptu se dělají různá vyskakovací okénka, obrázkové galerie, stránkování a mnoho, opravdu mnoho dalšího. Javascript je dnes součástí každé normální webové aplikace, a jak je o něm známo, je to dobrý sluha ale špatný pán. Chyby způsobené v JavaScriptové části aplikace jsou ty nejvíce a nejdříve viditelné, většinou s fatálním důsledky pro běh aplikace. A zde se dostáváme k dalšímu zajímavému bodu. Ve všech technologiích budete muset JavaScript použít. Otázka je, zda ho tam „dolepíte“ jako další vrstvu, nebo zda k němu přistupujete systematicky.

Námi používaný Angular je nad JavaScriptem postavený, a proto je způsob práce s JavaScriptem systematický a typově bezpečný. Naši aplikaci píšeme v TypeScriptu, což je jazyk, ve kterém můžete psát zdrojový kód klientské části aplikace, jež bude na konci zkompilován do JavaScriptu.

Dalším faktorem, hovořícím ve prospěch našeho přístupu k psaní JavaScriptového kódu, je bezpečnost. JavaScriptový kód aplikace je velmi oblíbeným vektorem útoku a míra jeho zneužívání v útocích na webové aplikace neustále narůstá. A právě způsob, jakým je postavena naše aplikace, výrazně snižuje riziko tohoto typu útoků.

Jaké jsou tedy výhody naší aplikace, můžeš to nějak shrnout?

Jistě. Pokud bych to měl sumarizovat v bodech, pak bych zdůraznil zejména následující:

●     Vyšší rychlost vykreslování stránek, a to zejména na mobilních zařízeních.

●     Snadnější a rychlejší rozšiřitelnost řešení (podle přání klienta), vzhledem k jeho modularitě.

●     Rychlejší, a tím pádem i levnější údržba.

●     Nižší zátěž webového serveru.

●     Snadnější testovatelnost, jak pomoci Unit Testů, tak pomocí integračních testů.

Mohou technologie zastarat a vůbec skončit ze dne na den?

Nedochází k tomu často, ale stává se to. Ze známých technologií bych na tomto místě uvedl například Adobe Flash, nebo Microsoft Silverlight. Jen pro zajímavost – obě tyto technologie byly v konečném důsledku nahrazeny JavaScriptem, jež byl jejich dlouhodobým rivalem.

Pro snížení výše zmíněného rizika je vždycky dobré pečlivě zvážit, kdo za danou technologií stojí. Uvedu to na příkladu naší aplikace. Databázová vrstva našeho řešení je postavena na technologii Microsoft SQL Server. Tento databázový engine je tu s námi již několik desítek let a Microsoft jej neustále rozvíjí a dlouhodobě podporuje. Čili zde bych se jakéhokoli ukončení nebál.

Webový server našich aplikací je postaven opět na technologiích Microsoftu, v tomto případě se jedná o Microsoft .NET Framework a Microsoft .NET Core. Obě tyto technologie mají v současnosti Microsoftem garantovanou dlouhodobou podporu, a je na nich postaveno tolik komerčních aplikací, že si Microsoft ukončení podpory v tomto případě jednoduše nemůže dovolit. Obdobně je to samozřejmě i u PHP nebo Javy. Obecně lze říct, že serverová část aplikace je z hlediska dlouhodobé podpory u všech řešení bezpečnější.

Co se týče klientské části aplikace, tam je situace trochu jiná. Jen za dobu své programátorské kariéry jsem narazil na desítky technologií pro klientskou část aplikace, z nichž mnohé prakticky zmizely. To byl jeden z důvodů, proč jsme se při stavbě nového jádra našich e-shopových řešení rozhodli pro Angular (jako framework) a TypeScript (jako programovací jazyk pro klienta). Za oběma technologiemi stojí velké společnosti (Google a Microsoft), a navíc, jsou Open Source, takže krom jejich mateřských společností za nimi stojí i velmi rozsáhlé vývojářské komunity po celém světě. Takže i kdyby došlo k nejhoršímu (a v současné době nepravděpodobnému) scénáři, vytvoříme si náš vlastní „fork“ a neohrozíme projekty našich zákazníků.

Další věc, která hraje z hlediska dlouhodobé podpory technologické báze významnou roli, je integrace dílčích řešení třetích stran. Snažíme se co nejméně používat npm nebo NuGet balíčky, za kterými nestojí stabilní správce.

“Pokud postavíš funkčnost nad nějakým balíčkem, který si někdo udělal jen tak pro zábavu přes víkend, riskuješ, že ta podpora tam může skončit opravdu ze dne na den.”

Co bys doporučil potenciálnímu klientovi, který se rozhoduje, jakou technologii využít?

Klientovi bych jednoznačně doporučil, ať komunikuje se zhotovitelem (poskytovatelem) svého řešení, ať se ptá na to, co ho zajímá. Zdrojový kód je pro klienty většinou „neviditelný“, s výjimkou plně Open Source řešení. A i kdyby byl viditelný, moc klientovi neřekne. Vždycky bych určitě doporučil komunikovat se zhotovitelem e-shopu, nechat si ukázat, jak funguje to, či ono, srovnat to s konkurencí a nechat si přímo naživo ukázat, jak se daná věc chová. V tomto spatřuji i velkou výhodu našeho individuálního přístupu – klient nemusí věci vyhledávat v diskusních fórech. Stačí, když se zeptá a my mu vysvětlíme, proč a jak.

Dále bych klientům, zejména těm, kteří provozují velká kustomizovaná řešení, doporučil sledovat světové trendy v oblasti technologií. Obecně vzato, technologie používané v oblasti českého a slovenského e-commerce jsou obvykle trošku „za vývojem“. Důvod je ten, že obnova zdrojového kódu, nebo vývoj zcela nového řešení, je hodně drahá záležitost. A my jsme ty peníze již investovali, a troufnu si říct, že máme nejmladší zdrojový kód v republice.

Vždycky říkám, že barák se staví od základů (zdravá technologická báze). Jaké máš v obýváku stereo, ti může být jedno, pokud ti tam sklepem teče voda.

Zajímá vás budoucnost vývoje? Stáhněte si e-book o headless

Stáhněte si e-book zdarma a zjistěte, jak headless technologie může zlepšit výkon vašeho e-shopu.