Πριν από περίπου ένα χρόνο τον Μάιο του 2013, η Google κυκλοφόρησε Polymer.js .
Εδώ είμαστε, ένα χρόνο αργότερα. Και το ερώτημα είναι: Είναι ακόμα έτοιμο για πρώτη φορά; Είναι ακόμη δυνατό να δημιουργήσετε μια έτοιμη για παραγωγή εφαρμογή χρησιμοποιώντας τεχνικές ανάπτυξης ιστοσελίδων Polymer;
Για να απαντήσω σε αυτήν την ερώτηση, πήρα το Polymer για μια δοκιμαστική μονάδα για να αναπτύξω μια διαδικτυακή εφαρμογή και να δω πόσο καλά θα συμπεριφερόταν. Αυτό το άρθρο αφορά αυτήν την εμπειρία και ό, τι έμαθα στη διαδικασία.
Polymer.js: Η ιδέα
Πριν μπείτε στο φροντιστήριο Polymer, ας καθορίσουμε πρώτα το Polymer.js, όχι για το τι ισχυρίζεται ότι είναι, αλλά για το τι είναι στην πραγματικότητα.
Όταν ξεκινάτε να ρίχνετε μια ματιά στο Polymer, δεν μπορείτε παρά να γοητευτείτε από την αυτοαναφερόμενη μοναδική θέα στον κόσμο. Το Polymer υποστηρίζει ότι ακολουθεί μια προσέγγιση «back-to-nature» που «βάζει τα στοιχεία πίσω στο κέντρο της ανάπτυξης ιστού». Με το Polymer.js, μπορείτε να δημιουργήσετε τη δική σας Στοιχεία HTML και να τα συνθέσετε σε ολοκληρωμένες, σύνθετες εφαρμογές ιστού που είναι επεκτάσιμες και διατηρήσιμες. Όλα έχουν να κάνουν με τη δημιουργία νέων (δηλαδή, προσαρμοσμένων) στοιχείων που μπορούν στη συνέχεια να επαναχρησιμοποιηθούν στις σελίδες HTML με δηλωτικό τρόπο, χωρίς να χρειάζεται να γνωρίζουν ή να κατανοούν τα εσωτερικά τους.
Στοιχεία, τελικά, είναι τα δομικά στοιχεία του ιστού. Κατά συνέπεια, το Polymer's κοσμοθεωρία είναι ότι η ανάπτυξη ιστού πρέπει βασικά να βασίζεται στην επέκταση του υφιστάμενου παραδείγματος στοιχείων για την οικοδόμηση πιο ισχυρών στοιχεία ιστού , αντί να αντικαθιστάτε τη σήμανση με 'gobs of script' (για να χρησιμοποιήσετε τις λέξεις τους). Με διαφορετικό τρόπο, η Polymer πιστεύει ότι αξιοποιεί τις 'εγγενείς' τεχνολογίες του προγράμματος περιήγησης αντί να βασίζεται σε έναν ολοένα και πιο περίπλοκο λαβύρινθο προσαρμοσμένων βιβλιοθηκών JavaScript ( jQuery κ.ά. κ.λπ.). Πράγματι, μια ενδιαφέρουσα έννοια.
Εντάξει, έτσι είναι η θεωρία. Ας ρίξουμε μια ματιά στην πραγματικότητα.
Ανάπτυξη Ιστού Πολυμερών: Η Πραγματικότητα
Ενώ η φιλοσοφική προσέγγιση του Polymer έχει σίγουρα αξία, είναι δυστυχώς μια ιδέα ότι (τουλάχιστον σε κάποιο βαθμό) είναι μπροστά από την εποχή του.
Το Polymer.js θέτει ένα τεράστιο σύνολο απαιτήσεων στο πρόγραμμα περιήγησης, βασιζόμενο σε μια σειρά τεχνολογιών που βρίσκονται ακόμη στη διαδικασία τυποποίησης (από το W3C) και δεν υπάρχουν ακόμη στα σημερινά προγράμματα περιήγησης. Παραδείγματα περιλαμβάνουν το σκιά dom , στοιχεία προτύπου , προσαρμοσμένα στοιχεία , Εισαγωγές HTML , παρατηρητές μετάλλαξης , προβολές βάσει μοντέλου, εκδηλώσεις δείκτη , και κινούμενα σχέδια ιστού . Αυτές είναι θαυμάσιες τεχνολογίες, αλλά τουλάχιστον από τώρα, που δεν έχουν ακόμη έρθει στα σύγχρονα προγράμματα περιήγησης.
τι κάνουν οι οικονομικοί υπεύθυνοι
Η στρατηγική του Πολυμερούς είναι να έχει προγραμματιστές front-end αξιοποιήστε αυτές τις τεχνολογίες αιχμής, που πρέπει να έρχονται ακόμη, βασισμένες στο πρόγραμμα περιήγησης, οι οποίες βρίσκονται στη διαδικασία τυποποίησης (από το W3C), καθώς αυτές γίνονται διαθέσιμες. Εν τω μεταξύ, για να καλυφθεί το κενό, το Polymer προτείνει τη χρήση του πολυπληρώματα (ένας κώδικας JavaScript με δυνατότητα λήψης, ο οποίος παρέχει δυνατότητες που δεν είναι ακόμη ενσωματωμένες στα σημερινά προγράμματα περιήγησης). Τα προτεινόμενα πολυπληρώματα έχουν σχεδιαστεί με τέτοιο τρόπο ώστε (τουλάχιστον θεωρητικά) να είναι απρόσκοπτα για αντικατάσταση μόλις γίνουν διαθέσιμες οι εγγενείς εκδόσεις προγράμματος περιήγησης αυτών των δυνατοτήτων.
Εντάξει. Αλλά επιτρέψτε μου να το ξεκαθαρίσω. Τουλάχιστον για τώρα, πρόκειται να χρησιμοποιήσουμε βιβλιοθήκες JavaScript (δηλαδή, πολυπληρώσεις) για να αποφύγουμε τη χρήση βιβλιοθηκών JavaScript; Λοιπόν, αυτό είναι «συναρπαστικό».
Η κατώτατη γραμμή, λοιπόν, είναι ότι βρισκόμαστε σε ένα είδος λειτουργίας limbo με το Polymer, καθώς τελικά βασίζεται σε (ή ίσως ακριβέστερα, κατά προσέγγιση) τεχνολογίες προγράμματος περιήγησης που δεν υπάρχουν ακόμη. Συνεπώς, το Polymer.js σήμερα μοιάζει περισσότερο με μια μελέτη για το πώς μπορούν να κατασκευαστούν στοιχειοκεντρικές εφαρμογές στο μέλλον (δηλαδή, όταν όλες οι απαραίτητες λειτουργίες εφαρμόζονται στα μεγάλα προγράμματα περιήγησης και δεν χρειάζονται πλέον πολυπληρώσεις). Όμως, τουλάχιστον προς το παρόν, το Polymer μοιάζει περισσότερο με μια ενδιαφέρουσα ιδέα από μια πραγματική επιλογή για τη δημιουργία ισχυρών εφαρμογών αλλαγής-της προβολής του κόσμου εδώ και τώρα, γεγονός που καθιστά δύσκολη τη σύνταξη (ή την εύρεση) ενός οδηγού Polymer έξω της τεκμηρίωσης της Google.
Αρχιτεκτονική πολυμερών
Τώρα, στον οδηγό μας. Το Polymer.js χωρίζεται αρχιτεκτονικά σε τέσσερα επίπεδα:
Εγγενής: Απαιτούμενες λειτουργίες που διατίθενται προς το παρόν εγγενώς σε όλα τα μεγάλα προγράμματα περιήγησης. Foundation: Polyfills που εφαρμόζουν τις απαραίτητες δυνατότητες του προγράμματος περιήγησης που δεν είναι ακόμη εγγενώς διαθέσιμες στα ίδια τα προγράμματα περιήγησης. (Η πρόθεση είναι να εξαφανιστεί αυτό το επίπεδο με την πάροδο του χρόνου καθώς οι δυνατότητες που παρέχει γίνονται εγγενείς στο πρόγραμμα περιήγησης.) Πυρήνας: Η απαραίτητη υποδομή για στοιχεία πολυμερών για την αξιοποίηση των δυνατοτήτων που παρέχονται από τα στρώματα Native και Foundation .. Στοιχεία: Ένα βασικό σύνολο στοιχείων, που προορίζονται να χρησιμεύσουν ως δομικά στοιχεία που μπορούν να σας βοηθήσουν να δημιουργήσετε την εφαρμογή σας. Περιλαμβάνει στοιχεία που παρέχουν: Βασική λειτουργικότητα όπως ajax, animation, flex layout και χειρονομίες. Ενθυλάκωση περίπλοκων API προγράμματος περιήγησης και διατάξεων CSS. Συστήματα απόδοσης UI, όπως ακορντεόν, κάρτες και πλευρικές γραμμές.
Δημιουργία εφαρμογής πολυμερούς
Για να ξεκινήσετε, υπάρχουν μερικά άρθρα και φροντιστήριο εγγραφές που σας βοηθούν να εισαγάγετε το Polymer, τις έννοιες και τη δομή του. Αλλά αν είστε κάτι σαν εμένα, όταν τα έχετε περάσει και είστε έτοιμοι να δημιουργήσετε πραγματικά την εφαρμογή σας, συνειδητοποιείτε γρήγορα ότι δεν είστε πραγματικά σίγουροι από πού να ξεκινήσετε ή πώς να τη δημιουργήσετε. Δεδομένου ότι έχω περάσει τώρα από τη διαδικασία και το κατάλαβα, εδώ είναι μερικοί δείκτες…
Η ανάπτυξη ιστού πολυμερών αφορά στη δημιουργία στοιχείων και αφορά μόνο τη δημιουργία στοιχείων. Έτσι, σύμφωνα με την παγκόσμια προβολή Polymer, η εφαρμογή μας θα είναι… ένα νέο στοιχείο. Τίποτα περισσότερο και τίποτα λιγότερο. Ω, εντάξει, το καταλαβαίνω. Έτσι ξεκινάμε.
Για το παράδειγμα του έργου Polymer, θα ονομάσω το στοιχείο ανώτατου επιπέδου της εφαρμογής, καθώς τα προσαρμοσμένα ονόματα στοιχείων (ανεξάρτητα από το πλαίσιο που χρησιμοποιείτε για τη δημιουργία τους) πρέπει να περιλαμβάνουν παύλα (π.χ., ετικέτες x, στοιχεία πολυμερούς κ.λπ. .).
Το επόμενο βήμα, ωστόσο, απαιτεί πολύ περισσότερη σκέψη. Πρέπει να αποφασίσουμε πώς θα συνθέσουμε την εφαρμογή μας. Μια εύκολη προσέγγιση είναι απλώς να προσπαθήσουμε να αναγνωρίσουμε, από οπτική άποψη, τα στοιχεία της εφαρμογής μας και στη συνέχεια να προσπαθήσουμε να τα δημιουργήσουμε ως προσαρμοσμένα στοιχεία στο Polymer.
Για παράδειγμα, φανταστείτε ότι έχουμε μια εφαρμογή με τις ακόλουθες οθόνες:
Μπορούμε να αναγνωρίσουμε ότι η επάνω γραμμή και το μενού της πλευρικής γραμμής δεν πρόκειται να αλλάξουν και το πραγματικό 'περιεχόμενο' της εφαρμογής θα μπορούσε να φορτώσει διαφορετικές 'προβολές'.
Σε αυτήν την περίπτωση, μια λογική προσέγγιση θα ήταν να δημιουργήσουμε το στοιχείο για την εφαρμογή μας και, μέσα σε αυτό το στοιχείο, θα μπορούσαμε να χρησιμοποιήσουμε κάποια στοιχεία Polimer UI για να δημιουργήσουμε το μενού της επάνω γραμμής και της πλευρικής γραμμής.
Στη συνέχεια, μπορούμε να δημιουργήσουμε τις δύο κύριες προβολές μας, τις οποίες θα ονομάσουμε ListView και το SingleView, για φόρτωση στην περιοχή 'περιεχόμενο'. Για τα στοιχεία στο ListView, μπορούμε να δημιουργήσουμε ένα ItemView.
Αυτό θα δώσει στη συνέχεια μια δομή κάπως έτσι:
Τα καλά νέα
Τώρα που έχουμε το παράδειγμα εφαρμογής Polymer, μπορούμε να το εισαγάγουμε σε οποιαδήποτε ιστοσελίδα μόνο εισάγοντας το 'toptal-app.html' και προσθέτοντας την ετικέτα γιατί, τελικά, η εφαρμογή μας είναι απλώς ένα στοιχείο. Είναι ωραίο.
Στην πραγματικότητα, εκεί βρίσκεται πολύ η δύναμη και η ομορφιά του παραδείγματος του Πολυμερούς. Τα προσαρμοσμένα στοιχεία που δημιουργείτε για την εφαρμογή σας (συμπεριλαμβανομένου ενός ανώτατου επιπέδου για ολόκληρη την εφαρμογή σας) αντιμετωπίζονται ως οποιοδήποτε άλλο στοιχείο σε μια ιστοσελίδα. Επομένως, μπορείτε να αποκτήσετε πρόσβαση στις ιδιότητες και τις μεθόδους τους από οποιονδήποτε άλλο κώδικα JavaScript ή βιβλιοθήκη (π.χ. Backbone.js , Angular.js , και τα λοιπά.). Μπορείτε ακόμη και να χρησιμοποιήσετε αυτές τις βιβλιοθήκες για να δημιουργήσετε τα δικά σας νέα στοιχεία.
Επιπλέον, τα προσαρμοσμένα στοιχεία σας είναι συμβατά με άλλες βιβλιοθήκες προσαρμοσμένων στοιχείων (όπως το Mozilla's Χ ημέρα ). Επομένως, δεν έχει σημασία τι χρησιμοποιείτε για να δημιουργήσετε το δικό σας προσαρμοσμένο στοιχείο, είναι συμβατό με το Polymer και οποιαδήποτε άλλη τεχνολογία προγράμματος περιήγησης.
Επομένως, δεν προκαλεί έκπληξη το γεγονός ότι έχουμε ήδη αρχίσει να βλέπουμε την έλευση μιας κοινότητας δημιουργών στοιχείων που εκθέτει και μοιράζεται τα νεοδημιουργημένα στοιχεία τους σε φόρουμ όπως το Προσαρμοσμένα στοιχεία ιστοσελίδα. Μπορείτε να πάτε εκεί και να πάρετε οποιοδήποτε στοιχείο χρειάζεστε και απλώς να το χρησιμοποιήσετε στην εφαρμογή σας.
Αφ 'ετέρου…
Το Polymer είναι ακόμη αρκετά νέα τεχνολογία που ειδικά για τους προγραμματιστές αρχάριοι προγραμματιστές εφαρμογών , είναι πιθανό να το βρίσκουν κάπως εύθραυστο, με μια σειρά από τραχύ άκρα που δεν είναι τόσο δύσκολο να βρεθούν.
Ακολουθεί ένα δείγμα:
- Έλλειψη τεκμηρίωσης και καθοδήγησης.
- Δεν τεκμηριώνονται όλα τα στοιχεία Polimer.js UI και non-UI. Μερικές φορές η μόνη «καθοδήγηση» σχετικά με τον τρόπο χρήσης τους είναι ο κωδικός επίδειξης. Σε ορισμένες περιπτώσεις, είναι ακόμη απαραίτητο να αναφερθείτε στον πηγαίο κώδικα ενός Πολυμερούς Στοιχείου για να κατανοήσετε καλύτερα πώς λειτουργεί και μπορεί / πρέπει να χρησιμοποιηθεί.
- Δεν είναι απολύτως σαφές πώς να οργανώσετε μεγαλύτερες εφαρμογές. Συγκεκριμένα, πώς υποτίθεται ότι περνάτε μόνο αντικείμενα μεταξύ στοιχείων; Ποια στρατηγική πρέπει να ακολουθήσετε για να δοκιμάσετε τα προσαρμοσμένα στοιχεία σας; Η καθοδήγηση για αυτά τα είδη ζητημάτων σε αυτό το σημείο είναι ελάχιστη στην καλύτερη περίπτωση.
-
Σφάλματα εξάρτησης και έκδοση-itis. Ακόμη και όταν κάνετε λήψη στοιχείων Polymer.js όπως συνιστάται, ενδέχεται να βρεθείτε με σφάλμα εξάρτησης, δείχνοντας διαφορετικές εξαρτήσεις έκδοσης στο ίδιο στοιχείο. Ενώ είναι κατανοητό ότι τα Πολυμερή Στοιχεία βρίσκονται υπό βαριά ανάπτυξη, αυτά τα προβλήματα μπορούν να κάνουν την ανάπτυξη αρκετά δύσκολη, διαβρώνοντας την εμπιστοσύνη και το ενδιαφέρον του προγραμματιστή.
- Προβλήματα σε πλατφόρμες για κινητά. Η απόδοση του Polymer.js σε πλατφόρμες για κινητά μπορεί συχνά να βρίσκεται ανάμεσα σε απογοητευτικές και προβληματικές.
- Λήψη ολόκληρης της βιβλιοθήκης και των πολυπληρωμάτων (χωρίς gzip Το 'ing) είναι αργό και πρέπει να κάνετε λήψη κάθε στοιχείου Polymer που σκοπεύετε να χρησιμοποιήσετε.
- Η επεξεργασία των πολυπληρωμάτων, βιβλιοθηκών και προσαρμοσμένων στοιχείων φαίνεται να είναι μια δαπανηρή εργασία σε πλατφόρμες για κινητά. Ακόμα και όταν ολοκληρωθεί η λήψη, εξακολουθείτε να έχετε μια κενή οθόνη για λίγα δευτερόλεπτα.
- Ειδικά για πιο περίπλοκες λειτουργίες (όπως μεταφορά και απόθεση ή απόδοση σε καμβά), μπορεί να διαπιστώσετε ότι η λειτουργικότητα που λειτουργεί καλά στην επιφάνεια εργασίας απλά δεν λειτουργεί σωστά ή δεν υποστηρίζεται ακόμη, στην πλατφόρμα για κινητά. Στη δική μου περίπτωση, μια τέτοια απογοήτευση που συνάντησα ήταν απόδοση σε καμβά στο iOS .
- Ανεπαρκής ή συγκεχυμένη αναφορά σφαλμάτων. Μερικές φορές, όταν κάνετε ορθογραφικό λάθος ένα όνομα χαρακτηριστικού ή απλώς σπάσετε κάτι που σχετίζεται με το ίδιο το βασικό επίπεδο, λαμβάνετε ένα παράξενο μήνυμα σφάλματος στην κονσόλα σας με δύο στοίβες κλήσεων που πρέπει να διερευνήσετε για να προσπαθήσετε να προσδιορίσετε πού βρίσκεται το πρόβλημα. Μερικές φορές είναι εύκολο να το λύσετε, αλλά μερικές φορές καταλήγετε να δοκιμάσετε μια εντελώς διαφορετική στρατηγική για να αποφύγετε το σφάλμα, καθώς δεν μπορείτε να εντοπίσετε την πηγή του.
συμπέρασμα
Το πολυμερές είναι ενδιαφέρουσα τεχνολογία, αλλά είναι αναμφισβήτητα ακόμα στα σπάργανα. Ως εκ τούτου, δεν ταιριάζει ακόμα στην ανάπτυξη μιας μεγάλης, επιχειρησιακής εφαρμογής, έτοιμης για παραγωγή εφαρμογής. Επιπλέον, δεν υπάρχουν πολλοί οδηγοί ή σεμινάρια διαθέσιμα ειδικά για την ανάπτυξη ιστού Polymer.js.
Όσον αφορά το κατά πόσον η προσέγγιση με επίκεντρο τη JavaScript ή με βάση το DOM είναι πραγματικά θεμελιωδώς καλύτερη, η κριτική επιτροπή εξακολουθεί να είναι εκτός. Το πολυμερές κάνει κάποια πειστικά επιχειρήματα, αλλά υπάρχουν αντίθετα επιχειρήματα.
ταμείο αναζήτησης έναντι ιδιωτικών κεφαλαίων
Ίσως το πιο σημαντικό, το Polymer απαιτεί ένα αρκετά σημαντικό επίπεδο εμπειρογνωμοσύνης στη χρήση τεχνολογιών προγράμματος περιήγησης όπως το DOM. Επιστρέφετε με πολλούς τρόπους στις ημέρες πριν από το jQuery, μαθαίνοντας το DOM API για να κάνετε απλές εργασίες, όπως προσθήκη ή κατάργηση κλάσης CSS από ένα στοιχείο. Αυτό σίγουρα το κάνει να αισθάνεται, τουλάχιστον σε κάποιο επίπεδο, σαν να κάνετε ένα βήμα προς τα πίσω και όχι προς τα εμπρός.
Ωστόσο, φαίνεται πιθανό ότι τα προσαρμοσμένα στοιχεία θα αποτελέσουν σημαντικό μέρος της ανάπτυξης ιστού στο μέλλον, οπότε η κατάδυση νωρίτερα και όχι αργότερα θα ήταν πιθανότατα συνετή για τον σημερινό προγραμματιστή ιστού. Και αν δεν έχετε προσπαθήσει ποτέ να δημιουργήσετε τα δικά σας προσαρμοσμένα στοιχεία, το Polymer (και αυτό το σεμινάριο) είναι πιθανώς ένα λογικό μέρος για να ξεκινήσετε.
Σχετίζεται με: Tutorial Meteor: Δημιουργία εφαρμογών Ιστού σε πραγματικό χρόνο με τον Meteor
