031.2 Μάθημα 1

Υπάρχουν εφαρμογές για κινητές συσκευές και επιτραπέζιους υπολογιστές των οποίων το interface αποδίδεται από HTML και, όπως τα προγράμματα περιήγησης, μπορούν να χρησιμοποιούν JavaScript ως γλώσσα προγραμματισμού. Ωστόσο, σε αντίθεση με τον client που έχει φορτωθεί στο πρόγραμμα περιήγησης, το HTML και τα απαραίτητα στοιχεία για τη λειτουργία του εγγενούς client, ενυπάρχουν τοπικά από την εγκατάσταση της εφαρμογής. Στην πραγματικότητα, μια εφαρμογή που λειτουργεί με αυτόν τον τρόπο είναι σχεδόν πανομοιότυπη με μια σελίδα HTML (και οι δύο είναι πιθανό να αποδοθούν από την ίδια μηχανή). Υπάρχουν επίσης progressive web apps (PWA), ένας μηχανισμός που σας επιτρέπει να πακετάρετε clients web εφαρμογών για χρήση εκτός σύνδεσης—​περιορίζεται σε λειτουργίες που δεν απαιτούν άμεση επικοινωνία με τον server. Σχετικά με το τι μπορεί να κάνει η εφαρμογή, δεν υπάρχει διαφορά μεταξύ εκτέλεσης του προγράμματος περιήγησης ή ενός πακέτου PWA, εκτός από το ότι στο τελευταίο ο προγραμματιστής έχει περισσότερο έλεγχο για το τι αποθηκεύεται τοπικά.

Η απόδοση των interfaces από HTML είναι μια τέτοια επαναλαμβανόμενη δραστηριότητα, που το engine είναι συνήθως ένα ξεχωριστό στοιχείο λογισμικού, που υπάρχει στο λειτουργικό σύστημα. Η παρουσία του ως ξεχωριστού τμήματος επιτρέπει σε διαφορετικές εφαρμογές να το συμπεριλάβουν χωρίς να χρειάζεται να το ενσωματώσουν στο πακέτο εφαρμογής. Αυτό το μοντέλο αναθέτει επίσης τη συντήρηση του rendering engine στο λειτουργικό σύστημα, διευκολύνοντας τις ενημερώσεις. Είναι πολύ σημαντικό να διατηρείτε ενημερωμένο ένα τόσο κρίσιμο τμήμα προκειμένου να αποφύγετε πιθανές αστοχίες.

Ανεξάρτητα από τη μέθοδο παράδοσης, οι εφαρμογές γραμμένες σε HTML εκτελούνται σε ένα επίπεδο αφαίρεσης που δημιουργείται από το engine, το οποίο λειτουργεί ως απομονωμένο περιβάλλον εκτέλεσης. Ειδικότερα, στην περίπτωση ενός client που εκτελείται στο πρόγραμμα περιήγησης, η εφαρμογή έχει στη διάθεσή της μόνο τους πόρους που προσφέρει το πρόγραμμα περιήγησης. Βασικές λειτουργίες, όπως η αλληλεπίδραση με στοιχεία σελίδας και η αίτηση αρχείων μέσω HTTP, είναι πάντα διαθέσιμες. Οι πόροι που ενδέχεται να περιέχουν ευαίσθητες πληροφορίες, όπως πρόσβαση σε τοπικά αρχεία, γεωγραφική τοποθεσία, κάμερα και μικρόφωνο, απαιτούν ρητή εξουσιοδότηση απο τον χρήστη πριν μπορέσει η εφαρμογή να τους χρησιμοποιήσει.

Το κεντρικό στοιχείο ενός cilent μιας web εφαρμογής που εκτελείται στον server είναι το έγγραφο HTML. Εκτός από την παρουσίαση των στοιχείων του interface που εμφανίζει το πρόγραμμα περιήγησης με δομημένο τρόπο, το έγγραφο HTML περιέχει τις διευθύνσεις για όλα τα αρχεία που απαιτούνται για τη σωστή παρουσίαση και λειτουργία του client.

