Front End API First Development: Πως ακριβώς δουλεύει;

[babaliaris]

Μέχρι τώρα ότι ιστοσελίδα έφτιαχνα "πετούσα" τα πάντα μέσα σε ένα php αρχείο (εντάξει τα js και css τα είχα σε άλλα αρχεία, αλλά είναι το ίδιο πράμμα).
Αλλά αυτήν η τεχνική δεν μου αρέσει διότι μπλέκει front end και back end μαζί. Θέλω έναν τρόπο σχεδίασης έτσι ώστε το front end να είναι ανεξάρτητο από το back end development.

Με λίγο ψάξιμο βρήκα κάτι που ονομάζεται API First Development και νομίζω ότι είναι αυτό που ψάχνω.

Αυτό που θέλω να κάνω είναι ότι όταν φτιάχνω ένα web app, στο back end να μην με νοιάζει πως θα μοιάζει η σελίδα, άρα να μην χρειάζεται να γράφω html και css μέσα στο php
αρχείο. Στην συνέχεια στο front end να σχεδιάζω την σελίδα και με ajax να κάνω requests στον server και να αλλάζω την σελίδα κατάλληλα.

Γνωρίζω πως να γράψω ένα RestFull API, το θέμα είναι ότι στο front end που θα γράφω html?
Θα φτιάχνω .html αρχεία τα οποία θα αλλάζουν δυναμικά μέσω javascript ανάλογα με τα responses που παίρνω από το API?
Θα είναι CEO friendly αν το κάνω έτσι;

Ευχαριστώ.

- - - Updated - - -

Νομίζω βρήκα την απάντηση στο προβλημά μου. Angularjs η οποιοδήποτε άλλο SPA framework?

[MitsakosGR]

Με Rest API για backend και οποιοδήποτε frontend μπορείς να πετύχεις αυτό που θέλεις.

Αφού δεν έχεις ξαναγράψει κάποιο τέτοιο πρόγραμμα άποψή μου θα ήταν να τα φτιάξεις με την ακόλουθη σειρά:
1. Front-End
2. Database
3. Back-End

