Strona w AJAX w ciągu 10 minut - zobacz jak to zrobić! Opcje

[implico]

Drodzy Użytkownicy Forum PHP,


Jesteśmy niewielką, ale innowacyjną i dynamicznie rozwijającą się firmą. W czasie naszej ponaddwuletniej działalności wdrożyliśmy szereg ciekawych projektów.

Chcielibyśmy podzielić się z Wami naszymi doświadczeniami, dlatego też postanowiliśmy rozbudować nasz blog firmowy. Wraz z każdym miesiącem (zgodnie z planem;), zamierzamy publikować jeden, jak mniemamy, interesujący artykuł dotyczący specjalistycznych zagadnień z zakresu tzw. webdevelopmentu.

Na początek zapraszamy do zapoznania się z naszą autorską wtyczką jQuery - AjaxGetContent. Pozwala ona w bardzo szybki sposób osiągnąć, a nawet przewyższyć efekt dostępny do niedawna jednie dla stron wykonanych w technologii Flash, jakim jest dynamiczna witryna oparta w całości na wywołaniach AJAX. Dzięki niej strona osiąga niespotykaną szybkość działania, przy zachowaniu pełnej widoczności dla wyszukiwarek oraz funkcji przycisków nawigacyjnych przeglądarek (wstecz/dalej).

Kilka przykładów wdrożenia biblioteki:
www.implico.pl (nasza strona firmowa)
www.ptchprie.pl (Polskie Towarzystwo Chirurgii Plastycznej, Rekonstrukcyjnej i Estetycznej)
www.finestra.pl (producent okien PCV)
www.klin-winter.pl (hurtownia AGD)
www.sportolimp.pl (hurtownia art. sportowych - w tracie uzupełniania treści)


Artykuł oraz pliki do pobrania znajdziecie pod adresem:
www.implico.pl/ajaxgetcontent_dynamiczna_strona_ajax,7.html

Miłej lektury:)


Bartosz Sak,
Project Manager
Implico, www.implico.pl


P.S. W następnych odcinkach:
- "Klasa Params. Wygodna obsługa wielu parametrów metod."
- "Pokonać Allegro WebAPI - praktyczna klasa obsługi aukcji."

[qrooel]

Nie ma tego na githubie jeszcze! (IMG:style_emoticons/default/smile.gif)

[sowiq]

@implico, klikam po tych linkach na Waszej stronie i za każdym razem content ładuje się z serwera. Przecież stronę 'Realizacje' odwiedziłem już 3 razy. Nie można by cache'ować raz załadowanego contentu? Na pewno przyspieszyłoby to działanie Waszej wtyczki.
A druga sprawa - adresowanie typu '#/kontakt.html' to stare dzieje. Spróbujcie zaimplementować History API z HTML5.

A inicjatywę udostępniania swoich rozwiązań jak najbardziej należy pochwalić. Tylko jak wspomniał @qrooel - bez githuba się chyba nie obejdzie (IMG:style_emoticons/default/wink.gif)

[edit]
Oraz, jak jestem np. na stronie http://www.implico.pl/kontakt.html i kliknę 'Artykuły', to strona się przeładuje i przeniesie mnie do http://www.implico.pl/#/artykuly.html

Ten post edytował sowiq 16.11.2012, 10:51:10

[Sephirus]

@sowiq Zgadzam się z twoimi sugestiami i odczuciami jednak co do "History API" to osobiście miałem z tym pewne problemy na tle kompatybilności i jakoś mnie to do końca nie przekonało.


@implico Sam pomysł nie jest rewolucją aczkolwiek podoba mi się - spotykałem się jednak z takimi rozwiązaniami już dawno temu (stare rozwiązania znane i kojarzone z AHAH - Asynchronous HTML over HTTP) jednak nie spotkałem się z tak (na pierwszy rzut oka) dopracowanym.

To co mi się podoba:
- konfiguracja
- podpięcie pod jQuery
- faktycznie działa szybko i płynnie
- brak problemów z treściami innymi niż HTML

To co mi się nie podoba:
- przekierowania na adres główny + /#/cośtam przy wejściu na inną niż główna stronę - rozumiem, że jest to zabieg celowy by nie powodować w adresie rzeczy typu "kontakt.html#/kontakt.html itd... ale czy to w czymś przeszkadza? Bot i tak tego nie zobaczy (IMG:style_emoticons/default/smile.gif)

[implico]

Dziękujemy za zainteresowanie!

Odpowiadając po kolei:

a. Wkrótce założymy profil na githubie.

b. Cache pobieranych podstron - już jest! Dodaliśmy też parametr konfiguracyjny "useCache". Strona ponownie odwiedzona pobierana jest z pamięci podręcznej.

c. History API z HTML5 niestety nie jest poprawnie obsługiwane przez np. Internet Explorera. Raczej rozważaliśmy Balupton. W każdym razie na moment obecny zostawiamy tę stabilną wersję.

