Już od dawna nurtował mnie mankament parsowania szablonów w php, trudności z jakimi człowiek się spotykał to niepotrzebne zużycie pamięci do przetworzenie danych w php, działanie na stringach itd. Fascynowała mnie sprawa by tym zajmowała się tylko przeglądarka, niech komputer użytkownika męczy się z wygenerowaniem szablonu. Tylko jak to zrobić? Długo nic nie mogłem na to wymyślić, ale zrobili to za mnie. ExtJS – jest to framework napisany w JavaScript będący częścią innych projektów firmy Sencha. Daje on nam wiele możliwości, począwszy od ingerencji w drzewo DOM, skończywszy na generowaniu UI naszej aplikacji.

Dlaczego nie lubię szablonów w PHP?

Bo są zbędne, nasze aplikacje mogą być o wiele szybsze, jeżeli będą przetwarzały tylko dane jakie do nich przesyłamy, a nie zajmowały się przetwarzaniem tony bajtów stringów który musi przechowywać odpowiednią długość czasu a później wypluć w eter. Przechowywanie stringów, operacje na nich są nie wydajne. Jeżeli tylko mogę to unikam takich sytuacji. Widać że mogę, bo dzięki ExtJS w PHP nie muszę parsować skomplikowanych templatek, obracać pętle w szablonach by wy-renderować tabele, menu, listę.

Podejście alternatywne do szablonów

Jest ogrom systemów szablonów które się ścigają w czasie, który szybciej się skompiluje, sparsuje itd. Jakby nie można było najprościej w świecie wklepać php z html w jakiejś templatce. Znajdź mi coś szybszego. Nie ważne, kolejnym krokiem -> xlst też ciekawe, dzięki tej technologii część mechanizmu jest po stronie serwera, a reszta po stronie przeglądarki, dane przechowujemy w XML, szablony w XSL, i dzieje się jakaś magia. Mimo wszystko to dalej nie jest rozwiązanie o które mi chodziło. Pomyślcie sobie o tej kwestii jak aplikacji server desktop. Serwerze przetwarza tylko dane, i zwraca je do aplikacji desktop-owej która je musi przetworzyć w widok. No i o to chodzi. Jak najmniej operacji na serwerze, żeby czas oczekiwania na odpowiedź był jak najkrótszy a informowanie użytkownika o postępie zadania na bieżąco jest najlepszym rozwiązaniem. Najbardziej co wkurza ludzi podczas pracy z oprogramowaniem jest brak informacji co się w danej chwili dzieje. Tzn użytkownik klika w link, leci zapytanie ajax, nie widzi tego, to klika raz jeszcze no bo skąd ma wiedzieć że coś się wydarzyło. Mamy techniczną możliwość informowania użytkownika co w danej chwili aplikacja wykonuje:

* Zapytanie zostało wysłane do serwera * Serwer przetwarza dane * Serwer odpowiedział * Przetwarzanie danych od serwera * I Na końcu wyświetlenie tych danych

4 proste kroki, bo piąty jest już widoczny, pozwoli użytkownikowi nie popadać w frustrację i będzie zadowolony z działania aplikacji.

Utworzenie takiego interfejsu w HTML który jest nie dynamiczny, dostęp do niego mamy tylko z poziomu DOM, bez żadnych obiektów do elementów, byłby mało wygodny. Za to wy-renderujmy sobie HTML za pomocą JS, co to zmienia? Bardzo wiele, chociażby dostęp do komponentu wygenerowanego jest z miejsca, każdy element listy, tabelki jest obiektem. Dodatkowo to moc przeliczeniowa komputera użytkownika a nie maszyny się liczy, także jak chce narzekać, proszę bardzo ale na swoją maszynę a nie na naszą aplikację

ExtJS nowa perspektywa

Produkt firmy Sencha jest pewnym rozwiązaniem moich problemów. Dlaczego pewnym? Ponieważ nie odważyłbym się zastosować go w frontendzie Otóż stosuje go tylko w backendzie. Dlaczego? Jakoś nie mam do niego jeszcze pełnego zaufania, poza tym styl-owanie tych wszystkich elementów jest trochę jak syzyfowa praca. Idzie jak krew z nosa. Inaczej, nie mam do tego siły. Ujednolicony sposób wyświetlania danych, komentarzy, błędów, interakcji na polecenia użytkownika, jest przyjemny dla oka inie zmusza użytkownika do ciągłego poznawania nowych rzeczy, tylko podświadomie będzie wiedział jak aplikacja się zachowa. Bez przeładowania, użytkownika nie męczymy ciągłym oczekiwaniem na przetworzenie kolejnych stosów bitów i wyświetlenie aplikacji całej od nowa po każdym requescie, w której została wykonana jakaś prosta akcja. Wszystko jest zaimplementowane po stronie przeglądarki w kodzie JavaScript.

Słów kilka na zakończenie

Niniejszy wpis, będzie rozpoczęciem cyklu wpisów o implementacji i mechanizmach ExtJS, z tym że dopiero od wydania ver. 4.0, która ma się ukazać końcem lutego. Perspektywa może być ciekawa, nie dla każdego może być użyteczna, gdyż logikę trzeba pisać niejako w dwóch miejscach. Ja sam używam, korzystam nałogowo w swoim FW, jestem zadowolony i działa dla mnie wyśmienicie, co prawda z początku miałem problemy z implementacją i strukturą oraz logiką ExtJS, ale przy pomocy googla udało się wszystko ładnie opanować.

