Μαζεμένες ερωτήσεις σχετικά με web dev

[L34x88iT]

Καλησπέρα στην όμορφη παρέα του insomnia. Θα γράψω κάποιες μαζεμένες ερωτήσεις για να μην ανοίγω νέα νήματα και όποιος μπορεί απαντάει.

Το υπόβαθρο μου είναι αρκετά καλός σε php και σε framework codeigniter, μέτριος σε jquery, πολύ μέτριος σε vanila javascript και μέτριος σε mysql, καλός σε Html, CSS, Bootstrap 4. Επίσης έχω και αρκετό χρόνο και διάθεση για μάθηση. Συνήθως παίρνω μαθήματα από Udemy και με έχουν βοηθήσει πάρα πολύ. Έχω μάθει πολλά πράγματα.

Alert --- Ακολουθεί σεντόνι

Ερωτήσεις σχετικά με  WEB DEV / DESIGN

Αυτή την στιγμή μπορώ και φτιάχνω τα δικά μου projects, πολλές φορές όμως καταλήγουν σε spagetti codes και στην πρώτη δυσκολία τα κάνω όλα με php. Δηλαδή σερβίρω τα αποτελέσματα κλασσικά με "ανανέωση σελίδας". Για παράδειγμα σε μια σελίδα έφερνα τα αποτελέσματα στο view με ajax σε json και αφού δεν έβγαλα άκρη με το πως θα τα φτιάξω ωραία σε tables κλπ γιατί δεν είμαι εξοικειωμένος, τα έκανα τελικά με php.

Βασικά επειδή πήρα απόφαση να βγω από το comfort zone μου, θέλω να με βοηθήσετε τι πρέπει να μάθω σιγά σιγά (

• Vanila JS?
• React?
• JQuery
• περισσότερο PHP?
• Laravel?
• JS και στο Backend (πχ NodeJS)?
• Python με Flask ή Django?
• Κάτι άλλο?

) ωστε να μπορώ να κάνω με σχετική ευκολία τα παρακάτω πρώτα από όλα για προσωπική χρήση και δεύτερον, γιατί όχι, και για έυρεση εργασίας. Τι θα προτείνατε λοιπόν να μάθω στο 2022(σύντομα) ωστέ να:

1. ΑΠΑΡΑΙΤΗΤΟ --- Να μπορώ να φτιάχνω αποδοτικά web apps χωρίς να καταλήγουν σε spagetti codes (ξέρω αυτό οφείλεται και στον τρόπο που γράφει κάποιος προγραμματιστής το προγραμμά του, αλλά βοηθάει και η σύνταξη της εκάστοτε γλώσσας ή του εκαστοτε framework).
2. ΑΠΑΡΑΙΤΗΤΟ --- Να μπορώ επιτέλους να εξοικειωθώ με τα Api και να μην τα κοιτάω σαν εξωγήινος. Είτε να φτιάχνω τα δικά μου, είτε από εταιρειών. Να ξέρω επιτέλους πως να διαχειριστώ ένα JSON και ένα Object.
3. ΑΠΑΡΑΙΤΗΤΟ --- Να μπω σε διαδικασία να μάθω εργαλεία και τρόπους, ωστε να μπορω το μελλοντικό μου project να το δουλέυω με όμαδα, εύκολα. (Git? Docker? Άλλο?)
4. ΠΡΟΑΙΡΕΤΙΚΟ --- Να μπορώ να φτιάξω αν χρειαστεί εφαρμογή για iOS, Android. (React? Java? Swift? Kotlin? Άλλο?)
5. ΠΡΟΑΙΡΕΤΙΚΟ --- Να μπορώ επιτέλους να καταλάβω πως σκατά συντάσεται το htaccess?
6. ΠΡΟΑΙΡΕΤΙΚΟ --- Να μπορώ επιτέλους να στήσω το project μου σε έναν δικό μου server (hetzner) αντί να παίρνω πάντα managed με cPanel. (Linux? Άλλο?)

Ξέρω οτί δεν μπορεί κάποιος να τα ξέρει όλα σε επαγγελματικό επίπεδο, ούτε πρόκειται να τα μάθω σε 2 μήνες. Απλά τώρα πάω στα τυφλά και όμως είπα πιο πάνω, είμαι πολλά χρόνια σε ένα comfort zone (php, codeigniter, jquery) και αυτό με σταματάει στο να πάω ένα βήμα παρακάτω και πιο σύγχρονο. Θέλω λοιπόν να φτιάξω ένα πλάνο, για να ξέρω πως να ξεκινήσω και ποια βήματα να ακολουθήσω χωρίς βιασύνες και deadlines, ωστέ να εξελιχθώ, πρώτα σε προσωπικό επίπεδο αλλά και γιατί όχι σε επαγγελματικό.

Ευχαριστώ πολύ για το χρόνο σας για να το διαβάσετε, πόσο μάλλον σε όσους απαντήσουν

 

 

 

[gdimi]

Νομίζω κάπου έχεις μπερδευτεί με το χάος τον επιλογών που υπάρχουν και ο λόγος είναι πως δεν είσαι σίγουρος τι θέλεις να κάνεις.
Αν θες να επικεντρωθείς σε frontend, react και vanillajs, css flex/grid κλπ
Αν θες να βελτιώσεις τις full stack ικανότητές σου, nodeJs, vanillajs, react, περισσότερο php ώστε να γράφεις τα δικά σου APIs ή να χρησιμοποιείς άλλων
Αν θες να αλλάξεις framework base, Laravel
Γενικώς το σύγχρονο trend είναι υπηρεσίες, apis κλπ οπότε ανάλογα με το σε ποιον ρόλο θες να επικεντρωθείς θα κοιτάξεις και διαφορετικά πράγματα, αλλά όλα έχουν κάποια κοινά όπως το CI/CD flow που έχει task runners (gulp, grant), git (και git actions), testing, limited (linux) cli κλπ κλπ.
Θα πρόσεξες πως vanillajs είναι κάπως..must, ειδικά ES6 js όχι το "παλιό" στυλ ES5 και πίσω.

 

[thanasis00]

Για μένα είναι 3 οι βασικοί πυλώνες που πρέπει να αφοσιωθείς:

1. Tooling

Εδώ πιάνει ευρύ φάσμα, και περιλαμβάνει όλα τα εργαλεία που μπορεί να χρειάζεσαι για να μπορείς να κάνεις development και να μπορείς να στήσεις παραγωγικά μια υπηρεσία. Ξεκινάς να μάθεις git, docker (και docker compose) και bash. Έχοντας αυτά σαν βάση, μπορείς να προχωρήσεις και να μάθεις να στήσεις development environments μόνο με docker (πχ τρέξε έναν container με mysql/postgres, και σε έναν άλλο ένα php application, και μάθε πως να κάνεις development με αυτά τα εργαλεία). Επίσης θα βάλω εδώ και το CI/CD, καθώς και τα testing frameworks, γιατί συνήθως θέλουν μια προετοιμασία για να μπορούν να τρέξουν.

Αν καλύψεις τα παραπάνω, ξέρεις όλο το βασικό stack που μπορεί να χρειαστείς σε οποιαδήποτε μελλοντική δουλειά. Μπορείς να κάνεις upgrade τις παραπάνω γνώσεις, αν μάθεις να στήνεις και παραγωγικά μια εφαρμογή μέσω docker (production grade performance, με logging κλπ  για να έχεις και observability).

(Σημείωση για το deployment που είπες: Έχοντας έναν linux server, μπορείς είτε να στήσεις την εφαρμογή σου με το χέρι κατεβάζοντας όλα τα dependencies που μπορεί να έχεις, ή μπορείς να χρησιμοποιήσεις docker + docker-compose για να έχεις τα πάντα πακεταρισμένα, είναι ωραίο topic για ψάξιμο)

2. API

Εδώ πρακτικά συγκαταλέγονται όλες οι backend γλώσσες. Το πιο συνηθισμένο trend πλέον είναι τα backend applications να λειτουργούν σαν API (REST ή απλά CRUD). Οπότε αν μάθεις να δομείς σωστά ένα API, και να μπορείς πχ να μιλήσεις μαζί του μέσω curl για να κάνεις οποιαδήποτε ενέργεια, είσαι σε πάρα πολύ καλό δρόμο για την οδό των microservices, όπου οι υπηρεσίες επικοινωνούν μεταξύ τους μέσω API, pattern που είναι πολύ συνηθισμένο πλέον. 

3. UI Representation

Εδώ πάμε σε frontend εργαλεία για να στήνεις την εμπειρία του χρήστη. Εδώ δυστυχώς τα πράγματα είναι λίγο πιο tricky, γιατί πρέπει να σχεδιάσεις και την εμφάνιση, και τη λειτουργικότητα. Αλλά το σημαντικό είναι ότι εδώ θα έρθει να κουμπώσει το API που έφτιαξες στο backend, οπότε πρέπει να μπορείς να διαχειρίζεσαι json δομές, objects & arrays, και να μπορείς να κάνεις ενέργειες πάνω σε αυτά.

Όλα τα παραπάνω ταιριάζουν σε fullstack developer, αλλά και το καθένα ξεχωριστά είναι μία ή περισσότερες θέσεις εργασίας με εξειδίκευση. Για πράδειγμα, στη 1η κατηγορία, μπορείς να επεκταθείς και να γίνεις από devops μέχρι sysadmin. Στη 2η από backend developer μέχρι integration engineer (διασύνδεση με 3rd party services) και στη 3η από designer μέχρι frontend developer. Η γνώμη μου είναι ότι, ενώ είναι σημαντικό να γνωρίζεις αρκετά πράγματα για όλες τις κατηγορίες, είναι πιο σημαντικό να μπορείς να εμβαθύνεις σε 1 από αυτές, και ίσως και σε 1 υποκατηγορία, για να πάρεις εξειδίκευση, που θα σου δώσει καλύτερες απολαβές σε μελλοντική δουλειά. Για να είσαι άριστος fullstack engineer, θέλει σίγουρα πολλά χρόνια προϋπηρεσία, και να είσαι πολύ καλός στη δουλειά σου. Οπότε θα πω σίγουρα μάθε όλα όσα αναφέρεις, αλλά επέλεξε κάποιο από αυτά για να εμβαθύνεις.

Δεδομένων των γνώσεων που έχεις σε php, html και css, αν ξεκινήσεις για παράδειγμα reactjs, θα μπορείς να στήσεις μια εφαρμογή που να επικοινωνεί frontend + backend με API σχετικά εύκολα και γρήγορα θεωρώ, οπότε έχεις ένα starting point για να ξεκινήσεις.

Θα δώσω ένα παράδειγμα που χρησιμοποιούσαμε στη δουλειά μας σε junior devs για να μαθαίνουν πράγματα. Έχουμε μια εφαρμογή που λέγεται book keeping, που είναι πρακτικά ένας κατάλογος με όλα τα βιβλία που έχουμε διαθέσιμα στη δουλειά. Οπότε ζητάμε κάποια βασικά features που μπορεί να έχει μια τέτοια εφαρμογή, για παράδειγμα:

1. List view για να βλέπεις όλα τα βιβλία, και φίλτρα για να μπορείς να τα φιλτράρεις

2. Insert view όπου περνάς ένα καινούριο βιβλίο, με κάποια βασικά χαρακτηριστικά, και το που βρίσκεται μέσα στα γραφεία (πχ ποια πτέρυγα, ποια βιβλιοθήκη κλπ)

3. Reserve a book, που συμπληρώνεις μια αίτηση για να κάνεις μια κράτηση

Και ένα admin panel:

1. Approve new books, για να γίνεται έλεγχος για το βιβλίο που προστέθηκε

2. See all reservations, για να φαίνεται ποιος έχει πάρει ποιο βιβλίο και πόσο καιρό το έχει

3. Send return reminder (χειροκίνητα ή/και αυτόματα) να στέλνεται ειδοποίηση σε κάποιον που έχει αργήσει κάποιο βιβλίο

Αυτά είναι χοντρικά αυτά που θυμάμαι, οπότε βάζαμε juniors να γράφουν κώδικα σε αυτό το project, το οποίο είναι στημένο στημένο με εργαλεία που χρησιμοποιούμε συνήθως. Τώρα λόγω covid είναι idle αυτό, αλλά θέλω να πω ότι σαν δοκιμαστική εφαρμογή είναι σούπερ, γιατί πιάνει όλο το stack. Και μια περιγραφή για τα εργαλεία:

Gitlab repository, οπότε ο κόσμος μαθαίνει git. Επίσης χρησιμοποιούμε CI/CD για να τρέχουμε test/linting/build operations. Backend σε python/django, frontend σε reactjs, και μια βάση postgresql. Development environment στημένο με docker-compose, οπότε μαθαίνουν και βασικά commands του docker.

Σημείωση: Spaghetti code σημαίνει ότι δεν είναι ξεκάθαρη η δομή στο μυαλό σου, και προχωράς βλέποντας και κάνοντας. Γενικά εμένα το react με έμαθε να μη γράφω spaghetti code, γιατί by design σε αναγκάζει να γράφεις πολύ μικρά components, οπότε έχεις πολλά μικρά αρχεία με σχετικά λίγο κώδικα το καθένα, οπότε απλώνεται ο κώδικάς σου, με αποτέλεσμα να μπορεί να είναι και πιο testable αλλά και πιο readable.

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

[k33theod]

To spaggeti code οφείλεται στον τρόπο που χρησιμοποιείται η γλώσσα, εγώ τα κάνω μαλια κουβάρια 😀. Μπορεί κάποιος να βελτιωθεί μαθαίνοντας χαρακτηριστικά της  γλώσσας όπως κλάσεις namespaces interfaces traits κλπ

 

 

[L34x88iT]

22 ώρες πριν, gdimi είπε

Νομίζω κάπου έχεις μπερδευτεί με το χάος τον επιλογών που υπάρχουν και ο λόγος είναι πως δεν είσαι σίγουρος τι θέλεις να κάνεις.
Αν θες να επικεντρωθείς σε frontend, react και vanillajs, css flex/grid κλπ
Αν θες να βελτιώσεις τις full stack ικανότητές σου, nodeJs, vanillajs, react, περισσότερο php ώστε να γράφεις τα δικά σου APIs ή να χρησιμοποιείς άλλων
Αν θες να αλλάξεις framework base, Laravel
Γενικώς το σύγχρονο trend είναι υπηρεσίες, apis κλπ οπότε ανάλογα με το σε ποιον ρόλο θες να επικεντρωθείς θα κοιτάξεις και διαφορετικά πράγματα, αλλά όλα έχουν κάποια κοινά όπως το CI/CD flow που έχει task runners (gulp, grant), git (και git actions), testing, limited (linux) cli κλπ κλπ.
Θα πρόσεξες πως vanillajs είναι κάπως..must, ειδικά ES6 js όχι το "παλιό" στυλ ES5 και πίσω.

Βασικά σε πρώτη φάση θέλω να μπορώ να κάνω ολοκληρωμένα πράγματα που έχω στο μυαλό μου και αργότερα να εμβαθύνω για αγορά εργασίας. Μάλλον σαν πιο σωστό βήμα, βλέπω την μετάβαση σε laravel και εξάσκηση πολύ σε VanillaJS.

17 ώρες πριν, thanasis00 είπε

1. Tooling

Εδώ πιάνει ευρύ φάσμα, και περιλαμβάνει όλα τα εργαλεία που μπορεί να χρειάζεσαι για να μπορείς να κάνεις development και να μπορείς να στήσεις παραγωγικά μια υπηρεσία. Ξεκινάς να μάθεις git, docker (και docker compose) και bash. Έχοντας αυτά σαν βάση, μπορείς να προχωρήσεις και να μάθεις να στήσεις development environments μόνο με docker (πχ τρέξε έναν container με mysql/postgres, και σε έναν άλλο ένα php application, και μάθε πως να κάνεις development με αυτά τα εργαλεία). Επίσης θα βάλω εδώ και το CI/CD, καθώς και τα testing frameworks, γιατί συνήθως θέλουν μια προετοιμασία για να μπορούν να τρέξουν.

Αν καλύψεις τα παραπάνω, ξέρεις όλο το βασικό stack που μπορεί να χρειαστείς σε οποιαδήποτε μελλοντική δουλειά. Μπορείς να κάνεις upgrade τις παραπάνω γνώσεις, αν μάθεις να στήνεις και παραγωγικά μια εφαρμογή μέσω docker (production grade performance, με logging κλπ  για να έχεις και observability).

(Σημείωση για το deployment που είπες: Έχοντας έναν linux server, μπορείς είτε να στήσεις την εφαρμογή σου με το χέρι κατεβάζοντας όλα τα dependencies που μπορεί να έχεις, ή μπορείς να χρησιμοποιήσεις docker + docker-compose για να έχεις τα πάντα πακεταρισμένα, είναι ωραίο topic για ψάξιμο)

2. API

Εδώ πρακτικά συγκαταλέγονται όλες οι backend γλώσσες. Το πιο συνηθισμένο trend πλέον είναι τα backend applications να λειτουργούν σαν API (REST ή απλά CRUD). Οπότε αν μάθεις να δομείς σωστά ένα API, και να μπορείς πχ να μιλήσεις μαζί του μέσω curl για να κάνεις οποιαδήποτε ενέργεια, είσαι σε πάρα πολύ καλό δρόμο για την οδό των microservices, όπου οι υπηρεσίες επικοινωνούν μεταξύ τους μέσω API, pattern που είναι πολύ συνηθισμένο πλέον. 

3. UI Representation

Εδώ πάμε σε frontend εργαλεία για να στήνεις την εμπειρία του χρήστη. Εδώ δυστυχώς τα πράγματα είναι λίγο πιο tricky, γιατί πρέπει να σχεδιάσεις και την εμφάνιση, και τη λειτουργικότητα. Αλλά το σημαντικό είναι ότι εδώ θα έρθει να κουμπώσει το API που έφτιαξες στο backend, οπότε πρέπει να μπορείς να διαχειρίζεσαι json δομές, objects & arrays, και να μπορείς να κάνεις ενέργειες πάνω σε αυτά.

Όλα τα παραπάνω ταιριάζουν σε fullstack developer, αλλά και το καθένα ξεχωριστά είναι μία ή περισσότερες θέσεις εργασίας με εξειδίκευση. Για πράδειγμα, στη 1η κατηγορία, μπορείς να επεκταθείς και να γίνεις από devops μέχρι sysadmin. Στη 2η από backend developer μέχρι integration engineer (διασύνδεση με 3rd party services) και στη 3η από designer μέχρι frontend developer. Η γνώμη μου είναι ότι, ενώ είναι σημαντικό να γνωρίζεις αρκετά πράγματα για όλες τις κατηγορίες, είναι πιο σημαντικό να μπορείς να εμβαθύνεις σε 1 από αυτές, και ίσως και σε 1 υποκατηγορία, για να πάρεις εξειδίκευση, που θα σου δώσει καλύτερες απολαβές σε μελλοντική δουλειά. Για να είσαι άριστος fullstack engineer, θέλει σίγουρα πολλά χρόνια προϋπηρεσία, και να είσαι πολύ καλός στη δουλειά σου. Οπότε θα πω σίγουρα μάθε όλα όσα αναφέρεις, αλλά επέλεξε κάποιο από αυτά για να εμβαθύνεις.

1. Μάλλον το πρώτο πρώτο βήμα πρέπει να είναι να εξοικειωθώ με τα εργαλεία. Γιατί μέχρι στιγμής φοβούμενος από την γραμμή εντολών για να στήσω docker, git κλπ, κατέφευγα στην εύκολη λύση της ενοικίασης share host,  upload το codeigniter, δημιουργία βάσης και phpmyadmin και όλες οι εργασίες από τον editor του cpanel.

2. Το Backend κομμάτι των API, νομίζω το κατέχω λίγο. Δηλαδή κάτι μπορώ να φτιάξω.

3. Εδώ μου είναι το πολύ δύσκολο κομμάτι. Για παράδειγμα, προχθές κιόλας (για αυτό και είπα να ανοίξω αυτο το νήμα), έφτιαξα κάτι που μου έφερνε στο view ένα JSON με όλα αυτά που χρειαζόμουν και δεν ήξερα πως να φτιάξω ένα απλό πίνακα, με τα append κλπ. Και τελικά το έκανα με php.

 

 

 

