SPA bez serwera

Bąbelki, maseczki, masaże..
Czy to wam przyszło na myśl? Chwila relaksu jak najbardziej przyda się każdemu, ale jeśli zajrzałeś tu, aby poczytać o spa, to niestety zawiedziesz się :)

SINGLE PAGE APPLICATION!

Mówimy o aplikacjach webowych, gdzie nie nawigujemy do różnych podstron, a pozostajemy ciągle na tej samej. W ostatnich latach podejście to jest bardzo popularne, strony wyglądają znacznie ładniej, nawigacja jest bardziej logiczna i płynna i jesteśmy w stanie więcej na takiej stronce zrobić.

Pewnie zauważyłeś że technika idzie do przodu. HTML5 CSS3 i JS naprawdę stały się wystarczająco dojrzałe, żeby dało się w nich tworzyć fajne aplikacje i programy. Przeglądarki też poszły do przodu. Nawet IE już „nie je kleju” i w wersji 11 już tam w miarę coś w nim działa. :)

Jest fajnie! Oprócz lepszych przeglądarek, przy ciągłej dominacji JQuery sam JS też idzie do przodu. Już da się korzystać z czystego JS-a ;) . Część rzeczy też ogarnia za nas CSS3. Do tego powstały ciekawe frameworki JS-owe ułatwiające tworzenie aplikacji i porządkujące znacznie kod, które bazują na wzorcach MVC i podobnych. We wpisie właśnie będzie mowa o jednym z nich : Angular JS.

Dobra! To co jest potrzebne do zrobienia aplikacji? W sumie nie wiele. W zasadzie potrzebujemy jakiegoś edytora tekstu i „jedziemy z koksem”. A! No przydał by się kawałek wiedzy. Tak... to może pomóc ;)

Potrzebujemy przeglądarki. To takie minimum. Często też przydają się dodatkowe narzędzia do JS-a. Jakiś NODE JS, jakaś KARMA, ale to konieczne nie jest.

No i przydałby się serwer lokalny.

O serwer dzisiaj trudno nie jest.
Możemy korzystać z APACHE, IIS, czy jakichś innych „dużych” rozwiązań.
Możemy odpalić go np. z node.js:

http-server -p 8080

możemy z pomocą języka Python

python -m SimpleHTTPServer

Możemy jeszcze jakoś inaczej. No trudno nie jest.

TMTOWTDI

;)
( kto wie co to znaczy ? )

No to napiszemy taką „aplikacje” w angularze dajmy na to. Uruchamiamy serwer i działa. Tak? No tak! To o co chodzi?

(zwróć uwagę na adresy w zrzutach)

A no problem jakiś tam jest...

Patrz. Takie komórki, czy tablety. Nie zależnie od systemu już prawie wszystkie wspierają aplikacje HTML5.
Ba! Taki FIREFOX OS to tylko HTML5, podobnie TIZEN na początku miał mieć tylko aplikacje pisane w HTML-u 5!
Trzeba takie aplikacje spakować odpowiednio i będą działać „bez” serwera. Masz dostęp do plików, możesz nawet korzystać ze sprzętowych czujników itd. Super! A Desktop?

No tu, to trochę gorzej... Zdaje się że możesz spakować aplikację dla Windowsa już ( jak ktoś wie że jest inaczej to mnie poprawcie please). Ale dla innych systemów opcje są słabsze.

Nie masz dostępu do komputera w całości, jak to jest w wypadku aplikacji mobilnych. Do systemu plików itd.( chyba że robisz aplikacje dla konkretnej przeglądarki). Nie możesz ajaxem się „dobić” do lokalnych plików. No dobra, bądźmy szczerzy- zależy od przeglądarki. Jedne na to pozwalają, inne blokują.

No i tu jest pies pogrzebany. Nie mając dostępu do wywołań XHR nie pobierzemy sobie widoku. (Możemy za to robić JSONP z poziomu takiej aplikacji). Noooo... to spróbujmy to obejść ;)

Mamy napisaną super aplikacje w angularze, która działa na serwerku HTTP jakimś lokalnie. Chcemy teraz ją uruchamiać po porostu przez kliknięcie w index.html na komputerze.
Spróbujmy:

No... Nie wygląda to tak cudownie :/ „Lipa” bym powiedział.

Zaglądamy „pod maskę”, a tam mamy na przykład coś takiego:

<div ng-include="'views/common/navigation.html'"></div>

Mamy widok z podanym adresem, ale przeglądarka do tego zasobu nam się nie dostanie.(Firefox dostanie się, ale chrome, czy IE nie)
No to pomysł na obejście tego problemu polega na użyciu ng-template.

Słówkiem wyjaśnienia. W angularze możemy korzystać z widoków. Widoki „przełączają” się różnie- albo poprzez zaprezentowane ng-include, albo np. poprzez zmianę stanu. No mniejsza o to. Aplikacja wtedy sięgając po zasób wykonuje request ajax-owy, „kompiluje” widok, i wstrzykuje go w odpowiednie miejsce. Ufff... temat jest cięższy niż mi się wydawało :) Łapki w górę kto zna angulara? ;) Bo pewnie większość nudzę.
Ng-template natomiast to zaszyty w kodzie kawałek HTML-a. No template po prostu ;)

Przykład:

<script type="text/ng-template" id="JAKIEŚ ID" >

	TU JAKIŚ HTML

</script>

Szablony można wykorzystać zamiennie z zewnętrznymi widokami.
NO! Czujesz już gdzie będzie „myk”? Tak! Wrzucimy wszystkie widoki do Index.html jako szablony! Proste!

Napiszmy prosty skrypt nazwijmy go "wypluj". Cygwin jak zawsze niezastąpiony ;)

#!/bin/bash

wypluj ()

{

  for f in `ls $1`

  do

    if [ -f $1$f ]

    then

    echo "<script type=\"text/ng-template\" id=\"$1$f\" > "

    cat $1$f

    echo "</script>"

    fi

    if [ -d $1/$f ]

    then


      wypluj $1$f/ $2

    fi

  done

}

wypluj $1

Ja sobie to przekierowuje do jakiegoś pliczku i mam „skompilowane widoki”

wywołanie:

sh wypluj.sh views/ > szablony.html

Ograniczenia? No! Przecież! Jasne że są :) Nie można w środku widoków korzystać z ng-template. Dało by się to też obejść, jak będę musiał to to zrobię :)

Na koniec dorzucamy do index.html opakowany ładny kod i gotowe!

Taką aplikacje możemy sobie spokojnie przenieść na kluczu USB, płycie, dyskietce, itd.
I mamy SPA bez serwera! Na wszystkich przeglądarkach i bez dodatkowego pakowania!