Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Lipiec, 2012

Typ Blob w JavaScripcie

Autor: Piotr Karpiuk o 26. lipca 2012

Typ Blob reprezentuje nieprzetworzone, niemodyfikowalne dane binarne o ustalonej wielkości, z dodatkowym typem MIME. Nie ma dostępu do poszczególnych bajtów danych, ale za pomocą metody slice(startOffset, endOffset, mime) można utworzyć nowego bloba zawierającego fragment (póki co implementacje tej metody noszą nazwy webkitSlice i mozSlice w zależności od przeglądarki), np. po to aby przesłać na serwer plik kawałkami.

Konstruować bloba można składając wartości typów String, Blob i pochodnych ArrayBufferView (patrz post na temat TypedArray), dodatkowo określając typ MIME oraz – w przypadku łańcuchów – czy znaki końca wiersza mają być zamieniane na natywne dla systemu operacyjnego (np. \n dla UNIXów, \r\n dla Windows, domyślnie jeśli parametr nie zostanie podany znaki końca wiersza są pozostawiane bez zmian).

        var blob = new Blob([ myBlob1, myBlob2, 'jakiś łańcuch', myInt32Array], { type: 'image/jpeg', ending: 'native' });

Typ File dziedziczy po Blob i często oba typy można używać zamiennie. Bloba można odczytać/zapisać z serwera (AJAXem), lokalnie odczytać/zapisać w pliku lub bazie IndexedDB (patrz osobny post), ale także przetransformować w tzw. Blob URL.

Blob URL

Powiedzmy, że masz bloba, i chciałbyś jego zawartości użyć jako danych do obrazka/filmu/dźwięku (znaczniki img, video, audio) lub jako osobny dokument HTML (znacznik iframe), tzn. użyć jako wartości atrybutu src tych znaczników.

        img.src = window.URL.createObjectURL( myBlob );

Mało tego: możesz użyć bloba aby dynamicznie utworzyć wątek (Web Worker) nie dysponując plikiem JavaScriptu tego wątku:

Czytaj więcej »

Napisany w JavaScript | Brak komentarzy »

Web Notifications

Autor: Piotr Karpiuk o 23. lipca 2012

Opisywany dziś mechanizm powiadomień pozwala aplikacji webowej wyświetlić komunikat systemu operacyjnego, niezależnie od tego która zakładka przeglądarki jest aktywna, i w sposób nieprzerywający aktualnie wykonywanych przez użytkownika działań. Może to być zatem powiadomienie o przychodzącej poczcie, komunikat od kolegi z webowego komunikatora itp. Powiadomienie może być zamknięte z poziomu JavaScriptu lub ręcznie przez użytkownika. Nade wszystko jednak, aby dana aplikacja webowa w ogóle mogła wyświetlać takie powiadomienia, użytkownik musi na to jawnie przyzwolić – podobnie jak np. w sytuacji gdy aplikacja próbuje dostać się do danych geolokalizacyjnych użytkownika.

Tyle odnośnie idei, natomiast przy implementacji pojawiają się schody. Po pierwsze póki co jedynie przeglądarki oparte na WebKicie (Chrome, Safari) udostępniają ten mechanizm, po drugie specyfikacja W3C znacząco zmieniła się na tyle, że wspomniana implementacja jest już z tą specyfikacją niezgodna. Tym niemniej, ponieważ zabawka jest ciekawa a temat niezbyt obszerny, opisałem zarówno stare jak i nowe podejście.

WebKit

Powiadomienie może mieć postać tekstową (ma wtedy tytuł, może mieć ikonkę i dodatkową dłuższą treść) lub HTML (podajemy wtedy URL). Poprosić o uprawnienia do wyświetlania powiadomień możemy wyłącznie w reakcji na działanie użytkownika (np. kliknięcie na przycisku). Do obiektu reprezentującego powiadomienie można przypinać obsługę zdarzeń click, error, display i close.

        if (window.webkitNotifications) {
          document.querySelector('#show_button').addEventListener('click', function() {
            if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
              notification_test = window.webkitNotifications.createNotification(
                'icon.png', 'Notification Title', 'Notification content...');
              // albo createHTMLNotification( 'http://...' );

              notification_test.ondisplay = function() { ... };
              notification_test.show();
            } else {
              window.webkitNotifications.requestPermission();
            }
          }, false);
        }

Czytaj więcej »

Napisany w JavaScript, WWW | Brak komentarzy »

Google Dart

Autor: Piotr Karpiuk o 20. lipca 2012

Językiem programowania, który można nazwać lingua franca aplikacji webowych, po stronie przeglądarki w praktyce jest JavaScript, choć trudno znaleźć kogoś kto nazwałby go produktem idealnym. Język ewoluuje wprawdzie w stronę platformy zdolnej do obsługi dużych aplikacji, ale Google twierdzi, że język cierpi z powodu wad niedających się naprawić poprzez ewolucję zapewniającą zgodność wstecz i wysunął własną propozycję: język Google Dart. Firma nie ukrywa, że nowy projekt open source powstał z myślą o tym aby zdetronizować JavaScript oferując lepszą wydajność, bezpieczeństwo i przenośność.

Co prawda Dart jest jeszcze we wczesnej fazie rozwoju i nie nadaje się do zastosowań produkcyjnych, ale Google celowo udostępnił jego specyfikację na tym etapie, aby zebrać jak najwięcej sugestii usprawnień i oswoić użytkowników ze swoim dziełem. Opisy języka zaczynają się już pojawiać na blogach i w czasopismach (np. Linux Magazine 08/2012).

