Re: 10 motive pentru care Javascript este cel mai prost inteles limbaj de programare

Am folosit Google Reader (stiti.. client RSS.. o sa devin obsedata) si am fost anuntata la fiecare postare noua pe blogul la care m-am abonat evideeeeent! Si uite asa am citit post-ul lui Vali la care indraznesc sa ii dau un mic "Re:". L-am citit si recitit de multe multe ori (postul lui Vali).. Ce mai, m-am simtit! Ar trebui sa ma las de programare? Oare? sau sa pun mana pe tastatura, ochiu' pe monitor si sa il intreb pe tata Google? ca sa aflu l-am intrebat intai pe Dynamic Implementation Consultan-ul nostru, dl. Valentin, ce vrea sa spuna de fapt ca m-am cam bagat in ceata (umila, imi recunosc in mod public-on request- numarul de neurouni):

Vali: sper ca nu te-ai suparat
vivi: not!
vivi: si oricum imi cam scoate peri albi js sscris de altii
vivi: deci
vivi: ure right
vivi: numai ca sunt eu novice
Vali: pai iti scoate
Vali: pt ca js e scris prost
Vali: in general
Vali: pana si eu il scriu prost
vivi: question
vivi: in loc de onclik si alte balarii
vivi: ca zici ca e naspa
vivi: ce altceva?
vivi:
vivi: mai bine te intreb pe blog
Vali: pai
Vali: onclick="test();"
vivi: asa
Vali: nu e bine din motivul in care nu respecti
Vali: ideea de "mvc"
Vali: adica in general trebuie sa separi interfata
Vali: de cod
Vali: ca sa atribui onclick
Vali: scrii
Vali: document.getElementById('test').onclick=function(e) {
Vali: }
Vali: si ai acces si la e
vivi: aahaaaaaaaaaaaaaaaaa
Vali: si poti oprii propagari, alte nebunii
vivi:
vivi: si eu chiar fol la maxim evenimetele de genul
Vali: plus ca
Vali: e bine sa folosesti jquery
Vali: unde ai obiectul de event
Vali: unificat cross-browser
Vali: ca in ie merge e.keyCode
Vali: in ff nu merge e.keyCode parca
Vali: iar jquery unifica calumea
vivi: trag un google si apoi un post
vivi: te-ar deranja ca postul sa contina si cate ceva din conversatie.. gen copy/paste
vivi: ?
Vali: a nu
Vali: normal ca nu

Si acum google...

MVC..
- in primul rand este un design pattern - "model view controller" - folosit in dezvoltare de soft in diverse limbaje de programare: Java, PHP, Ruby, .Net, Python etc.. si, daca e folosit corect, izoleaza logica bussines-ului din punct de vedere al interfetei astfel incat modificarile in partea vizuala a aplicatiei sau in logica de bussines, sa nu se afecteze reciproc.
- acest design pattern poate fi aplicat si in JavaScript, considerat de unii cel mai flexibil limbaj din lume.
- si asa s-a nascut (presupun :) ) JavascriptMVC care e un "open source" framework... http://javascriptmvc.com/wiki/index.php?title=Main_Page

Concluzie: bine a zis Lenin (sau Stalin) "invatati invatati invatati!!!"! Omul cat traieste invata.. mai ales despre interfete web :))

Ce nu inteleg multe siteuri Web2.0

Ce este un request? Este un efort al browserului din calculatorul tau sa acceseze o pagina din serverul pe care se afla un site.

Ce te faci daca, atunci cand intrii pe un site, Web2.0 bineinteles, acel site incepe sa faca:

5 request-uri pentru javascripturi:
jquery.js, jquery-ui.js, jquery-scrollto.js, mainapp.js, effects.js

3 request-uri pentru css:
jquery-ui.css, main.css, extra.css

195823569221 imagini de cate 1-2kb/fiecare.

In termeni de dimensiune nu ne deranjeaza, dar ne deranjeaza faptul ca fiecare request trebuie sa se conecteze la server, sa descarce continutul, sa fie interpretat, etc.

