موارد جديدة لمصممي ومطوري الويب (يناير 2018)

العام الجديد 2018 هنا. إذا نظرنا إلى التقدم المحرز في تطوير الويب قبل خمس سنوات ، فهذا مختلف تمامًا عما لدينا اليوم. اليوم هناك جديد الأساليب والأدوات وحتى نموذج جديد بالكامل الذي يغير الطريقة التي نبني بها مواقع الويب اليوم - VirtualDOM هو واحد منهم.

DOM (نموذج كائن المستند) هو نموذج الشجرة الذي يحدد كيفية تنظيم موقع الويب. قد يكون اختيار DOM وإجتيازها ومعالجتها بمثابة عملية غالية الثمن للغاية وقد تكون كذلك تعيق أداء تقديم موقعك.

ومع ذلك ، لن نناقش في هذا المنشور كيفية عمل VirtualDOM ، بدلاً من ذلك ، إلى جانب الأدوات الأخرى ، سننظر فيها المكتبات التي تسمح لك بتطبيق VirtualDOM على الفور. دعونا التحقق منها.

MaquetteJS

ل تنفيذ VirtualDOM الذي يسمح لك ببناء واجهة مستخدم سائلة تحافظ على تحديث البيانات الموجودة حولها. انها جافا سكريبت نقية و unopiniated مكتبة وبالتالي فمن الممكن أن استخدمها جنبًا إلى جنب مع لغة تركيبية مثل CoffeeScript و TypeScript و JSX. مكتبة بديلة كبيرة ل React.js. MaquetteJS أصغر بكثير في الحجم (فقط 3KB) بشكل مشابه.

ReDOM

هذه واحدة من مكتبات VirtualDOM المفضلة ، حيث من السهل التقاطها بمجرد النظر إلى بناء الجملة. مع 2 كيلو بايت فقط, يمكنك إنشاء صفحة ويب سريعة التقديم أو مكون HTML مخصص. تتكون المكتبة وظيفتان رئيسيتان شرم, لإنشاء أو معالجة عنصر, و تتزايد لإضافته إلى عنصر محدد. يمكنك تحميله في المستعرض وجانب الخادم باستخدام NodeJS.

ReactiveJS

templating مكتبة واجهة المستخدم لبناء تطبيق الويب التفاعلي للغاية. صُمم ReactiveJS في الأصل لصالح TheGuardian ، وهو مصمم للعمل عبر المتصفحات والأجهزة المحمولة ؛ حتى تتمكن من الاعتماد على موثوقيتها. ReactiveJS كما يأتي مع العديد من الميزات اللازمة لتطبيق الويب الحديث مباشرة خارج الصندوق, مثل Scoped CSS والمكونات المخصصة و SVG والرسوم المتحركة.

RiotJS

يعد تطبيق RitoJS ممتعًا للعمل مع مكتبة المبتدئين وأسهل بكثير لتعلمها يسمح بتحديد عنصر مخصص مع عنصر HTML وسمات HTML في حين ستفرض المكتبات السابقة استخدام بناء جملة JavaScript خالص.

RiotJS متوافق مع Node.js environement أو في المتصفحات ، ويمكن أن يكون بديل كبير ل Vue.js بالنظر إلى التشابه.

HyperHTML

hyperHTML, كما يوحي الاسم, ميزات الأداء عند تقديم ومعالجة DOM. يمكنك استخدامه لإنشاء Custom Element و Web Component. إنه يعمل بسهولة مثل jQuery والذي يمكن استخدامه في المتصفح به تحميل البرنامج النصي من CDN والوصول إلى hyperHTML. لا حاجة معقدة الأدوات.

Mithril

بارد كما يبدو ، Mithril هو مكتبة جافا سكريبت قوية. بصرف النظر عن VirutalDOM والمكونات ، تم تجهيز Mithril أيضًا مع Routing و XHR يمكنك إنشاء تطبيق ويب من صفحة واحدة دون الاعتماد على أي مكتبة أخرى. يوضح Benchmark أنه يتفوق على بعض المكتبات الشائعة مثل Vue.js و React.js و Angular.

SlimJS

SlimJS هي مكتبة جافا سكريبت ل بناء مكون ويب مخصص باستخدام واجهة برمجة تطبيقات Web Component الأصلية. لأنه مبني حول مكون المتصفح الأصلي ، تم تجهيز SlimJS بـ Polyfill الذي يحجب API في المتصفح الذي لا يدعم ذلك حتى الآن. إنه إطار رائع إذا كنت تفضل اعتماد الطريقة الأصلية.

VSVG

بينما يحتوي على بناء جملة مماثل لـ HTML ، فإن SVG هو نوع آخر من الوحش مع المراوغات الخاصة به. هذه المكتبة ، كما يوحي الاسم ، سوف تسمح لك بإنشاء SVG ومعالجتها أثناء الطيران.

EmotionSH