Rzeczywiście, propozycja Googla wydaje się być przemyślana:

  • interpretera można użyć nie tylko w przeglądarce, ale i po stronie serwera (jako odpowiednik PHP), gdzie powstały już biblioteki do obsługi gniazd sieciowych i systemu plików,
  • wyraźnie widać inspiracje językami JavaScript, Java i Scala,
  • język ma dynamiczne typy, ale opcjonalnie możemy deklarować typy zmiennych co w przypadku wykrytych niezgodności wygeneruje ostrzeżenia,
  • Dart jest obiektowy, oferuje klasyczny model obiektowości znany z Javy (w tym pojedyncze dziedziczenie, interfejsy, klasy abstrakcyjne),
  • podobnie jak w Javie, dostępne są typy generyczne,
  • mamy kilka typów liczbowych: int, double, num – w odróżnieniu od JavaScriptu gdzie jedynym typem liczbowym jest typ zmiennoprzecinkowy; dostępne są również kolekcje (np. typy List, Map),
  • dostępne są wątki, które są mocno od siebie izolowane – wysyłają do siebie komunikaty, które są kopiowane a nie przekazywane przez referencję.

Czytaj więcej »

Napisany w WWW | 1 Komentarz »

ECMAScript 6 (Harmony)

Autor: Piotr Karpiuk o 17. lipca 2012

W jednym z poprzednich postów opisałem wdrożony już w życie w najnowszych przeglądarkach WWW standard ECMAScript 5. Tymczasem od dłuższego czasu trwają już prace nad wersją 6 o nazwie kodowej Harmony. Specyfikacja ma być gotowa z końcem 2013 roku, ale pomimo że jeszcze wszystko może się jeszcze zmienić Google i Mozilla już wyskakują przed szereg i np. Google w wersji 19 swojej przeglądarki Chrome pozwala odważnym użytkownikom włączyć flagę Experimental JavaScript features dostępną pod URLem chrome://flags.

Już teraz wiadomo, że wersja 6 ECMAScriptu ma być najbardziej wszechstronną aktualizacją w historii języka. Ogólne wytyczne:

  • język ma być przyjazny dla przypadkowych programistów,
  • ma nadawać się do tworzenia większych aplikacji i bibliotek,
  • ma zawierać syntaktyczne udogodnienia dla dobrych wzorców abstrakcji,
  • standard ma zatwierdzać powszechnie stosowane rozwiązania (standardy de facto).

Google Chrome

A oto co mamy już zaimplementowane w Google Chrome 19, więc z dużym prawdopodobieństwem przetrwa próbę czasu:

let i const

Jak do tej pory, jedynym zakresem zmiennych był zakres funkcji, co nieraz skutkowało tworzeniem dziwnych konstrukcji w rodzaju:

        function() {
          var zmienna;
          ...
        }();

tylko po to, aby ograniczyć zasięg zmiennych.

Innym problemem był brak możliwości deklarowania stałych.

Oba te problemy rozwiązują konstrukcje let (deklaracja zmiennej) i const (deklaracja stałej), które działają podobnie jak var ale mają zasięg bloku, a zmienna zadeklarowana jako const nie może być modyfikowana.

Kolekcje

Czytaj więcej »

Napisany w JavaScript, Uncategorized | Brak komentarzy »

Typed Array

Autor: Piotr Karpiuk o 12. lipca 2012

Rozwój języka JavaScript podąża za zapotrzebowaniem, czego przejawem jest m.in. Typed Arrays – sposób na efektywne przekazywanie danych binarnych do bibliotek natywnych. Jedynym typem liczbowym w JavaScripcie jest typ zmiennoprzecinkowy, a reprezentacja tablicy bajtów zawsze była mało oszczędna pamięciowo (Array) lub niewygodna (np. String.rawCodeAt()). Na nowe typy danych ArrayBuffer, ArrayBufferView i DataView można spojrzeć jak na odpowiedniki tablic i struktur w języku C.

Propozycja nowych rozwiązań wyszła ze strony zespołu pracującego nad WebGL (grafika 3D w przeglądarce), ale szybko znalazły one zastosowanie w takich technologiach przeglądarkowych jak:

  • HTML5 Canvas – fragment płótna można przekształcić w natywną tablicę pikseli i działać bezpośrednio na niej,
  • Web Audio API, Media Source API – dostęp do danych binarnych audio i wideo,
  • XMLHTTPRequest 2, WebSockets – między przeglądarką a serwerem można przesyłać dane binarne,
  • WebWorkers – można przekazywać dane binarne (przez referencję!) między wątkami; przynajmniej w Google Chrome,
  • File API – można manipulować danymi binarnymi na dysku w systemie plików (w piaskownicy).

Nadeszły zatem czasy, gdy programista JavaScriptu po stronie przeglądarki może wygodnie dobrać się do pliku binarnego MP3 lub JPEG aby wyciągnąć z niego metadane.

Mechanizm, o którym dziś mowa, składa się z dwóch części: bufora (klasa ArrayBuffer) i perspektywy (ang. view, klasa ArrayBufferView i pochodne – czyli tablice, oraz DataView – czyli dostęp swobodny). Bufor jest tablicą bajtów, a perspektywa daje dostęp do niego zapewniając kontekst, jakim jest offset startowy bufora, liczba bajtów, i typ danych komórki. Dla jednego bufora możemy utworzyć dowolnie wiele perspektyw.

Czytaj więcej »

Napisany w JavaScript | 2 Komentarzy »