πως φτιάχνονται τα παρακάτω sites

[sinikos]

Καλησπέρα. Έχω μια απορία για το πως φτιάχνονται κάποια sites και εξηγώ. Εγώ έχω υλοποιήσει κάποια project με php, bootstrap, λίγο js κλπ. Για να βάλω σε μια σειρά κάποια κουμπιά, labels, input fields κλπ, θέλει κάποια διαδικασία σε bootstrap, css, js για να το φέρω στα μέτρα μου. Εν πάση περιπτώση, φτιάχνω ένα δυναμικό site, με τις φόρμες του, με τις εικόνες του, με τα κουμπάκια και λινκ του, όπως ένα οποιοδήποτε δυναμικό, custom, site. 

Έχω φτιάξει και site/υπηρεσία για προσωπική χρήση τύπου SaaS. Δηλαδή σαν ένα πρόγραμμα που τρέχει από τον browser μου. Αλλά και αυτό μιλάμε για απλές φόρμες, απλούς υπολογισμούς και και σταθερό layout. Όσο όμως θέλω να ενσωματώσω κάποια πραγματάκια να γίνονται με ajax κλπ, αμέσως αρχίζει σιγά σιγά και γίνεται λίγο πιο περίπλοκος ο κώδικας, αλλά οκ.  

Οπότε στην απορία μου δεν αναφέρομαι σε σελίδες όσο μεγάλες και αν είναι, τύπου skroutz, booking, airbnb, amazon, pixabay κλπ (τυχαία τα ονόματα)

Μου φαίνεται εξωφρενικό πως έχουν φτιαχτεί κάποιες σελίδες/προγράμματα που είναι σαν ένα κανονικό πρόγραμμα που τρέχει στο internet. Δηλαδή που υπερβολικά διαδραστική η χρήση τους (edit photo/video, φίλτρα κλπ). Υπάρχουν άλλες γλώσσες & frameworks (backend & frontend) που κάνουν για αυτή την δουλειά ειδικά ή μπορούν να φτιαχτούν και με απλή php και js αλλά χρειάζονται εκατοντάδες χιλιάδες γραμμές κώδικα.

Αναφέρομαι σε site όπως το Canvas.com, pixlr.com (που είναι σαν ένα photoshop στον browser), το office 365 κλπ. 

Υ.Γ.  Όταν εγώ πχ έχω φτιάξει, σε ένα project μου, με ένα σκασμό κώδικα να μπορεί ο χρήστης να επιλέξει κατά το upload που να κροπαριστει η εικόνα του, μου φαίνεται αδιανόητο με php και js να φτιάξω κάτι που ο χρήστης να μπορεί στην εικόνα που ανεβάζει να κάνει crop, resize, περιστροφή, φίλτρα, clone και άπειρες άλλες επιλογές. Μου φαίνεται αδιανόητο ένα ολόκληρο excel να έχει φτιαχτεί για browser. 

 

 

[filip123go]

Έχω φτιάξει παρόμοια web app (γιατί πλέον ξεφεύγουμε από την έννοια του web page) με front reactjs, back java με springboot, βάση mySql και αρχιτεκτονική microservices . Ουσιαστικά όλη την δουλειά (στη δική μου περίπτωση ) την κάνει η Java . Σίγουρα γίνεται και με άλλες γλώσσες και frameworks. Αλλά δεν ξέρω αν γίνεται με απλή php και js (βασικά, σίγουρα θα γίνεται με κάποιο τρόπο, αλλά θα πρέπει να είναι πάρα πολύ περίπλοκο, για αυτό και έχουν βγει τα frameworks).

[Επισκέπτης]

Η απάντηση είναι javascript. Υπάρχουν frameworks για ποιο εύκολη συγγραφή των javascript VUE Angular. Αλλά δεν τα κάνεις όλα μόνο σου, υπάρχει και το NPM που απλά έχει όλες τις βιβλιοθήκες έτοιμες για χρήση. 

Από το backend είναι πολλές οι γλώσσες PHP ASP JAVA αλλά και πάλι javascript για το backend με το NodeJs .

 

[Ponous]

Είχα την ίδια απορία μέχρι που έπρεπε όντως να υλοποιήσω κάποια μεγάλα προγράμματα τα οποία έκανα πράγματα τα οποία ούτε καν είχα διανοηθεί πως ήταν εφικτά στο web. Ας πούμε επεξεργασία εικόνας με php. Δεν είχα ιδέα ότι μπορεί να γίνει. Κι όμως γίνεται!

Για αρχή ας δούμε λίγο το desktop application:  Νομίζεις πως τα desktop apps τύπου Word, Excel, κτλπ φτιάχνονται πολύ διαφορετικά από τα web? Η Microsoft πολλές φορές φτιάχνει τα προγράμματα της με το Qt framework. (π.χ. Redis manager). Όταν το είχα ψάξει είχα εκπλαγεί με τον τρόπο που γίνονται τα προγράμματα. Κυριολεκτικά, μπορούσα να γράψω CSS στη φόρμα για να ορίσω το design! Κι όχι μόνο σε αυτό. Αλλά και στο JavaFX. Η ίδια λογική. Κατ'επέκταση, προγράμματα όπως το slack και το spotify γίνονταν με το Electron το οποίο δεν είναι τίποτα άλλο παρά node.js + chromium. Ναι, υπάρχουν πολλά διαφορετικά frameworks ή βιβλιοθήκες για να φτιάξει κανείς το GUI αλλά εν κατακλείδι αυτό που θέλω να πω είναι πως ο τρόπος με τον οποίο γράφεις τα προγράμματα στο web δεν διαφέρει από το desktop όσο νομίζεις... εν έτη 2020.

