[es] - Organizacija JS koda u pageless aplikaciji

dakipro
Dalibor Jovic
Web Developer
Bergen, Norway

Član broj: 31848
Poruke: 1792
*.15.34.95.customer.cdi.no.

Sajt: norway.dakipro.com

+190 Profil

Organizacija JS koda u "pageless" aplikaciji

^{07.04.2012. u 11:26 - pre 158 meseci}

Pozdrav,
Trebam da za potrebe veceg projekta postavim neke, da kazem, standarde u organizaciji koda. Projekat je tako koncipiran da postoji jedna strana i skoro sve ostalo se radi u popupovima. Nesto kao dashboard iliti homepage, iliti desktop. Dakle ima nekoliko widgeta i ima akcija nad njima.
Sve popupove umemo da napravimo, sve funkcionalnosti umemo da napravimo, samo nisam siguran da znamo da najbolje organizujemo JS kod. Imam ideje vec sta mogu da grupisem u JS funkcijama da bi smanjio redundantnost koda ali i dalje nisam siguran da zaista znamo koji je najbolji pristup.
Ono sto trenutno znam jeste da budzim za svaku akciju i za svake event listenere i onda pisem sve za sve pa sta bude bude.

Koristimo jQuery kao glavnu biblioteku i to ne bih bas mogao da menjam u ovom trenutku.

Do sada sam JS uglavnom koristio kao sekundarni alat dok je php sve terao iz pozadine, a cenim da je za ovaj projekat poterbno da php samo salje podatke ka JS, a JS da dalje prikaze, sortira, i ostalo sa tim podacima. Vecina popupa ce dobiti formatiran html preko ajax poziva ali ima par ekrana gde bi samo poslao podatke (listu usera recimo, potrebnu za neke forme) a JS bi te podatke organizovao, sortirao, prikazao po poterbi korisnika.

Dakle fokus se ovde seli na JS-u, pa me zanimaju iskustva, kljucne reci, dobre skripte, preporuke i saveti sta odakle i kako poceti. Nisam JS pocetnik, ali cim imam problem nisam bas ni "guru".

Krenuo sam da gledam jquery.template za neke delove koda, knockout.js za jos neke stvari, ali nisam siguran da je to bas ono sto nama treba i da vredi ulagati vreme u pomenute skripte ako su cist promasaj za ovo sto nama treba.
Znaci organizacija koda, sta kako i odakle da pocnem da citam?

Pitajte ako je poterbno jos detalja i hvala unapred svim kolegama na vremenu

http://norway.dakipro.com/

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-10.sezampro.rs.

+33 Profil

Re: Organizacija JS koda u "pageless" aplikaciji

^{08.04.2012. u 10:42 - pre 158 meseci}

Ni ja iskreno do sada nisam imao potrebu da razmišljam na taj način, jer i kod mene je uvek server-side (PHP) bio u fokusu, dok je JS/AJAX uglavnom bio korišćen eto više "reda radi", da UI izgleda malo efektnije i bogatije. Pritom je to skoro uvek bilo bez imalo organizacije, jedan $(document).ready(), pa u njemu neko silno bind-ovanje događaja.

Doduše, koristio sam jednom prilikom ExtJS, sad je to valjda Sencha, i to komercijala. E tu već jesam koristio te stvari koje se i sada preporučuju, OOP, moduli, namespace-ovi, itd.

A onda sam od pre nekog vremena počeo više da se interesujem za tu temu orgranizacije JS kôda, jer prosto počeo sam da ga percipiram na drugi način, u smislu da je i JS na neki način deo business logike, a ne samo neko front-end pomagalo.

I uglavnom, nešto čime se sada vodim pri pisanju JS kôda jesu dve stvari: izbegavanje zagađivanja global scope-a i enkapsulacija određenih celina u module. Ovo prvo praktično znači da npr. neki jednostavan jQuery snippet koji npr. u sklopu svoje funkcionalnosti ima neku promenljivu i možda neku pomoćnu funkciju, wrap-ujem u IIFE (Immediately Invoked Function Expression):

