Claudiu Persoiu

Blog-ul lui Claudiu Persoiu


Archive for the ‘JavaScript’ tag

Nu PHP 6 nu este aici… dar cum ramane cu 2013?

without comments

Aceasta este o retrospectiva a ultimului an.

In caz ca inca se mai intreba cineva, nu, PHP 6 nu a aparut si nici nu va aparea prea curand, probabil.

De ce este relevant? De cand am inceput acest blog am avut la final de an un post legat de PHP 6 si faptul ca acesta nu a fost lansat. In 2008 era o intrebare populara, dar nimeni nu mai crede asta acum, asa ca voi incheia acest subiect acum. Sa revenim la anul care s-a incheiat.

Aproape de jumatatea anului a fost lansata versiunea PHP 5.5, aceasta aducand in plus functionalitati cum ar fi: finally , generators si multe alte inbunatatiri.

Ca in 5.4, nu sunt functionalitati definitorii pentru limbaj. In aceasta noua versiune chiar sunt lucruri care pot fi inlocuite cu usurinta, dar daca sunt prezente, sunt bine venite.

Chiar daca PHP da dovada de multa dinamica in ultima vreme, cred ca in acest an cuvintele cheie au fost HTML5 si JavaScript.

HTML5 are parte de multe imbunatatiri, iar componente mai vechi incep sa creasca in popularitate. Firmele incep sa investeasca in jocuri care functioneaza in browser folosing WebGL. Chiar si jocuri mai vechi sunt portate catre platforma, folosind tehnologii cum ar fi asm.js.

Si, pentru ca am vorbit de jocuri, mi se pare foarte interesant cum doar acum 5-7 ani jocurile bazate pe JavaScript erau destul de simpliste, iar acum sunt comparabile cu cele de pe PC sau console.

Cred ca revolutia web, pe care multi o asteptau, incepe sa prinda avant. In sfarsit Web-ul este o platforma in adevaratul sens al cuvantului si JavaScript un limbaj cu adevarat apreciat.

Succesul se datoreaza tuturor partilor, nu mai este vorba doar de ECMA sau doar de producatorii de browsere, acum este o adevarat dinamica. Revolutia Web este in plina desfasurare!

Cand vine vorba de backend, lumina reflectoarelor a fost asupra Node.js. Acesta incepe sa devina un jucator important. Au aparut frameworkuri noi si nu mai este o platforma folosita predominant de hackeri dornici sa exploreze tehnologii noi, ci si de companii mari, cum ar fi PayPal, LinkedIn si Yahoo, oferind un vot de incredere pentru acesta. Cred ca Node.js incepe sa-si gaseasca locul si o nisa de piata, iar eu, un fan JavaScript, nu pot sa fiu decat incantat.

Un avantaj al Node.js este ca nu trebuie sa ai grija mai multor versiuni de JavaScript, asa cum este necesar in browser. Asta permite folosirea ultimelor facilitati ECMA in mod liber, un mediu in care poti dezvolta JavaScript fara dureri de cap.

Tehnologic vorbind, a fost un an foarte interesant pentru web development.

In final, va doresc tuturor un 2014 extraordinar de bun!

Written by Claudiu Persoiu

19 January 2014 at 11:10 PM

Posted in Diverse

Tagged with , , ,

Appcelerator Titanium – cateva impresii

without comments

Nota: Titanium si PhoneGap sunt doua platforme pentru dezvoltarea de aplicatii hibride pentru mobil. Aceste aplicatii nu sunt scrise in limbajul de programare nativ telefonului, dar pot fi distribuite pe mai multe platforme mobile.

Recent, am publicat pe Github cea mai noua si extraordinara platforma de teste, Just-Quizzing pe numele ei. Am facut-o ca sa o folosesc eu personal, dar pentru ca am gasit cativa colegi care au considerat-o utila, am facut-o publica.

In versiunea initiala foloseam SL4A pentru a publica aplicatia pe telefonul meu mobil cu Android. Aveam nevoie de un mod in care sa folosesc aplicatia cand sunt in miscare si nu am acces la Intenet. Din pacate nu exista actualizare automata pentru teste. Am sperat ca SL4A va avea o directie mai clara in timp, dar platforma si-a pierdut din elanul initial, iar eu am decis sa scriu o aplicatie mobila.

Am avut de ales intre PhoneGap si Titanium. In trecut am folosit PhoneGap pentru ca marimea aplicatiei era prea mare in Titanium, dar am zis sa ii mai dau o sansa. In 2011, cand am mai scris despre Titanium, marimea unei aplicatii de baza era aproximativ 4M. In ziua de azi nu mi se mai pare chiar atat de mare, desi este maricica.

Perspectiva va fi in special pentru Android, desi aplicatia a fost facuta sa fie compatibila si cu iPhone.

Am folosit SDK 3.1.3, fara framework-ul Alloy.

Alloy are si el curba lui de invatare si am vrut sa o evit. Scopul aplicatiei era sa fie o versiune portabila a testelor de pe server si nu am vrut sa fac o investitie foarte mare de timp.

Timpul total de dezvoltare a fost putin mai mult de o saptamana.

Prima parere