Το HTML από μόνο της δεν έχει μεγάλη ευελιξία για τη δημιουργία πιο περίπλοκων interfaces και δεν διαθέτει χαρακτηριστικά προγραμματισμού γενικής χρήσης. Για το λόγο αυτό, ένα έγγραφο HTML που πρέπει να λειτουργεί ως μια client εφαρμογή συνοδεύεται πάντα από ένα ή περισσότερα σύνολα CSS και JavaScript.

Το CSS μπορεί να παρέχεται ως ξεχωριστό αρχείο ή απευθείας στο ίδιο το αρχείο HTML. Ο κύριος σκοπός του CSS είναι να προσαρμόσει την εμφάνιση και τη διάταξη των στοιχείων του HTML interface. Αν και δεν είναι απολύτως απαραίτητο, πιο εξελιγμένα interfaces συνήθως απαιτούν τροποποιήσεις στις ιδιότητες CSS των στοιχείων για να ταιριάζουν στις ανάγκες τους.

Η JavaScript είναι ένα πρακτικά απαραίτητο στοιχείο. Οι διαδικασίες που είναι γραμμένες σε JavaScript ανταποκρίνονται σε συμβάντα στο πρόγραμμα περιήγησης. Αυτά τα συμβάντα μπορεί να προκληθούν από το χρήστη ή να μην είναι αλληλεπιδραστικά. Χωρίς JavaScript, ένα έγγραφο HTML περιορίζεται πρακτικά σε κείμενο και εικόνες. Η χρήση JavaScript σε έγγραφα HTML σάς επιτρέπει να επεκτείνετε τη διαδραστικότητα πέρα ​​από υπερσυνδέσμους και φόρμες, κάνοντας τη σελίδα που εμφανίζεται από το πρόγραμμα περιήγησης σαν ένα συμβατικό interface μιας εφαρμογής.

Η JavaScript είναι μια γλώσσα προγραμματισμού γενικής χρήσης, αλλά η κύρια χρήση της είναι σε εφαρμογές web. Οι δυνατότητες του περιβάλλοντος εκτέλεσης του προγράμματος περιήγησης είναι προσβάσιμες μέσω λέξεων-κλειδιών της JavaScript, που χρησιμοποιούνται σε ένα script για την εκτέλεση της επιθυμητής λειτουργίας. Ο όρος document, για παράδειγμα, χρησιμοποιείται στον κώδικα JavaScript για να αναφέρεται στο έγγραφο HTML που σχετίζεται με τον κώδικα JavaScript. Στο πλαίσιο της γλώσσας JavaScript, το document είναι ένα global object με ιδιότητες και μεθόδους που μπορούν να χρησιμοποιηθούν για τη λήψη πληροφοριών από οποιοδήποτε στοιχείο στο έγγραφο HTML. Το πιο σημαντικό, μπορείτε να χρησιμοποιήσετε το αντικείμενο document για να τροποποιήσετε τα στοιχεία του και να τα συσχετίσετε με προσαρμοσμένες ενέργειες γραμμένες σε JavaScript.

Μια client εφαρμογή που βασίζεται σε web τεχνολογίες είναι πολλαπλών πλατφορμών, επειδή μπορεί να εκτελεστεί σε οποιαδήποτε συσκευή διαθέτει συμβατό πρόγραμμα περιήγησης ιστού.

Ωστόσο, ο περιορισμός στο πρόγραμμα περιήγησης επιβάλλει περιορισμούς στις web εφαρμογές σε σύγκριση με τις εγγενείς εφαρμογές. Η διαμεσολάβηση που εκτελείται από το πρόγραμμα περιήγησης επιτρέπει προγραμματισμό υψηλότερου επιπέδου και αυξάνει την ασφάλεια, αλλά αυξάνει και την επεξεργαστική ισχύ και την κατανάλωση μνήμης.

