Νέοι πόροι για σχεδιαστές ιστοσελίδων και προγραμματιστές (Ιανουάριος 2018)

Το νέο έτος 2018 είναι εδώ. Αν εξετάσουμε την πρόοδο στην ανάπτυξη ιστού πριν από πέντε χρόνια, είναι εντελώς διαφορετικό από αυτό που έχουμε σήμερα. Σήμερα υπάρχουν νέα μεθόδους, εργαλεία και ακόμη και ένα εντελώς νέο υπόδειγμα που αλλάζει τον τρόπο που χτίζουμε σήμερα ιστότοπους - και το VirtualDOM είναι ένα από αυτά.

Το DOM (Μοντέλο αντικειμένου εγγράφου) είναι a δέντρο που καθορίζει τον τρόπο δομής μιας ιστοσελίδας. Η επιλογή, η μετακίνηση και ο χειρισμός του DOM μπορεί να είναι μια πολύ δαπανηρή στάση και μπορεί παρεμποδίζουν την απόδοση της απόδοσης του ιστότοπού σας.

Ωστόσο, σε αυτήν την ανάρτηση δεν θα συζητήσουμε για το πώς λειτουργεί το VirtualDOM, αλλά μαζί με τα άλλα εργαλεία, θα εξετάσουμε βιβλιοθήκες που σας επιτρέπουν να εφαρμόσετε το VirtualDOM αμέσως. Ας τα ελέγξουμε.

MaquetteJS

Ενα εφαρμογή του VirtualDOM που σας επιτρέπει να δημιουργήσετε περιβάλλον εργασίας χρήστη υγρών που να ενημερώνεται με τα δεδομένα γύρω από αυτό. Είναι ένα καθαρό JavaScript και ανοιχτό βιβλιοθήκη έτσι είναι δυνατόν χρησιμοποιήστε το μαζί με μια συνθετική γλώσσα όπως το CoffeeScript, το TypeScript και το JSX. Μια μεγάλη εναλλακτική βιβλιοθήκη στο React.js. Το MaquetteJS είναι πολύ μικρότερο σε μέγεθος (μόνο 3kb) συγκριτικά.

ReDOM

Αυτή είναι μια από τις αγαπημένες μου βιβλιοθήκες του VirtualDOM, καθώς είναι εύκολο να το πάρει μόνο κοιτάζοντας τη σύνταξη. Με μόλις 2Kb, μπορείτε να δημιουργήσετε μια ιστοσελίδα με γρήγορη απόδοση ή προσαρμοσμένη συνιστώσα HTML. Η βιβλιοθήκη συνίσταται δύο βασικές λειτουργίες el, για να δημιουργήσετε ή να χειριστείτε ένα στοιχείο, και βουνό για να την προσθέσετε σε ένα επιλεγμένο στοιχείο. Μπορείτε να το φορτώσετε στο πρόγραμμα περιήγησης και στην πλευρά του διακομιστή με το NodeJS.

ReactiveJS

Μια τέχνη UI βιβλιοθήκη για την οικοδόμηση υψηλής διαδραστικής εφαρμογής web. Αρχικά χτίστηκε για TheGuardian, ReactiveJS είναι χτισμένο για να εργάζονται σε προγράμματα περιήγησης και κινητές συσκευές? ώστε να μπορείτε να εξαρτάτε από την αξιοπιστία του. Το ReactiveJS έρχεται επίσης με πολλά χαρακτηριστικά που απαιτούνται για τη σύγχρονη εφαρμογή στο διαδίκτυο, ακριβώς έξω από το κουτί, όπως το Scoped CSS, τα προσαρμοσμένα στοιχεία, το SVG και η κινούμενη εικόνα.

RiotJS

RitoJS είναι ένα ευχάριστο να εργαστεί με και πολύ πιο εύκολο να μάθει βιβλιοθήκη για αρχάριους όπως αυτό επιτρέπει τον ορισμό ενός προσαρμοσμένου στοιχείου με στοιχείο HTML και τα χαρακτηριστικά HTML, ενώ οι προηγούμενες βιβλιοθήκες θα αναγκάσουν να χρησιμοποιήσουν καθαρή σύνταξη JavaScript.

Το RiotJS είναι συμβατό με το περιβάλλον Node.js ή στα προγράμματα περιήγησης και θα μπορούσε να είναι α μεγάλη εναλλακτική λύση για το Vue.js, δεδομένης της ομοιότητας.