Web. Βασική διαφορά - μειονέκτημα. Το μόνο ισχυρό μειονέκτημα που βρίσκω στο web για όλα αυτά που περιέγραψες είναι πως το πρόγραμμα είναι σπασμένο σε 2 μέρη. Ένα που έχει ο πελάτης και ένα που έχει ο server. Επομένως πολλές φορές πρέπει να γίνεται μεταφορά αρχείων/αποτελεσμάτων πέρα δώθε από το ένα άκρο της γης στο άλλο. Π.χ για την word. Η word έχει ένα συγκεκριμένο τρόπο γραφής/αποθήκευσης δεδομένων. Το pdf έχει το δικό του, to md το δικό του κτλπ. Ναι μεν η εμφάνιση μπορεί να φαίνεται η ίδια αλλά κάθε φορά που γίνεται αποθήκευση μεταφέρεται κάποιος όγκος δεδομένων. Για παράδειγμα εγώ μπορεί να γράψω "Καλημέρα" ενώ από πίσω η word να έχει κάτι τέτοιο:

% Heading 1
% text=Καλημέρα
% margin-top: 10px
...

Στο desktop απλά αλλάζει ένα αρχείο. Στο web αλλάζουν πολλά αρχεία και η βάση δεδομένων φυσικά!

Front-end: Το μεγάλο πλεονέκτημα που βρίσκω όμως για το web είναι πως στο front-end side έχουν αναπτυχθεί πολύ ισχυρά frameworks τα οποία κάνονυ χρήση της javascript. Ως αποτέλεσμα animations και εναλλαγές στην οθόνη γίνονται πιο εύκολα. Το desktop άρχισε να χάνει το popularity του και κατ'εμένα όσο αφορά το UX είναι πιο εύκολο και πιο όμορφο χρησιμοποιώντας web technologies

Καλά μπορεί η php, η js να κάνουν τέτοια προγράμματα; Και βέβαια γιατί όχι; Μην ξεχνάς πως γλώσσες προγραμματισμού όπως Java, Php, Python υπάρχουν για πολλά χρόνια στο backend και ο καθένας έχει αναπτύξει εργαλεία, frameworks, βιβλιοθήκες, έτοιμα templates! Στην php ας πούμε υπάρχει βιβλιοθήκη glide η οποία επεξεργάζεται μια εικόνα. Η python έχει ένα σωρό βιβλιοθήκες για επεξεργασία σύνθετων δεδομένων. Επειδή είναι scripting δεν σημαίνει πως δεν έχει δυνατότητες αφού στο τέλος της ημέρας τα πάντα καταλήγουν στην C και πάει λέγοντας.

Στο παράδειγμα σου. Έχω υλοποιήσει πρόγραμμα και σε desktop και για web το οποία έχει λίγη εώς πολλή επεξεργασία εικόνας. Για php χρησιμοποιήσα glide ενώ για python opencv & qt. Αυτό το οποίο θεωρώ είναι το tricky κομμάτι είναι η επικοινωνία μεταξύ client - server. Ας πούμε έπρεπε για κάθε κουμπί που πατούσε ο χρήστης (π.χ. rotate right) να γίνεται ένα ajax request στο backend, επεξεργασία και μετά αποστολή πίσω. Στο desktop απλά κάπου αποθήκευα την εικόνα (π.χ. tmp_output.jpg) και μετά την επαναφόρτωνα. Και στις δύο περιπτώσεις όμως ο χρήστης νοιώθει πως πατάει ένα κουμπί και ως δια μαγείας η εικόνα  περιστρέφεται ενώ στην πραγματικότητα δημιουργήθηκε μια εικόνα-αντίγραφο.

What about C? Έχουμε πιάσει τις scripting languages και καμιά φορά ξεχνάμε πως πίσω από την υλοποίηση του browser είναι η C και η C++ και πως τα πρώτα websites γίνονταν με C/C++ (Όχι δεν κάνω πλάκα. Γι' αυτό η δομή της php μοιάζει τόσο με την C++). Ακόμη και στην php αν είναι μεγάλη ανάγκη μπορείς να βάλεις κώδικα C. Απλά είναι γρήγοροι οι servers στις μέρες μας και δεν χρειάζεται. Παρόλα αυτά δεν θυμάμαι ποια εταιρεία (νμζω η Figma) αντί να ακολουθήσει τον παραδοσιακό τρόπο του HTML - CSS - JS κάποια πατέντα έκανε και έβαλε C++. Αν θυμάται κάποιος ας μου πει κι εμένα.

Γενικά μπορεί να έχουμε συνηθίσει σε ένα html + css αλλά στην τελική αυτό αφορά μόνο το GUI. Όλα τα υπόλοιπα γίνονται στο backend με τον ίδιο τρόπο που θα γινόταν ένα desktop application. Λόγω του μειονεκτήματος που περιέγραψα πριν όμως δημιουργήθηκε η javascript. Κάπου έγινε πλεονέκτημα κάπου έγινε σπάσιμο νέυρων αλλά στην τελική...όλα προγράμματα είναι.