d. @sowiq: "Oraz, jak jestem np. na stronie http://www.implico.pl/kontakt.html i kliknę 'Artykuły', to strona się przeładuje i przeniesie mnie do http://www.implico.pl/#/artykuly.html"
Chodzi o porządek, tak jak to zauważył @Sephirus, tak aby linki miały zawsze tę samą postać.

Zachowanie to określane jest parametrem konfiguracyjnym "baseUrl". Gdyby ustawić go na "", kontrola linków nie byłaby wykonywana, tym samym mielibyśmy zawsze doczynienia z wywołaniem AJAX. Także zostawiamy taką możliwość.

Zapraszamy do testowania i czekamy na więcej uwag:)

@sowiq, @Sephirus

Jeszcze raz dziękujemy za uwagi - przyczyniliście się do rozwoju aplikacji.

Dostępna jest już wersja, 1.2, a w niej linkowanie oparte na popstate. Linki wyglądają już w pełni normalnie, bez zakładek, a więc np. "http://www.implico.pl/artykuly.html". Zapraszam do testowania wersji beta. W przypadku Internet Explorera, gdzie nie jest możliwa modyfikacja historii, zachowany został poprzedni system linkowania.

Przy okazji rozwiązany został problem przenoszenia na główną stronę w celu zachowania standardowego linku, o którym wspominaliście.

[sowiq]

@implico,
jakby wszystkie bugfixy i sugestie były implementowane w Waszym tempie, to świat byłby piękniejszy (IMG:style_emoticons/default/smile.gif) Brawo!

[cudny]

Jak mam być szczery nie widzę tutaj innowacyjności.
Nie chcę wyjść na nie wiadomo kogo, ale dla mnie cachowanie stron z opcja next / back to norma...
W dobie ajax'a wiadome jest, że nie będziemy zaczytywać stron od nowa cały czas.
Poniżej prototyp sklepu internetowego w moim wykonaniu zrobiony ponad rok temu, jak wciśniecie back, forward w przeglądarce zadziała tak samo.

http://oplacasie.pl

Macie dobrego grafika, ja nie, stąd rozbieżności w wyglądzie (IMG:style_emoticons/default/biggrin.gif)

[qrooel]

Szkoda, że nie da się nikomu podać linka do niczego, nie mówiąc już o indeksowaniu googla. ;]

[implico]

@sowiq: dzięki:)

@cudny
Twoje rozwiązanie jest bardzo ciekawe. Jak zauważył @qrooel, brakuje jednak możliwości pobrania bezpośredniego linku do danej podstrony. Natomiast wtyczka AjaxGetContent kontroluje zmiany aktualnego adresu i wówczas dostosowuje wyświetlaną treść.

Po drugie, począwszy od wersji 1.2 (dostępnej od wczoraj), w przypadku większości przeglądarek nasza biblioteka nie korzysta z zakładek (hashchange), a tworzy nowe wpisy w historii (popstate). Dzięki temu linki wyglądają już "normalnie".

Ogólnie, ideą było stworzenie uniwersalnej wtyczki, w pełni konfigurowalnej, łatwej w użyciu. Możliwe, że nie jest to szczyt innowacyjności, ale na pewno jakiś wkład, który być może przyczyni się do upowszechnienia tej metody działania serwisów. Jeśli chodzi o nas, nie tworzymy już projektów w inny sposób niż w oparciu o AjaxGetContent - przy nich standardowe witryny wydają się być powolne, ociężałe i przestarzałe.

[cudny]

Jak brak możliwości pobrania ?
Jak weźmiesz otwórz w nowym oknie jakikolwiek link to otworzy się dokładnie ta strona, którą chcesz wyświetlić. Wszystkie linki działają, no chyba, że coś źle zrozumiałem, chętnie wysłucham / przeczytam wszystkie sugestie

A co do # na końcu url to nawet gmail tego używa (IMG:style_emoticons/default/smile.gif) na pewno jest szybsze niż local storage, które działa tylko na html 5 i do tego synchronicznie (IMG:style_emoticons/default/smile.gif)

Ten post edytował cudny 17.11.2012, 19:16:00

[!*!]

Jak weźmiesz otwórz w nowym oknie jakikolwiek link to otworzy się dokładnie ta strona, którą chcesz wyświetlić. Wszystkie linki działają, no chyba, że coś źle zrozumiałem, chętnie wysłucham / przeczytam wszystkie sugestie

Podam link koleżance ze stanowiska obok i już sobie tego nie zobaczy. Twoja strona jest po prostu niedopracowana. Zapiszę sobie w zakładce link http://oplacasie.pl/#2 i co? I nic, prowadzi mnie na stronę główną. Kiepsko Panie kolego (IMG:style_emoticons/default/tongue.gif)

[qrooel]

Jak brak możliwości pobrania ?
Jak weźmiesz otwórz w nowym oknie jakikolwiek link to otworzy się dokładnie ta strona, którą chcesz wyświetlić. Wszystkie linki działają, no chyba, że coś źle zrozumiałem, chętnie wysłucham / przeczytam wszystkie sugestie