HyperHTML

hyperHTML, όπως υποδηλώνει το όνομα, παρουσιάζει απόδοση κατά την απόδοση και τον χειρισμό του DOM. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε προσαρμοσμένο στοιχείο και συστατικό Web. Λειτουργεί τόσο εύκολα όπως το jQuery στο οποίο μπορεί να χρησιμοποιηθεί στο πρόγραμμα περιήγησης από τη φόρτωση της δέσμης ενεργειών από το CDN και την πρόσβαση στο hyperHTML. Δεν χρειάζεται περίπλοκη εργαλεία.

Mithril

Όσο δροσερό κι αν ακούγεται, ο Mithril είναι α ισχυρή βιβλιοθήκη JavaScript. Εκτός από το VirutalDOM και τα Components, η Mithril είναι επίσης εξοπλισμένη με δρομολόγηση και XHR με την οποία μπορείτε να δημιουργήσετε μια εφαρμογή ιστού μιας σελίδας χωρίς να βασίζεστε σε άλλη βιβλιοθήκη. Το δείκτη μέτρησης δείχνει ότι ξεπερνάει ορισμένες δημοφιλείς βιβλιοθήκες όπως οι Vue.js, React.js και γωνιακές.

SlimJS

SlimJS είναι μια βιβλιοθήκη JavaScript για να δημιουργήστε προσαρμοσμένη συνιστώσα ιστού χρησιμοποιώντας το native Component API του Web. Δεδομένου ότι είναι χτισμένο γύρω από το εγγενές στοιχείο περιήγησης SlimJS είναι εξοπλισμένο με ένα Polyfill το οποίο σαρώνει το API στο πρόγραμμα περιήγησης που δεν το υποστηρίζει ακόμα. Είναι ένα εξαιρετικό πλαίσιο αν προτιμάτε να υιοθετήσετε τον εγχώριο τρόπο.

VSVG

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

EmotionSH

EmotionSH είναι CSS-in-JS πλαίσιο που μπορεί να χρειαστείτε όταν δημιουργείτε ιστοσελίδα με το VirtualDOM. Αυτό σας επιτρέπει να παραδώσετε μόνο τα κομμάτια CSS που απαιτούνται στον ιστότοπό σας και μπορείτε ενημερώστε δυναμικά το στυλ χωρίς να ενοχληθεί με την ονομασία κλάσης και την ιδιαιτερότητα καθώς το στυλ έχει σκοπό μόνο το συστατικό που εφαρμόζεται.

Αντιδράστε το κιτ εκκίνησης

Εάν παρακολουθείτε τον ιστό τα τελευταία δύο χρόνια, θα βρείτε το React (σχεδόν) κάθε φορά. Αυτό είναι ένα 5 βραδιά βίντεο που εισάγει το React. Αν θέλετε να συμβαδίσετε με τη βιομηχανία, ίσως είναι το κατάλληλο μέρος για να ξεκινήσετε.

Στοιχεία

Τα στοιχεία είναι μια συλλογή από iOS για τη δημιουργία πρωτότυπου εφαρμογής iOS στο Sketch. Είναι χτισμένο από τους ανθρώπους από το Sketch και έχει ενημερωθεί με το iPhone X UI.

Modaal

Το Modaal είναι μια βιβλιοθήκη JavaScript που έχει σχεδιαστεί με γνώμονα την προσβασιμότητα. Ήταν επαληθευμένα για “Υποστήριξη WCAG 2.0 Επίπεδο ΑΑ” ότι (νομίζω) το πιο προσιτός “Τροπικός” βιβλιοθήκη σήμερα. Του ελαφρύ, συμβατό με jQuery και μπορεί να χρησιμοποιηθεί για εικόνες, βίντεο και ακόμη και για το Instagram. Επιπλέον, αυτό το σύντομο μάθημα από την Google θα σας βοηθήσει να ξεκινήσετε με την Προσβασιμότητα στο Web και γιατί είναι σημαντικό.

WordPressify

Ένα πακέτο NPM που σας επιτρέπει να αποκτήσετε ένα περιβάλλον ανάπτυξης του WordPress σε λειτουργία μέσα σε λίγα λεπτά. Είναι όλα μαζί σύγχρονα εργαλεία όπως Gulp, LiveReload, PostCSS, Babel ώστε να μπορείτε να εστιάσετε στην ανάπτυξη του έργου σας και όχι στη ρύθμιση παραμέτρων.