Οι προγραμματιστές εργάζονται συνεχώς σε προγράμματα περιήγησης για να παρέχουν περισσότερες δυνατότητες και να βελτιώσουν την απόδοση των εφαρμογών JavaScript, αλλά υπάρχουν έμφυτες πτυχές στην εκτέλεση scripts όπως η JavaScript που τους επιβάλλουν ένα μειονέκτημα σε σύγκριση με εγγενή προγράμματα για το ίδιο hardware.

Ένα χαρακτηριστικό που βελτιώνει σημαντικά την απόδοση των εφαρμογών JavaScript που εκτελούνται στο πρόγραμμα περιήγησης είναι το WebAssembly. Το WebAssembly είναι ένα είδος compiled JavaScript που παράγει πηγαίο κώδικα γραμμένο σε μια πιο αποτελεσματική γλώσσα χαμηλότερου επιπέδου, όπως η γλώσσα C. Το WebAssembly μπορεί να επιταχύνει κυρίως δραστηριότητες που απαιτούν εντατική χρήση επεξεργαστή, επειδή αποφεύγει μεγάλο μέρος της μετάφρασης που εκτελείται από το πρόγραμμα περιήγησης κατά την εκτέλεση ενός προγράμματος γραμμένου σε συμβατική JavaScript.

Ανεξάρτητα από τις λεπτομέρειες υλοποίησης της εφαρμογής, όλα τα αρχεία κώδικα HTML, CSS, JavaScript και πολυμέσων πρέπει πρώτα να ληφθούν από τον server. Το πρόγραμμα περιήγησης λαμβάνει αυτά τα αρχεία ακριβώς όπως μια σελίδα Διαδικτύου, δηλαδή με μια διεύθυνση στην οποία έχει πρόσβαση το πρόγραμμα περιήγησης.

Μια ιστοσελίδα που λειτουργεί ως interface σε μια web εφαρμογή είναι σαν ένα απλό έγγραφο HTML, αλλά προσθέτει πρόσθετες συμπεριφορές. Στις συμβατικές σελίδες, ο χρήστης κατευθύνεται σε άλλη σελίδα αφού κάνει επιλέξει έναν σύνδεσμο. Οι web εφαρμογές μπορούν να παρουσιάσουν το interface τους και να ανταποκρίνονται σε συμβάντα χρήστη χωρίς να φορτώνουν νέες σελίδες στο παράθυρο του προγράμματος περιήγησης. Η τροποποίηση αυτής της τυπικής συμπεριφοράς σε σελίδες HTML γίνεται μέσω προγραμματισμού JavaScript.

Ένας webmail client, για παράδειγμα, εμφανίζει μηνύματα και κάνει εναλλαγή μεταξύ φακέλων μηνυμάτων χωρίς να βγαίνει από τη σελίδα. Αυτό είναι δυνατό επειδή ο client χρησιμοποιεί JavaScript για να αντιδρά στις ενέργειες του χρήστη και να κάνει τα κατάλληλα αιτήματα στον server. Εάν ο χρήστης επιλέξει το θέμα ενός μηνύματος στα εισερχόμενα, ένας κώδικας JavaScript που σχετίζεται με αυτό το συμβάν ζητά το περιεχόμενο αυτού του μηνύματος από τον server (χρησιμοποιώντας το αντίστοιχο API call). Μόλις ο client λάβει την απάντηση, το πρόγραμμα περιήγησης εμφανίζει το μήνυμα στο κατάλληλο τμήμα της ίδιας σελίδας. Διαφορετικοί webmail clients ενδέχεται να υιοθετήσουν διαφορετικές στρατηγικές, αλλά όλοι χρησιμοποιούν την ίδια αρχή.

Επομένως, εκτός από την παροχή των αρχείων που απαρτίζουν τον client στο πρόγραμμα περιήγησης, ο server πρέπει επίσης να μπορεί να χειρίζεται αιτήματα όπως αυτό του webmail client, όταν ζητά το περιεχόμενο ενός συγκεκριμένου μηνύματος. Κάθε αίτημα που μπορεί να κάνει ο client έχει μια προκαθορισμένη διαδικασία απάντησης στον server, του οποίου το API μπορεί να ορίσει διαφορετικές μεθόδους για να προσδιορίσει σε ποια διαδικασία αναφέρεται το αίτημα. Οι πιο συνηθισμένες μέθοδοι είναι:

Μια μέθοδος μπορεί να είναι πιο κατάλληλη από μια άλλη, ανάλογα με τον σκοπό του αιτήματος και άλλα κριτήρια που λαμβάνονται υπόψη από τον προγραμματιστή. Γενικά, οι web εφαρμογές χρησιμοποιούν έναν συνδυασμό μεθόδων, η καθεμία σε μια συγκεκριμένη περίσταση.

Το πρότυπο Representational State Transfer (REST) ​​χρησιμοποιείται ευρέως για επικοινωνία σε web εφαρμογές, επειδή βασίζεται στις βασικές μεθόδους που είναι διαθέσιμες στο HTTP. Το header ενός αιτήματος HTTP ξεκινά με μια λέξη-κλειδί που ορίζει τη βασική λειτουργία που πρέπει να εκτελεστεί: GET, POST, PUT, DELETE κ.λπ., συνοδευόμενη από μια αντίστοιχη διεύθυνση URL όπου θα εφαρμοστεί η ενέργεια. Εάν η εφαρμογή απαιτεί πιο συγκεκριμένες λειτουργίες, με πιο λεπτομερή περιγραφή της ζητούμενης λειτουργίας, το πρωτόκολλο GraphQL μπορεί να είναι η πιο κατάλληλη επιλογή.

Οι εφαρμογές που αναπτύσσονται χρησιμοποιώντας το μοντέλο client/server υπόκεινται σε αστάθειες στην επικοινωνία. Για το λόγο αυτό, η client εφαρμογή πρέπει πάντα να υιοθετεί αποτελεσματικές στρατηγικές μεταφοράς δεδομένων για να ευνοεί τη σταθερότητά της και να μην βλάπτει την εμπειρία του χρήστη.

Οι HTTP servers, όπως ο Apache και ο NGINX, απαιτούν συνήθως συγκεκριμένες αλλαγές παραμετροποίησης για να καλύψουν τις ανάγκες της εφαρμογής. Από προεπιλογή, οι παραδοσιακοί HTTP servers συσχετίζουν απευθείας το μονοπάτι που υποδεικνύεται στο αίτημα, με ένα αρχείο στο τοπικό σύστημα αρχείων. Εάν ο HTTP server ενός ιστότοπου διατηρεί τα HTML αρχεία του στον κατάλογο /srv/www, για παράδειγμα, ένα αίτημα με το μονοπάτι /en/about.html θα λάβει το περιεχόμενο του αρχείου /srv/www/en/ about.html ως απάντηση, εάν το αρχείο υπάρχει. Οι πιο εξελιγμένοι ιστότοποι, και ειδικά οι web εφαρμογές, απαιτούν προσαρμοσμένη μεταχείριση για διαφορετικούς τύπους αιτημάτων. Σε αυτό το σενάριο, μέρος της υλοποίησης της εφαρμογής είναι η τροποποίηση των ρυθμίσεων του HTTP server για την κάλυψη των απαιτήσεων της εφαρμογής.

Εναλλακτικά, υπάρχουν frameworks που σας επιτρέπουν να ενσωματώσετε τη διαχείριση των αιτημάτων HTTP και την υλοποίηση του κώδικα εφαρμογής σε ένα μέρος, επιτρέποντας στον προγραμματιστή να εστιάσει περισσότερο στον σκοπό της εφαρμογής παρά στις λεπτομέρειες της πλατφόρμας. Στο Node.js Express, για παράδειγμα, όλη η αντιστοίχιση αιτημάτων και ο αντίστοιχος προγραμματισμός υλοποιούνται χρησιμοποιώντας JavaScript. Καθώς ο προγραμματισμός των clients γίνεται συνήθως σε JavaScript, πολλοί προγραμματιστές το θεωρούν καλή ιδέα από την άποψη της συντήρησης κώδικα να χρησιμοποιούν την ίδια γλώσσα για client και server. Άλλες γλώσσες που χρησιμοποιούνται συνήθως για την υλοποίηση απο την πλευρά του server, είτε σε frameworks είτε σε παραδοσιακούς HTTP servers, είναι οι PHP, Python, Ruby, Java και C#.