Lucrurile nu merg chiar asa cum te astepti, nu ai foarte multa flexibilitate. Din timpul total alocat, mai mult de un sfert am incercat sa fac un “flyout menu”, asa cum au aplicatiile ca: Facebook, Google Plus si Youtube. A fost un dezastru total! Singurele variante care chiar pareau sa mearga au fost folosirea unui modul extern sau folosirea widgetul-ui din Alloy.

Se pare ca la conversia dintre coordonatele relative, unde utilizatorul a atins elementul curent, la punctul efectiv, unde esti pe ecran, exista o discrepanta mare si este imposibil sa faci un efect decent de deschidere a meniului. Intr-un final am renuntat total la acest efect.

Viteza nu este chiar atat de buna cand vine vorba de randare de elemente. Sincer, ma asteptam la o viteza mai buna. Exista mici trucuri care se pot face, de exemplu sa preincarci view-urile inainte sa le afisezi, dar pentru asta trebuie sa interpretezi cam ce va face utilizatorul in continuare, lucru care nu este posibil mereu.

Un alt elemente care m-a deranjat este ca la apasarea butonului de meniu pe Android nu poti pune o actiune anume, sa zicem sa deschida meniul lateral de care vorbeam anterior. In PhoneGap de exemplu, nu se va deschide nici un meniu, acesta trebuie construit din HTML de la zero.

Cand au aparut, Titanium se laudau ca poti dezolta o data si distribui pe mai multe platforme. Acum am avut surpriza ca nu mai au aceasta abordare. In Kitchen Sink, aplicatia care demonstreaza facilitatile platformei, fiecare tip de platforma initializeaza aplicatia in fisierul ei. Unul dintre motive este ca design-ul se face dinamic daca nu vrei sa folosesti Alloy, nu prin fisiere de layout.

Printre primele lucruri pe care le-am incercat cu Titanium a fost sa vad cat este marimea unei aplicatii simple de “Hello World”. Impachetata, aplicatia ocupa ~8.5M, instalata pe telefon ~16M. Nu stiu ce parere aveti voi, dar mie mi se pare foarte mult! Ciudat este ca aplicatia mea finala ocupa ~8.4M impachetata si ~16M instalata, aproape identic cu aplicatia originala. Motivul este simplu, imaginile puse de mine ocupa cu cativa kb mai putin, rezultand in final o aplicatie putin mai mica decat aceea de la care am pornit.

Dar de ce ocupa o aplicatie Titanium atat de mult?

Am avut de cautat pana am gasit raspunsul. In 2011, cand am incercat sa ma documentez, nu am gasit decat ca sunt impachetate toate librariile chiar daca sunt necesare sau nu si din acest motiv este atat de mare. Nu asta era cauza! Intre timp, am aflat adevaratul motiv. Aplicatia ruleaza folosind un “bridge” intre Android si JavaScript. Codul JavaScript nu este “compilat”, asa cum reiese din prezentarile initiale, ci pur si simplu interpretat.

Codul JavaScript este interpretat folosind unul din motoarele disponibile in aplicatie (V8 si Rhino) si apeleaza componentele care construiesc elementele grafice native.

Problema este la interpretoare (engine). Acestea sunt destul de mari si sunt practic prezente in fiecare aplicatie. Si, de parca nu erau destul de mari, sunt si 3, fiecare cu scopul lui:

  • V8 – pentru versiuni de Android noi (dupa Gingerbread 2.3);
  • Rhino – pentru versiuni vechi de Android (inainte de Gingerbread 2.3);
  • x86 – pentru procesoare de tip Intel.

Aceste 3 engine-uri ocupa in total, dezarhivate, 19M pe calculatorul meu. Deci, fara sa eliminam o parte din ele nu avem cum sa scadem dimensiunea.

O metoda prin care cei de la Appcelerator vor sa scada dimensiunea apk-ului este sa renunte la Rhino, dar in acest mod se va pierde si compatibilitatea cu versiuni mai vechi de Android.

Comunitate

Exista o comunitate foarte activa. Pe forumuri si platforme Q/A este plin de intrebari si raspunsuri! Trebuie sa recunosc ca am fost impresionat din acest punct de vedere. Unele intrebari sunt relativ vechi, chiar si de 3 ani de zile.

Curba de invatare

Pentru o saptamana si aproape jumatate, din care mai bine de un sfert am cautat cum sa fac un efect de miscare al unui view, care pana la final nu a functionat, eu zic ca a mers destul de repede!

Recunosc, m-am mai jucat acum 3-4 ani cu el pentru cateva zile si chiar mi-am amintit anumite lucruri, cum ar fi ca erau elemente de tip window, view si label.

Faptul ca gasesti usor raspunsuri la intebarile de pe Stackoverflow, adunate in cativa ani, dar si ca exista o documentatie destul de bine organizata a ajutat foarte mult.

De asemenea si pe Youtube exista cateva tutoriale utile.

Mediul de dezoltare

Pentru primele versiuni nu exista un IDE, aplicatiile erau scrise cu un editor la alegere, apoi impachetate si testate folosind platforma.

Acum exista un IDE care are la baza Eclipse. Numele acestuia este Titanium Studio. Acesta are un autocomplete destul de reusit, care ajuta in cele mai multe cazuri. Are si cateva lucruri care nu merg prea bine, cum ar fi faptul ca mie uneori nu mi-a mai mers syntax highlight, fara sa-mi indice unde este problema. De asemenea, administrarea proiectelor mi se pare un pic ciudata si am avut cateva probleme la importul si exportul de proiecte.