A co do # na końcu url to nawet gmail tego używa (IMG:style_emoticons/default/smile.gif) na pewno jest szybsze niż local storage, które działa tylko na html 5 i do tego synchronicznie (IMG:style_emoticons/default/smile.gif)

No, na windows 7 i google chrome - nie, nie działa tak jak powinno. #, local storage - znajdź różnice.

Ok, indeksowanie w guglu - fakt - masz.

Proponuje skasowac te posty i nie zasmiecac tematu. ;]

Ten post edytował qrooel 17.11.2012, 20:03:20

[cudny]

Podam link koleżance ze stanowiska obok i już sobie tego nie zobaczy. Twoja strona jest po prostu niedopracowana. Zapiszę sobie w zakładce link http://oplacasie.pl/#2 i co? I nic, prowadzi mnie na stronę główną. Kiepsko Panie kolego (IMG:style_emoticons/default/tongue.gif)

Niedopracowana to raczej mocne słowa, to prototyp. Ale fakt, mechanizm onLoad() i zaczytywanie samych danych po # powinno działać bez względu na to skąd wchodzimy na stronę i ewentualny redirect na odpowiedni url, bo czy to będzie #1 czy #cokolwiek to nie ma większego znaczenia dla samego skryptu.

Przepraszam za zaśmiecanie tematu, ale na ten post po prostu musiałem odpowiedzieć.

A co do local storage to nie wykorzystywał bym go jednak do takich celów - używam go raczej w aplikacjach mobilnych gdzie mam pewność, że przeglądarka obsługuje storage, to taka moja uwaga (IMG:style_emoticons/default/smile.gif)

[implico]

Zgodnie z sugestiami, jest już Github:

https://github.com/implico/AjaxGetContent

[Daiquiri]

Implico, o ile dobrze rozumiem chcesz żeby użytkownicy ocenili wasze dzieło. Przenoszę zatem do działu ocen.

Chciałam jednakże zauważyć, iż nie jest to miejsce do informowania o kolejnych artykułach, ale zważywszy na fakt, iż jest to wtyczka - zostaje (IMG:style_emoticons/default/smile.gif) .

[implico]

Oczywiście, dzięki - nie zauważyłem tego działu (IMG:style_emoticons/default/smile.gif)

Wszystkie nasze artykuły będą miały charakter praktyczny, a więc będą zawierały gotowe rozwiązania - biblioteki, wtyczki, klasy etc.

[ShadowD]

Ciekawie to wygląda i jeszcze lepiej działa, sam się pokuszę o wykorzystanie tego rozwiązania, a Wy nie dość że przyczyniacie się do rozwoju innych to jeszcze macie dobrą reklamę dla siebie i swoich Klimtów - chciał bym wiedzieć więcej takich inicjatyw i mam nadzieję, że uda wam się w tym miesięcznym cyklu pokazywać nam prace na podobnym poziomie.

[qrooel]

Zgodnie z sugestiami, jest już Github:

https://github.com/implico/AjaxGetContent

Zrobcie tez dokumentacje na githubie, github to arcypotezne narzedzie do propagowania kodu open source.

Pozdrawiam i zycze sukcesow. (IMG:style_emoticons/default/smile.gif)

[implico]

@ShadowD:
Dziękujemy (IMG:style_emoticons/default/smile.gif) Główną ideą jest jednak podzielenie się kodem i pomysłami - w codziennej pracy na tyle często korzysta się z cudzych, opensourceowych dokonań, że musieliśmy z czystej przyzwoitości dorzucić własną cegiełkę. Postaramy się trzymać poziom, jest już szereg pomysłów na przyszłe artykuły.
Powodzenia przy integracji wtyczki - mam nadzieję, że podzielisz się doświadczeniami tu na forum.

@qrooel:
Zrobimy wkrótce - niestety Github to równie potężne narzędzie, jak skomplikowane (IMG:style_emoticons/default/smile.gif)

[karakara]

A to taka norma z tego działu "Gdzie jest Github" a tu tylko jeden plik (IMG:style_emoticons/default/tongue.gif)

Fajnie że to wszystko działa przy włączanym noScripcie.

btw. Chrome na Linuksie, troche się rozjechało (w FF jest dobrze)
(IMG:http://i.imgur.com/bkIbe.png)

Ten post edytował karakara 19.11.2012, 22:18:56

[ShadowD]

I wtyczka nie cachuje aktualnej strony, wodząc od razu na kontakt przechodząc gdzieś i wracając na kontakt wczytywany jest on za pierwszym razem ajax'em - można też by dodać ten element do cache.

[implico]

@karakara:
Strona już powinna wyglądać dobrze również na Chrome linuxowym - jakbyś mógł zobaczyć czy ok.

@ShadowD:
Niestety z kilku względów strona początkowa nie może być cache'owana. Ale sądzę że to niewielki mankament.

[karakara]

@implico tak wygląda już dobrze.