Witam. Nie wiem czy piszę we właściwym dziale (czy może to powinien być dział o Javascript), także przepraszam od razu :)
Tworzę portal społecznościowy w php, framework Kohana i chciałbym w nim zrobić "płynne" przechodzenie między stronami (chyba tak to się nazywa), tak jak np. na Facebooku, Badoo, Kinoman czy Skilltrade - by za każdym przejściem na inną podstronę nie musiało ładować na nowo jakichś stałych elementów strony, np. header strony czy jakiś czat (jak na FB), lista znajomych, itp. Patrząc w debugerze przeglądarki (zakładka "Sieć") w większości takich stron zauważyłem, że został użyty Angular, ale kompletnie nie wiem jak się za to zabrać, bo mam wrażenie, że chyba nie da się zintegrować frameworka w taki sposób i że trzeba napisać od nowa taki mini framework by to działało - ale to tylko takie moje pierwsze przypuszczenia i pewnie się mylę. Prosiłbym o nakierowanie mnie we właściwym kierunku, ewentualnie o rozjaśnienie jak to działa i co musiałbym zmienić we frameworku - nie chciałbym go zmieniać na inny i raczej większe modyfikacje w "silniku" frameworka chyba też po prostu nie są wskazane.
Poczytałem trochę o Backbone i Angular, i nie mam pojęcia którego z nich mógłbym użyć do czegoś takiego, i czy w ogóle czegoś takiego używać, czy jednak jakoś po swojemu to zrobić "customowo" bez zbędnych bajerów, które oferują te dwa frameworki javascript?
Jak nie chcesz zaprzęgać do tego kobyły, to możesz się zainteresować hasłami ajax jquery, ewentualnie, może ktoś zaproponuję Ci coś, co jest bardziej teraz na czasie.
Płynne przechodzenie wymaga zmiany architektury. backend i frontend to osobne aplikacje, gdzie backend wystawia tylko rest api. Musisz przemyśleć czy rzeczywiście chce ci się przerabiać na coś takiego, czy może wystarczą ci jakieś drobne akcje "pod spodem" jak zapis formularza. Wtedy możesz użyć jak kolega wyżej napisał.
Dziękuję za odpowiedź. I tak sobie użyję tego ajaxa na kilku podstronach (np. pobieranie postów), ale to płynne przechodzenie też NIBY przydałoby mi się... Na początku chciałem tego użyć dla poprawy wydajności, ale już to pomijam, lecz chciałbym zrobić w serwisie player, który działałby cały czas nawet przechodząc własnie między stronami i moooże taki czat jak na FB, chociaż z tego czatu mógłbym zrezygnować, ale player jest bezsensu jak będzie pauzowany co każde przeładowanie strony. Może miałby ktoś jakiś inny pomysł zamiast zmieniania architektury aplikacji?
To może ramki? :-D dla przykładu strony w google sites ze względów restrykcyjnych naszpikowane są iframeami i wszystko pięknie działa, a google się nie wstydzi ;)
Przykład:
<body>
<header>stały header</header>
<div id="tresc-dynamiczna"></div>
<div id="komunikator"></div>
<script>
function wczytaj_strone(url) {
$("#tresc-dynamiczna").load(url);
};
$(function() {
$("#komunikator").komunikator();
wczytaj_strone('/feed.php');
});
</script>
</body>
i teraz dla takich stron jak feed.php w szablonie masz tylko właścią treść do wyświetlenia, bez headerów, footerów itp. Linki też powinny być w stylu <a href="javascript:wczytaj_strone('profile.php');">, żeby zmieniać tylko tę część strony. Pisane na szybko, ale myślę, że wiadomo o co chodzi :)
Zmienianie dynamicznej treści rozumiem jak ma działać, ale nie wiem jak się zabrać za kwestie backendu. Używam frameworka (KohanaPhp) i mimo, że treść będzie zmieniana dynamicznie, to jednak musi też jakoś pobierać zasoby do wyświetlenia w widoku, sprawdzać autoryzację (dostęp do poszczególnych podstron dla danego użytkownika, np. profil użytkownika, panel admina) i obsługiwać błędy (komunikaty, ewentualne przekierowania).
Zapewne dałoby się pobierać widoki razem z zasobami poprzez łączenie z index.php i odpowiednim URL-em (tak jak przez normalne wejście na stronę przez przeglądarkę), ale to chyba głupie by mimo ładowania przez JS, dalej ładowało WSZYSTKIE komponenty frameworka za każdym requestem AJAX-owym.
No wszystko zależy jak bardzo zaawansowana ma być Twoja aplikacja. Zauważ, że na facebooku przeładowania strony też są i wtedy np. okienko czatu jest ładowane jeszcze raz. Na tym forum też znajdziesz elementy ajaxowe. To, które elementy mają być ładowane dynamicznie a gdzie konieczne będą przeładowania strony to już problem konkretnej aplikacji. Możliwe jest zrobienie aplikacji w pełni ładowanej dynamicznie, ale niekoniecznie musi mieć to sens...
Autoryzacja opiera się na sesjach, więc nie widzę problemu. Możesz też przesyłać odpowiedzi w formacie JSON a nie HTML, co pozwoli Ci podejmować różne decyzje po stronie przeglądarki (np. przeładowania strony). Ja często stosuję odpowiedzi w stylu:
{
code: 0,
message: 'OK',
data: []
}
Jeśli code == 0 to znaczy, że wszystko jest ok, jeśli code > 0 to znaczy, że wystąpił błąd, który jest opisany w message. Data jest interpretowane w zależności od code.
W przypadku korzystania z takiego rozwiązania angular będzie najlepszym wyborem, ale możesz też użyć jQuery + jakiś silnik template, żeby nie bawić się w składanie layoutu w zmiennej.
Możesz też przesyłać elementy strony w htmlu, ale zwracać uwagę na kod odpowiedzi http i reagować, kiedy jest inny niż 200 OK a w przeciwnym razie po prostu wklejać odpowiedź w odpowiednie miejsce.
Jeśli chodzi o drugą kwestię to elementy frameworka zawsze będą ładowane do obsługi żądań, niezależnie od tego czy będzie to zapytanie ajaxowe czy nie. Siła ajaxa tkwi we frontendzie a nie w backendzie.
PS. Angular to gruby temat i na jego naukę będziesz musiał poświęcić trochę czasu, więc proponowałbym na początek zrobić jako dynamiczne te elementy, które będzie Ci łatwo zaimplementować a w miarę powiększania się Twojej wiedzy, wprowadzać kolejne ulepszenia.