Nu exista implicit o unealta vizuala de editare a elementelor din fereastra. Atat Xcode cat si ADT permit editarea de elemente cu drag & drop. Se pare ca exista si unelte de acest tip, dar nu sunt gratuite.

Emulatoarele nu sunt foarte configurabile. Partea buna este ca nu trebuie sa-ti bati capul, selectezi sistemul de operare si tipul de display si Titanium va configura automat un emulator. Partea proasta este ca poate mi-ar placea sa am un management al resurselor mai clar.

Un alt dezavantaj este ca uneori aplicatia pur si simplu moare pana porneste emulatorul, iar daca incerci din nou va incerca sa mai porneasca un emulator fara succes, caz in care trebuie inchis emulatorul, rulat Project clean si apoi incercat din nou, cu grija sa nu ratam momentul cand se poate debloca ecranul, sau scenariul de la inceput se va repeta.

Pentru iPhone nu merg log-urile cand vine vorba de OS X Mavericks.

Parti bune

Se invata relativ usor.

Documentatia este destul de bine realizata, iar acolo unde ceva nu este clar, sigur a mai intebat altcineva aceeasi intrebare.

Exista o comunitate destul de mare.

IDE-ul este usor de folosit.

Este usor de vazut cam ce este posibil in aplicatia Kitchen Sink.

Aplicatia nu arata ca o pagina web intr-un WebView!

Parti rele

Aplicatia ocupa foarte mult spatiu (16M pe telefon).

Elementele grafice sunt doar niste subseturi din platformele suportate.

Nu este foarte rapid, din cauza faptului ca avem codul intepretat si nu compilat, ca sa poata interactiona direct cu OS-ul.

Nu exista un editor vizual.

Exista probleme de integrare cu emulatoarele, atat pentru Android cat si pentru iPhone.

Concluzie

Daca esti un cunoscator al limbajului JavaScript, ai nevoie repede de o aplicatie si vrei sa foloseasca elemente grafice native, atunci probabil Titanium este pentru tine.

Daca vrei performanta, probabil trebuie sa te orientezi spre altceva.

Eu nu am suficienta experienta cu SDK-ul Android cat sa pot construi aceasta aplicatie in timpul care l-am avut, acesta a fost compromisul meu.

Sincer, nu sunt sigur daca PhoneGap era o optiune mai buna sau nu, vorbind de cazul meu paticular. Astazi exista multe librarii de JavaScript facute special sa emuleze elementele grafice native intr-o aplicatie PhoneGap. Diferenta nu este neaparat vizibila si, pana la urma, uneori poate aplicatia chiar nu trebuie sa arate ca o aplicatie standard, poate o interfata complet diferita este mai potrivita.

Written by Claudiu Persoiu

24 December 2013 at 1:13 PM

Posted in JavaScript

Tagged with , ,

Closures, de la Scheme la Javascript la PHP

without comments

Notiunea de closure in PHP, desi a aparut in PHP 5.3, a fost realizata intr-un mod adecvat abia in 5.4, asa cum am mai spus-o si pe blogul meu.

Wikipedia ne spune:

In computer science, a closure (also lexical closure or function closure) is a function or reference to a function together with a referencing environment—a table storing a reference to each of the non-local variables (also called free variables) of that function.

In PHP nu este un concept foarte popular sau foarte cunoscut. De multe ori acesta este confundat cu Anonymous Functions. In limbajele functionale totusi, acest concept este foarte popular, pentru ca acolo este cu adevarat nevoie de el!

Scheme

Cand Brendan Eich a conceput JavaScript, s-a bazat pe limbajul Scheme si a ajuns sa faca o implementare a acestuia cu o sintaxa de C. Sintaxa C era si este in continuare mult mai populara, iar atunci (1995) limbajul Java era foarte “la moda”.

Sintaxa Scheme este similara cu sintaxa Lisp, in sensul ca se folosesc paranteze in jurul expresiilor pentru a le rula. Operatorii sunt definiti ca si functii si la fel ca o si in cazul functiilor, se pun in partea stanga a parantezei.

Sa luam un exemplu de closure in Scheme:

(define (make-counter)
  (let ((count (begin 
                 (display "run parent function and return 0") 
                 0)))
    (lambda ()
      (set! count (+ count 1))
      (begin 
        (display "inside child function ") 
        count))))

Functia principala seteaza o variabila “count”, cu valoarea 0 si afisaza “run parent function and return 0”, apoi intoarce o alta functie lambda, care incrementeaza variabila definita in functia principala si apoi afisaza “inside child function”.

Functia rezultata din executia functiei principale o stochez intr-o variabila pentru a o putea rula ulterior de mai multe ori:

> (define counter (make-counter))
run parent function and return 0
> (counter)
inside child function 1
> (counter)
inside child function 2

Cu alte cuvinte, de fiecare data cand apelez (make-couter), acesta va intoarce o functie noua care are acces la mediul in care a fost creata. Daca pare ciudat din pricina sintaxei, promit ca in JavaScript va parea mult mai natural.

