Στο πρώτο άρθρο μου για την JQuery επέλεξα να ασχοληθώ με μία συχνή παρεξήγηση.

Στο τέλος του οδηγού θα μπορούμε:

• Να αναγνωρίζουμε τη διαφορά μεταξύ των δύο εκδόσεων της JQuery και
• να τεκμηριώσουμε, σε πιθανό JQuery debate μεταξύ geek φίλων, τις εκάστοτε επιλογές μας

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.
Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)
Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

•    Τις δύο εκδόσεις της JQuery
•    Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

•    Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
•    Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Επιλέγοντας τη σωστή έκδοση της βιβλιοθήκης JQuery (…και γιατί αυτό δεν είναι βίτσιο)

Όσοι από εσάς είχατε προηγούμενη εμπειρία με την βιβλιοθήκη JQuery, ή απλά διαβάσατε τα άρθρα που αναφέραμε ως «προαπαιτούμενα» νωρίτερα στο παρόν άρθρο, διαπιστώσατε ότι η JQuery έρχεται σε δύο εκδόσεις (production και development).

Από τα ονόματα και μόνο, αντιλαμβάνεται κανείς τον τρόπο χρήσης. Development κατά την διαδικασία ανάπτυξης, Production όταν δημοσιεύσουμε τη δουλειά μας. Στις τάξεις των προγραμματιστών κυκλοφορεί συχνά η θεωρία «Αν δουλεύει, άστο όπως είναι!». Η φιλοσοφία αυτή δουλεύει άψογα όταν αναλαμβάνουμε να τροποποιήσουμε μια εφαρμογή του ελληνικού δημοσίου (!) . Δεν είναι όμως πανάκια.

Πολλές φορές είναι καλό να χρησιμοποιούμε τα σωστά εργαλεία για τις σωστές δουλειές. Η προσωπική μου συμβουλή λοιπόν, όσον αφορά την JQuery προτιμήστε να αναπτύσσετε κάνοντας χρήση της έκδοσης development και να δημοσιεύεται κάνοντας χρήση της έκδοσης production.

Μα γιατί; Αφού δουλεύει!

Ας δούμε μερικές διαφορές μεταξύ των δύο εκδόσεων…

JQuery – Production

Η επίσημη έκδοση της JQuery για χρήση στον server, δηλαδή αφότου η ιστοσελίδα μας έχει δημοσιευθεί. Όπως πιθανότατα παρατηρήσατε και στην εικόνα που παραθέσαμε νωρίτερα στο άρθρο, το μέγεθός της είναι μόλις 24 kilobytes και αποτελεί μία minified έκδοση. Είναι κατασκευασμένη έτσι ώστε να διευκολύνει την εκτέλεση στο περιβάλλον των διαφόρων servers, ταχύτερα από ότι η development έκδοση. Θα μπορούσαμε να πούμε ότι βελτιστοποιεί την εκτέλεση σε επίπεδο server.

JQuery – Development

Και αυτή επίσημη έκδοση :p της JQuery όμως για τη φάση της ανάπτυξης. Αν και σαν μέγεθος αρχείου δεν μπορεί να θεωρηθεί μεγάλο (155 kilobytes), είναι περίπου 6,5 φορές η production έκδοση. Η ειδοποιός διαφορά με την production έκδοση θα έλεγα ότι έγκειται στον κώδικά τους. Όπως μπορείτε να δείτε στην εικόνα που ακολουθεί, η development έκδοση είναι γραμμένη με τρόπο κατανοητό από κάποιον που γνωρίζει JavaScript σε αντίθεση με την production έκδοση, της οποίας τον κώδικα δεν θα χαρακτηρίζαμε υπερβολικά «αναγνώσιμο».

Ας το πιστέψουμε… Πως χρησιμοποιώ τις διαφορετικές εκδόσεις στην πραγματικότητα;

Το μόνο πράγμα που αλλάζει είναι το αρχείο της έκδοσης που θα συνοδεύει τον κώδικά σας και μία διαφορετική γραμμή στον κώδικά σας. Αναλυτικότερα…

Εάν κατεβάσετε αυτή τη στιγμή το .rar αρχείο που βρίσκεται στο τέλος του σημερινού μας άρθρου, και αφού το αποσυμπιέσετε, θα δείτε ότι περιλαμβάνει έναν φάκελο jquery_tuts_versions. Μέσα του μπορείτε να βρείτε τις τελευταίες εκδόσεις της JQuery:

•    jquery-1.4.2.js για την development
•    jquery-1.4.2.min.js για την προduction (το min από το minified)

Ανάλογα με το αν αναπτύσσετε ή δημοσιεύετε τη δουλειά σας, κρατάτε το αντίστοιχο αρχείο στον κατάλογο που είναι τοποθετημένη η ιστοσελίδα σας.

Όσον αφορά τον κώδικα της ιστοσελίδας σας τώρα. Σε περίπτωση που βρίσκεστε σε φάση ανάπτυξης (επομένως έχετε κρατήσει το jquery-1.4.2.js στον κατάλογό σας) ο κώδικας μιας hello world ιστοσελίδας που κάνει χρήση του JQuery θα μοιάζει με τον παρακάτω:

<html>
<head>
<title>Development phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα βρίσκεται σε φάση ανάπτυξης");
});
</script>
</head>
<body>
…
</body>
</html>

Σε περίπτωση που η ιστοσελίδα σας είναι έτοιμη να δημοσιευθεί θα χρησιμοποιήσετε το αρχείο jquery-1.4.2.min.js και ο κώδικάς σας, σε σχέση με τον προηγούμενο θα είναι αλλαγμένος κατά μία γραμμή:

<html>
<head>
<title>Production phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα έχει δημοσιευθεί");
});
</script>
</head>
<body>

</body>
</html>

Σε αυτό το άρθρο αντιμετωπίσαμε το φιλοσοφικό ερώτημα, ελαφρώς ευκολότερο από το αίνιγμα της Σφίγγας, ποια έκδοση της JQuery μας ταιριάζει. Αν και τεχνικά, το δίλλημα αυτό δε λέει πολλά, ωστόσο, έχω την άποψη πως ότι μαθαίνουμε ένα προγραμματιστικό εργαλείο, οι λεπτομέρειες μπορεί να είναι σημαντικές. Σε περιπτώσεις όπως η JQuery, η χρήση της οποίας είναι συνυφασμένη με ανάπτυξη ιστοσελίδων για το διαδίκτυο, η τεκμηρίωση της παραπάνω θέσης είναι περιττή.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε ως την επόμενη συνάντησή μας…

Μην ξεχνάτε,

να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