Ο λόγος που προτείνω αυτή τη σειρά είναι ότι δεν έχεις ακόμα την εμπειρία* για να σκεφτείς από άκρη σε άκρη όλο το data transfer και κάτι θα σου διαφεύγει συνεχώς στην πορεία.
Οπότε φτιάχνοντας το Front-End μπορείς να δεις τι δεδομένα χρειάζεται και σε τι μορφή, ώστε να δουλέψει σωστά. Με βάση αυτό μπορείς άρα να φτιάξεις τα Data Transfer Object (https://en.wikipedia.org/wiki/Data_transfer_object).

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

Τέλος φτιάχνεις το back-end το οποίο θα υλοποιεί το business logic και θα μεταφέρει δεδομένα από τη βάση στο front-end. Μην πέσεις στην παγίδα (όπως έκανα εγώ) του να προσπαθείς τα δεδομένα από τη βάση να τα βγάλεις αυτούσια μπροστά. Μερικές φορές απλά είναι καλύτερο να κάνεις μετασχηματισμούς και να τα "σερβίρεις" όπως θα μπορεί να τα χρησιμοποιήσει το πρόγραμμά σου (front-end) και στη συνέχεια να τα ξαναμετασχηματίζεις όπως τα καταλαβαίνει η βάση σου.

Για το Front-End μπορείς να έχεις αρκετά αρχεία .html. Αν θέλεις να έχεις μερικά κοινά πράγματα ανάμεσα στις σελίδες (πχ user credentials, ιστορικό κτλ) τότε θα πρέπει να μεταφέρεις με κάθε request και όλες τις πληροφορίες. Αλλιώς, όπως είπες, μπορείς να φτιάξεις ένα Single Page Application που με JavaScript θα εμφανίζεις-εξαφανίζεις κομμάτια και θα μοιάζει σαν να αλλάζουν σελίδες. Εκεί βολεύει να βάλεις και κάποιο Javascript Router ώστε να αλλάζει το URL, αλλά όχι η πραγματική σελίδα. Έτσι πετυχαίνεις και να έχεις link που να σε πηγαίνουν απευθείας στο σημείο που θέλεις, ακόμα και αν πάντα καλείς την ίδια σελίδα.

SPA μπορείς να φτιάξεις και με απλή JavaScript (πχ element.js) αλλά το καλύτερο (πιστεύω) είναι να ασχοληθείς με κάποιο framework. Τα κύρια είναι
- Angular (από την Google)
- React (από το Facebook)
- Vue (από ανεξάρτητο developer πρώην μέλος της ομάδας της Angular).

Αν θέλεις να είναι και SEO τότε πρέπει να κάνεις Server-Side Rendering. Στην ουσία ο server του Front-End παράγει το τελικό αποτέλεσμα πριν το δώσει στον client, έτσι ώστε να είναι πιο ελαφρύ για τον client αλλά και να μπορούν οι web crawlers να το διαβάσουν χωρίς να πρέπει να εκτελέσουν javascript.

Και τα τρία framework υποστηρίζουν Routing, SPA και Server Side Rendering. Όλα έχουν τα θετικά και τα αρνητικά τους και η τελική επιλογή είναι καθαρά θέμα προτίμησης!


* Έτσι έχω καταλάβει με βάση τις ερωτήσεις σου, συγγνώμη αν κάνω λάθος.

[babaliaris]

Τα καταλαβαίνω όλα αυτά το θέμα είναι όταν είστε μια ομάδα πως συνεργάζεστε. Αν εγώ κάνω server rendering με php εσύ στο front end τι κάνεις, απολύεσαι; Πως ακριβώς δουλεύουν μαζί οι front end και οι back end developers?

Για παράδειγμα ας πούμε ότι έχω κάτι τέτοιο:
H getContent επιστρέφει το κατάλληλο content ανάλογα με την γλώσσα που έχει επιλέξη ο χρήστης.



<h1><?php echo $core->getContent("h1", type::STRING)?></h1>
<img src="<?php echo $core->getContent("logo", type::PATH)?>" alt="img">


Φαντάσου τώρα ότι έχω μια τεράστια σελίδα με πολλά τέτοια contents. Σε php ο τρόπος που έδειξα παραπάνω δουλεύει πολύ καλα.

Πάμε τώρα σε front end


<body onload="loadContent()">
<h1 id="h1"></h1>
<img src="" alt="img" id="img">
</body>


θα πρέπει στην loadContent() να κάνω ένα-ένα τα http requests για να πάρω όλα τα content, και να ενημερώσω ένα ένα
τα elements που εμφανίσουν τα τάδε content; Στην ουσία όταν γίνεται το browser request θα παίρνω ένα html με έτοιμο
το design css αλλά χωρίς content, και το content θα γίνεται load δυναμικά.

Έτσι λύνουν το πρόβλημα της συνεργασίας; Δηλαδή δεν μπορώ να σκεφτώ πως αλλιώς ένας front end developer δουλεύει
με έναν back end.

[MitsakosGR]

Server Side Rendering δεν εννοώ να το κάνει η PHP και να το σερβίρει. Αλλά να κάνεις server side rendering την ίδια την javascript.
Έστω ότι χρησιμοποιείς PHP για να φτιάξεις το Rest Api και Vue.js για το front-end. Το front-end (browser) θα φτιάχνει τη φόρμα και θα ζητάει στοιχεία που πρέπει να απεικονιστούν, μέσω javascript. Αφού είναι έτοιμα όλα θα τα απεικονίσει. Αυτό μπορεί να δημιουργήσει πρόβλημα για το SEO γιατί η σελίδα που θα διαβάσει είναι μία κενή σελίδα:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Title!!!</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>


Με το server side rendering μπορείς να βάλεις άλλο ένα στάδιο κατά το οποίο τον ρόλο του browser θα τον παίζει άλλος ένας server, ο οποίος θα εκτελεί όλη τη javascript, θα παράγει το τελικό και θα το στέλνει στον browser έτοιμο. Έτσι θα είναι πιο εύκολο για τις μηχανές αναζήτησης αλλά θα εξακολουθείς να έχεις και 2 επίπεδα στην εφαρμογή σου (Front/Back End).

- - - Updated - - -


Έτσι λύνουν το πρόβλημα της συνεργασίας; Δηλαδή δεν μπορώ να σκεφτώ πως αλλιώς ένας front end developer δουλεύει
με έναν back end.

Ο Front-End με τον Back-End Developer απλά συμφωνούν στα Data Transfer Objects και μετά ο καθένας δουλεύει ανεξάρτητα.

- - - Updated - - -


θα πρέπει στην loadContent() να κάνω ένα-ένα τα http requests για να πάρω όλα τα content, και να ενημερώσω ένα ένα
τα elements που εμφανίσουν τα τάδε content; Στην ουσία όταν γίνεται το browser request θα παίρνω ένα html με έτοιμο
το design css αλλά χωρίς content, και το content θα γίνεται load δυναμικά.

Με το loadContent θα κάνεις ένα-ένα τα request για να πάρεις την πληροφορία που θέλεις να εμφανίσεις (πχ εγγραφές) και με javascript θα φτιάξεις το DOM ώστε να απεικονιστούν σωστά. Δεν θα πάρεις έτοιμο το HTML και μετά θα πας να το δείξεις. Θα πάρεις JSON αποτελέσματα με τα δεδομένα μονάχα.

[babaliaris]

Με το loadContent θα κάνεις ένα-ένα τα request για να πάρεις την πληροφορία που θέλεις να εμφανίσεις (πχ εγγραφές) και με javascript θα φτιάξεις το DOM ώστε να απεικονιστούν σωστά. Δεν θα πάρεις έτοιμο το HTML και μετά θα πας να το δείξεις. Θα πάρεις JSON αποτελέσματα με τα δεδομένα μονάχα.

Ναι αυτό εννούσα εδώ. Αυτό πάντος θα έχει επίσης ceo προβληματα σωστά; Γιατί στην ουσία θα παίρνεις μια σελίδα που είναι κενή σε content και μετά θα την γεμίζεις.

Άρα η καλύτερη λύση θα είναι server side rendering. Το θέμα είναι ότι δεν μπορώ να βρω κάποιο tutorial που να δείχνει πως το κάνεις αυτό και δεν μπορώ να σκεφτώ πως να το κάνω.
Δηλαδή πως θα στέλνεται η javascript του front end developer στο server, και ο server θα κάνει το rendering? Υπάρχουν εργαλεία;

[MitsakosGR]

Δεν χρειάζεται να το κάνεις εσύ, το αναλαμβάνει το framework!!!

Angular (https://angular.io/guide/universal)

Vue (https://ssr.vuejs.org/)

H react δεν φαίνεται να δίνει κάτι έτοιμο, αλλά υπάρχουν αρκετά πακέτα που κάνουν αυτή τη δουλειά. Πχ express (https://medium.com/@mahesh_joshi/understanding-server-side-rendering-in-react-in-easy-way-d2984bb7aa51)

Εσύ γράφεις σαν να απεθύνεσαι στον browser και αυτά κάνουν τα "μαγικά" τους!

[babaliaris]

Θα το ψάξω περισσότερο άμα είναι, ευχαριστώ.

[kosnik]

laravel + vue ...