Delayed Content Loading

Vitajte pri ďalšom z mojich blogov, tento raz to nebude o bezpečnosti, ale nadviažem na článok od Ernesta Sawyera o mobile-first štandarde, ktorý sa pomaly ale isto pretláča do popredia vývoja webových aplikácii.

Konkrétne sa budem venovať z časti teórii, no hlavne praxi rozloženia stránky do načítateľných fragmentov. Ukážeme si aj príklad veľmi jednoduchej aplikácie, ktorú dosiahneme práve metódou mobile-first a takzvaným Delayed Content načítavaním.

O mobile-first responzívnom dizajne sa dočítate v Ernestovom článku. Ja sa skôr povenujem vyššie spomenutému Delayed Contentu.

Ako nám už názov napovedá, jedná sa o určitú časť obsahu, ktorá sa nenačíta hneď, ale s určitým oneskorením. To je v podstate preklad.

Problém

Teraz k praxi. Predstavte si, že máme web. Naprogramovali sme responzívny template s tým, že očakávame návštevy z mobilných zariadení za použitia mobilných dát. V tomto prípade musíme pri vývoji dbať na to, aby sme za prvé používali čo najmenej externých knižníc, a za druhé aj na to, aby sme naraz nenačítavali kopec obsahu, kde to nemá zmysel, a kde sa to dá spraviť neskôr.

Na web nám chodia aj ľudia z desktopov, ale tých zasa nechceme obmedziť tým, že by sme im načítali len časť obsahu, keďže obrazovka desktopu alebo notebooku pojme oveľa viac obsahu s oveľa menším písmom.

Čo teraz?

Práve na to nám slúži Delayed Content. Jednoducho si načítame len potrebné časti webu, ak dostaneme návštevu z mobilu/tabletu, prípadne si načítame kľudne aj všetok obsah, ak nám príde návšteva z desktopu/notebooku.

V praxi vieme túto súhru alebo aj súčinnosť zabezpečiť pomocou Javascriptu. Áno, ak chceme byť úplne top, tak to spravíme aj na strane servera cez user-agent verifikáciu, avšak pre naše potreby bude úplne stačiť Javascriptová kontrola.

Čo sa týka načítania obsahu použjeme JavaScript knižnicu jQuery a Ajax.

Pre demonštračné účely som si vytvoril malú aplikáciu, ktorá je pre mňa osobne dosť užitočná (veľmi rád čítam). A veľmi rád čítam NY Times. Vďaka ich skvelému mnohostrannému API dokážete v priebehu niekoľkých minút spracovať všetky dáta, ktoré si vaša dušička praje. A to všetko veľmi jednoducho.

Nakoľko som veľmi lenivý (), tak Vám vytvorenie konta na NY Times neukážem. Ale každopádne verím, že to zvládnete aj sami. Dám vám sem len potrebné URL a to konkrétne http://developer.nytimes.com/ a druhú potrebnú http://developer.nytimes.com/docs.

Tu sa dočítate všetko potrebné, každopádne tento krok môžete preskočiť, slúži čisto len na moje demonštračné účely.

Takže rozvrh prác bude nasledovný

HTML 5 layout
Získanie JSON dát (tu Vám ukážem taký “hack” ;)) a vypísanie

Ako vidíte bude toho málo, takže za chvíľu sme na konci.

Najskôr ako prvé zo všetkého pre našu malú aplikáciu potrebujeme nejaký HTML 5 layout. Nemá zmysel sa namáhať s niečím super náročným, takže pre demonštráciu si pripravíme takýto layout.

HTML 5 layout

súbor si pomenujeme index.html

<!DOCTYPE html>
<html>
<head>
  <title>NyTimes Most viewed articles reader</title>
  <meta charset="utf-8">
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div class="container">
  <!-- Tu v buducnosti budu clanky z kategorie technology -->
  <section id="articles_technology">
  <div class="bs-callout bs-callout-info">
    <h4>Technologie</h4>
    <button class="btn btn-default" onclick="getArticles('technology')">Načítať články</button>
  </div>

  </section>

  <!-- Tu v buducnosti budu clanky z kategorie arts -->
  <section id="articles_arts">
    <div class="bs-callout bs-callout-info">
      <h4>Umenie</h4>
      <button class="btn btn-default" onclick="getArticles('arts')">Načítať články</button>
    </div>

  </section>

  <!-- Tu v buducnosti budu clanky z kategorie science -->
  <section id="articles_science">
    <div class="bs-callout bs-callout-info">
      <h4>Veda</h4>
      <button class="btn btn-default" onclick="getArticles('science')">Načítať články</button>
    </div>

  </section>
