Web-sovellukset

TIE-23500 Web-ohjelmointi


Erilaisia web-sovelluksia

  • Perinteisesti web-selain on toiminut vain renderöintialustana palvelimen tuottamille HTML-dokumenteille

    • Dokumenteissa on linkkejä, joita seuraamalla ladataan seuraava HTML-dokumentti
  • JavaScript-kielen ja selaimen tarjoamien rajapintojen myötä entistä enemmän toiminnallisuutta voidaan siirtää selaimen suoritettavaksi

  • Web-sovellusta suunniteltaessa yksi olennainen kysymys on kuinka paljon toiminnallisuutta toteutetaan selainpäähän vs palvelinpäähän


Web-sovelluksen kerrosarkkitehtuuri

  • Web-sovelluksen ohjelmakoodi voidaan jakaa loogisiin kerroksiin, joilla kullakin on oma roolinsa
    • ns. kerrosarkkitehtuuri

  • Usein käytetty jaottelu on kolme kerrosta:
    1. Esityskerros (Presentation Layer)
      • Näkymän manipulointi
    2. Logiikkakerros (Business Logic Layer)
      • Sovelluksen toimintalogiikka
    3. Datakerros (Data Layer)
      • Datan lukeminen ja kirjoittaminen
      • Yhteys tietokantaan

Monitasoarkkitehtuuri

  • Loogisen jaottelun lisäksi täytyy huomioida se miten koko sovellus on fyysisesti jaoteltu

    • Esim. mikä osa palvelimella ja mikä selaimessa
  • Fyysisen jaottelun yhteydessä puhutaan monitasoarkkitehtuureista (n-tier architecture)

    • Tasot (tiers): fyysinen jaottelu
    • Kerrokset (layers): looginen jaottelu
  • What's the difference between "Layers" and "Tiers"?


Kolmitasoarkkitehtuuri

  • Usein pienessä/keskisuuressa web-sovelluksessa on kolme tasoa (3-tier architecture)*
    1. Web-selain (asiakastaso, client tier)
    2. Web-palvelin (sovellustaso, wep application tier)
    3. Tietokantapalvelin (tietokantataso, database tier)

* n-tier architecture on yleisesti käytetty käsite, mutta eri tasojen nimet eivät ole vakiintuneita. Näissä kalvoissa käytetään samoja käsitteitä kuin mm. tässä artikkelissa, jossa on muutenkin hyvää lisätietoa aiheeseen liittyen.


Tasot & kerrokset

  • Web-sovelluksen arkkitehtuuria suunnitellessa täytyy päättää mitä kerroksia sijoitetaan millekin tasolle

  • Kerrokset

  • Tasot

  • Käydään läpi muutama eri vaihtoehto -->

Kevyt asiakas

  • Perinteinen tapa on sijoittaa kaikki kerrokset web-palvelimelle

  • Näkymät generoiva esityskerroskin on palvelimella

    • Selain toimii vain yksinkertaisena HTML-renderöijänä
  • Tällaisesta ratkaisusta käytetään nimitystä kevyt asiakas

    • thin client

Kevyt asiakas -esimerkki


Raskas asiakas

  • Kevyen asiakkaan vastakohta on raskas asiakas
    • fat/thick/heavy/rich client

  • Sekä sovelluslogiikka että näkymän päivitys suoritetaan selaimessa
    • Palvelimelle jää vain datarajapinta

Raskas asiakas -esimerkki


Kevyt vs raskas asiakas

  • Kevyt asiakas

    • Ei juurikaan toimintalogiikkaa selaimessa
    • Kun selain pyytää sivua, palvelin koostaa sen kokonaisuudessaan ja palauttaa selaimelle
  • Raskas asiakas

    • Hyödyntää runsaasti JavaScriptiä, mm.
      • näkymän manipulointiin
      • datan hakemiseen palvelimelta Ajax-kutsuilla
      • ym.
  • Myös saman web-sovelluksen/-sivuston jotkut osat voidaan toteuttaa kevyenä asiakkaana, jotkut raskaana


Raskaan asiakkaan hyötyjä

  • Ei sivunlatauksia

    • parempi käyttökokemus
  • Vähemmän ladattavaa

    • ei koko sivua, vain tarvittava data
  • Yksinkertaisempi palvelin

    • skaalautuu
    • palvelinresursseja ei tarvita niin paljoa, sillä suuri osa työstä tehdään käyttäjien selaimissa
  • HTML-, CSS- ja JavaScript-tiedostot ovat staattisia

    • cacheutuvat hyvin