Programowanie w JavaScript w cale nie musi być nudne, trudne i wkurzające. Wystarczy się pilnować i nie popełniać prostych błędów. Bo te trudniejsze łatwiej wyłapać niż te banalne, których nie widać na pierwszy rzut oka. O czym będzie dzisiejszy wpis? O obiektach w JavaScript, a bardziej o literal notation, czyli definicji obiektów liniowo. Ciekawy sposób tworzenia obiektów w JS.

Na początku musimy sobie coś uświadomić: „W JavaScript nie ma klas”.

Jeżeli już to rozumiemy, możemy przejść do dalszej części czytania tego wpisu.

Scope – Zasięg

Wiele razy zastanawiamy się czym w danej chwili jest „this” w funkcji, jeżeli używamy jakiś callbacków i bindujemy pewną funkcję z obiektu w taki sposób:

$('#some_id').click(function(){
  console.log(this); // z użyciem firebuga
});

no to w zakresie funkcji this bedzie obiektem #some_id

Dobra teraz musimy sobie coś wyjaśniać podanie nazwy a wywołanie funkcji to dwie różne rzeczy!

Czyli:

 someCallback: someObject.someFunction(); // WYWOŁANIE!
 someCallback: someObject.someFunction; // zbindowanie

I teraz jeżeli napiszemy za pomocą pierwszego przykładu, to skrypt kiedy dojdzie do tej linijki wywoła ją, a nie przypisze, a w drugim wykona ją poprawnie dopiero przy wywołaniu callbacka. I czym jest this w takiej funkcji? Ciekawa sprawa, bo mimo wszystko iż ta funkcja jest metodą obiektu to

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

3D to to nie jest, nigdy nie było i nie będzie. Po prostu robi wrażenie głębi. Prosty efekt, zeralizowany za pomocą JavaScriptu (prototype.js)

Bezkresny ocean Internetu skrywa wiele skarbów. Od czasu do czasu wyrzuca część z nich na brzeg, pozwalając nacieszyć się ich pięknem. Podobna historia spotkała jQuery Frontier Calendar, opisany jako Full month calendar jQuery plugin that looks like Google Calendar. Zapomniany na wiele miesięcy czekał na odnalezienie.

Przytoczony we wstępie w języku angielskim opis kalendarza doskonale oddaje jego wygląd. Po kilku drobnych poprawkach nie dałoby się odróżnić go od kalendarza Google’a. W kwestii funkcjonalności niestety różnice są już zauważalne.

Do poprawnego działania jQuery Frontier Calendar wymaga biblioteki jQuery (a dokładniej jej nieco zmodyfikowanej na potrzeby IE wersji), jQuery UI oraz pluginu jshashtable. W zamian otrzymujemy:

• drad and drop zdarzeń dodanych do kalendarza
• wsparcie dla formatu iCal
• możliwość tworzenia zdarzeń rozciągających się na wiele dni
• możliwość tworzenia handlerów

Do wad kalendarza należy zaliczyć problemy z wydajnością, dosyć kiepską dokumentację, która znajduje się jedynie w archiwum z aktualną wersją pluginu oraz brak dema online.

Jeśli chcielibyście sprawdzić możliwości jQuery Frontier Calendar, znajdziecie go pod adresem http://code.google.com/p/jquery-frontier-calendar/.

Z serii ciekawe pluginy jQuery mam dzisiaj dla was jQuery File Upload. Oprócz standardowego uploadowania plików mamy możliwość skorzystania z paska postępu, a dodane już pliki możemy bez problemu usunąć. Do listy możliwości oferowanych przez plugin można również zaliczyć:

• obsługa drag and drop
• możliwość przerwania uploadu pliku
• niewymagany Flash. Wszystko oparte o HTML5 i JavaScript
• możliwość uploadowania plików do innej domeny

Do poprawnego działania plugin wymaga jQuery w wersji 1.4 oraz jQuery UI 1.8. Teoretycznie plugin działa w każdej przeglądarce (nawet IE6), w praktyce niektóre funkcjonalności w zależności od przeglądarki są okrojone.

Demo pluginu znajdziecie na stronie http://aquantum-demo.appspot.com/file-upload, a dobrze ukrytą dokumentację pod adresem https://github.com/blueimp/jQuery-File-Upload/wiki.

Google Maps API jest świetne – bardzo proste, wręcz intuicyjne, rozszerzalne, a w dodatku nieźle udokumentowane. Po prostu świetna robota ze strony Google. Trafiłem jednak ostatnio na nietypowy problem – tworzyłem stronkę dla firmy, której siedziba mieści się w dwóch odległych od siebie miastach. Nie chciałem tworzyć dwóch osobnych map dojazdowych – stworzyłem więc jedną [...]

14 stycznia 2006 roku światło dzienne ujrzała pierwsza wersja najpopularniejszej biblioteki JavaScript. Dzisiaj, w piąte urodziny, wydana została pierwsza beta jQuery 1.5. Według roadmap stabilna wersja ma się pojawić ostatniego dnia stycznia. Co nowego pojawi się w najnowszym wydaniu jQuery? Przede wszystkim przebudowany zostanie moduł $.ajax. Do tego dochodzi szereg usprawnień poprawiających i wydajność biblioteki oraz poprawiających błędy. Pełną listę zmian można znaleźć na blogu jQuery.