Acest concept este foarte interesant pentru incapsulare. Mediul la tipul cand functia parinte este executata se poate incapsula, iar ulterior se va folosi de accest mediu fara grija ca acesta se poate schimba din cauze exterioare.

Pentru limbajele functionale acesta este un concept foarte interesant. Cand vine vorba de limbaje obiectuale totusi, conceptul aproape inutil, pentru ca obiectele au si ele rolul de incapsulare.

JavaScript

JavaScript a fost de la inceput un hibrid, un limbaj functional, orientat obiect, cu mostenire bazata pe prototype. Iar daca acestea nu erau suficiente, sintaxa a fost preluata din Java (C).

JavaScript nu a mostenit multe de la Scheme, dar a mostenit conceptul de closure.

Un motiv pentru care era nevoie de closure in Scheme este acela ca daca o functie nu gaseste o variabila in mediul in care se afla, o va cauta in mediul superior. Sa luam un exemplu:

(define x 1)
(define (add-in-env y) (+ x y))

Daca apelam add-in-env cu 2:

(add-in-env 2) -> 3

Pare la fel de ambiguu ca si in JavaScript, dar nu este tocmai asa. In Scheme sa faci mutatie nu e la fel de usor, simplu si transparent, deci o operatie ulterioara de:

(define x 2)

va rezulta intr-o eroare.

In JavaScript a rezultat un hibrid. Mutatia este permisa, dar notiunea de a cauta o variabila in mediul in care te afli a ramas:

var x = 1;
var add_in_env = function (y) {
   return x + y;
}

add_in_env(2); // rezulta 3

Pana aici e ok, dar pentru:

x = 2;
add_in_env(2); // rezulta 4

In acest caz, lucrurile scapa foarte usor de sub control.

Dar, ca sa rezolvam problema, putem pur si simplu sa definim variabila in mediul care isi va termina executia (se va inchide = will close):

var make_counter = function () {
   console.log("run parent function and set counter to 0")
   var count = 0;

   return function () {
       count = count + 1;
       console.log("inside child function");
       return count;
   }
}

var counter = make_counter();
console.log(counter());
console.log(counter());

var counter2 = make_counter();
console.log(counter2());
console.log(counter());
console.log(counter2());

Outputul va fi:

run parent function and set counter to 0
inside child function
1
inside child function
2
run parent function and set counter to 0
inside child function
1
inside child function
3
inside child function
2

Chiar daca functia principala si-a terminat executia, mediul din interiorul ei este pastrat ca un closure pentru functia care a fost intoarsa. Doar in momentul in care si subfunctia nu mai are referinte catre ea memoria alocata pentru closure va fi dezalocata.

Chiar daca JavaScript are obiecte, acestea nu au metode private. O abordare este sa pui un “_” (underscore) in fata numelui functiei si sa o consideri privata. Din punctul meu de vedere asta este ca si cum ii rogi pe cei care vin dupa tine sa o considere o functie privata. Evident acest lucru nu este tocmai consistent.

Sa luam un exemplu:

var obj = {
   _secretFunction : function (key) { console.log(‘do secret ’ + key) },
   doStuff : function (key) { this._secretFunction(key) }
}

obj.doStuff(‘stuff’); // do secret stuff

Aparent avem o metoda publica “doStuff” si una privata “_secretFunction”. Totusi nu poti preveni un utilizator sa apeleze “_secretFunction”, sau mai rau, sa o modifice:

obj._secretFunction = function (key) { console.log('new secret ' + key); }

obj.doStuff('stuff'); // new secret stuff

Daca vrem ca functia sa fie ascunsa, iar acest lucru sa fie evident pentru toata lumea, din nou putem folosi un closure:

var obj = (function () {
   var secretFunction =  function (key) { console.log(‘do secret ’ + key) }

   return {
      doStuff : function (key) { 
         secretFunction(key) 
      }
   }
})();

obj.doStuff(‘stuff’); // do secret stuff

Pentru ca functia parinte se va executa la inceput, practic spatiul in care a fost definit secretFunction si-a terminat deja executia, incapsuland logica. Obiectul intors poate sa apeleze functia pentru ca este definit in acelasi mediu ca si obiectul.

Pare complicat prima data, dar de fapt este foarte simplu cand intelegi conceptul.

Si apoi a fost… PHP

PHP inglobeaza multe optiuni diferite. PHP s-a dezvoltat initial ca un framework Perl, ulterior engine-ul fiind scris in C.

PHP este un limbaj dinamic care inglobeaza foarte multe concepte, de la obiecte, interfete si functii anonime, pana la goto labels. Nu este foarte clara directia in care ar trebui sa se dezolte limbajul, mai degraba ofera posibilitatea pentru abordari diferite.

In istoria ciudata a PHP, undeva in versiunea 4 a fost introdusa o sintaxa pentru Anonymous Functions, dar abia in PHP 5.3 a aparut o versiune mai “normala“.

Tot in versiunea 5.3 a fost introdusa si prima varianta de closures:

$scalar = 5;

$closure = function () use ($scalar) {
     return 'Scalar: ' . $scalar . PHP_EOL;
};

echo $closure(); // Scalar: 5

$scalar = 7;

echo $closure(); // Scalar: 5

