čtvrtek 19. prosince 2013

Náš technologický stack - klient

Množí se nám dotazy (teda... byly dva), jaké technologie používáme na jednotlivých vrstvách aplikací, které tvoříme.
Ani se nedivím. Než jsme si jednotlivé technologie sladili dohromady, tak to chvíli trvalo, ale výsledek stojí za to. Posuďte sami:

Klient

V prohlížeči nedáme dopustit na Bootstrap. Konečně i my prográmatoři dokážeme "nastřelit" rozhraní, které vypadá k světu a dá se s ním pracovat.
Kde nestačí vzhled čistého Bootstrapu, koukáme primárně po šablonách z WrapBootstrap. Většinou jde o hodně designu za málo peněz.
No a kde to trochu drhne, tam pomůže Tibor a doladí CSSka. Tedy – neladí CSSka, ale LESSka. To je snad jasné, ne?


Angular.js

Naší velkou láskou je Angular.js. Nejdřív jsme s ním udělali mobilní aplikaci pro Investiční web (Android, iPhone) a teď v něm píšem i všechny desktopové aplikace.

Nevíte, co to je Angular? Mrkněte na článek na Zdrojáku.

V kostce jde o MVC framework (představte si Grails, Django, Roo, ...) napsaný kompletně v Javascriptu.
Takhle na první pohled to nevypadá jako pecka, ale je! Server (o kterém se pobavím příště) je vlastně degradován jen na posílání dat ve formátu JSON a o jejich zobrazování se komplet stará frontend.

Konečně to tedy vypadá jak v příručkách. Server řeší pouze data – jejich validaci, ukládání, vyhledávání atd. Klientský javascript pak šablony, zobrazení a interakci s uživatelem. A navíc – SPI zadarmo!


Coffeescript

Na Angularu nám (teda mě určitě) vadila vlastně jen jediná věc: Javascript. Nechápejte mě špatně. Ten jazyk je mocný, ale strašně ukecaný.
Coffescript je něco jako Groovy pro Javu. Konečně můžu napsat:
for x in [1, 2, 3]:
 console.log("Number: #{x}")
a nemusím počítat indexy pole jak trotl.

Tohle je samozřejmě jen jedna z výhod Coffeescriptu, je jich ještě záhon.

Na druhou stranu, nešikovný "bastlič" dokáže v Coffeescriptu kód dost zašmodrchat. Ale to platí asi ve všech jazycích.


Testování

Angular má docela hezky propracovanou podporu pro unit testy, integrační testy a různé další testy.
My testy píšeme v Jasmine a spouštíme Karmou.


Build aplikace

Ptáte se, jak tohle všechno skládáme dohromady? Lidi okolo Javascriptu se v tomhle směru poučili ve světě Javy a vznikl Grunt a Bower.
Bower slouží pro správu závislosti (v Javě Maven, Apache Ivy) a Grunt pro sestavení finální aplikace (spíš Gradle než Maven).

S Bowerem se neztratíte v použitých knihovnách. Už se nestahují z webu, ale instalují se pomocí:
bower install jquery
bower install angular
a závislosti se ukládají do bower.json v pěkně čitelné podobě:
"dependencies": {
    "angular": "v1.2.0-rc.2",
    "bootstrap": "v3.0.0",
    "jquery": "~2.0.3",
    "jquery-ui": "~1.10.3"
}
No a Grunt pěkně zkompiluje Coffeescripty do Javascriptů, prožene je testy, zmenší je, z LESS souborů udělá CSS soubory a vůbec připraví aplikaci na nasazení.

Tak takhle my to děláme :)
V příštím díle: Server!

PS: Jestli vás něco zajímá detailněji, tak se klidně ptejte...

čtvrtek 14. listopadu 2013

Optimalizace rychlosti webu


Na blogu Google vývojářů vyšel zajímavý článek o tom, jak lze velmi jednoduše a s minimálními náklady (i s minimální časovou náročností) výrazně zrychlit webové stránky z pohledu rychlosti načtení stránky pro uživatele i z pohledu zátěže na infrastrukturu.

Problematice optimalizace načítání webový stránek se ve Fragarii věnujeme dlouhodobě a velmi často dokážeme ohromit naše klienty tím, čeho lze dosáhnout i minimální úpravou několika řádků v nastavení webového serveru.

Naposledy jsme například změnou konfigurace webových serverů přední české banky dosáhli toho, že se o 30% snížil celkový objem přenášených dat. Tato optimalizace byla velmi vítána zejména ve chvíli, kdy bylo uvažováno o dvojnásobném navýšení kapacity síťové konektivity.


Zajímalo by Vás, jak je možné optimalizovat rychlost načítání webu? Rádi připravíme analýzu na míru právě pro Váš projekt a přesvědčíme Vás o tom, že optimalizovat je někdy velice jednoduché a opravdu se to vyplatí.

čtvrtek 24. října 2013

BorIS - naše svědomí je zase o trochu čistší

