Μέχρι τώρα ότι ιστοσελίδα έφτιαχνα "πετούσα" τα πάντα μέσα σε ένα 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?
Εμφάνιση 1-8 από 8
-
10-11-19, 18:54 Front End API First Development: Πως ακριβώς δουλεύει; #1
-
10-11-19, 19:56 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #2
Με Rest API για backend και οποιοδήποτε frontend μπορείς να πετύχεις αυτό που θέλεις.
Αφού δεν έχεις ξαναγράψει κάποιο τέτοιο πρόγραμμα άποψή μου θα ήταν να τα φτιάξεις με την ακόλουθη σειρά:
1. Front-End
2. Database
3. Back-End
Ο λόγος που προτείνω αυτή τη σειρά είναι ότι δεν έχεις ακόμα την εμπειρία* για να σκεφτείς από άκρη σε άκρη όλο το data transfer και κάτι θα σου διαφεύγει συνεχώς στην πορεία.
Οπότε φτιάχνοντας το Front-End μπορείς να δεις τι δεδομένα χρειάζεται και σε τι μορφή, ώστε να δουλέψει σωστά. Με βάση αυτό μπορείς άρα να φτιάξεις τα 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. Όλα έχουν τα θετικά και τα αρνητικά τους και η τελική επιλογή είναι καθαρά θέμα προτίμησης!
* Έτσι έχω καταλάβει με βάση τις ερωτήσεις σου, συγγνώμη αν κάνω λάθος.
-
10-11-19, 23:44 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #3
Τα καταλαβαίνω όλα αυτά το θέμα είναι όταν είστε μια ομάδα πως συνεργάζεστε. Αν εγώ κάνω 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">
Πάμε τώρα σε front end
Κώδικας:<body onload="loadContent()"> <h1 id="h1"></h1> <img src="" alt="img" id="img"> </body>
τα elements που εμφανίσουν τα τάδε content; Στην ουσία όταν γίνεται το browser request θα παίρνω ένα html με έτοιμο
το design css αλλά χωρίς content, και το content θα γίνεται load δυναμικά.
Έτσι λύνουν το πρόβλημα της συνεργασίας; Δηλαδή δεν μπορώ να σκεφτώ πως αλλιώς ένας front end developer δουλεύει
με έναν back end.Τελευταία επεξεργασία από το μέλος babaliaris : 10-11-19 στις 23:51.
-
11-11-19, 00:07 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #4
Server Side Rendering δεν εννοώ να το κάνει η PHP και να το σερβίρει. Αλλά να κάνεις server side rendering την ίδια την javascript.
Έστω ότι χρησιμοποιείς PHP για να φτιάξεις το Rest Api και Vue.js για το front-end. Το front-end (browser) θα φτιάχνει τη φόρμα και θα ζητάει στοιχεία που πρέπει να απεικονιστούν, μέσω javascript. Αφού είναι έτοιμα όλα θα τα απεικονίσει. Αυτό μπορεί να δημιουργήσει πρόβλημα για το SEO γιατί η σελίδα που θα διαβάσει είναι μία κενή σελίδα:
Spoiler:
Με το server side rendering μπορείς να βάλεις άλλο ένα στάδιο κατά το οποίο τον ρόλο του browser θα τον παίζει άλλος ένας server, ο οποίος θα εκτελεί όλη τη javascript, θα παράγει το τελικό και θα το στέλνει στον browser έτοιμο. Έτσι θα είναι πιο εύκολο για τις μηχανές αναζήτησης αλλά θα εξακολουθείς να έχεις και 2 επίπεδα στην εφαρμογή σου (Front/Back End).
- - - Updated - - -
Ο Front-End με τον Back-End Developer απλά συμφωνούν στα Data Transfer Objects και μετά ο καθένας δουλεύει ανεξάρτητα.
- - - Updated - - -
Με το loadContent θα κάνεις ένα-ένα τα request για να πάρεις την πληροφορία που θέλεις να εμφανίσεις (πχ εγγραφές) και με javascript θα φτιάξεις το DOM ώστε να απεικονιστούν σωστά. Δεν θα πάρεις έτοιμο το HTML και μετά θα πας να το δείξεις. Θα πάρεις JSON αποτελέσματα με τα δεδομένα μονάχα.
-
11-11-19, 00:23 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #5
Ναι αυτό εννούσα εδώ. Αυτό πάντος θα έχει επίσης ceo προβληματα σωστά; Γιατί στην ουσία θα παίρνεις μια σελίδα που είναι κενή σε content και μετά θα την γεμίζεις.
Άρα η καλύτερη λύση θα είναι server side rendering. Το θέμα είναι ότι δεν μπορώ να βρω κάποιο tutorial που να δείχνει πως το κάνεις αυτό και δεν μπορώ να σκεφτώ πως να το κάνω.
Δηλαδή πως θα στέλνεται η javascript του front end developer στο server, και ο server θα κάνει το rendering? Υπάρχουν εργαλεία;
-
11-11-19, 00:35 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #6
-
11-11-19, 01:04 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #7
Θα το ψάξω περισσότερο άμα είναι, ευχαριστώ.
-
04-12-19, 10:53 Απάντηση: Front End API First Development: Πως ακριβώς δουλεύει; #8
laravel + vue ...
Bookmarks