Versiunea functioneaza in mare parte, dar trebuie sa specifici ce vei trimite catre closure.

Si mai exista cateva inconveniente:

<?php 
class Foo {         
   private function privateMethod() {                 
      return 'Inside private method';         
   }

   public function bar() {                 
      $obj = $this;                 
      return function () use ($obj) {                         
         return $obj->privateMethod();
      };
   }
}

$obj = new Foo();
$closure = $obj->bar();
echo $closure();

Fatal error:  Call to private method Foo::privateMethod() from context '' in [...][...] on line 10

Nu functioneaza pentru ca nu poti trimite $this ca parametru la closure, iar daca faci artificiul de mai sus tot nu vei putea accesa metodele private. Nu uitati, asta se intampla in PHP 5.3.

Ideea de a introduce acest tip de closure mi se pare bizara. Nu este prima daca cand in PHP se introduce un feature “bizar”, dupa cum vorbeam mai sus si de Anonymous Function. Pare work in progress.

Cred ca toata lumea se astepta ca acest feature sa functioneze la fel ca in JavaScript. Cred ca doar datorita JavaScript conceptul de closure a devenit atat de popular.

In versiunea PHP 5.4 lucrurile s-au mai schimbat, avem in sfarsit closures asa cum ne asteptam:

class Foo {
   private function privateMethod() {
      return 'Inside private method';
   }

   public function bar() {
      return function () {
         return $this->privateMethod();
      };
   }
}

$obj = new Foo();
$closure = $obj->bar();
echo $closure(); // Inside private method

Functioneaza!

Poti chiar sa spui:

unset($obj);
echo $closure();

si va functiona, pentru ca obiectul in interiorul caruia a fost definit closure-ul a ramas in memorie pana cand se va termina executia scriptului, sau se va apela:

unset($closure);

Pentru mai multe detalii despre cum functioneaza closure in PHP 5.4, puteti citi acest blog.

Written by Claudiu Persoiu

10 April 2013 at 10:02 AM

Un nou joc JavaScript – Minesweeper

without comments

A venit vremea sa mai public inca un joc facut in JavaScript, de data asta este vorba de Minesweeper.

Prima versiune a jocului a fost facuta initial acum aproximativ un an jumatate, dar intre timp l-am rescris total din pricina problemelor de performanta.

Acesta este cred si ultimul joc care nu il fac folosind canvas din motive de compatibilitate.

Fata de majoritatea jocurilor care au fost facute literalmente peste week-end (exceptia este Puzzle Gd) acesta s-a dovedit un joc putin mai complicat.

Pentru grafica vreau sa ii multumesc (din nou) Cătălinei Radu.

Enjoy!

Written by Claudiu Persoiu

16 October 2011 at 9:47 AM

Posted in Diverse,JavaScript

Tagged with , ,

PhoneGap – primele impresii

without comments

In ultima saptamana am vrut sa fac o mica aplicatie pentru mobil (Android). Initial am vrut sa o fac folosind Titanium, platforma cu care m-am mai jucat si am fost placut impresionat.

Totusi dupa ce am descarcat compilatorul si am facut prima aplicatie am avut o surpriza, aplicatia “Hello world” avea aproximativ 5M. Cum s-a ajuns la marimea asta? Simplu, Titanium compileaza aplicatile in cod nativ dar nu exista o metoda clara prin care sa determine ce API-uri sunt folosite, asa ca va introduce minimul necesar pentru toate functionalitatile. Perspectiva de o aplicatie care trece de 5M nu m-a incantat asa ca am inceput sa caut alternative.

Mi-am instalat Phonegap, am vrut sa fac un joc si cu aceasta plaforma de mult timp, dar avand in vedere ca nu are o instalare la fel de eleganta ca Titanium nu m-a incantat. Am facut o aplicatie “Hello world” si surpriza… ~200k! O dimensiune rezonabila pentru mine.

Evident exista o explicatie, Phonegap ofera acces la multe facilitati cum ar fi: accelerometru, camera sau contacte, dar nimic pe partea de prezentare. Partea de prezentare este facuta exclusiv prin HTML, CSS si JavaScript.

Intreagul proiect Phonegap se bazeaza pe faptul ca platformele importante au nativ un “web view” care poate parsa o pagina web.

In plus, pentru ca proiectul nu este la fel de “elegat” ca Titanium poti adauga facilitati destul de usor. De exemplu pentru Android exista un numar decent de proiecte care adauga facilitati in plus pentru platforma. Modul de incarcare al lor nu e foarte dificil dar nici plug & play. Practic sunt module de Java pentru Android care au si un API care poate fi apelat din “web view”. Acesta poate sa fie un avantaj, pentru ca exista multa lume care scrie module suplimentare care nu trebuie sa fie neaparat in “core”.

Pentru aplicatii simple care fac listari sau afisaza informatii, platforma este o alternativa interesanta, mai ales ca exista o serie intreaga de framework-uri JavaScript si CSS pentru formatare, cum ar fi: jQTouch, jQuery Mobile sau XUI. Platforma este foarte buna pentru a impacheta aplicatii de acest fel. De exemplu daca ai o aplicatie HTML pentru mobil si vrei sa-i adaugi functionalitate nativa in plus si sa o distribui compilata, Phonegap face o treaba buna.