Chiar si daca vorbim de requesturi cached(js-urile si css-urile sunt cached), tot se vor cere, dar se va primi 304 Not modified

Bun. Ce se poate face in aceasta situatie?

Se incearca optimizarea. Cuvintele magice? minimizare, obfuscare, introducere de imagini care sunt afisate ca background-image intr-un singur fisier mare si incarcat. Alt cuvant magic? Testare si iar testare? Altul? VOINTA!

RSS again!

Nu ca as deveni pasionata de subiect dar e chiar interesant.Neavand o experinta prea vasta in domeniu (subiect) post-urile pe aceasta tema nu sunt decat un foarte scurt rezumat la ceea ce gasesc si eu pe net..

Spre rusinea mea, daca ma intreba cineva saptamana trecuta daca stiu ce e RSS ridicam fruntea mandra si tranteam un "normal!!" foarte ofensat dar dupa multe tab-uri cu diverse informatii plecate din Google recunosc cu mana pe inima si las capul in jos: "nici nu aveam idee!!".

Asdar sa va spun si voua cam ce am mai aflat..
In primul rand pentru a va abona la un RSS (adica sa sa iti fie semnalate ultimele modificari pe site-ul tau preferat) este necesar ca site-ul respectiv sa aiba o integrat serviciu RSS, sa ofere posibilitatea de a alege unul din feed-uri (care se pare ca sunt un fel de bookmarks sau favorites) si sa ai un RSS reader pentru ca serviciul RSS de bazeaza pe formatul XML, deci trebuie citit :). Exista o multitudine de RSS-readers gratuit (da.. moca) pe marele internet,iar daca nu sunt gratis.. gasim noi o metoda. RUSINE! :)) .. dar de ce sa ne chinuim cand exista o gramada de clienti RSS online care, din cate am citit eu, incep sa aiba fie din ce in ce mai apreciati.: Google Reader, My Yahoo, Bloglines, NewsGator etc.. Intr-un articol peste care am dat in cautarile mele, autorul claseaza Google Reader ca fiind cel mai bun clent RSS online deci vi-l recomand si eu (doar din auzite.. eu o sa le incerc pe toate si peste un timp va anunt daca mi-am facut o parere).

Astept pareri si noutati!!!!

Cine a tradus blogger in romana?

Un roman de la google, cu singuranta, dar nu stiu ce era in capu lui de a tradus “Sponsori” in loc de “Autori”. Ce urmeaza? Finantatori si investitori? Brokeri? Barosani?

Ce este RSS - ul ?

RSS este abrevierea de la Rich Site Summary, pentru versiunile RSS 0.91 si 1.0 si Really Simple Syndication, pentru RSS 2.0. Asa cum sugereaza si numele (v1.0) reprezinta sumarul noilor informatii adaugate pe site-ul respectiv,in cazul unui site cu o frecventa destul de mare din punct de vedere al schimbarilor efectuate. Asadar RSS este util pentru site-urile care isi schimba des informatiile cum ar fi site-urile de stiri, blog-uri sau podcasting.
Cand l-am intrebat pe tata Google la ce se foloseste RSS-ul (stiam ceva de niste stiri pe scurt.. dar cand un coleg a intrebat "ce este RSS-ul?" mi-am dat seama ca nu pot sa dezvolt pe tema asta :) ) am aflat si ceea ce este podcasting-ul, si anume transmitere de fisiere audio si video prin RSS. Nu am utilizat asa ceva suna de-a dreptul interesant.. se pare ca aceste fisiere care pot fi citite de dipozitive mobile ( am si eu RSS pe telefon dar ca un viitor inginer adevarat,sper, nu folosesc decat agenda :)) trist ) sau calculatoare daca accepta formatul in care sunt puse fisierele respective. Parea cea mai tare, mai ales pentru dispozitive mobile si cei pasionati de ele (nu eu), e ca fisierele pot fi descarcate offline (asadar economie!! tot e criza.. ) sau ascultate/vizualizate online.
Il mai intreb pe Google si cum se implementeaza ceva de genul.. si va tin la curent (nu pare foarte complex dar trebuie sa ma lamuresc si apoi sa imi dau cu parerea) sau daca aveti deja o parere bine conturata, nu ezitati sa ne suneti si noua.. so leave us a comment please!