Lando

Το Lando είναι επίσης ένα εύχρηστο εργαλείο για την γρήγορη και εύκολη ανάπτυξη ενός περιβάλλοντος ανάπτυξης WordPressify που μόλις αναφέρθηκε παραπάνω. Αλλά αντί του Node.js, χρειάζεται πλεονέκτημα του Docker είναι ένα ελαφρύ κοντέινερ τεχνολογία και προσφέρει μεγαλύτερη ευελιξία σε σχέση με τη στοίβα που θα θέλατε να χρησιμοποιήσετε για την ανάπτυξή σας.

Για παράδειγμα, μπορείτε καθορίστε την έκδοση PHP, ενεργοποιήστε το XDebug και εγκαταστήστε το Composer.

WP-Docklines

Το WP-Docklines είναι α συλλογή εικόνων που μπορείτε να χρησιμοποιήσετε ως βασική γραμμή για να πραγματοποιήσετε συνεχή ολοκλήρωση και παράδοση για τα WordPress θέματα και τις πινελιές σε υπηρεσίες όπως Bitbucket, CircleCI και Gitlab. Κάθε εικόνα συνοδεύεται με εργαλεία που συνήθως χρειάζονται κατά την ανάπτυξη του WordPress όπως το PHP Code Sniffer, το PHPUnit και το WP-CLI.

WP-Locker

Το WP-Locker είναι το Docker Compose για να περιστρέψετε ένα περιβάλλον ανάπτυξης του WordPress σε λίγα μόνο λεπτά. είναι με Apache, MySQL και phpMyAdmin και δεδομένου ότι επεκτείνει την εικόνα WP-Docklines, πραγματοποιεί επίσης τα επιπλέον εργαλεία στην εικόνα εκτός πλαισίου.

Απλά τύπος bin / start για να το αφήσετε, διαμορφώστε το localhost και να εγκαταστήσετε plugins και τα θέματα που έχετε ρυθμίσει στο αρχείο ρυθμίσεων.

Docusaurus

Μια άλλη πρωτοβουλία ανοιχτού κώδικα από το Facebook, Το Docusaurus είναι ένα εργαλείο για τη δημιουργία μιας ιστοσελίδας τεκμηρίωσης του έργου σας. Χτισμένο με React και Markdown, μπορείτε εύκολα να συντάξετε τεκμηρίωση, να το διατηρήσετε και ακόμα να δημιουργήσετε ένα blog για τον ιστότοπό σας, και δημοσιεύστε το στο Github Pages.

VSCode Yo

Το Yeoman είναι ένα πακέτο κόμβων που σας επιτρέπει να ξεκινήσετε γρήγορα το έργο επιλέγοντας προκατασκευασμένα σκαλωσιά που ταιριάζουν στα έργα σας. Αν χρησιμοποιείτε κώδικα Visual Studio, αυτό το πρόσθετο θα εξομαλύνει ακόμα περισσότερο τη ροή εργασίας εκκίνησης, όπως σας επιτρέπει εκτελέστε το “Yo” εντολή δεξιά από το παράθυρο κώδικα Visual Studio.

BluebirdJS

Μια βιβλιοθήκη JavaScript που σας επιτρέπει να χρησιμοποιήσετε Υπόσχεση, αναμένω, async σήμερα σε όλα τα προγράμματα περιήγησης. δήλωσε ότι λειτουργεί ακόμη και στο Netscape. Υπόσχεση είναι ένα από τα ισχυρότερα σημεία στις πιο πρόσφατες προδιαγραφές JavaScript που θα μπορούσαν καθιστούν τον κώδικα σας πιο ευέλικτο, ευανάγνωστο και εύκολα συντηρητικό.

Πιο όμορφο

Prettier είναι ένα εργαλείο για διαμορφώστε τον κωδικό σας ώστε να συμμορφώνεται με το πρότυπο κωδικοποίησης της γλώσσας. Θα ξαναγράψει τον κώδικα σας από το scracth ακολουθώντας τον κανόνα που επιτρέπει σε εσάς και την ομάδα σας πιο παραγωγικό, αντί να συζητά πάνω από τα στυλ γραφής κώδικα.