Lopaty, krumpáče a kladiva

Lopaty, krumpáče a kladiva

Pracovní nástroje a postupy vývojářů UI

Ondřej Žára, Seznam.cz

Bojový plán

1. Architektura a koncept webové aplikace
2. Správa a údržba kódu
3. Domain-specific nástroje

Webová aplikace = ?

• Sada oddělených, vzájemně spolupracujících komponent
• Databázový server, aplikační server, front-end, proxy pro statické soubory…
• Statické soubory spadají do zodpovědnosti vývojářů UI a proto tvoří samostatný "balíček"

Debian packages

• Komponenty webové aplikace jsou distribuovány v tzv. Debian packages
• Závislosti, konfigurace, verzování…
• Pracuje se s nimi jako s ostatními balíky operačního systému
• apt-get, dpkg, …
• Tvorba (balíčkování) ⇒ umístění do repozitáře ⇒ testování ⇒ přesun na provozní servery

Balíček s HTML, CSS, JS

• Obsahuje HTML, HTML šablony, CSS, JavaScripty
• Zpravidla také obrázky
• Při úpravách v tomto balíčku často není třeba jakkoliv šahat do ostatních komponent aplikace

Repozitář

• Zdrojové kódy jsou k dispozici v centrálním repozitáři
• Historicky Subversion, "nově" Git (první služba v Gitu: JAK)
• K repozitáři existuje webové rozhraní pro správu kódu, historie, wiki, ticketů…

"Rozběhnutí" služby

• Vývojář neprovádí úpravy "naslepo", potřebuje je vidět
• Pro tento účel potřebuje mít běžící verzi služby
• Nejsnazší řešení bývá spustit si front-endovou komponentu svépomocí
• (a napojit ji na testovací varianty relevantních backendů)

Práce na lokálním nebo vývojovém serveru

• Úpravy lze provádět na vlastním PC, nebo na některém z vývojových serverů (Linux)
• S výhodou je práce na tom stroji, kde je front-endová aplikace spuštěna
• SSHFS, Samba

Každý pes, jiná ves

• Různé vývojové týmy mají různé postupy a workflow
• Vývojáři UI jsou sdíleni napříč službami
• Je nutné se flexibilně uzpůsobit týmu, pro který zrovna pracujeme
• Použití větví v SVN/Gitu, spouštění testů, adresářová struktura, …
• Coding style je víceméně stejný napříč celým Seznamem

HTML: Teng

• Vlastní šablonovací jazyk
• Open Source, web se bude přesouvat na GitHub
• (Rychlý) Interpret v C++ a Pythonu
• Podmínky, cykly, includy, slovníky, funkce, uživ. fce, escapování, white space elimination, …

CSS: LESS

• JavaScriptový nástroj na preprocessing CSS
• Pilotní provoz, testování
• Klientský skript pro stažení skoro-CSS přes XHR a následné zpracování
• Proměnné, nesting, funkce
• Při balíčkování se použije serverová varianta nástroje
• V provozu beze změny

JavaScript: JAK

• Vlastní JS knihovna
• Struktura: jádro (cross-browser, XHR, OOP) a doplňkové služby (utils, widgets)
• Open Source, GitHub
• Snaha používat tzv. Vanilla JS a knihovnu jen tam, kde to jinak nejde

JavaScript: Google Closure Compiler

• Nástroj na minifikaci kódu
• Provádí statickou analýzu
• Redukce o desítky procent velikosti

JavaScript: Jasmine

• Prostředí pro pouštění BDD unit testů
• Unit testy pro nevizuální komponenty
• Slušné pokrytí knihovny JAK

JavaScript: JSDoc toolkit

• Nástroj pro generování automatické dokumentace
• Vstupem jsou tzv. "dokumentační komentáře"
• Názvy tříd a funkcí, informace o struktuře dědičnosti, typy a účel parametrů, návratové hodnoty
• JAK
• Mapy API

Prostor pro otázky
Ondřej Žára, Webmaster, ondrej.zara@firma.seznam.cz