Εναπόκειται στη διακριτική ευχέρεια της ομάδας των προγραμματιστών, το πώς αποθηκεύονται τα δεδομένα που λαμβάνονται ή ζητούνται από τον client στον server, αλλά υπάρχουν κατευθυντήριες οδηγίες που ισχύουν για τις περισσότερες περιπτώσεις. Είναι βολικό να διατηρείτε στατικό περιεχόμενο—εικόνες, JavaScript και κώδικα CSS που δεν αλλάζουν βραχυπρόθεσμα—​ως συμβατικά αρχεία, είτε στο σύστημα αρχείων του ίδιου του διακομιστή είτε διανεμημένα σε ένα content delivery network (CDN). Άλλα είδη περιεχομένου, όπως μηνύματα email σε μια εφαρμογή webmail, λεπτομέρειες προϊόντος σε μια εφαρμογή αγορών και αρχεία καταγραφής συναλλαγών, αποθηκεύονται πιο εύκολα σε ένα database management system (DBMS) [σύστημα διαχείρισης βάσης δεδομένων].

Ο πιο παραδοσιακός τύπος συστήματος διαχείρισης βάσεων δεδομένων είναι η relational database [σχεσιακή βάση δεδομένων]. Σε αυτό, ο σχεδιαστής της εφαρμογής ορίζει πίνακες δεδομένων και τη μορφή εισόδου που είναι αποδεκτή από κάθε πίνακα. Το σύνολο των πινάκων στη βάση δεδομένων περιέχει όλα τα δυναμικά δεδομένα που καταναλώνονται και παράγονται από την εφαρμογή. Μια εφαρμογή αγορών, για παράδειγμα, μπορεί να έχει έναν πίνακα που περιέχει μια καταχώριση με τις λεπτομέρειες κάθε προϊόντος στο κατάστημα και έναν πίνακα που καταγράφει προϊόντα που αγόρασε ένας χρήστης. Ο πίνακας των αγορασθέντων προϊόντων περιέχει αναφορές σε καταχωρήσεις στον πίνακα προϊόντων, δημιουργώντας σχέσεις μεταξύ των πινάκων. Αυτή η προσέγγιση μπορεί να βελτιστοποιήσει την αποθήκευση και την πρόσβαση στα δεδομένα, καθώς και να επιτρέψει ερωτήματα σε συνδυασμένους πίνακες χρησιμοποιώντας τη γλώσσα που υιοθετείται από το σύστημα διαχείρισης της βάσης δεδομένων. Η πιο δημοφιλής γλώσσα σχεσιακής βάσης δεδομένων είναι η Structured Query Language (SQL, προφέρεται ως “sequel”), που υιοθετείται από τις open source βάσεις δεδομένων SQLite, MySQL, MariaDB και PostgreSQL.

Μια εναλλακτική λύση στις σχεσιακές βάσεις δεδομένων είναι μια μορφή βάσης δεδομένων που δεν απαιτεί μια άκαμπτη δομή για τα δεδομένα. Αυτές οι βάσεις δεδομένων ονομάζονται non-relational databases [μη σχεσιακές βάσεις δεδομένων] ή απλά NoSQL. Παρόλο που μπορεί να ενσωματώνουν ορισμένα χαρακτηριστικά παρόμοια με αυτά που βρίσκονται στις σχεσιακές βάσεις δεδομένων, η εστίαση βρίσκεται στο να επιτραπεί μεγαλύτερη ευελιξία στην αποθήκευση και πρόσβαση στα αποθηκευμένα δεδομένα, μεταβιβάζοντας το έργο της επεξεργασίας αυτών των δεδομένων στην ίδια την εφαρμογή. Τα MongoDB, CouchDB και Redis είναι κοινά μη σχεσιακά συστήματα διαχείρισης βάσεων δεδομένων.