Komentáře k článku

Zkušenosti z vývoje WebShotteru

Na konci listopadu byla spuštěna v Česku vyvinutá služba WebShotter, která dělá navenek velmi jednoduchou věc – každý den vyfotí zadané URL a archiv screenshotů zpřístupňuje ve formě připomínající Time Machine z Mac OS. Přes jednoduchý vzhled se na implementací podílí poměrně hodně technologií a o zkušenostech s nimi se podělí Borek Bernard, autor a jeden z vývojářů celé služby. Předáváme slovo…

Zpět na článek

35 komentářů k článku Zkušenosti z vývoje WebShotteru:

  1. Jakub Mrozek

    K Node.js

    Díky za zajímavý článek. Služba se mi líbí a už jsem zvažoval, že bych ji používal:-)

    Myslím si, že (místy) negativní zkušenost z výběru Node.js byla výraznou měrou způsobena tím, že jste Node.js použili poprvé a na projektu jste se ho učili. Pokud byste začali psát aplikaci třeba v .NET, aniž byste s ním měli předtím jakékoliv zkušenosti, vývoj by trval pravděpodobně výrazně pomaleji.

    Jinak s poznámkami k Jade souhlasím, ze stejných důvodů preferuji jiné šablonovací systémy v Node.js.

    1. Borek BernardAutor příspěvku

      Re: K Node.js

      Seznamování s Nodem nás určitě zpomalilo, nicméně všechny body píšu s odstupem a nemyslím, že by to byly jen první dojmy.

      Bylo by určitě zajímavé, kdybys k jednotlivým výhradám přidal svoje zkušenosti, které dost možná budou opačné než ty naše.

      1. Tany

        Re: K Node.js

        Node je zvláštní, o tom žádná. Ona většina lidí neumí moc dobře myslet jinak, než v rámci klasických jazyků. Neznám zatím jiný nástroj, který dotáhl longliving procces, async a event driven do takové dokonalosti.

        JS (v8) je luxusní sluha, ale snad nejhorší možný pán. Dobytek v tom klidně napíše něco, proti čemu se zdá inliner v Perlu jako krásně čitelný kód. Céčkař bude JS vždy nenávidět, a naopak. Oboje potřebuje úplně odlišný způsob myšlení.

        Špatná debugovatelnost async kódu je způsobena spíše „špatným“ kódem, je jasné že debugovat callback callbacku v callbacku je šílenost. A do toho stavu se dostat není vůbec nutné. Stačí použít Async a prostě si člověk udělá frontu.

  2. Martin Kučera

    realizace záměru vs. technologické hračičkování

    Na článku je vidět, jak to dopadá, když se nějakou službu rozhodnou spustit programátoři. Místo snahy o co nejrychlejší spuštění se utopí v technologickém hračičkování.

    Dnes jsou například desítky služeb, které vám udělají screenshot přes API za naprosto směšný peníz.

    Proto pozor! Jistě je hezké si všechno naprogramovat sám, ale ideální je jen poskládat hotové komponenty!

    Většinou to dopadá tak, že super technologicky vymazlený web zkrachuje, zatímco jeho stupidní konkurent, který to splácal za odpoledne na Joomle, prosperuje :)

    1. baggz

      Re: realizace záměru vs. technologické hračičkování

      Dnes jsou například desítky služeb, které vám udělají screenshot přes API za naprosto směšný peníz.

      Můžeš, prosím, jmenovat nějaké?

    2. Borek BernardAutor příspěvku

      Re: realizace záměru vs. technologické hračičkování

      Je to určitě dobrá poznámka a konkrétně u screenshotovacího backendu jsme zvažovali, jestli nepoužít nějakou stávající službu (odpověď pro Františka Hábu: mezi takové služby patří např. url2png nebo websnapr). Neudělali jsme to ne z důvodu, že jsme programátoři a musíme si všechno naprogramovat sami, ale:

      1) Dopředu člověk neví, jestli bude náročnější vlastní implementace nebo integrace služby třetí strany, obojí má svoje rizika. Ze začátku se navíc nezdálo, že by rozchození nějakého vlastního screenshotovátka mělo být nějak obtížné (měli jsme svým způsobem smůlu, že nástroje typu Selenium nefungovaly tak, jak je inzerováno).

      2) Když jsme koukali po konkrétních službách, byly pro naše účely buďto relativně drahé (třeba url2pgn snadno vyleze do tisícovek měsíčně) nebo funkčně nevyhovující (websnapr má např. omezení na velikost generovaných obrázků).

      3) Screenshotování je jádro naší služby a obecně je riskantní takovou činnost svěřit třetí straně. Co když např. nějaký klient bude potřebovat fotit pluginový obsah, který služba třetí strany nezvládá? U vlastní implementace můžeme nové požadavky flexibilně řešit.

      V našem případě tedy bylo jít do vlastní implementace vědomé rozhodnutí, ať už dobré nebo špatné :)

        1. Borek BernardAutor příspěvku

          Re: realizace záměru vs. technologické hračičkování

          Dobrý den, konkrétně vaši službu jsme nezvažovali. Jak jsem ale odpovídal výše, od začátku jsme z různých důvodů inklinovali k vlastnímu řešení a nyní už pro nás přechod na SaaS mnoho smyslu nedává. Ale díky na upozornění na další službu z této oblasti.

          1. marek

            Re: realizace záměru vs. technologické hračičkování

            Jasne, rozumiem. BTW, tych „konkurencych API“ je viac. na http://snapcasa.com/ najdete (podla mna) kompletny zoznam „screenshotovacich API“. Osobne pokladam za najsilnejsich „hracov“ shrinktheweb a url2png. Rada na zaver: suhlasim s nazorom p. Martina Kučery. Aj ja som povodne planoval rozne technicke „prkotiny“ (ano, z pohladu zakaznika su to prkotiny) ale zo vsetkeho za najdolezitejsie povazujem: spustit to co najskor a pocuvat zakaznikov, t.j. implementovat to, co pozaduju a nie to, co si vyvojovy tim mysli, ze by mohli zakaznici ziadat. Prajem vam vela uspechov.

      1. liborse

        Re: realizace záměru vs. technologické hračičkování

        Tento přístup se mi líbí a zdá se mi rozumný. V Joomle sice web naflákám za pár minut, ale jakmile třeba zákazník potřebuje něco specifického, tak joomla ztrácí svůj půvab a rychleji vyvinu něco sám. I proto mám vlastní redakční systém.

        1. Martin Kučera

          Re: realizace záměru vs. technologické hračičkování

          Vlastní CMS? Já zírám! Příslušníky tohoto mizejícího programátorského druhu jsem už neviděl řadu let!

          1. Čelo

            Re: realizace záměru vs. technologické hračičkování

            Každý vývojář by měl mít svůj hobby projekt… proč by to nemohlo být CMS?

  3. Futrál

    Archive.org

    Ad „Do you own a blog, e-shop or any other website and would like to see how it evolves over time?“

    Vím, že to muselo dát spoustu práce, ale mám pro vás špatnou zprávu – taková služba už tady je od roku 1996 – jmenuje se Wayback Machine (na Archive.org) a je dokonce ještě lepší – ukládá plné texty a jde v ní klikat na odkazy. Takže si člověk může zkopírovat část textu (není to jen obrázek) a taky se může podívat, jak kdysi vypadalo jeho HTML.

    1. Jakub Mrozek

      Re: Archive.org

      Archive.org ale nedělá screenshoty každý den. ale +/- jednou za měsíc a také nejsou dostupné hned, ale až po nějaké době. Navíc neukládá větší obrázky.

      1. Futrál

        Re: Archive.org

        No vidíte, další důvod, proč nemít zprasený web. Moje stránky se archivují přesně tak, jak vypadají ve skutečnosti :-)

  4. espinosa_cz

    Firefox Screenshoter

    Překvapilo mě, jaké jste měli problémy s děláním snímků obrazovky.
    K dělání screenshotů webů používám Screenshoter. Dlouhodobě a intenzivně k naprosté spokojenosti.

    https://addons.mozilla.org/en-US/firefox/addon/screenshoter/

    Po špatných zkušenostech s ukládáním webu, klasické Save As ve Firefoxu, dělám prakticky jen screenshoty. Každý online nákup nebo bankovní transakci si raději fotím. Obdoba online účtenky. A že weby leteckých společností jsou samá animace a reklama, zatím nebyl problém. Google Maps taky ne. Zatím mě nezklamal.

    Nevíte co používají za technologie? Hádám JS a Firefox.

    Před tím jsem používal Screengrab
    https://addons.mozilla.org/en-US/firefox/addon/screengrab
    ..ale ten měl občas potíže s Java applety, což naštěstí reálně moc nevadilo.

    1. Borek BernardAutor příspěvku

      Re: Firefox Screenshoter

      Nějaký addon do Firefoxu jsme zvažovali taky, ale tam je zase výzva, jak takový kód zavolat zvenčí, z automatizovaného skriptu. Možná by to ve výsledku bylo jednoduché, ale nikdo z nás jsme s tím neměli zkušenosti, takže něco jako Selenium vypadalo jako lepší volba.

      1. espinosa_cz

        Re: Firefox Screenshoter

        > Nějaký addon do Firefoxu jsme zvažovali taky, ale tam je zase výzva, jak takový kód zavolat zvenčí, z automatizovaného skriptu

        Myslel jsem mu ten kód vybrat a upravit ho na plnohodnotný samostatný tool. Říkáte, že JavaScriptu slušně rozumíte. Určitě lepší než psát čistě vlastní.
        Selenium je zase primárně testovací nástroj. Tam jste nemuseli upravit nic?

        1. Borek BernardAutor příspěvku

          Re: Firefox Screenshoter

          Pokud ten fotící kód vůbec je v JavaScriptu (mám pocit, že před časem jsem používal nějaký screenshotovací addon do Firefoxu a ten byl v Javě), tak i v tom případě si moc nedokážu představit, jak nebo co a kam by se mělo z addonu vykuchat. Naše představa spíš byla, rozchodit Firefox s nějakým takovým addonem a pak třeba přes nějaké API Firefoxu (existuje-li takové) ten addon k udělání screenshotu instruovat. Použití Selenia ale bylo skutečně jednodušší a tam se teoreticky skutečně nemusí nic upravovat – má API metodu pro uložení screenshotu do souboru.

          1. espinosa_cz

            Re: Firefox Screenshoter

            > Pokud ten fotící kód vůbec je v JavaScriptu

            Bezpečně je. Celý ten plugin jsou 2 kratší JS skripty a 2 XUL soubory.
            Mrkněte na ff-overlay.js

            Proč by proboha byla potřeba Java? Celá funkčnost je ve Firefoxu (Gecku). Stačí ji nějak inteligentně zavolat.

            > ..jak nebo co a kam by se mělo z addonu vykuchat.

            Udělal jsem to za vás. Je to v podstatě jedna klíčová metoda:

            drawToCanvas : function(win, box) {
            var canvas = document.crea­teElementNS(„http://­www.w3.org/1999/xhtml­“, „html:canvas“);
            canvas.style.width = box.width + „px“;
            canvas.style.height = box.height + „px“;
            canvas.width = box.width;
            canvas.height = box.height;
            var ctx = canvas.getCon­text(„2d“);
            ctx.clearRect(0, 0, box.width, box.height);
            ctx.save();
            ctx.drawWindow(win, box.x, box.y, box.width, box.height, „rgba(0,0,0,0)“);
            ctx.restore();
            return canvas;
            }

            a

            saveCanvas : function(canvas, file, mimeType) {
            // create a data url from the canvas and then create URIs of the source
            // and targets
            var io = Components.clas­ses[„@mozilla­.org/network/io-service;1“]
            .getService(Com­ponents.inter­faces.nsIIOSer­vice);
            var source = io.newURI(can­vas.toDataURL(mi­meType, „“), „UTF8“, null);
            var target = io.newFileURI(file)

            // prepare to save the canvas data
            var persist = Components.clas­ses[„@mozilla­.org/embeddin­g/browser/nsWeb­BrowserPersis­t;1“]
            .createInstan­ce(Components­.interfaces.nsI­WebBrowserPer­sist);

            persist.persis­tFlags = Components.in­terfaces.nsIWeb­BrowserPersis­t.PERSIST_FLAG­S_REPLACE_EXIS­TING_FILES;
            persist.persis­tFlags |= Components.in­terfaces.nsIWeb­BrowserPersis­t.PERSIST_FLAG­S_AUTODETECT_AP­PLY_CONVERSION;

            // displays a download dialog (remove these 3 lines for silent download)
            var xfer = Components.clas­ses[„@mozilla­.org/transfer;1“]
            .createInstan­ce(Components­.interfaces.nsI­Transfer);
            xfer.init(source, target, „“, null, null, null, persist);
            persist.progres­sListener = xfer;

            // save the canvas data to the file
            persist.saveU­RI(source, null, null, null, null, file);
            }

            Podrobnosti:
            https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

            Hádám že by to běželo dobře i s pouhým xulrunner

            Napište si k tomu v JS minimalistické HTTP/REST rozhraní pro vzdálené volání a máte perfektní light weigth optimalizované řešení.

            1. Martin Hassman

              Re: Firefox Screenshoter

              Tak Firefox to screenshotování přes canvasu nepodporovat vždy, dřívější verze onoho rozšíření to opravdu dělali přes Javu.

              1. espinosa_cz

                Re: Firefox Screenshoter

                Potřebná funkcionalita je od Geko 1.9.1, které bylo použito poprvé ve Firefoxu 3.5, který vyšel někdy v červnu 2009. To mi přijde jako dostatečně dlouhá doba. Kdy že začali vyvíjet ten jejich WebShotter?

                Odkazy:
                https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow%28%29
                http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29
                http://en.wikipedia.org/wiki/Mozilla_Firefox_3.5

                Čili renderování do canvasu je staré jako celé Node.js ;)
                které si autoři tak nadšeně chtěli vyzkoušet.

                Shodou okolností jsem začal screenshotovat přesně 25.11.2009, při koupi nového
                mobilu, první screenshot stále ve svém elektronickém učetnictví mám. Co bylo před rokem 2009 skutečně netuším.

                Mimochodem, podporu Javy pro browsery standardně neinstaluji, a to jsem Java programátor. Netěší se dobré pověsti co se týče bezpečnosti, bohužel.

                Použité Selenium mi přijde jako kanón na vrabce. Ze Selenium WebDriver mám zkušenosti. Smíšené. Bugů je tam až až, je to stále bleeding edge technologie, založit na tom jádro on-line služby považuji za ještě šílenější nápad než použít Node.js.

                Hehe, někdo mi srazil auru z 100% na 98%. Za dobrotu na žebrotu :)

                1. Borek BernardAutor příspěvku

                  Re: Firefox Screenshoter

                  WebShotter nemá „jádro“ a není na něčem fixně založený, je to služba jako celek a je možné, že backend šlo udělat nějak elegantněji. Každopádně jsem po zkušenostech skeptický k výrokům typu „stačilo těhle pár řádků a bylo by to“ – možné to je, ale takovou situaci jsme zkrátka zažili mnohokrát :)

                  Za kód každopádně díky, možná ho i v případě potřeby vyzkoušíme (ačkoliv ji zatím nemáme).

            2. Futrál

              Re: Firefox Screenshoter

              Díky, skvělý komentář – užitečnější než samotný článek a taky než všechny komentáře uživatele Hassman dohromady. Nechápu, proč se sem cpe a píše svoje bezduché poznámky…

  5. HSN

    Screenshotovaci sluzba pro inhouse pouziti

    Potreboval bych sluzbu co udela z webstranky screenshot ale musela by bezet u mne, potrebuju zpracovavat hodne dat (desetimiliony stranek za den). Neprodavate to nekdo?

    Vzdycky kdyz jsem si chtel nejakou sluzbu koupit pro inhouse pouziti tak mi ji neprodali. Nabizeli mi ze mi to rekneme za 60 tisic dolaru mesicne udelaji, pochopitelne bez zaruky kdyz to nepojede.

    1. koudejak

      Re: Screenshotovaci sluzba pro inhouse pouziti

      To je opravdu hodne screenshotu webu. Muzu se zeptat, k cemu takova silenost slouzi? Samozrejme pokud to neni super prisne tajne :)

      1. Čelo

        Re: Screenshotovaci sluzba pro inhouse pouziti

        Samozřejmě že to bude přísně tajné :) Co kdyby mu někdo ten nápad ukradl? :)

    2. Ondřej Kučera

      Re: Screenshotovaci sluzba pro inhouse pouziti

      Jak už tu několikrát v diskusi padlo, princip screenshotovače je poměrně primitivní záležitost, která spočívá ve spuštění instance browseru a jeho donucení k načtení stránky a uložení screenshotu.

      Pomocí Selenia jde o trivialitu: http://stackoverflow.com/questions/3422262/take-a-screenshot-with-selenium-webdriver

      Deset milionů za den je ale docela hodně. Pokud nechám 5 vteřin na načtení stránky a udělání screenshotu, stihnu jich za den pouhých 17 000! I kdybych to nechal běžet paralelně v deseti vláknech, pořád jsem řádově jinde než potřebujete.

      I kdybyste vymyslel brutální optimalizaci screenshotovače, pod půl vteřiny na screenshot se těžko dostanete. Stále mi to vychází na maximálně jednotky milionů za den. Takže farma 100 počítačů? Ta cena $60 000, kterou vám nabízeli, je hodně podhodnocená! :)

      1. HSN

        Re: Screenshotovaci sluzba pro inhouse pouziti

        Dostal jsem odpověď od lidí ze slovenska, který zde doporučovali v diskuzi, že jim to dělá zhruba 50 tisíc za den z jednoho počítače.

        V naprosto ideálním případě bych potřeboval 80 mega denně abych měl všechny screenshoty čerstvý. Podle ceny řešení, kterou ještě neznám, to pak přizpůsobím rozpočtu a z ideálního stavu se spočítá řešení co si na sebe vydělá.

        Počítače se dají sehnat u Amazonu hodně lacino, když jste velkoodběratel.

        1. HSN

          Re: Screenshotovaci sluzba pro inhouse pouziti

          tak už mi to se Seleniem screenshotuje. Moc se to ale nepředře. No jsem zvědavej jakou mi nabídne Borek cenu za 1 screenshot a SLA.

          1. Futrál

            Re: Screenshotovaci sluzba pro inhouse pouziti

            S tím SLA opatrně – to má smysl u dodavatelů, kteří jsou schopní něco reálně zaručit a mají za sebou kapitál pro vykrytí případných průšvihů – tzn. firma velikosti např. I.CZ a větší, pak samozřejmě kolosy typu HP, IBM… U těch malých platí, že slíbit se dá cokoli, ale kde nic není, ani smrt nebere ;-)

            V tomhle případě bych šel spíš do vlastního řešení (zdrojáky může dodat někdo jiný, ale prověřím si to a budu si to provozovat sám), případně do partnerství (více méně společný podnik, riziko i zisk sdílejí obě strany), ale ne do klasického dodavatelskood­běratelského vztahu.

            1. HSN

              Re: Screenshotovaci sluzba pro inhouse pouziti

              Bez SLA nemá pro IT firmu cenu si kupovat saas od externí společnosti. Udělají si to sami a levněji.

              Vývoj už mám hotovej. Zabralo to čtyři hodiny. Je to Selenium s integrací přes message broker -> Hadoop HDFS.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=3751