משאבים חדשים עבור מעצבי אתרים ומפתחים (ינואר 2018)

השנה החדשה 2018 כאן. אם נבחן את ההתקדמות בפיתוח האינטרנט לפני חמש שנים, זה שונה לחלוטין ממה שיש לנו היום. היום יש חדש שיטות, כלים ואפילו פרדיגמה חדשה זה משנה את הדרך בה אנו בונים אתרי אינטרנט היום - ו VirtualDOM הוא אחד מהם.

DOM (אובייקט אובייקט מסמך) הוא מודל עץ אשר מגדיר כיצד אתר אינטרנט מובנה. בחירה, מעבר, ו מניפולציה DOM יכול להיות opreration יקר מאוד עשוי יפריע לביצועי עיבוד האתר שלך.

עם זאת, בהודעה זו לא נדון כיצד VirtualDOM עובד, במקום זאת, יחד עם כלים אחרים, אנחנו נסתכל ספריות המאפשרות לך ליישם VirtualDOM מיד. בואו נבדוק אותם.

MaquetteJS

An יישום זה מאפשר לך לבנות ממשק משתמש נוזל שמתעדכן עם הנתונים סביבו. זה JavaScript טהור ו ללא שינוי ספריה ולכן אפשר להשתמש בו יחד עם שפה סינתטית כגון CoffeeScript, TypeScript ו- JSX. ספריה חלופית מצוינת React.js; MaquetteJS הוא הרבה יותר קטן בגודל (בלבד 3kb).

ReDOM

זהו אחד הספריות האהובות עלי VirtualDOM, כמו קל להרים אותו רק על ידי התבוננות בתחביר. עם רק 2Kb, באפשרותך לבנות דף אינטרנט במהירות עיבוד או רכיב HTML מותאם אישית. הספריה מורכבת שתי פונקציות עיקריות el, ליצור או לתפעל אלמנט, ו הר כדי להוסיף אותו לאלמנט שנבחר. אתה יכול לטעון אותו בדפדפן בצד השרת עם NodeJS.

ReactiveJS

תבנית UI הספרייה לבנות יישום אינטרנט אינטראקטיבי מאוד. נבנה במקור עבור TheGuardian, ReactiveJS בנוי לעבוד על פני דפדפנים והתקנים ניידים; כך שתוכל לסמוך על האמינות שלה. ReactiveJS גם מגיע עם תכונות רבות הדרושות עבור יישום האינטרנט המודרני ימין מחוץ לקופסה, כגון Scoped CSS, רכיבים מותאמים אישית, SVG, ואנימציה.

התפרעות

RitoJS הוא נעים לעבוד עם הרבה יותר קל ללמוד ספרייה למתחילים כמו זה מאפשר הגדרת רכיב מותאם אישית עם אלמנט HTML ואת תכונות HTML בזמן הספריות הקודמות יאלצו להשתמש בתחביר JavaScript טהור.

RiotJS תואם Node.js environement או בדפדפנים, והוא יכול להיות חלופה מצוינת Vue.js נתון similarties.

היפר

היפר, כפי שהשם מרמז, תכונות ביצועים בעת עיבוד DOM ו מניפולציה. ניתן להשתמש בו כדי ליצור רכיב מותאם אישית ואת רכיב האינטרנט. זה עובד קל כמו jQuery שבו ניתן להשתמש בדפדפן על ידי טוען את התסריט מן CDN וגישה hyperHTML. אין צורך להסתבך נוסע.

מיתריל

מגניב כמו שזה נשמע, Mitril הוא ספריית JavaScript רב עוצמה. מלבד VirutalDOM ורכיבים, Mithril מצויד גם ניתוב XHR עם אשר אתה יכול לבנות דף אינטרנט יישום אינטרנט ללא להסתמך על כל ספריה אחרת. מבחן השוואת ביצועים מראה שהוא עולה בביצוע על כמה ספריות פופולריות כגון Vue.js, React.js ו- Angular.

SlimJS

SlimJS היא ספריית JavaScript ל לבנות רכיב אינטרנט מותאם אישית באמצעות האינטרנט API רכיב רכיב. מאז זה בנוי סביב רכיב הדפדפן יליד SlimJS מצויד עם מילוי אשר shims API ב דפדפן זה עדיין לא תומך בו. זוהי מסגרת גדולה אם אתה מעדיף לאמץ את הדרך המקומית.

VSVG

אמנם יש תחביר דומה HTML, SVG הוא סוג אחר של חיה עם quirks משלה. ספריה זו, כפי שהשם מרמז, תהיה מאפשרים לך ליצור ולטפל SVG על לטוס.

רגש