Raskaan asiakkaan ongelmia

  • Ensimmäinen sivunlataus voi olla hidas

  • Vaatii suorituskykyä selainpäässä

    • voi olla ongelma mobiililaitteille
  • Selaimen takaisin-painike ja muu navigointi?

  • Hankala hakukoneroboteille

    • ja kaikille muille jotka eivät suorita JavaScriptiä
  • Toteutuskielenä oltava JavaScript

    • tai joku selain-plugin
    • tai joku kieli, josta generoidaan julkaisuvaiheessa JavaScriptiä

Yhden sivun sovellus

  • Sellaista web-sovellusta, jossa HTML-dokumentti ladataan vain kerran, kutsutaan yhden sivun sovellukseksi

    • Single Page Application (SPA)
    • Esityskerros selainpäässä
  • Ensimmäisen latauksen jälkeen kaikki palvelin-kommunikaatio tapahtuu Ajax-kutsuin

  • SPA voi silti käyttäjän näkökulmasta koostua useammasta "sivusta"

  • SPA on yleensä raskas asiakas

    • Esim. edellisen kalvon sähköpostiohjelma
    • On kuitenkin myös kevyempiä SPA:eja
      • kuten seuraavalla kalvolla -->

Kevyehkö asiakas*

  • Esityskerros selaimella, muut palvelimella
    • Selaimelta lähetetään palvelimelle "käyttöliittymätapahtumia"
    • Palvelin lähettää näkymään tehtävät muutokset selaimelle

* Ei oikea termi


Kevyehkö asiakas -esimerkki


Vielä yksi

  • Kerrokset eivät ole aina selkeästi yhdellä tasolla
    • Esim. toimintalogiikkaa voi olla sekä selaimessa että palvelimella


Leluesimerkki: Tervehtijä

  • Web-sovellus joka tervehtii käyttäjää nimeltä
    • Kaksi toteutusta: kevyt ja raskas asiakas

(Molemmat toteutukset huonoja ja epätietoturvallisia, oikeaa sovellusta ei kannata tehdä näin)

  • Kevyt asiakas

    • Käyttäjän nimi lähetetään HTML-lomakkeella palvelimelle
    • Palvelin koostaa vastaukseksi kokonaisen HTML-sivun
    • Toteutettu CGI Python -skriptinä Lintulassa
  • Raskas asiakas

    • Selainpään JavaScriptillä luetaan käyttäjän nimi ja päivitetään näkymä
    • Yhden sivun sovellus
  • Koska sovellus ei käytä dataa, ei datakerrosta tarvita


Tervehtijä


Tervehtijä: kevyt asiakas (Python CGI)

import cgi
import tervelogiikka

def print_http_headers():
    print 'Content-Type: text/html; charset=utf-8'

def print_html(tervehdys):
    print('''<!DOCTYPE html>
    ...
    <form method="GET" action="tervekevyt.py" >
        Syötä nimesi: <input id="nimi" name="nimi" type="text">
        <input type="submit">
    </form>
    <p class="tervehdys">%s</p>
  </body>
</html>''' % tervehdys)

form = cgi.FieldStorage()
if 'nimi' in form:
    tervehdys = tervelogiikka.tervehdi(form['nimi'].value)
else:
    tervehdys = ""

print_http_headers()
print('')
print_html(tervehdys)

Tervehtijä: raskas asiakas (JavaScript)

<body onload="init()">
<form>
    Syötä nimesi: <input id="nimi" name="nimi" type="text">
    <input type="submit">
</form>
<p class="tervehdys"></p>

<script src="tervelogiikka.js"></script>
<script>
  function init() {
    var form = document.getElementsByTagName('form')[0];
    form.addEventListener('submit', submitForm, false);
  }

  function submitForm(e) {
    e.preventDefault();
    e.returnValue = false;
    var nimi = document.getElementById('nimi').value;
    var tervehdys = tervelogiikka.tervehdys(nimi);
    var out = document.getElementsByClassName('tervehdys')[0];
    out.innerHTML = tervehdys;
  }
</script>
</body>

Tiedotteita

  • Harjoitustyöhönilmoittautumisharjoitustyö on julkaistu

    • Tee ilmoittautumislomake ja ilmoittaudu
    • Bonustehtävä: Ajax-ilmoittautuminen
    • Ilmoittautumisdedis 8.3.2015
  • Ensi viikon luennolla JavaScriptiä

    • Ota läppäri mukaan - pieni tehtävä