preactCalculator
1.0.0
لقد قمت ببناء هذا التطبيق كجزء من تحدي الترميز لنشر مطور الواجهة الأمامية مع بدء تشغيل في وسط مدينة أوستن. هذا التطبيق هو آلة حاسبة بسيطة باستخدام PREACT و CSS-GRID و Flexbox.
بداية سريعة
مفاهيم التصميم
التكنولوجيا المستخدمة
عملية الاختبار والبناء
لاختبار أو عرض هذا التطبيق على جهازك المحلي ، استنساخ هذا المستودع. انتقل إلى مستودع الاستنساخ حديثًا وقم بتشغيل الأوامر التالية:
yarnأو بدلاً من ذلك لمستخدم NPM:
npm installثم قم بالتشغيل:
yarn startأو بدلاً من ذلك لمستخدمي NPM:
npm startانتقل إلى http: // localhost: 8080/واستمتع!
لم يتم توفير مواصفات تصميم لهذا التحدي. لقد أعطيت حكمًا مجانيًا للتصميم كما يسرني. مع الأخذ في الاعتبار الوظيفة التي كنت أتقدم بها ، اخترت تلبية منتجي للعميل. على هذا النحو ، فإن نظام الألوان واللوحة وحتى Favicon يشبه عن قصد صفحتها الرئيسية. (الفكرة هي أن العميل قد عرض بالفعل تفضيلًا لنظام التصميم هذا حيث اختاروا نفس التصميم بالضبط لموقع الإنتاج الخاص بهم. كما أنه يعرض الاهتمام بالتفاصيل.)
فيما يلي صور للمقارنة.
الموقع الأصلي 
تطبيق الآلة الحاسبة 
لقد استخدمت تحدي الترميز هذا كفرصة للعب مع شبكة CSS الأصلية الجديدة (شيء كنت أقصد القيام به لفترة من الوقت). شبكة CSS مذهلة ، ولكن يبدو أنه من المستحيل تمرير خصائص منطقة الشبكة كدعائم.
لقد استخدمت أيضًا FlexBox لتوسيط المحتوى والعناصر. أنا معجب كبير بـ Flexbox وأفضله بشدة على حلول شبكة تابعة لجهة خارجية أخرى أو باستخدام عوامات لتحديد المواقع.
ربما يكون هذا التطبيق أيضًا أول مرة كان لدي فيها حالة استخدام مبررة لميزة CALC ()! أنا أستخدم CALC () لتعيين ارتفاع الصفحة الرئيسي يساوي 100 فولت ناقص ارتفاع شريط الرأس وإزاحة أسفل لضمان عدم تداخل العناصر.
خلال عملية التصميم ، حاولت الالتزام ببعض مبادئ تصميم واجهة المستخدم الأساسية كما هو موضح هنا
يستخدم هذا التطبيق:
شبكة CSS الأصلية
Flexbox
preact
preact-router
preact cli
موكا
تشاي
eslint
الشبكة الأصلية CSS مثيرة للإعجاب ، على الرغم من أن دعم المتصفح يمكن أن ينقص في المتصفحات القديمة. من الصعب للغاية تمرير أنماط CSS كمكونات متداخلة أخرى. خاصة عندما يتطلب كل مكون طفل سمة فريدة من نوعها للعمل مع شبكة CSS الأصلية. تقييم الدعائم نوع السلسلة في مرجع لتصميم فئة CSS يفشل. حتى عند استخدام أمثلة مباشرة من وثائق prect. لا تقبل CSS-Grid الأوتار كحجال منطقة الشبكة. لا يمكن لبرنامجي التمييز بين مرجع CSS VAR ومرجع JS.
Flexbox مدهش ولديه دعم متصفح أفضل من شبكة CSS الأصلية. لا مزيد من القول حول هذا الموضوع.
Preact هي تقنية مثيرة للاهتمام. يعجبني أنه خفيف الوزن ، وأحب أيضًا وظيفتها السريعة وأنها مباراة تقنية شبه مثالية للرد ولكن مع ترخيص معهد ماساتشوستس للتكنولوجيا. أشعر بأن بعض أدوات البناء لها غير موجودة عند مقارنتها بالنظام الإيكولوجي React.
Preact-Router في هذا التطبيق هو مجرد إعداد الحد الأدنى. لم أتعامل معها بما يكفي للحديث عنها بعمق.
فشل إعداد Preact CLI خارج المربع على كل من عدم وجود أمر اختبار وإعداد ESLINT المكون بشكل سيء (أو الكود الذي كتبه ينتهك قواعد التحقق الخاصة بهم). تفتقر إلى إعداد الاختبار واضطررت إلى تكوين خاص بي (المزيد حول هذا لاحقًا). بالنسبة لأي نظام بناء ، فإن استخدام الكرمة هو فقط إلزامي مما أجمعه. يفشل أمر بناءهم أيضا.
يمكنني استخدام Mocha و Chai لإعداد جناح الاختبار الخاص بي. إنه وقت تم اختباره الكلاسيكي.
تم تضمين ESLINT خارج الصندوق (فشل ، سيتم تغطية بمزيد من التفاصيل في وقت لاحق).
جميع منطق التطبيق في مكون الحاسبة. جميع الآخرين مكونات نقية/وظيفية. لو كنت بحاجة إلى إنشاء تطبيق أكثر تعقيدًا ، لكان Mobx أو Redux في النظام.
كان من الممكن أن يساعد Mobx أو Redux أيضًا في اختبار الوظيفة. لقد حاولت في البداية فصل المنطق من المكون ، لكن من الصعب الحفاظ على سياق "هذا" فيما يتعلق بالمنطق الذي يعدل الحالة. وبالتالي اخترت كتابة المنطق في المكون مباشرة. إن استيراد الأساليب التي تتطلب إدراكًا للدولة من ملف منفصل دون سياق الحالة يعقد الأمور بشكل غير ضروري (إنه مبالغة على أي حال حيث أن لدينا فقط طرق قليلة في هذا التطبيق).
فيما يتعلق بموضوع الحالة ، لن يقبل JavaScript Eval () معاملًا غير سلسل. سوف يتعامل مع الأعداد الصحيحة على ما يرام ، ولكن قم بتوضيح المعامل ، وبالتالي ساعدك الله على تطبيقك محكوم عليه! أنا أتعامل مع جميع البيانات الحرجة في الحالة كسلسلة لضمان عدم حدوث ذلك.
في ملاحظة عشوائية ، يتم تشغيل هذا التطبيق من برنامج LocalHost Local بشكل منحني على تقييم Lightbox في جميع فئات PWA الأربعة ، والأداء ، وإمكانية الوصول ، وأفضل الممارسات بالمقارنة مع موقع الإنتاج الحالي للعملاء.
حاولت الحفاظ على تبعيات إضافية كحد أدنى أثناء تطوير التطبيق.
يمكن تشغيل جناح الاختبار مع yarn test أو npm test . يفترض مجموعة الاختبار تثبيت Mocha عالمي على جهازك.
تحتوي مكتبة Preact نفسها على مشكلات مفتوحة تتعلق باختبار = preactjs/preact#658 الحل البديل هي استخدام مكتبة معروفة تسمى https://github.com/developit/preact-jsx-chai/ للأسف لا يبدو أن المكتبة بالنسبة لي.
تكوين الاختبار هو ألم. يتم إخفاء تكوينات بابل بواسطة preact-cil. لا يمكن الوصول إلى التكوين. الحصول على "رمز غير متوقع" استيراد "حتى عندما أضع ملف الاختبار في نفس dir مثل المكون نفسه." سيتعين على الاختبارات الانتظار. تم القيام به مرة أخرى ، يجب أن أقوم بتنفيذ بديل آخر للسماح باختبار الوظائف المنفصلة.
حول موضوع الاختبار ، إليك الكثير من المشكلات المتعلقة به:
preactjs/preact-compat#233
preactjs/preact#146
https://gist.github.com/robertknight/88E9D10CFF9269C55D453E5FB8364F47 (للأسف ، لا يزال عدم وجود تكوين ويب ويب بديهية يؤدي إلى الفشل مع هذه الطريقة)
preactjs/preact#658 (المشكلة المفتوحة ، يعد إعداد اختبار preact الصعب مشكلة معروفة بدون حل حالي.)
preactjs/preact#560 (يلمس كيف يتم رأي Preact ويتطلب الكرمة كاعتماد آخر.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (كان هذا ما حاولت أولاً. لا حظ مع ذلك أيضًا.)
https://preactjs.com/guide/Unit-testing-with-enzyme (وثائقهم هي حرفيًا قسمًا واحدًا. ولا يقدم أي بديل لإعداد الكرمة الدقيق.)
وعند linting ، تفشل ESLINT خارج الصندوق. أنا المسافة البادئة باستخدام 4 مسافات. تم تعيين البرنامج المساعد الافتراضي Eslint Preact على علامات التبويب التي تسبب إلقاء أخطاء. بغض النظر ، يتم تشغيل إعداد الاختبار وهو موجود لتوصيل أي إعداد تكوين ESLINT. سأكون قادرًا على إعادة تكوين هذا الإعداد على الفور لمطابقة أي متطلبات محددة للعميل.