EmotionSH הוא CSS-in-JS מסגרת ייתכן שיהיה עליך בעת בניית אתר אינטרנט עם VirtualDOM. זה מאפשר לך לספק רק סיביות של CSS צורך באתר שלך ואתה יכול לעדכן באופן דינמי את הסטיילינג מבלי להיות מאורגן עם שמות בכיתה וספציפיות כמו הסגנון הוא scopped רק את רכיב זה מוחל על.

React Starter Kit

אם אתה עוקב אחר האינטרנט בשנתיים האחרונות, תוכל למצוא את React (כמעט) בכל מקום. זה 5 קורס וידאו קצר מציג React. אם אתה רוצה לשמור על קשר עם התעשייה, אלה עשויים להיות המקום הנכון להתחיל.

אלמנטים

אלמנטים הוא אוסף של רכיבי iOS כדי ליצור אב טיפוס של אפליקציית iOS ב- Sketch. זה נבנה על ידי אנשים על ידי סקיצה ו עודכנה עם iPhone X UI.

מודאל

Modaal היא ספריית JavaScript שנבנתה עם attesibility בראש. זה היה אומת עבור “WCAG 2.0 רמה AA תמיכה” זה (אני חושב) ביותר נגיש “מודאלית” הספרייה היום. זה קל, תואם jQuery, והוא יכול לשמש עבור תמונות, קטעי וידאו, ואפילו Instagram. יתר על כן, זה קורס קצר מ- Google יעזור לך להתחיל עם נגישות לאינטרנט ולמה זה חשוב.

וורדפרסיפי

חבילת NPM המאפשרת לך לקבל פיתוח וורדפרס environement ולהפעלתו בתוך דקות. הכול מוכן כלים מודרניים כמו גביע, LiveReload, PostCSS, בבל כך שתוכל להתמקד בפיתוח הפרוייקט שלך במקום הגדרת תצורה.

לנדו

Lando הוא גם כלי שימושי כדי לסובב את סביבת הפיתוח במהירות ובקלות, כמו הרבה וורדפרסיפי כי אנחנו רק שהוזכר לעיל. אבל במקום Node.js, זה לוקח היתרון של Docker מיכל קל טכנולוגיה והיא מציעה גמישות רבה יותר בטווח של מחסנית אתה רוצה להשתמש בפיתוח שלך.

לדוגמה, אתה יכול לציין את גירסת PHP, לאפשר XDebug, ולהתקין מלחין.

WP-Docklines

WP-Docklines הוא אוסף של תמונות, כי אתה יכול להשתמש בתור בסיס כדי לבצע אינטגרציה רציפה משלוח עבור נושאים וורדפרס שלך pluins שירותים כמו Bitbucket, CircleCI, ו Gitlab. כל תמונה מקובצת יחד כלים הדרושים בדרך כלל בעת פיתוח וורדפרס כגון PHP קוד Sniffer, PHPUnit, ו- WP-CLI.

WP- לוקר

WP-Locker הוא Docker לחבר את התצורה כדי לסובב את סביבת הפיתוח של וורדפרס בתוך דקות ספורות. זה להגדיר עם Apache, MySQL ו phpMyAdmin ומאז הוא מרחיב תמונה WP-Docklines, הוא גם מבצע את הכלים הנוספים על התמונה מחוץ לקופסה.

בפשטות הקלד bin / להתחיל לתת לו, להגדיר את מארח מקומי ולהתקין תוספים וערכות נושא שהגדרתם בקובץ התצורה.

Docusaurus

עוד יוזמה של קוד פתוח מפייסבוק, Docusaurus הוא כלי ליצירת אתר תיעוד של הפרויקט שלך. נבנה עם React ו Markdown, אתה יכול בקלות לכתוב תיעוד, לשמור את זה, ואפילו ליצור בלוג עבור האתר שלך, ו פרסם אותו בדפי גייתוב.

VSCode Yo

Yoman היא חבילת הצומת המאפשר לך להתחיל את הפרויקט במהירות על ידי בחירת מראש פיגומים שיתאימו לפרויקטים שלך. אם אתה משתמש Visual Studio קוד, תוסף זה יהיה לייעל את זרימת העבודה להתחיל עוד יותר כפי שהוא מאפשר לך הפעל את “יו” הפקודה מימין מתוך חלון Visual Studio קוד.

ציפור כחולה

ספריית JavaScript כי מאפשר לך להשתמש הבטחה, ממתין, סינכרון היום בכל הדפדפנים; אמר שזה אפילו עובד בנטסקייפ. הבטחה היא אחת הנקודות החזקות ביותר במפרטי ה- JavaScript האחרונים להפוך את הקוד leaner, קריא, ותחזוקה בקלות.

יפה יותר

יפה יותר הוא כלי לעצב את הקוד שלך כדי להתאים את תקן קידוד השפה. זה יהיה לשכתב את הקוד שלך מן scracth בעקבות הכלל המאפשר לך ואת הצוות שלך להיות פרודוקטיבי יותר במקום דיון על סגנונות כתיבת קוד.