Cum faci o idee sa para mai buna?

Cum poti face ca o idee sa para mai buna atunci cand o prezinti cuiva?

Ii zici ca primul care a avut-o a fost Benjamin Franklin.

Bineinteles, nu se poate aplica la programare, dar cand vorbesti de lucruri precum drumul optim intr-un graf, poti zice ca el a observat miscarea pendulara oscilatoare a maimutei din ramura in ramura pana si-a dat seama de pattern-ul eficientei naturale a ei.

PS: www.jquery.com

jQuery

Ce este jQuery? Vreo tehnologie monolitica obosita gen Java Struti? Nu. j ala vine de la javascript, q de la query.

Care este ideea?

Pai, cu el putem exploata toate elementele din pagina folosind XPath la nivel de CSS-3 compliance.

Tot cu el putem realiza aplicatii solide care sa mearga identic pe toate browserele

Tot cu el putem realiza cereri ajax in cel mai usor mod.

Acum sa va dau un exemplu de cod care ar lua 592 de linii de cod javascript pur pentru implementare:

$(‘div#wrap > td:has(div.myclass) div.inneritem a[href^=http://]’).hide();

Ce face asta? Pai, cauta un div cu id-ul wrap, vede daca are sub el un td care are la randul lui dub el un div cu clasa myclass, vede daca td-ul are un div cu o clasa inneritem, iar in acel div exista un link al carui href incepe cu http://, adica link extern si il ascunde.

In javascript, acest lucru s-ar fi realizat asa:

divwrap=getDocumentById(‘wrap’)
children_divwrap=divwrap.children();
if (td in children_divwrap) {
if (td.children(div) {
  if (div.className==’myclass’) return found_td;
}
}
if (found_td.children() in div) {
if (div.className==’inneritem’) return found_div_inneritem;
}
if (a in found_div_inneritem.children()) {
if (a.attr(‘href’).beginsWith(‘http://’)) return found_a_href_http;
}
found_a_href_http.hide();

Am scos de aici niste foreach-uri evidente, doar pentru a arata ideea de baza. Similar pentru Ajax, DOM manipulation, events, efecte, utilitare, etc.

JSON. Deci da!

Deci da! Asta a fost exprimarea cand am testat prima oara JSON-ul. E puternic, cross platform, nu are nevoie de instantieri complicate cum e XML-ul, redundanta pe langa date e mica. Pe scurt, JSON e formatul meu preferat pe care il folosc cu incredere.

Cum arata JSON-ul asta?

Adica asta inseamna ca urmatoarele json-uri sunt valide:

[1,2,3,4,5]
[1,2,”a”]
{“a”:5}
{“a”:5,”b”:[1,2,3,4]}
{“a”:5,”b”:[“a”,”b”,”c”],”d”:{“e”:9}}

Incepe deja sa arate complicat. Nu este!

Ideea este ca orice JSON este ori un array bazat pe indecsi ([]) ori un array bazat pe chei=>valori ({}). Cel bazat pe indecsi poate contine in interiorul lui array-uri bazate pe chei=>valori, si invers. Cum am face un JSON cu profilul unui candidat atunci?

[
{
“candidate_id”: 5,
”fname”: “Gigel”,
”lname”: “Georgel”,
”age”: 20,
”phones”: [“0722 222 222”,”0744 444 444”],
”jobs”: [
{“title”:”engineer”,”company”:”XYZ SRL”,”period”:”2002-2003”},
{“title”:”senior engineer”,”company”:”XYZ SRL”,”period:”2005-2008”}
]
}, {
“candidate_id”: 6,
… etc
}
]

Cat de verbose ar fi fost un XML echivalent? Va las sa ghiciti.

JSON-urile sunt de preferat cand vine vorba de comunicare client/server folosind ajax din mai multe motive:

- mici ca dimensiune, overhead date mic,

- interpretare nativa de catre javascript (eval),

- UTF8

- se genereaza usor pe server. In general se aplica o functie peste un Hashtable sau un Array si iese JSON.

JSON-ul se poate valida pe www.jsonlint.com

Limitari JSON?

 

Ne afecteaza cu ceva asta? Nu! Nu folosim JSON sa stocam date, ci sa le transportam.

PUBLICITATE [nu adsense]

www.freegsm.ro (al doilea link, cel cu vrei sa ai un logo al tau?). IE6+ only din cauza ca foloseste tehnici de filtare a imaginilor (proprietatile css filter: ).

AJAX simulat prin form-uri cu action-uri in iframe-uri

(free stuff)

Ce este mai lightweight decat XML?

De ce? XML e un format foarte bun, dar ca si orice alta tehnologie, programatorul trebuie sa decida cand il foloseste bine, sau nu.

Un exemplu prost de utilizare XML reprezinta intoarcerea comunicarea cu astfel de mesaje in AJAX. De ce?

- daca ai un parametru numit nume, si intorci mai multe nume, atunci vei avea <nume>A</nume><nume>B</nume><nume>C</nume>. Asta inseamna ca doar numele parametrului pentru A ocupa 8 bytes in loc de 4 cat ar trebui. Cum nu vrem sa intoarcem requesturi uriase catre aplicatie, mai ales prin Ajax, e bine sa nu folosim formate foarte verbose.

- prelucrarea unui XML venit este de asemenea verbose. Se cheama functii ca getElementsByTagName, se parcurg array-uri. Chiar si cu un framework, exista munca de facut.

- generarea XML-ului pe parte de server side este mult prea verbose si de multe ori arata urat sa dai cu print “<name>”.$name.”</name>”; etc etc etc

Mai light ca XML, ca sa raspund este JSON-ul. Cititi avantajele lui in postul urmator

10 motive pentru care Javascript este cel mai prost inteles limbaj de programare

- 90% din cautarile pe google despre javascript indica scripturi cu getElemetById, setTimeout, alert si confirm.

- putine siteuri recomanda separarea codului HTML de cel javascript, de cele mai multe ori fiind scripturi cu <div onclick=”…”>, lucru nerecomandat sa definesti onclick  direct in tag pentru ca se pierde controlul asupra evenimentului

- toti asociaza javascript cu ad-uri enervante, pop-upuri, XSS, scripturi care blocheaza browserul, alert-uri modale infinite, etc

- majoritatea se limiteaza sa faca scripturi de snow (enervante acum ca a venit iarna) si miscari ale elementelor in pagina dand doar copy paste si fara sa inteleaga codul.

- multi sunt demoralizati de verificari gen document.layers sau documents.getElementById

- conceptul de OOP in javascript este rocket science pentru multi oameni, chiar si pentru web devii seniori.

- pana recent nu exista un debugger decent pentru javascript (acum exista Firebug)

- toata lumea intra in depresie cand primeste o eroare javascript de genul “Line 21: extra whitespace character, ] undefined this.el”. Multi se spanzura cand vad o eroare de genul NS: Permision Error on element in doar in Internet Explorer, pe cand in firefox merge bine si in opera nu merge dar nici nu da eroare

- pentru ca doar 1% inteleg ce este in spatele unui framework gen jQuery

Solutia pentru cei care inteleg prost javascript?

LASATI-VA DE PROGRAMARE!

PHP si XML pentru cei care s-au saturat de erori

Fie ca vrem sau nu, PHP este cunoscut prin 2 lucruri:
- cel mai folosit limbaj pe web
- cel mai prost inteles limbaj

Multi programatori au vrut cel putin odata sa stocheze date ca XML sau sa citeasca date dintr-un XML si s-au blocat. DOMXML din PHP este organizat in stil OOP, si cea mai mica greseala poate duce la rezultate dezastroase. Multa lume, cand vine vorba de debugging foloseste comanda print.
Gresit! Foloseste var_dump($variabila) si vei afla tot despre variabila (tip si continut). Asta poate fi deosebit de util atunci cand ai un element XML intr-o variabila si nu prea stii ce contine de fapt.

Mai jos avem un fragment de cod care citeste dintr-un XML.

load( 'books.xml' );

$books = $doc->getElementsByTagName( "book" );
foreach( $books as $book )
{
$authors = $book->getElementsByTagName( "author" );
$author = $authors->item(0)->nodeValue;

$titles = $book->getElementsByTagName( "title" );
$title = $titles->item(0)->nodeValue;

echo "$title - $author\n";
}
?>

De retinut ca DOMXML este gandit sa intoarca array-uri si obiecte care se pot naviga, iar proprietatile lor pot fi vazute la var_dump.

API-ul complet poate fi vazut la www.php.net/domxml

Valentin

SAX sau DOM?

De ce SAX?
- Atunci cand vorbim de XML-uri uriase (dump-uri de baze de date, etc) care nu incap in memorie

De ce DOM?
- Atunci cand avem XML-uri relativ mici/medii ca marime.
- Avem libertate deplina de a naviga in arbore
- Cod usor de inteles

Valentin

Welcome

Bine ati venit pe blogul nostru! :)

Pentru cei care au ajuns aici din intamplare, blogul este dedicat proiectului nostru pentru cursul de Interfete evoluate, Universitatea Politehnica Bucuresti, Fac de Automatica si Calculatoare, anul V.
Scopul proiectului este crearea unui site (al nostru este INTERFETE EVOLUATE) unde veti gasi teme rezolvate, tot felul de articole si chestii care noua ni s-au parut interesante si utile, toate avand in comun tehnologiile studiate si folosite in cadrul cursului si laboratorului de Interfete evoluate. Printe acestea se vor regasi informatii despre:

• XML, DTD, XML Patterns, XML Schema
• XHTML, CSS
• XPath, XQuery
• XML DOM, XML SAX Parsing
• Javascript, AJAX
• XSL
• RDF, OWL

Speram ca informatiile ce va stau la dispozitie atat pe blog cat si pe site sa va fie utile iar pentru orice observatie, sugestie sau nelamurire, asteptam commenturile voastre.

Silvia

XML - o scurta introducere

XML (eXtensible Markup Language) este un meta-limbaj pentru crearea de alte limbaje de marcare, cum ar fi XHTML, RSS,OWL etc. Aceste limbaje formează familia de limbaje XML. Este clasificat ca un limbaj extensibil dearece ofera posibilitatea utilizatorilor acestuia sa isi defineasca propriile elemente. Scopul sau principal este de a ajuta sistemele informatice sa distribuie structuri de date, in special prin internet, si este folosit atat pentru codificarea documentelor cat si pentru serializarea datelor.

Meta-limbajul XML a pornit ca o simplificare a limbajului SGML (ca si HTML - the Standard Generalized Markup Language) si a fost proiectat pentru a fi relativ lizibil din punt de vedere uman. XML este acum si un model de stocare a datelor nestructurate si semi-structurate în cadrul bazelor de date native XML.

Documente XML valide
Exista doua nivele de corectitudine a unui document XML: bine format sau valid.
Un document bine format se conformeaza tuturor regulilor sintaxei XML. Spre exemplu, daca un tag de start apara fara un tag de sfarsit corespunzator, nu este bine format. Un document care nu este bine format nu este considerat a fi un XML,iar un parser XML valid nu il poate procesa.
Un document valid se conformeaza unor reguli semantice suplimentare. Aceste reguli sunt fie definite de utilizator, file incluse intr-o schema XML,in special DTD. Spre exemplu, daca un document contine un element care nu este definit, atunci nu este valid; un parser valid nu il poate procesa.

Violeta