</div>
</body>
</html>

V príklade vidíme, že som si troška protirečil, avšak v praxi naozaj nevyužívam externé zdroje, toto je opäť čisto na demonštráciu a na urýchlenie práce. Takže v tej HTML kostre vidíte naloadovaný Bootstrap css a jQuery js knižnicu.

Sú tam sekcie, v nich nadpis a v nadpise button. Button bude slúžiť LEN pre mobilné zariadenia. Dostaneme sa k tomu v ďalšom kroku.

Získanie JSON dát a vypísanie

Teraz si nejako musíme získať dáta z NYTimes API. Nakoľko ich API nefunguje úplne 100%, tak to musíme troška obísť. Tu bude ten “hack”. Ak by sme “pýtali” dáta len tak, cez URL, ktorú sme si vyskladali podľad dokumentácie, tak by sa nám vrátila chybová hláška, že nemáme oprávnenie na cross-domain prístup k dátam.

Avšak nič nie je bez riešenia a preto si vytvoríme ako prvé script v PHP, ktorý pomenujeme napríklad celkom deskriptívne a to proxy.php.

<?php
if (!isset($_GET['url'])) die();
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url);

Tento súbor nám v podstate “oklame” server na ktorý dopytujeme a získa dáta. Čiže teraz ak vieme ako získame dáta, vieme si napísať nejaký ten JavaScript, ktorým získame presne to, čo potrebujeme.

Javascript bude v nasledovnom znení:

 function getArticles(source){
      var data_file = "proxy.php?url=http://api.nytimes.com/svc/mostpopular/v2/mostviewed/"+source+"/7.json?api-key=cc33104d8711cbf918051690f0d08a22:12:68717138";
      $.getJSON( data_file, function( data ) {
        var items = [];
        $.each(data['results'] , function(key, val) {
          items.push( "<article><h3><a href='"+val['url']+"'>" + val['title'] + "</a></h3><p>"+val['abstract']+"</p></article>" );
        });
        $( "#articles_"+source+"").append(items);
      });
    }

    $(document).ready(function(){
      if (document.documentElement.clientWidth > 640) {
        $('.btn').css('display','none');
        getArticles('technology');
        getArticles('arts');
        getArticles('science');
      }
    });

Tak a teraz si vysvetlíme čo prečo a ako.

Ako prvé si vymyslíme nejakú funkciu, ktorú sme si nabindovali už vopred na tlačidlá do HTML template-u, ak ste si všimli.

Funkcia má za úlohu získať parameter, čo si želáme stiahnuť z NY Times a rovnako tak požadovaný obsah získať a “prilepiť” do našej stránky v HTML formáte.

Všimnite si ako pristupujeme k externému JSON súboru

var data_file = "proxy.php?url=http://api.nytimes.com/svc/mostpopular/v2/mostviewed/"+source+"/7.json?api-key=cc33104d8711cbf918051690f0d08a22:12:68717138";

Ako prvé je náš PHP script, ktorý sme si napísali pred chvíľou, tento skript získava parameter url z GET-u a vytiahne a vráti nám JSON dáta.

Premenná source v Javascriptovom scripte zabezpečuje to, že dostaneme to, čo chceme. V našom prípade môže mať jednu z troch hodnôt a to konkrétne science, technology, arts.

Ďalej vidíme už len klasické prečítanie prijatého obsahu vo formáte JSON a následné “nazbieranie” dát do poľa items[], ktoré v ďalšom kroku “prilepíme” do špecifického kontajnera, ktorý zasa určuje parameter “source”.

Čiže to by bol stručný popis tejto funkcie. Ďalej vidíme veľmi dôležitú vec, a to získanie rozlíšenia zariadenia a porovnanie.

V našom prípade podmienka znamená AK má zariadenie rozlíšenie väčšie ako 640px, tak načítaj všetky možné články, zo všetkých kategórii, rovnako tak skryje button na načítanie (áno, skryť sa to dá aj cez media query).

Avšak ak sme na mobile, tak nechceme hneď načítať všetky články, chceme len určitú kategóriu, ktorú si máme možnosť vybrať. A to nám zapezpečí práte toto oneskorené načítanie. Alebo aj Delayed Content.