17 ώρες πριν, thanasis00 είπε

1. List view για να βλέπεις όλα τα βιβλία, και φίλτρα για να μπορείς να τα φιλτράρεις

2. Insert view όπου περνάς ένα καινούριο βιβλίο, με κάποια βασικά χαρακτηριστικά, και το που βρίσκεται μέσα στα γραφεία (πχ ποια πτέρυγα, ποια βιβλιοθήκη κλπ)

3. Reserve a book, που συμπληρώνεις μια αίτηση για να κάνεις μια κράτηση

Και ένα admin panel:

1. Approve new books, για να γίνεται έλεγχος για το βιβλίο που προστέθηκε

2. See all reservations, για να φαίνεται ποιος έχει πάρει ποιο βιβλίο και πόσο καιρό το έχει

3. Send return reminder (χειροκίνητα ή/και αυτόματα) να στέλνεται ειδοποίηση σε κάποιον που έχει αργήσει κάποιο βιβλίο

Μέχρι στιγμής κάτι τέτοιο μπορώ να το κάνω αρκετά εύκολα.

10 ώρες πριν, k33theod είπε

To spaggeti code οφείλεται στον τρόπο που χρησιμοποιείται η γλώσσα, εγώ τα κάνω μαλια κουβάρια 😀. Μπορεί κάποιος να βελτιωθεί μαθαίνοντας χαρακτηριστικά της  γλώσσας όπως κλάσεις namespaces interfaces traits κλπ

Και εγώ κάπως έτσι. Και ξεχνάω και τι έχω κάνει και ψάχνω σε όλο το κώδικα να βγάλω άκρη.

[ralloss]

Εγώ, παρότι δεν είμαι κανένας ειδικός, θα προσπαθήσω να σου ξεδιαλύνω λίγο στο μυαλό σου το κομμάτι που λες πως σε δυσκολεύει.

Εσύ είσαι εξοικειωμένος με server side rendering ενώ για να λαμβάνεις δεδομένα μέσω API και να τα προβάλλεις γίνεται μέσω client side rendering.
Δηλαδή ο τρόπος που το κάνεις εσύ, είναι να παίρνεις τα δεδομένα από τη βάση και να τα τα κάνεις render κατευθείαν σε PHP αρχείο.

Με client side rendering αντί να επιστρέφεις views (HTML) από το backend σου (PHP), επιστρέφεις data (πχ σε μορφή JSON).
Όταν κάνεις request από frontend και λάβεις τα data, τότε κάνεις render με JavaScript (vanilla ή React κλπ).

Ένα google search τα παραπάνω θα σου λύσει όλες τις απορίες , αλλά θα γίνω λίγο πιο συγκεκριμένος μιας και νομίζω πως σε αυτό "κολλάς".

Ορίστε ένα πολύ πρόχειρο παράδειγμα , πως κάνεις render μια λίστα server side vs client side
PHP server side rendering:

<!DOCTYPE html>
<html>
<body>
<ul>
<!-- γράφεις κανονικά HTML -->
<!-- ανοίγεις php tags, κάνεις ένα loop και εμφανίζεις τα δεδομένα σου σε PHP string -->
<?php
$data = [1,2,3];
for($i=0; $i<count($data); $i++){
	echo "<li> "+$data[$i] +" </li>";
}
?>
</ul>

</body>
</html>

Vanilla JavaScript client side rendering:

client side rendering

PHP
..
$data = ["1", "2", "3"];
print json_encode($data);
..

HTML
..
<ul></ul>
..

JAVASCRIPT

const data  = functionThatFetchesYourApiData() // τα δεδομένα που έχεις επιστρέψει από PHP
const ul = document.querySelector("ul"); // το <ul> element από την HTML
data.forEach(item => { //loop τα δεδομένα σου
	const li =  document.createElement("li"); //δημιουργείς ένα <li> για κάθε item
  	li.textContent = item  
  	ul.appendChild(li) // προσθέτεις το κάθε li στο ul στην HTML
})

Χρήσιμα searches: client side rendering, javascript dom manipulation

Θα σου πρότεινα να εξοικειωθείς πρώτα με JavaScript ES6 πριν δοκιμάσεις κάπιο framework/library