Pe de alta parte chiar daca poti accesa de exemplu butonul de meniu, nu poti construi un meniu nativ.

Concluzionand, este o platforma cu o abordare complet diferita fata de Titanium. Daca Titanium se bazeaza pe faptul ca aplicatia va ajunge cod nativ cu API-uri native, cu tot codul scris in JavaScript, iar web view este una din optiuni, abordarea PhoneGap este ca toata prezentarea sa fie exclusiv in web view folosind HTML(5) + CSS si doar cateva API-uri specifice dispozitivelor care nu pot fi accesate din browser si nu sunt legate de prezentare sa fie expuse, cum ar fi vibratia, butoanele, etc. Avand in vedere aceste lucruri nu cred ca se poate face o comparatie reala intre platforme, doar programatorul poate decide care este abordarea de care are nevoie.

Written by Claudiu Persoiu

14 August 2011 at 3:05 PM

Posted in Diverse,JavaScript

Tagged with , ,

Calculatorul din Android vs. JavaScript

with 2 comments

Este vorba chiar de calculatorul din telefon. Eu am un HTC Desire cu Android 2.2. Aplicatia mea implicita de calculator, care se numeste simplu “Calc” ma uimeste. Foarte rar se intampla chiar sa am nevoie sa o folosesc si chiar si mai rar sa fac operatii cu numere fractionare pe ea, dar atunci cand fac mereu uit ca are o problema.

Sa zicem:

12 – 11

In Calc = 1, in JavaScript = 1. Nimic iesit din comun pana acum, nu?

Sa luam:

1.2 – 1.1

Orice elev de scoala primara stie ca rezultatul este 0.1.

In Calc este 0.099999999, ciudat? In JavaScript e si mai interesant totusi, rezultatul este 0.09999999999999987.

Este vorba de float, si presupun ca diferenta este de la numarul de zecimale afisate pe ecran. In ambele cazuri este folosit standardul IEEE 754.

Acum… in JavaScript se cunoaste aceasta problema, dar cel care a facut aplicatia de Android, a avut grija sa faca calculatorul stintific daca rotesti telefonul si nu a vazut problema asta?

Written by Claudiu Persoiu

3 May 2011 at 10:19 PM

Posted in Diverse

Tagged with ,

Closures si functii lambda in PHP vs. JavaScript

with 2 comments

JavaScript si PHP suporta atat functii lambda cat si closures. Dar termenii sunt putin intelesi in ambele libaje de programare si de multe ori sunt confundati.

Functii Lambda

Mai sunt numite si functii anonime. Acestea se refera la functii care pot fi apelate fara sa fie neaparat legate de un identificator. Unul din scopurile lor este de a fi pasate ca argumente. Numele de Lambda li se trage de la Alonzo Church, inventatorul lambda calculus in 1936. In lambda calculus toate functiile sunt anonime.

JavaScript

In JavaScript functiile lambda fac parte din setul de baza si reprezinta metoda preferata de creare a unei functii.

De exemplu:

var add = function (a, b) {
     return a + b;
}
alert(add(1, 2)); // 3

Functiile lambda sunt folosite aproape in orice context cand vine vorba de JavaScript, un exemplu este:

window.onload = function (e) {
     alert('Pagina s-a incarcat!');
}

PHP

In PHP, functiile lambda au fost introduse de la versiune 4.0.1 folosind create_function. In versiunea 5.3+ a fost adaugata si sintaxa similara cu JavaScript, un mod mult mai lizibil si elegant de a definii o functie.

Asta inseamna ca in PHP exista doua moduri de a genera o functie lambda:

// PHP 4.0.1+
$add = create_function('$a, $b', 'return $a + $b;');

// vs.

// PHP 5.3+
$add = function ($a, $b) {
     return $a + $b;
};

echo $add(1,2); // 3

Functiile lambda pot fi folosite ca parametru pentru alte functii, cum ar fi usort:

$array = array(4, 3, 5, 1, 2);
usort($array, function ($a, $b) {
     if ($a == $b) {
          return 0;
     }
     return ($a < $b) ? -1 : 1;
});

Chiar mai mult, PHP 5.3+ permite apelarea unui obiect ca o functie anonima:

class test {
     function __invoke($a) {
          echo $a;
     }
}
$a = new test();
$a('test'); // 'test'

Closures

Notiunea de closure este notiunea cu adevarat neinteleasa dintre cele doua. In general confuzia apare pentru ca implementarea de cloasure poate presupune si functii lambda. Un closure se refera la capacitatea unei functii/obiect de a accesa mediul in care aceasta a fost creat(a) chiar daca executia functiei parinte s-a terminat. Cu alte cuvinte functia/obiectul intors de un cloasure pastreaza mediul in care a fost definita.

In JavaScript notiunea de closure face parte din arsenalul de baza, pentru ca limbajul nu are la baza un model obiectual traditional ci unul bazat pe prototype si functii. Dar JavaScript mai are si cateva reminescente, cum ar fi faptul ca poti folosi “new” pentru a construi un obiect pe baza unei functii care joaca roul de clasa. In PHP este mai degraba o noua posibilitate de abordare a problemelor, PHP facand parte din familia de limbaje cu model obiectual traditional.