Čiže celý kód môže aj s mikro css vyzerať nejak takto:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>NyTimes Most viewed articles reader</title>
  <meta charset="utf-8">
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .bs-callout-info {
      background-color: #f4f8fa;
      border-color: #bce8f1;
    }
    .bs-callout {
      margin: 20px 0;
      padding: 20px;
      border-left: 3px solid #eee;
    }
    .bs-callout-info h4 {
      color: #34789a;
    }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
  <script type="text/javascript">

    function getArticles(source){
      var data_file = "proxy.php?url=http://api.nytimes.com/svc/mostpopular/v2/mostviewed/"+source+"/7.json?api-key=cc33104d8711cbf918051690f0d08a22:12:68717138";
      $.getJSON( data_file, function( data ) {
        var items = [];
        $.each(data['results'] , function(key, val) {
          items.push( "<article><h3><a href='"+val['url']+"'>" + val['title'] + "</a></h3><p>"+val['abstract']+"</p></article>" );
        });
        $( "#articles_"+source+"").append(items);
      });
    }

    $(document).ready(function(){
      if (document.documentElement.clientWidth > 640) {
        $('.btn').css('display','none');
        getArticles('technology');
        getArticles('arts');
        getArticles('science');
      }
    });

  </script>
</head>
<body>
<div class="container">
  <!-- Tu v buducnosti budu clanky z kategorie technology -->
  <section id="articles_technology">
  <div class="bs-callout bs-callout-info">
    <h4>Technologie</h4>
    <button class="btn btn-default" onclick="getArticles('technology')">Načítať články</button>
  </div>

  </section>

  <!-- Tu v buducnosti budu clanky z kategorie arts -->
  <section id="articles_arts">
    <div class="bs-callout bs-callout-info">
      <h4>Umenie</h4>
      <button class="btn btn-default" onclick="getArticles('arts')">Načítať články</button>
    </div>

  </section>

  <!-- Tu v buducnosti budu clanky z kategorie science -->
  <section id="articles_science">
    <div class="bs-callout bs-callout-info">
      <h4>Veda</h4>
      <button class="btn btn-default" onclick="getArticles('science')">Načítať články</button>
    </div>

  </section>
</div>
</body>
</html>

Demo tejto aplikácie môžte nájst na http://nytimes.detroit.sk

Ok, máme nejaké demo, možno chápete na čo je to dobré, avšak pri takejto drobnej aplikácii sa to ťažšie demonštruje, koľko času a dát to môže ušetriť.

Uvediem posledný príklad z praxe, predstavme si, že máme e-shop, ktorý je responzívny, prejdete na stránku produktu, produkt bude mať zobrazené len základné info ako je fotka, cena, akcia a odkaz na kúpu. Toto by sa načítalo rýchlo, len niekomu to nemusí stačiť, a práve tu vstupuje do hry Delayed Content, ktorý môže zabezpečiť dodatočné načítanie popisu produktu, recenzii, komentárov a podobne.

Tento príklad som konkrétne našiel tu: http://24ways.org/2011/conditional-loading-for-responsive-designs/

Takže snáď Vás toto k niečomu podobnému inšpiruje. Ak nájdete nejakú chybu, píšte Je štvrť na tri ráno, a niekde som mohol spraviť chybu, tak sa ospravedlňujem.

Sleduj nás na LinkedIn-e

Delayed Content Loading

Problém

Čo teraz?

Čo sa týka načítania obsahu použjeme JavaScript knižnicu jQuery a Ajax.

Takže rozvrh prác bude nasledovný

Ako vidíte bude toho málo, takže za chvíľu sme na konci.

HTML 5 layout

Získanie JSON dát a vypísanie

Tak a teraz si vysvetlíme čo prečo a ako.

Čiže celý kód môže aj s mikro css vyzerať nejak takto:

PREDVYBRANÉ PRACOVNÉ PONUKY »

DB/aplikačný administrátor/ka

Systémový administrátor/ka

Network administrátor/ka

Odporuč nám kamaráta a pomôžeme mu spolu!

NAJNOVŠIE BLOGY

JSDays 2024: Online konferencia pre JavaScript nadšencov

Nový kratší formát, prizepool 3900€ a 4 herné tituly – takto bude vyzerať 8. sezóna Slovenskej univerzitnej ešportovej ligy!

SecTec Security Day 2024: Využitie Umelej Inteligencie v Kybernetickej Bezpečnosti

Čítaj ďalej:

Služby

Informácie

Sleduj nás