العاطفة هي إطار CSS-in-JS الذي قد تحتاجه عند إنشاء موقع ويب باستخدام VirtualDOM. يتيح لك ذلك تقديم وحدات بت فقط من CSS المطلوبة على موقعك ويمكنك ذلك تحديث حيوي التصميم دون التورط مع تسمية وخصوصية الفصل حيث يتم تفكيك النمط إلى المكون الذي يتم تطبيقه عليه فقط.

رد فعل كاتب كيت

إذا كنت تتابع الويب في العامين الماضيين ، فستجد React (تقريبًا) في كل مكان. هذا ال 5 دورة فيديو قصيرة تقديم رد. إذا كنت ترغب في مواكبة الصناعة ، فقد تكون هذه هي المكان المناسب للبدء.

عناصر

العناصر هي مجموعة من مكونات iOS لإنشاء نموذج أولي لتطبيق iOS في Sketch. قام بتصميمه الأشخاص بواسطة Sketch وتم تحديثه باستخدام iPhone X UI.

Modaal

Modaal هي مكتبة جافا سكريبت مصممة مع مراعاة القابلية للتطبيق. لقد كان تم التحقق منه لـ “WCAG 2.0 المستوى ألف دعم” هذا (على ما أظن) أكثر يمكن الوصول “شكلي” مكتبة اليوم. انها خفيفة الوزن ومتوافقة مع jQuery ويمكن استخدامها للصور ومقاطع الفيديو وحتى في Instagram. علاوة على ذلك ، ستساعدك هذه الدورة القصيرة من Google في البدء في إمكانية الوصول إلى الويب ولماذا تعتبر مهمة.

WordPressify

حزمة NPM التي تتيح لك الحصول على بيئة تطوير WordPress وتشغيلها في دقائق. كل شيء مع إعداد أدوات حديثة مثل Gulp و LiveReload و PostCSS و Babel حتى تتمكن من التركيز على تطوير مشروعك بدلاً من ضبط التهيئة.

اندو

تعتبر Lando أيضًا أداة سهلة الاستخدام لتهيئة بيئة التطوير بسرعة وسهولة ، إلى حد كبير WordPressify لقد ذكرنا للتو أعلاه. ولكن بدلاً من Node.js ، يستغرق الأمر الاستفادة من دوكر حاوية خفيفة الوزن التكنولوجيا ويوفر المزيد من المرونة في المدى من المكدس الذي ترغب في استخدامه في التنمية الخاصة بك.

على سبيل المثال ، يمكنك ذلك تحديد إصدار PHP ، وتمكين XDebug ، وتثبيت الملحن.

WP-Docklines

الفسفور الابيض Docklines هو مجموعة من الصور التي يمكنك استخدامها كخط أساسي لتنفيذ التكامل المستمر والتسليم لموضوعات ورسومات WordPress الخاصة بك في خدمات مثل Bitbucket و CircleCI و Gitlab. يتم تجميع كل صورة مع الأدوات المطلوبة عادة عند تطوير وورد مثل PHP Code Sniffer و PHPUnit و WP-CLI.

WP-الخزانة

WP-Locker هو تكوين Docker لتكوين بيئة تطوير WordPress في دقائق معدودة. أنه تم إعداده باستخدام Apache و MySQL و phpMyAdmin وبما أنه يمتد صورة WP-Docklines ، فإنه يقوم أيضًا بتنفيذ الأدوات الإضافية على الصورة خارج الصندوق.

ببساطة نوع بن / بداية للسماح لها ، تكوين المضيف المحلي وتثبيت الإضافات والسمات التي قمت بتكوينها في ملف التكوين.

Docusaurus

مبادرة أخرى مفتوحة المصدر من Facebook, Docusaurus هو أداة لإنشاء موقع ويب وثائق لمشروعك. بنيت مع React و Markdown ، يمكنك بسهولة إنشاء الوثائق ، والحفاظ عليها ، وحتى إنشاء مدونة لموقعك ، و نشره على صفحات جيثب.

VSCode يو

Yeoman هي حزمة Node Package التي تسمح لك ببدء المشروع بسرعة عن طريق اختيار سقالات مسبقة الصنع تناسب مشاريعك. إذا كنت تستخدم Visual Studio Code ، فسوف يقوم هذا البرنامج المساعد بتبسيط سير عمل بدء التشغيل بشكل أكبر حيث يتيح لك ذلك تشغيل “يو” الأمر الصحيح من نافذة التعليمات البرمجية Visual Studio.

BluebirdJS

مكتبة جافا سكريبت ذلك يسمح لك باستخدام وعد, ترقب, المتزامن اليوم في جميع المتصفحات. قال أنه يعمل حتى في نتسكيب. وعد هي واحدة من أقوى نقطة في أحدث مواصفات جافا سكريبت التي من شأنها أن اجعل الشفرة أصغر حجماً وقابلة للقراءة ويمكن صيانتها بسهولة.

أجمل

أجمل هو أداة ل قم بتنسيق الكود الخاص بك ليتوافق مع معيار ترميز اللغة. سوف تعيد كتابة التعليمات البرمجية الخاصة بك من scracth باتباع القاعدة مما يسمح لك وفريقك أن يكون أكثر إنتاجية بدلاً من المناقشة حول أنماط كتابة التعليمات البرمجية.