Ve Fragarii se snažíme pomáhat neziskovému sektoru. Budou to již dva roky, co jsme si řekli, že bychom z našeho zisku mohli finančně podpořit nějakou obecně prospěšnou organizaci. Vytipovali jsme Semiramis o.s. a vypravili se za nimi s darem 30k v označených bankovkách.

Po krátkém sezení v parku na Kampě jsme zjistili, že Semiramis by upřednostnil, kdybychom mu jako ajtíci pomohli vyvinout softwarový nástroj, který by jim usnadnil práci, neboť stávající řešení, která byla pro terénní pracovníky a organizace zabývající se drogovou problematikou (ano sběr stříkaček a práce s drogově závislými) k dispozici, není úplně ideální. Slovo dalo slovo, každý kdo měl chuť a čas přidal ruku k dílu a přibližně od října 2012 začal Borise používat Semiramis o.s. a brzy rovněž i Laxus, o.s.

BorIS je:

  • elektronická databáze pro evidenci výkonů v terénních programech drogových služeb;
  • opensource řešení, jehož licence je zdarma;
  • projekt, který chceme dále rozvíjet a šířit po celé republice i za její hranice (bodka .sk).

Jaké používáme nástroje:

  • programování: Python, Django, Grapelli a Git;
  • design: Bootstrap a template;
  • provoz aplikace: Nginx, MySQL, Gunicorn;
  • komunikace a řízení: Google Apps, Google Groups, e-mail, občas Redmine;
  • “social”: radost z dobré věci, lidský přístup, spokojený vývojář i uživatel :-).

Jsme rádi za každou pomoc:

  • napište nám jakékoliv náměty na další rozvoj či jen připomínky;
  • máte-li chuť a volný čas, ozvěte se, pomoci může opravdu každý;
  • pomozte nám projekt financovat, pouze z nadšení nedokážeme realizovat úplně vše, co bychom chtěli.

Pokud projekt kohokoliv zajímá, ozvěte se v diskuzi pod článkem nebo koukněte přímo na stránky BorISe.

...a ještě jedna aktuální informace:

Ve dnech 17.-18.10.2013 proběhl 7. ročník Adiktologické konference Jihočeského kraje a v jednom z příspěvků jsme seznámili přítomné s Borisem. Teď nepřijde nic jiného, než klasické “zájem o Borise předčil naše očekávání” … tak nepředčil, protože naše očekávání bylo opravdu veliké. V každém případě nás velmi těší, že je o systém tak velký zájem (dokonce i z Úřádu vlády ČR).

Na závěr díky všem, kteří projektu pomohli či pomáhají, byť je v něčích silách “jen” někoho slovem pochválit nebo otevřít pivo vývojáři, který si soustředěně … vývojaří.

úterý 22. října 2013

Jednoduché filtrování seznamů v AngularJS

V našem posledním projektu chceme (čistě v Javascriptu) mít vyhledávací filtr nad seznamem objektů. Asi nějak takhle:

Jenže objekty můžou obsahovat vnořené objekty, které obsahují vnořené objekty s dalšími vnořenými objekty – chápete, kam mířím?
V první verzi jsme si hráli s rekurzí, procházeli properties objektu, přeskakovali funkce atd. atd. 
Ne že by to nefungovalo, ale je to spousta kódu, který se špatně čte, určitě je v něm nějaká chyba a jistě se už našel někdo, kdo to napsal líp.

No jasně – a byl to ten chlápek co psal JSON.stringify()!

Když se postavíme na ramena obrů a použijeme JSON (a Underscore.JS), tak se s vyhledáváním dostaneme na 5 řádek jednoduchého kódu.

Když přidáme vyhledávání podle více klíčových slov, validace vstupů a možnost ignorovat některé properties objektu, tak jsme pořád na 22. řádcích:


Řídíme se zásadou, že jedno demo řekne víc než tisíc slov. Hezké hraní.

A kdyby náhodou, tak zbytek kódu je na Githubu.

středa 16. října 2013

Omezení přístupu do AppEngine aplikace

Poměrně často narážíme na požadavek omezení přístupu uživatelů do aplikace na AppEngine.

Modelový příklad: Zákazník si přeje omezit přístup do aplikace tak, aby do ní mohli pouze uživatelé z domény xxx.cz, yyy.cz a fragaria.cz.

Google nabízí pouze omezení přístupu buď na libovolnou (ale pouze jednu) Google Apps doménu nebo na jakéhokoliv uživatele z Google Apps domény bez omezení.

První možnost tedy použít nemůžeme, druhou používáme k vynucení přihlášení uživatele – omezení na Google Apps domény je pro nás OK.

Postup, který jsme používali dosud je podobný jako například v tomto článku. Připravíme si anotaci @user_required, která zkontroluje uživatele a tu "nalepíme" na všechny metody příslušných HTTP handlerů. To ale znamená, že máme anotace rozeseté všude a je snadné jí někde zapomenout.

Dneska +Robin Gottfried přišel s mnohem elegantnějším řešením.
Využívá metodu __call__() z webapp2, přes kterou procházejí všechny requesty v aplikaci a kontrolu dělá tam.

Asi takhle:

Samozřejmě je nutné místo standardní WSGIApplication  použít vlastní podtřídu: