Πρώτη επαφή με React

[skiabox]

Νομίζω σε συνδυασμό με nodejs 15 πάνε όλα σφαίρα σε σχέση με πιο πριν.

[k33theod]

Στις 23/9/2020 στις 12:41 ΜΜ, thanasis00 είπε

Γενικά ο όλος σκοπός των FE frameworks είναι ότι έχεις τη δυνατότητα να φτιάξεις ένα Progressive Web Application, που σου δίνει δυνατότητες όπως για παράδειγμα ότι μπορείς να τρέχεις  την ίδια εφαρμογή σε κάθε περιβάλλον που μπορεί να υποστηρίξει έναν browser, όπως για παράδειγμα υλοποιείς μια εφαρμογή που είναι fully responsive, και με τον ίδιο κώδικα μπορείς να το τρέξεις και σε browser και σε android app (μέσω webview). Επίσης μπορείς να αξιοποιήσεις service workers έτσι ώστε να έχει offline versions του website, να γίνεται update και pre-render ένα website πριν το επισκεφτεί κάποιος χρήστης (για λόγους performance και διαθεσιμότητας), και τέλος να δίνεις μια εμπειρία στον χρήστη δίνοντάς του ένα Single Page Application (που σημαίνει λιγότερο network traffic μιας και μόνο τo API χρειάζεται για την επικοινωνία με έναν server, πιο responsive applications γιατί δε θα κάνουν full page reload κλπ).

Τώρα ναι, ο καθένας ό,τι τον βολεύει. Στην εταιρεία μου πχ έχουμε φτιάξει ένα FE library το οποίο παίρνει από backend ένα configuration και το API , οπότε μπορούμε να φτιάχνουμε πολλαπλές εφαρμογές με το ίδιο frontend, απλά στέλοντας διαφορετικό configuration και data μέσω του API στο FE. Αν θες να ψαχτείς, θα καταλήξεις να βρεις τα πράγματα που σε βολεύουν ή σου αρέσουν, με μια πρώτη ματιά όλα είναι buzzwords.

Αυτά που γράφεις όμως δεν είναι χαρακτηριστικά της React και των Frameworks, είναι χαρακτηριστικά που υποστηρίζουν οι browsers και τα λειτουργικά οπότε έρχονται πρώτα στην standar library της js και τα παίρνουν μετά τα frameworks και τα περιλαμβάνουν στις βιβλιοθήκες τους. Και γενικά ο σκοπός των Frameworks δεν νομίζω ότι είναι να κάνεις PWA.

[thanasis00]

1 ώρα πριν, k33theod είπε

Και γενικά ο σκοπός των Frameworks δεν νομίζω ότι είναι να κάνεις PWA.

Ελπίζω ότι είσαι διατεθειμένος να δώσεις τη δική σου οπτική στο θέμα, αφού πιστεύεις ότι ο σκοπός των frameworks δεν είναι για να κάνεις PWA.

Εγώ μόνο θα συμπληρώσω ότι το browser API είναι μια χαρά χρήσιμο, αλλά το πραγματικά χρήσιμο FE framework θα έρθει και θα σου λύσει τα χέρια στα σημεία που εσύ θα έπρεπε να γράψεις boilerplate κώδικα. Για παράδειγμα, αντί να κάτσεις να γράφεις μόνος σου το document.createElement για να δημιουργήσεις ένα καινούριο html element στο DOM, το react θα στο κάνει αυτόματα αν εσύ φτιάξεις μια απλή συνάρτηση η οποία θα επιστρέφει πίσω ένα JSX element. Άρα, εν τέλει, ένα framework είναι ένα opinionated API που σου κρύβει το πραγματικό browser API με ένα σετ εργαλείων για να κάνεις με λιγότερα βήματα τη δουλειά σου. Take it or leave it, το διαδραστικό web υπήρχε μια χαρά και χωρίς όλα αυτά τα FE frameworks, αλλά πλέον είναι πιο accessible σε κόσμο που δε χρειάζεται να μάθει όλα τα quirks του κάθε browser για να εκτελέσει ένα συγκεκριμένο operation.

[k33theod]

Thanasis

Με αυτά που λες τώρα συμφωνώ, απλά στο προηγούμενο σχόλιο φάνηκε σ'εμένα ότι εννοείς ότι κάνουν μόνο PWA, το οποίο δεν έχει καμία σχέση.

[vadou]

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

Ελπίζω ότι είσαι διατεθειμένος να δώσεις τη δική σου οπτική στο θέμα, αφού πιστεύεις ότι ο σκοπός των frameworks δεν είναι για να κάνεις PWA.

"Γενικά ο όλος σκοπός των FE frameworks είναι ότι έχεις τη δυνατότητα να φτιάξεις ένα Progressive Web Application,"
Σου παρέχουν τα FE frameworks κάποιο shortcut για service workers και offline mode; Φαντάζομαι, μιας και είναι από τις βασικές διαφορές Web App - PWA, θα έχεις κάτι στο μυαλό σου που προσωπικά αγνοώ αλλά θα με ενδιέφερε να το μάθω.

"που σου δίνει δυνατότητες όπως για παράδειγμα ότι μπορείς να τρέχεις  την ίδια εφαρμογή σε κάθε περιβάλλον που μπορεί να υποστηρίξει έναν browser, όπως για παράδειγμα υλοποιείς μια εφαρμογή που είναι fully responsive, και με τον ίδιο κώδικα μπορείς να το τρέξεις και σε browser και σε android app (μέσω webview)."
Αυτό συμβαίνει ακόμα και με ένα απλό στατικό website.

"και τέλος να δίνεις μια εμπειρία στον χρήστη δίνοντάς του ένα Single Page Application (που σημαίνει λιγότερο network traffic μιας και μόνο τo API χρειάζεται για την επικοινωνία με έναν server, πιο responsive applications γιατί δε θα κάνουν full page reload κλπ)"
Όσον αφορά αυτό το κομμάτι, το SPA είναι όντως κάτι που μπορείς να δημιουργήσεις (σχετικά) εύκολα με ένα FE Framework, αλλά ένα SPA δεν είναι απαραίτητα και PWA.

Αυτό που λες για λιγότερο network traffic δεν ισχύει πάντα. Το full page reload, από τη στιγμή που έχουν κασαριστεί τα assets δεν τα ξανακατεβάζει και το μέγεθος της html είναι more often than not αστείο να το σχολιάσουμε (ειδικά όταν μιλάμε after compression). Ίσα ίσα που λόγω Framework τα assets που θα κατεβάσεις την πρώτη φορά που θα μπεις θα είναι μεγαλύτερα σε μέγεθος (η javascript τουλάχιστον). Αυτό που γλυτώνεις με το SPA είναι το ρεντάρισμα από την αρχή της κάθε σελίδας, όπου πλέον ρεντάρονται μόνο τα nodes που άλλαξαν.

Οπότε γενικά όχι, δε νομίζω ότι τα FE Frameworks δημιουργήθηκαν για να κάνεις PWA, ίσως να βοηθάνε αλλά σίγουρα δεν είναι αυτός ο σκοπός τους.

Επεξ/σία 23 Οκτωβρίου 2020 από vadou

[thanasis00]

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

Thanasis

Με αυτά που λες τώρα συμφωνώ, απλά στο προηγούμενο σχόλιο φάνηκε σ'εμένα ότι εννοείς ότι κάνουν μόνο PWA, το οποίο δεν έχει καμία σχέση.

Σίγουρα άθελά μου άφησα να εννοηθεί ότι μπορείς να φτιάξεις μόνο PWA, αλλά δεν το εννοούσα με αυτόν τον τρόπο. 

 

3 ώρες πριν, vadou είπε

Σου παρέχουν τα FE frameworks κάποιο shortcut για service workers και offline mode; Φαντάζομαι, μιας και είναι από τις βασικές διαφορές Web App - PWA, θα έχεις κάτι στο μυαλό σου που προσωπικά αγνοώ αλλά θα με ενδιέφερε να το μάθω.

To create-react-app έχει documentation για να προχωρήσεις με το PWA aspect.

https://create-react-app.dev/docs/making-a-progressive-web-app/

3 ώρες πριν, vadou είπε

Οπότε γενικά όχι, δε νομίζω ότι τα FE Frameworks δημιουργήθηκαν για να κάνεις PWA, ίσως να βοηθάνε αλλά σίγουρα δεν είναι αυτός ο σκοπός τους.

Και ακόμα δεν τοποθετήθηκες, μόνο απλά προσπάθησες να καταρρίψεις τα λεγόμενά μου. Σίγουρα δεν εννούσα μόνο PWA, απλά είναι ένα πολύ ωραίο use case μιας και το CRA σου δίνει support, αλλά μάλλον είναι ωραίο feeling να κλειδώνεις σε ένα συγεκριμένο σημείο για να βγάλεις το άχτι σου. Και ξεκάθαρα σκίπαρες το επόμενό μου σχόλιο που ουδεμία σχέση έχει με PWA. Anyway, πλέον δε χρειάζομαι τοποθέτηση, έχεις δίκιο, end of story.

[vadou]

@thanasis00 Ισχυρίστηκες ότι "ο όλος σκοπός των FE frameworks είναι ότι έχεις τη δυνατότητα να φτιάξεις ένα PWA", όχι;
Όταν σου έγραψε ο k33theod ότι κάνεις λάθος, επέμεινες ότι αυτός είναι ο σκοπός τους και πέταξες και μια γενικότητα, έτσι για να πεις κάτι (αλήθεια πιστεύεις ότι το μεγάλο + των FE Frameworks είναι ότι σε γλυτώνουν από το να γράφεις document.createElement; 😛 ).

Ε, εγώ προσπάθησα να σου εξηγήσω ακριβώς γιατί κάνεις λάθος. Από όλα αυτά τα χαρακτηριστικά που ανέφερες, μόνο ο service worker είναι κάτι που κάνει ένα PWA να ξεχωρίζει και κανένα framework δε σου γλυτώνει κάτι για αυτό. Είτε φτιάξεις μια εφαρμογή με react/vue/angular/whatever, είτε ένα blog με wordpress, είτε κάποιο site με JAMstack, είτε x 10 , το στήσιμο του PWA είναι το ίδιο. Σκοπός των FE framework είναι να σε βοηθήσουν να φτιάξεις δυναμικά (reactive) user interfaces. Καμμιά σχέση με το να κάνεις την εφαρμογή σου progressive.

Επεξ/σία 24 Οκτωβρίου 2020 από vadou

[skiabox]

Σχετικά με τα frameworks που κάθονται από πάνω από την React τι άποψη έχετε παιδιά;

Πιστεύω έχει πάρει κεφάλι το Next.JS γιατί ρίξανε πολύ χρήμα.

[skiabox]

Μεγάλος ντόρος στην React community με αυτό :

https://remix.run/

[skiabox]

Εχει καταλάβει κανείς πια είναι η διαφορά μεταξύ npm install και expo install σε ένα expo managed project;