أثناء تصفح GitHub والبحث عن مشاريع مفتوحة المصدر للتعاون فيها، وجدت Neo.mjs. لقد أصبحت مهتمًا بهذا المشروع وبدأت في البحث عن المزيد حول هذا الإطار الجديد. أريد أن أشارك كل ما اكتشفته حول هذا الموضوع في منشور المدونة هذا.

ما هو Neo.mjs؟

تم تصميم Neo.mjs لبناء تطبيقات ويب عالية الأداء تعتمد على البيانات، مع التركيز القوي على الاستفادة من العاملين على الويب لتحسين استجابة واجهة المستخدم. فيما يلي نظرة عامة تفصيلية عما يمكن أن تقدمه:

• تعدد مؤشرات الترابط مع عمال الويب: أحد الابتكارات الأساسية لـ Neo.mjs هو استخدامه الافتراضي لعمال الويب. فهو يقوم بتفريغ المنطق المعقد والحسابات الثقيلة ومهام معالجة البيانات إلى سلاسل العمليات الخلفية (عمال الويب)، مما يسمح لمؤشر ترابط واجهة المستخدم الرئيسي بالبقاء مستجيبًا.
• سريع وخفيف الوزن: يهدف إلى إنشاء تطبيقات عالية الكفاءة وعالية السرعة مع تقليل أثر إطار العمل. وهذا يجعلها مثالية لبناء تطبيقات واسعة النطاق ومثقلة بالبيانات مثل لوحات المعلومات، وإدارة علاقات العملاء، وأدوات تصور البيانات.
• واجهة المستخدم المبنية على البيانات: يقدم إطار العمل نهجًا يعتمد على البيانات، مما يساعد المطورين على ربط نماذج البيانات بمكونات واجهة المستخدم بكفاءة.

ميزات الإطار:

• البرمجة التفاعلية: يستخدم Neo.mjs نموذج برمجة تفاعلية، مما يعني أن التغييرات في نماذج البيانات تنتشر تلقائيًا عبر مكونات واجهة المستخدم، مما يضمن تجربة مستخدم سلسة.
• البنية القائمة على المكونات: مثل العديد من أطر عمل JavaScript الحديثة، تستخدم Neo.mjs بنية قائمة على المكونات تسمح للمطورين بإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام، وتعزيز نمطية التعليمات البرمجية وقابلية الصيانة.
• واجهة المستخدم التعريفية: وهي تدعم طريقة تعريفية لتعريف واجهات المستخدم، وتمكين المطورين من كتابة تعليمات برمجية أكثر وضوحًا وأكثر قابلية للفهم.
• الحد الأدنى من التبعيات: تم تصميم Neo.mjs للعمل مع الحد الأدنى من التبعيات، مما يساعد على تقليل أحجام الحزم وأوقات التحميل.
• فصل واجهة المستخدم/العامل: يفصل إطار العمل بشكل فعال عرض واجهة المستخدم عن مهام معالجة البيانات الثقيلة، وهو عامل رئيسي في الحفاظ على التطبيقات سريعة الاستجابة.

الإعداد: البدء مع Neo.mjs

يعد إعداد مشروعك الأول أمرًا سهلاً. إليك كيفية البدء:

الخطوة 1: تثبيت منشئ التطبيقات Neo.mjs

افتح جهازك الطرفي وقم بتشغيل الأمر التالي لإنشاء مساحة عمل وتطبيق Neo.mjs جديد:

npx neo-app@latest

الخطوة 2: اتبع مطالبات الإعداد

بعد تشغيل الأمر، سيتم إرشادك عبر سلسلة من المطالبات لتخصيص تطبيق Neo.mjs الجديد. وإليك كيف سارت عملية الإعداد:

> npx neo-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Welcome to the neo.mjs app generator!
current version of neo-app: 7.10.0
? Please choose a name for your neo workspace: neo-workspace
? Please choose a name for your neo app: MyApp
? Please choose a theme for your neo app: 
  neo-theme-dark 
  neo-theme-light 
  neo-theme-neo-light 
  all 
❯ none 
? Please choose your main thread addons: (Press  to select,  to toggle all,  to invert selection, and  to proceed)
❯◯ AmCharts
 ◯ AnalyticsByGoogle
 ◉ DragDrop
 ◯ HighlightJS
 ◯ LocalStorage
 ◉ Navigator
 ◯ MapboxGL
(Move up and down to reveal more choices)
? Do you want to use SharedWorkers? Pick yes for multiple main threads (Browser Windows): no
? Do you want to use a ServiceWorker for caching assets? no

في هذا الرابط ستجد فيديو جميل يشرح كل الإعدادات بمزيد من التفاصيل.

الخطوة 3: تشغيل التطبيق

بعد الانتهاء من الإعداد، سيتم تثبيت الحزم الضرورية تلقائيًا. سيقوم التطبيق بعد ذلك بتشغيل المتصفح الافتراضي الخاص بك، وفتح المضيف المحلي: 8080. هذا هو المكان الذي سترى فيه تطبيق Neo.mjs الذي تم إنشاؤه حديثًا قيد التشغيل:

ستلاحظ أن Neo.mjs يقوم تلقائيًا بإنشاء مجلد تطبيقات في مساحة العمل الخاصة بك. داخل هذا المجلد، يمكن العثور على نقطة الإدخال الرئيسية لتطبيقك في الملف view/MainContainer.mjs. هذا هو المكان الذي ستبدأ فيه ببناء مكونات واجهة المستخدم ومنطق التطبيق.

الخطوة 4: استكشاف الهيكل

تأتي مساحة عمل Neo.mjs الجديدة الخاصة بك مهيأة مسبقًا بمجلدات لطرق العرض والمكونات وملفات التطبيق الأخرى. اقض بعض الوقت في استكشاف بنية الملف لفهم كيفية تنظيم الأجزاء المختلفة من التطبيق. وهذا سيجعل الأمر أسهل عند البدء في إنشاء مكونات مخصصة.

انتباه

يحتوي Neo.mjs على بناء جملة فريد قد يبدو مختلفًا بعض الشيء عن أطر عمل JavaScript التقليدية. ويستخدم الكائنات الحرفية على نطاق واسع لتحديد مكونات واجهة المستخدم بطريقة تشبه JSON. تم تصميم بناء الجملة هذا لتحقيق أقصى قدر من الأداء وتوفير المرونة لبناء تطبيقات معقدة تعتمد على البيانات.

كمبتدئ، وجدت صعوبة في البداية في فهم كيفية تفاعل الملفات والتواصل مع بعضها البعض. هذا شيء ما زلت أتعلمه.

ما هي الخطوة التالية؟

أخطط للتعمق أكثر في Neo.mjs، وتجربة بناء واجهات مستخدم بسيطة، واستكشاف كيفية الاستفادة الكاملة من إمكانات الأداء متعددة الخيوط. ترقبوا مشاركة مدونة مستقبلية أو حتى فيديو تعليمي حيث آمل مشاركة المزيد من النصائح والحيل والأمثلة المتعمقة حول استخدام Neo.mjs لإنشاء تطبيقات ويب عالية الأداء.

إذا كنت مهتمًا بالانضمام إلي في هذه الرحلة التعليمية، فلا تتردد في استكشاف مستودع Neo.mjs GitHub وتجربة بعض الأمثلة على التطبيقات في موقعهم على الويب.

اترك تعليقًا إذا كنت قد استخدمت Neo.mjs من قبل مع بعض النصائح!