Code:
(function($) { //ostatak koda })(jQuery);

... upravo iz razloga da ta neka varijabla/funkcija ne bi "zagadile" global scope.

Što se tiče modula, možda ti je već i poznato kako oni funkcionišu i koji su benefiti, npr.:

Code:
var Foo = function() {
    var foobar; //privatna promenljiva, dostupna samo u scope-u Foo-a

    //... bas kao i ovaj privatni metod
    function privateMethod()
    {
        //neki kôd
    }

    //javna svojstva ovog modula
    return {
        publicMethod1: function()
        {
            //neki kôd

        },
        publicMethod2 : function()
        {
            //neki kôd
        }
    };
}();

... i onda to npr. može da se koristi ovako: Foo.publicMethod1. Modul je istovremeno i singleton, što znači da ne možeš da imaš dve te Foo instance. Kako god, opet je poenta ta enkapsulacija i "čist" global scope.

Za sve te stvari, preporučujem ti da pročitaš ovaj odličan tekst: http://www.adequatelygood.com/...Script-Module-Pattern-In-Depth.

E sad, sve ovo bi bio samo neki uvod u celu tu priču orgranizacije JS kôda... Možda je u stvari najbolje da kreneš da tražiš na temu "jquery code organization". Eto ja sam tim upitom naišao na ovu odličnu prezentaciju na SlideShare-u - Building Large jQuery Applications, pa ti preporučujem da i na to baciš pogled. Takođe, obrati pažnju i na drugi odgovor na ovom pitanju na StackOverflow: http://stackoverflow.com/quest...ode-organization-in-javascript. Kao što vidiš, tu je baja predložio dosta zanimljiv pristup, da imaš te neke, u tom primeru, DimScreen i Survey klase, a da im onda u nekom public static void main-u

, dakle u momentu kada ih treba koristiti, prosleđuješ jQuery objekte nad kojima će oni da rade. Na taj način su te JS klase i moduli lišeni jQuery selektora, id-eva, imena klasa, te im se DOM nad kojim rade inject-uje spolja.

Opet kažem, ima raznih pristupa, ali pritom im je ta osnova na neki način ista. Uglavnom, treba ih sve istražiti, pa izabrati najbolji...

Odgovor na temu

dakipro
Dalibor Jovic
Web Developer
Bergen, Norway

Član broj: 31848
Poruke: 1792
*.220.202.84.customer.cdi.no.

Sajt: norway.dakipro.com

+190 Profil

Re: Organizacija JS koda u "pageless" aplikaciji

^{08.04.2012. u 13:08 - pre 158 meseci}

Hvala ti puno Nikola, gledam ovo sto si pisao, neke stvari sam susreo a neke su mi nove. Uglavnom mi puno znaci preporuka da ne lutam u ogromnom svetu informacija.

http://norway.dakipro.com/

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Organizacija JS koda u "pageless" aplikaciji

^{08.04.2012. u 13:54 - pre 158 meseci}

Pogledaj da li ti odgovara Backbone, to je u sustini MVC framework za js, koji mozes lako da iskombinujes sa jQuery-jem.
A ako kod razdvojis po modulima pogledaj i require.js

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

dakipro
Dalibor Jovic
Web Developer
Bergen, Norway

Član broj: 31848
Poruke: 1792
*.220.202.84.customer.cdi.no.

Sajt: norway.dakipro.com

+190 Profil

Re: Organizacija JS koda u "pageless" aplikaciji

^{08.04.2012. u 18:41 - pre 158 meseci}

Pogledacu i to, hvala svima na savetima. Moram da gledam i da ne uradim overkill, tj da ne iskomplikujem nepotrebno stvari. A kako mislim da nemam dovoljno iskustva na temu ni sam ne bih znao sta je overkill a sta je "pravi" nacin.
Kako trenutno vidim projekat, stoji jedan desktop, mozda se neki podaci refresuju na 20ak min (ne mora obavezno ni ajaxom da bude), otvara se 10ak popupa, par formi i neke common stvari. Nakon dugo razmisljanja deluje mi da obicna staromodna hardkore funkcija openPopup(); sa par parametara moze da tera veci deo sajta.
Samo razmisljam sad dosta na vreme, sta kad sajt krene da raste, sta kad pocnu neki nepredvidjeni zahtevi, sta kad... Pa zato gledam ima li "boljeg" nacina za ovo sto smo osmislili da pravimo.

http://norway.dakipro.com/

Odgovor na temu