JavaScript
In JavaScript notiunea de closure este foarte folosita, iar popularitatea se datoreaza faptului ca JavaScript nu este un limbaj obiectual traditional, ci unul functional, bazat pe mostenire prototype.

In JavaScript nu exista notiunea de Public, Private si Protected, exista doar Public si Private iar obiectele pot mostenii unele de la altele, fara sa foloseasca clase.

O alta problema este mediul (scope), care in mod implicit este cel global. Prin closure aceste probleme pot fi rezolvate intr-un mod elegant:

var closure = function () {
     var sum = 0;
     return {
          add: function (nr) {
               sum += nr;
          },
          getSum: function () {
               return sum;
          }
     }
}();

closure.add(1);
closure.add(2);
console.log(closure.getSum());

In exemplul de mai sus, sum este o proprietate privata iar aceasta teoretic, putea fi accesata si modificata doar din functia closure. Partea interesanta este ca parantezele de la finalul definitiei de functiei semnifica faptul ca aceasta functie se va si executa si deci va intoarce rezultatul care este un obiect. In acest moment functia initiala nu mai exista decat pentru a servi obiectul intors, incapsuland astfel variabila privata.

Desi functia si-a terminat executia, prin intermediu acestul closure obiectul returnat poate accesa variabilele definite in interiorul functiei, pentru ca este mediul in care a fost creeat.

Problema devine mai interesanta atunci cand o functie intoarce o alta functie:

var counter = function () {
    var counter = 0;
    console.log('in closure');
    return function () {
        console.log('in functia anonima');
        return ++counter;
    };
};
var counter1 = counter();

console.log(counter1()); // 1

var counter2 = counter();
console.log(counter2()); // 1
console.log(counter1()); // 2

Output-ul va fi:

in closure
in functia anonima
1
in closure
in functia anonima
1
in functia anonima
2

Ce se intampla de fapt este ca prima functie se executa si intoarce o functie anonima care inca mai poate accesa mediul in care a fost creata. Dupa parerea mea de aici vine confuzia dintre closures si lambda functions, pentru ca o functie intoarce o alta functie.

Diferenta dintre exemple este ca in primul exemplu functia initiala de closure se executa imediat, iar in al doilea exemplu se poate vedea ca atunci cand counter se executa intoarce un rezultat, care este de fapt o definitie de functie, care la randul lui poate fi executata. Evident si acest exemplu poate fi adaptat sa se comporte precum cel precedent folosind paranteze la final.

PHP

Cum spuneam si mai sus, in PHP notiunea de closure nu este la fel de importanta ca in JavaScript.

Daca functiile lambda sunt disponibile in limbaj incepand cu versiunea 4, closure au aparut de abea dupa PHP 5.3+

Datorita mediului (scope) de executie care este de tip block in PHP se realizeaza o incapsulare mai buna dar si mai putin flexibila fata de JavaScript. Practic in PHP trebuie specificat cu ajutorul instructiunii use ce anume va putea accesa functia anonima din closure-ul care si-a terminat executia.

function closure () {
     $c = 0;
     return function ($a) use (&$c) {
          $c += $a;
          echo $a . ', ' . $c . PHP_EOL;
     };
}

$closure = closure();

$closure(1);
$closure(2);

Spre deosebire de JavaScript in PHP nu se pot realiza closure care sa intoarca un obiect, sau mai bine zis obiectul nu poate fi legat de mediul in care a fost creat, decat sa zicem, daca nu se trimit parametrii la constructor prin referinta, metoda nu foarte eleganta care nu vad in ce scenariu ar avea neaparata nevoie de closure.

Ca o paralela la exemplele  de la JavaScript, in loc de parantezele “()” de la finalul functiei, in PHP pentru a executa functia imediat dupa definire se pot folosii call_user_func() sau call_user_func_array():

$closure = call_user_func(function () {
    $c = 0;
    return function ($a) use (&$c) {
        $c += $a;
        echo $a . ', ' . $c . PHP_EOL;

    };
});

$closure(1);
$closure(2);

Written by Claudiu Persoiu

16 April 2011 at 6:02 PM

Povestea JavaScript spusa de Douglas Crockford la Yahoo!

without comments

Douglas Crockford on JavaScript

Cum eu sunt un mare fan al lui Douglas Crockford, inventatorul JSON, cu cateva saptamani in urma am descoperit o noua serie de prezentari. Prezentarile au avut loc in 2010 si se gasesc in pagina dedicata pe blog-ul YUI: http://yuiblog.com/crockford/.

De ce sunt fan Crockford? Au fost 3 lucruri care m-au surprins inca de la prima prezentare care am vazut-o cu el:

  • a sustinut cu inversunare ca JavaScript are si parti bune, dar acestea nu sunt intelese,
  • a spus ca JavaScript este un limbaj functional si trebuie luat ca atare pentru a descoperii frumusetea lui,
  • a fost unul dintre foarte putinii care a scos o carte adevarata de programare despre JavaScript si nu doar o colectie de efecte speciale cum au facut majoritatea pana la el.

Seria de prezentari “Crockford on JavaScript” de la Yahoo!, nu este tocmai noua dar totusi foarte de actualitate.

