Γρηγορότερη υλοποίηση Front End

[JimxxZe]

Καλησπέρα,

 

Έχω 1 χρόνου εμπειρία στο Web Design - Development καθώς προέρχομαι από άλλο πεδίο και απλά ήθελα να ρωτήσω εαν για την υλοποίηση μιας σελίδας με html - css χρησιμοποιείτε κάποιο framework ή ακόμα και CMS.

 

Ρωτάω επειδή κάθε φορά που έχω να φτιάξω ένα UI για μια εφαρμογή ψάχνω σε διάφορα tutorials για styling form inputs, boxes κ.α. ώστε να σχεδιάζω μοντέρνα και σύγχρονα στοιχεία στη σελίδα, αλλά όλη αυτή η διαδικασία μου τρώει υπερβολικό χρόνο καθώς τα κάνω όλα χειρωνακτικά γράφοντας τον κώδικα για κάθε ένα από αυτά. Είναι κατά μια έννοια επιλογή μου καθώς μαθαίνεις και εντρυφείς στην CSS και βρίσκεις διάφορα κόλπα αλλά είναι επίπονη διαδικασία. Έτσι γίνετε συνήθως ή για να μην κάνει την αγγαρεία αυτή ένας developer χρησιμοποιεί κάποιο framework;

[XPHSTOS_]

Both!

Αναλόγως το budget του πελάτη.
Αν ο πελάτης πληρώνει το διαφορετικό, θα πάρει.
Ξέρει ότι του στοιχίσει σε κόστος και χρόνο αλλά θα έχει μοναδικό αποτέλεσμα.
Αν πάλι σε κυνηγάνε deadlines και δεν αξίζει να φας τόσες ωρές γιατί θα μπεις μέσα...
Έτοιμα UI libraries και άγιος ο θεός.

Ούτε ντροπή είναι, ούτε κακό... ότι πληρώσεις πάρεις.
Καμιά φορά λέμε για site που κάνουν χιλιάδες ευρώ, ένα τέτοιο κόστος δικαιολογεί τον χρόνο σου.

Βέβαια φαντάζομαι εσύ έχεις φροντίσει να αυτοματοποιήσεις κάποιες διαδικασίες.
Έχεις γράψει κάποια components και πατάς πάνω σε αυτά... δεν γράφεις από το 0 κυριολεκτικά!

[Predatorkill]

Εχεις δοκιμασει scss; Θα επιταχυνει πολυ το χρονο και το γραψιμο θα ειναι πολυ λιγοτερο.

 

Κοιτα και το sass, ειναι πιο καθαρος ο κωδικας απο το scss αλλα ειναι λιγο παιδεμα το να βαζεις σωστα τα whitespaces.

[JimxxZe]

Εχω σημειωσει καποια css frameworks οπως saas, less αλλα δεν εχω ασχοληθει μαζι τους επειδη εχω την αισθηση οτι παρεχουν λιγα πραγματα ενω χρειαζεται να μαθεις εξτρα συντακτικο (?). Γλυτωνεις οντως αρκετο χρονο; Αν αξιζει τοτε να ασχοληθω! Αλλιως σκεφτομουν να πηγαινα σε καποιο framework οπως το Pure, Materialize κ.λπ να δω τι προσφερουν

[Tiphonas]

Κοιτα για Bootstrap και material design

[doctor_667]

Κοίτα για Bootstrap που σου είπαν και πιο πάνω που είναι το πιο δημοφιλές και υπάρχουν και άπειρα plugins και themes.

 

Επίσης πολύ καλό είναι το semantic-ui με πολύ περισσότερα components που επίσης υποστηρίζει theming. 

[Predatorkill]

Εχω σημειωσει καποια css frameworks οπως saas, less αλλα δεν εχω ασχοληθει μαζι τους επειδη εχω την αισθηση οτι παρεχουν λιγα πραγματα ενω χρειαζεται να μαθεις εξτρα συντακτικο (?). Γλυτωνεις οντως αρκετο χρονο; Αν αξιζει τοτε να ασχοληθω! Αλλιως σκεφτομουν να πηγαινα σε καποιο framework οπως το Pure, Materialize κ.λπ να δω τι προσφερουν

Το scss ειναι superset και οχι framework. Θελει συντακτικο αλλα μολις το μαθεις δε ξαναγυριζεις σε css. Μπορεις να το μαθεις σε 3-4 ωρες.

[Chemical]

Το αν θα γλυτωσεις χρόνο είναι σχετικό, ο σημαντικότερος παράγοντας είναι η εμπειρία σε αυτο. Οι css preprocessors σε βοηθάνε περισσότερο στην οργάνωση συντήρηση και componentization( αν και αυτό θα πηγαινε και στην οργανωση) καθώς και το scaling(επίσης θα μπορούσε να ανήκει στην οργάνωση) των styles των έργων σου. 

Το θέμα ειναι να μπορείς να στησεις μια αρχιτεκτονική η οποία θα σου δινει περισσότερο έλεγχο αλλά όχι περισσότερο απο όσο θα σε καθυστερούσε σε φάση παραγωγής. Το bootstrap, Materialize, foundation και όλα τα συναφή είναι libs με έτοιμα ui components, τα οποία βασίζονται σε naming conventions, φιλοσοφίες ακομη και σε css frameworks.

Αυτα σου δινουν έτοιμες λυσεις όταν θελεις να φτιαξεις μια web dom εφαρμογη και δεν σε ενδιαφέρει να γράψεις ειδικό styling για τα components σου, και ναι σε βοηθά στη ταχύτητα αν  το χρησιμοποιεις με τον σωστό τροπο και φυσικά δεν μπεις στην διαδικασία να αλλαξεις το style τους.

Τωρα αν θελεις να φτιαξεις ενα website ίσως καλύτερα να χρησιμοποιήσεις απλα μεθόδους και naming conventions  (ΒΕΜ, smacss, atomic design) και pre processors (less, sasss, stylus) έτσι ωστε κάθε φορα να εμπουτίζεις την δική σου προσωπική lib με html components που επαναχρησιμοποιείς στα web sites. πχ λίστες μενου, thumbnails και πολλά αλλα.