Ce este diferit fata de celelalte prezentari sustinute, este ca nu sunt focalizata pe sintaxa, limbaj si evident “good parts”, ci mai degraba pe intreaga imagine de ansamblu, toata povestea limbajului, inclusiv istoria limbajelor care au avut o influenta.

Prezentarile sunt destul de lungi, peste o ora fiecare, dar foarte interesante dupa parerea mea, mai ales daca esti fan al istoriei calculatoarelor.

Partea a treia poate fi un pic mai dificila pentru ca sunt niste notiuni care pot parea destul de bizare. Dar o data ce te familiarizezi cu ele, multe lucruri incep sa fie mai clare.

Written by Claudiu Persoiu

9 April 2011 at 2:55 PM

Posted in JavaScript

Tagged with ,

Web-ul 3d cu HTML5

without comments

In week-end navigam intrebandu-ma de ce nu exista inca 3d pe net realizat in JavaScript. O intrebare ridicola intr-o dupamiaza torida.

Intrebarea mea a plecat de la ideea ca prima etapa in evolutia 3d a fost facuta in 2d, practic reprezentarea obiectelor 3d folosind mijloacele 2d existente.

Evident am ajuns usor la primul meu rezultat: un shooter 3d direct in browser folosind JavaScript realizat de Ben Joffe!

Este cel putin impresionant!

In afara de acest raspuns imediat am mai gasit cateva variante de jocuri 3d realizate in JavaScript care nu se foloseasc de facilitati cum ar fi canvas, dar acele rezultate nu sunt foarte impresionante dintr-un motiv simplu: viteza!

Pana la HTML5 viteza de afisare in browser era o problema foarte mare. Este bine cunoscut ca una dintre cele mai incete componente dintr-un browser este DOM, in special in Internet Explorer. Cand vine vorba totusi de canvas se poate vedea o diferenta imensa in bine, multitudinea obiectelor de pe scena nu mai sunt coordonate prin DOM ci pur si simplu afisate intr-un element cu adevarat grafic.

In timp ce deschideam calculatorul azi ma intrebam, oare de ce nu se poate realiza un joc care sa fie macar ca Duke Nukem 3D? Evident, probabil browserul nu o sa devina prea curand o platforma concurenta cu XBOX pentru jocuri dar este normal… Nici nu-mi dau seama cum am ajuns acolo, dar parca ceva din universul meu m-a inpins spre ceva cu adevarat impresionant:

Quake 2 direct in browser, folosind JavaScript!

Initial m-am gandit ca au trisat, au folost WebGL, nu doar popularul canvas 2d. Dar rezultatul este cu adevarat impresionant, iar acest standard probabil va fi disponibil ca specificatie in HTML5, adica se va regasi pe cel putin o parte din browsere.

Chiar daca au folosit GWT, codul final rezultat este JavaScript, deci asa ceva se poate realiza folosind doar JavaScript!

De unde a plecat toata ideea de 3d in browser? Am citit acum aproape 2 ani despre niste eforturi in acest sens, iar acestea se bazau pe VRML. Dar VRML exista ca standard din 1994 si nimic impresionant nu am vazut pana acum. Am chiar si o carte de VRML care se umple de praf in biblioteca. Marele defect este ca nu exista browsere care sa ofere suport nativ.

Noua perspectiva este cu totul inovativa, pentru ca este o punte intre browser si hardware 3d. Deci probabil ca daca vom avea 3d in browser intr-o buna zi, asa va fi realizat!

Written by Claudiu Persoiu

8 June 2010 at 10:35 PM

Posted in Browsers,JavaScript

Tagged with , ,

Unknown runtime error – Internet Explorer cu InnerHTML – alta eroare plina de sens

without comments

Lucram eu zilele trecute la un nou joculet in JavaScript pentru sectiunea de jocuri. Ca marea majoritate a programatorilor (cum arata statisticile) si eu folosesc FireFox pentru dezvoltare. Dar cum jocul a ajuns in faza de testare am zis ca e timpul sa vad daca inca mai functioneaza corect in Internet Explorer.

Sa testez in Internet Explorer este o adevarata placere mereu, practic primesti o eroare iar apoi speri ca ai gasit sursa.

Evident a aparut o eroare, una plina de semnificatie ca de obicei:

Unknown runtime error??? WTF??? Daca el nu stie la ce are eroare, eu cum ar trebui sa stiu?

Bucata de cod care genera eroare era:

canvas.innerHTML = '';

Unde canvas era un o variabila care stoca un document.getElementById(‘canvas’), iar id-ul canvas era de la:

<table border="0" cellspacing="0" cellpadding="0">
<tbody id="canvas"></tbody>
</table>

Pare gresit? ei bine nu este pentru ca in acel moment am inceput sa ma uit la alte jocuri care fac cu succes acelasi lucru, chiar si in IE.

Am incercat si in IE 6, evident aceeasi eroare.

Se pare ca eroarea apare la blocuri cum ar fi table, tbody, p si altele.

Ca sa rezolv totusi problema am folosit in loc de un tbody un div in care adaug elementele iar problema a disparut ca prin minune.

Ce este interesant este ca problema asta nu apare tot timpul pentru un anumit tip de tag!

Multumesc Microsoft pentru mesajele de eroare care sunt atat de pline de logica!

Written by Claudiu Persoiu

6 June 2010 at 2:20 PM