تقديم Hoodie: تطوير Full Stack لمطوري الواجهة الأمامية

إذا لم تكن قد سمعت عن Hoodie بعد ، فيجب عليك التحقق من ذلك.

Hoodie هي مكتبة جديدة تقدمية لمطوري الواجهة الأمامية التي تتبنى بعض الفلسفات الجديدة الرائعة التي من المحتمل أن تغير تطوير التطبيقات وكذلك تجربة المستخدم. يضع Hoodie السيطرة على تطوير التطبيقات الأمامية بالكامل بالكامل في أيدي مطوري الواجهة الأمامية وخبراء تجربة المستخدم ، مما يحررهم من الاعتراضات التقنية الغامضة أحيانًا من نظرائهم في النهاية الخلفية. بالإضافة إلى ذلك ، تحرر تطبيقات Hoodie المستخدمين من قيود الاتصال غير المنقطع ، مما يسمح لهم باستخدام تطبيقك أثناء التنقل أو في الهواء أو تحت سطح البحر ، دون عناية.

في حين أن النظام الأساسي لا يزال في مهده ، فإنه يقدم بالفعل بعض الأدوات الجديدة القوية التي تستحق التجربة لأي مطور أمامي يرغب في المضي قدمًا في اللعبة. يتمتع الفريق الذي يقف وراء Hoodie بخلفية مثبتة ، حيث عمل في مشاريع أخرى عالية النجاح مثل CouchDB و Async و Moustache.js وغيرها الكثير.

بعد التعرف على ما تمتلكه مكتبة تطوير مكدس Hoodie الكامل في الأعمال وأصبحت متحمسًا جدًا للمشروع ، قررت أن أجربه بنفسي. اسمحوا لي أن أخبركم بالمزيد عن Hoodie ، وأريكم بعض الإمكانات التي يتمتع بها لتطوير تطبيقات رائعة.

ما هو هوديي؟

بادئ ذي بدء ، ما هو هوديي؟ ما هو الشيء العظيم في ذلك؟ Hoodie عبارة عن منصة مفتوحة المصدر وجافا سكريبت بالكامل وواجهة برمجة تطبيقات تجمع بين العديد من النماذج الجديدة القوية في حزمة تطوير مكدس كاملة واحدة ، لصالح كل من المطورين الذين يبنون تطبيقات Hoodie والمستخدمين النهائيين الذين يتفاعلون معهم. ومن أهم هذه المفاهيم حركات "noBackend" و "Offline First" ، جنبًا إلى جنب مع عملية قوية يحركها المجتمع تُعرف باسم "Dreamcode" لبناء واجهة برمجة التطبيقات.

noBackend

يعتقد Hoodie أن مفتاح التطوير الرائع للتطبيقات الأمامية يكمن في أيدي خبراء تجربة المستخدم والمطورين الذين يعرفون كيفية جعل التطبيق يبدو رائعًا ويسعدهم استخدامه ، ولكنهم غالبًا ما يكونون مقيدون بتقنيات الواجهة الخلفية ليس لديهم سيطرة عليها. تستمر تفاعلات الخادم الأساسية التي كانت موجودة إلى الأبد ، مثل تسجيل المستخدم / تسجيل الدخول ، أو تخزين البيانات ، أو إرسال البريد الإلكتروني ، في طلب تطبيقات مخصصة تستغرق وقتًا طويلاً لكل تطبيق جديد ، مما يجبر مطور الواجهة الأمامية على التعلم والتعليمات البرمجية للخلفية الجديدة- مراوغات النهاية في كل مرة.

هودي يعيد التحكم في يد مصمم الواجهة الأمامية ومطورها ، من خلال تجريد الواجهة الخلفية تمامًا. مع تطوير تطبيق Hoodie للواجهة الأمامية ، بدلاً من القلق بشأن جانب الخادم الخاص بك ، كل ما عليك القلق بشأنه هو واجهة برمجة التطبيقات الأمامية البسيطة وسهلة التعلم والتنفيذ المدمجة في Hoodie. على سبيل المثال ، تريد تسجيل مستخدم جديد؟ يمكن القيام بذلك في سطر واحد من التعليمات البرمجية:

 hoodie.account.signUp(username, password);

هذه هي الفكرة من وراء مبادرة noBackend ، التي يلتزم بها Hoodie بالكامل. noBackend تعني أنك لست بحاجة إلى مطور خلفية! ما عليك سوى نشر الواجهة الخلفية لـ Hoodie على الخادم الخاص بك ، وتجاهل الأمر .

هودي مكتوب بالكامل بلغة جافا سكريبت. تستخدم نهايته الخلفية القائمة بذاتها Node.JS مع Apache CouchDB كقاعدة بياناتها. حتى كتابة هذه السطور ، تشتمل الميزات الأساسية التي نفذتها Hoodie بالفعل على تسجيل المستخدم وإدارته ، وتحميل البيانات ، والتخزين ، ورسائل البريد الإلكتروني. يمكن توسيع هذه الميزة الأساسية بسهولة عن طريق إضافة ملحقات Node.js إضافية.

دريم كود

Hoodie هو واجهة برمجة تطبيقات أولاً وقبل كل شيء - وهذا ما يجعل noBackend ممكنًا. قد يتغير تطبيق Hoodie ويتحسن بمرور الوقت ، لكن الواجهة المقدمة للمطورين ستظل كما هي ، بحيث لا داعي للقلق بشأنها.

لا يزال Hoodie ينمو بسرعة ، ويتم إضافة ميزات جديدة طوال الوقت. يستخدم Hoodie ، مثله مثل مشاريع noBackend الأخرى ، نهجًا يحركه المجتمع لتصميم واجهة برمجة التطبيقات التي تسمى Dreamcode. في الأساس ، تحلم بالرمز الذي ترغب في كتابته ، وإذا حصل على دعم كافٍ من المجتمع ، فإن Hoodie سيحقق ذلك.

هذا النهج الذي يعتمد على واجهة برمجة التطبيقات أولاً والذي يعتمد على التعهيد الجماعي لتصميم واجهة برمجة تطبيقات Hoodie يعني أن كود Hoodie سهل الكتابة ويسهل قراءته. إنه رمز أحلامك!

غير متصل أولا

يحل Hoodie الكثير من المشكلات لمطوري التطبيقات الأمامية من خلال noBackend ، وواجهة برمجة التطبيقات التي تعتمد على Dreamcode. لكن أحد الأهداف الأساسية لـ Hoodie هو حل مشكلة كبيرة للمستخدمين أيضًا - اعتمادهم المعوق غالبًا على الاتصال.

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

تسعى حركة Offline First إلى تناغم رشيق مع حقيقة الحياة البسيطة هذه. مع Offline First ، يعد عدم الاتصال مجرد حالة عادية أخرى للتطبيق. في الحقيقة إنها الحالة الافتراضية! هوديي يتبنى هذه الفلسفة بحماس. يوجد خلف واجهة برمجة التطبيقات (API) تنفيذ أمامي كامل للتخزين المحلي المؤقت ، ومزامنة تلقائية ورشيقة كلما أصبح الاتصال متاحًا.

باستخدام Hoodie ، يمكنك نشر التعليقات وإرسال رسائل البريد الإلكتروني وتعديل الحسابات والقيام بمعظم أي نشاط يومي آخر ، دون القلق بشأن وجود اتصال. يمكن مقاطعة نظام التخزين والمزامنة بالكامل في أي وقت ، دون خوف من فقدان البيانات.

بالطبع ، يأتي هذا النموذج مع مجموعته الخاصة من تحديات وأساليب التصميم الفريدة ، لكن الفريق في Hoodie يقود التقنيات لحل هذه التحديات.

يعد Offline First تجربة جديدة ومثيرة لتطوير التطبيقات ، في المراحل الأولى من اعتمادها. لا يزال هناك الكثير الذي يتعين القيام به لتطوير التقنيات المطلوبة. ألقِ نظرة هنا لترى كيف يفعل هودي ذلك.

تطبيق بسيط باستخدام هوديي

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

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

ماذا لو طلب منا تطبيقنا القيام بشيء مخصص على الخادم؟ يمكننا دائمًا إنشاء مكونات إضافية لـ Hoodie. هنا مزيد من المعلومات حول الإضافات.

بدء تطبيق Hoodie الخاص بك

تتمثل الخطوة الأولى في تطوير المكدس الكامل لأي تطبيق Hoodie في استخدام أداة سطر أوامر Hoodie لإخراجنا من الأرض:

 hoodie new toptalCommunity

سيؤدي هذا إلى إنشاء تطبيق Hoodie مهيأ يحتوي بالفعل على بعض التعليمات البرمجية ، ويمكننا بالفعل تشغيل تطبيقنا! إذا كتبنا

 cd toptalCommunity hoodie start

سيفتح المتصفح باستخدام نموذج تطبيق من فريق Hoodie:

فعلت القليل من التدبير المنزلي في هذه المرحلة. تأتي تطبيقات Hoodie حاليًا مع Bootstrap و Prism ، لكنني أخرجت الإصدارات المتوفرة. لم أكن بحاجة إلى Prism وأردت استخدام الإصدار الخاص بي من Bootstrap حتى أتمكن من استخدام الخطوط و JS التي أردت استخدامها. لقد أجريت أيضًا بعض التغييرات على main.css أثناء تصميمي للتطبيق ، لإعطائه أسلوبه الخاص والسماح بنموذج التمهيد البسيط الخاص بي. لقد استخدمت jQuery فقط للتلاعب في DOM والأحداث. هوديي يعتني بكل شيء آخر.

هوديي ودريم كود

أثناء عملي على إنشاء هذا التطبيق النموذجي ، أدركت بسرعة جميع فوائد العمل مع Hoodie. الكثير من الأسئلة العادية التي تحتاج إلى إجابة عند بدء المشروع لم تكن موجودة. هوديي سمح لي فقط بكتابة الكود ومشاهدة التطبيق مباشرة ويعمل.

ما هي الإستراتيجية التي يجب أن نستخدمها لإدارة حساب المستخدم؟ المكون الإضافي لحساب Hoodie هو الحل. كيف يجب أن نخزن بياناتنا على الواجهة الخلفية؟ تتولى واجهة برمجة تطبيقات التخزين البسيط لـ Hoodie ذلك الأمر بالنسبة لنا ، مما يمنحنا وظيفة Offline First مجانًا! لم تكن هناك حاجة إلى بذل أي جهد لجعل تطبيق Hoodie هذا يعمل في وضع عدم الاتصال ، فهو يعمل فقط.

دعنا نتعمق قليلاً في بعض عمليات التنفيذ :.

إدارة حساب المستخدم

يحتوي Hoodie على مكون إضافي يعتني بإدارة الحسابات لنا يسمى hoodie-plugin-users . لا يمكن أن تكون واجهة برمجة التطبيقات أبسط.

كيف نضيف مستخدم جديد؟

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

كيف نقوم بتسجيل دخول المستخدم؟

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

هل لدينا مستخدم قام بتسجيل الدخول؟

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

هذا حقا لا يمكن أن يكون أبسط. أوه انتظر وكيف ستتفاعل واجهة المستخدم الخاصة بنا مع كل ذلك؟ هودي لديه أحداث في المتجر من أجلك

تعامل مع تسجيل دخول المستخدم:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

مخزن البيانات

سيسمح تطبيقنا النموذجي للمستخدمين بإنشاء الأحداث الخاصة بهم (البيانات الخاصة) ونشرها إذا أرادوا (جعل البيانات عامة) ، بحيث يمكن للمستخدمين الآخرين الانضمام إلى الحدث.

يسمح لنا Hoodie بإضافة البيانات إلى متجره المحلي دون تسجيل الدخول ، فكيف يعرف المستخدم الذي تنتمي إليه هذه البيانات؟ حسنًا ، إنها تحافظ عليها محليًا ولن تتم مزامنتها مع الخادم حتى يقوم هذا المستخدم بتسجيل الدخول. سوف تتأكد Hoodie أيضًا من أن هذا المستخدم هو الوحيد القادر على الوصول إلى تلك البيانات.

حتى هنا هو كيف يعمل:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

بكل بساطة! حسنًا ، سيساعدنا ذلك في إنشاء حدث ، كيف سنشاركه مع الآخرين؟ هذا هو المكان الذي سيساعدنا فيه global share plugin . يتعين علينا تثبيته لأنه ليس مكونًا إضافيًا افتراضيًا:

 hoodie install global-share

الآن لدينا المكون الإضافي في مكانه ، فلنستخدمه! يتعين علينا نشر البيانات التي أضفناها بالفعل إلى متجر المستخدم الخاص بنا إلى المتجر العالمي.

 hoodie.store.findAll('event').publish();

سيؤدي هذا إلى وضع علامة على جميع الأحداث المحفوظة لهذا المستخدم على أنها عامة ، لذلك عندما نقوم بالاستعلام عن المتجر العالمي ، سنحصل على هذه البيانات كنتيجة لذلك.

 hoodie.global.findAll('event'); //This is read-only

في صفحة "الأحداث الخاصة بي" ، يمكن للمستخدم إنشاء أحداث يتم نشرها في المتجر العالمي مباشرةً.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

الأحداث المنشورة مرئية للجميع ، لذلك يمكن لأي مستخدم الآن رؤية الأحداث التي تم إنشاؤها في صفحة الأحداث.

إذن ماذا عن البيانات التي يجب ألا تكون عامة؟ نقوم بتخزين الأحداث التي تقدم إليها مستخدمنا ونعرضها في صفحة الأحداث. عندما ينقر المستخدم على زر التطبيق ، هذا ما يتم تنفيذه:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

تُظهر لقطتا الشاشة أدناه تشغيل نافذتي متصفح في نفس الوقت. في المستعرض الأول ، يتم تسجيل دخول المستخدم كمستخدم a @ aa الذي تقدم بطلب إلى الحدث A. في الثانية ، يتم تسجيل دخول المستخدم b @ bb وتطبيقه على B Event .

الاقتراع الطويل

من خلال الاشتراك في بعض الأحداث المقدمة من Hoodie ، يمكننا بشفافية استخدام تقنيات مثل الاقتراع الطويل الذي يمنح تطبيقنا ميزة مثيرة للاهتمام حيث يستخدمها مستخدمون مختلفون ويتعاونون عليها.

هذا حقا من السهل القيام به. في تطبيقنا النموذجي ، تم تنفيذ الحيلة على سطر واحد:

 hoodie.global.on('add:event', loadEvent);

سيهتم هذا السطر البسيط بالاستقصاء الطويل للخادم للتحقق من الأحداث الجديدة التي ربما تمت إضافتها بواسطة مستخدمين آخرين وإضافتها إلى صفحة "الأحداث الخاصة بي".

بعض المخاوف

بعد إنشاء هذا التطبيق النموذجي للعب مع Hoodie وميزات تطوير التطبيقات الأمامية ، أنا متحمس جدًا لما يقدمه. ومع ذلك ، برزت بعض القضايا الواضحة بالنسبة لي.

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

لا تزال المكتبة تفتقر أيضًا إلى الكثير من الأشياء الأساسية التي قد تحتاجها في أي تطبيق إنتاج ، مثل التحقق من صحة البيانات وعناوين URL القابلة للربط وإطار عمل للاختبار والمشاركة الخاصة للبيانات (على الرغم من أنها تحقق تقدمًا جيدًا بالفعل في هذا الأخير). لاستخدام Hoodie في الإنتاج في الوقت الحالي ، سيتعين علينا إقرانه بحل آخر مثل AngularJS أو Ember أو أي من الحلول العديدة الأخرى التي تساعدنا على التأكد من أننا قمنا بتصميم كود JavaScript وصيانته بشكل صحيح لمشاريعنا الأمامية. نظرًا لأن هذه الأطر نفسها تقترب من تعقيد التقنيات الخلفية هذه الأيام ، فإن هذا الحل من شأنه أن يهزم إلى حد كبير الغرض من Hoodie.

مستقبل هوديي

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

في غضون ذلك ، من المؤكد أنه ليس من السابق لأوانه البدء في تطوير تطبيقات الواجهة الأمامية باستخدام Hoodie ، كما آمل أن أكون قد أوضحت للتو. هناك الكثير من الأفكار الجديدة القوية المضمنة بالفعل في Hoodie ، والتي أعتقد أنها من المحتمل أن تحظى بشعبية كبيرة. ربما لا يكون المضي قدمًا في اللعبة مع هذه الأشياء فكرة سيئة.

إذا استمر الفريق في Hoodie في العمل الشاق ، فيجب أن تكون API جاهزة للوقت الذروة في أي وقت من الأوقات. إذا كنت ترغب في تتبع تقدم فريق Hoodie ، فما عليك سوى إلقاء نظرة على أداة تعقب المعالم الخاصة بهم.

يعد Hoodie بجعل تطوير تطبيقات رائعة للمحركات والهزازات أمرًا سهلاً. إذا كانت الأفكار التي يجسدها Hoodie مدعومة ، فقد نرى الحاجة إلى فريق من مطوري الواجهة الخلفية لكل مشروع جديد أصبح شيئًا من الماضي. مع مثل هذه المشاريع ، من السهل تخيل عصر ذهبي لمطوري الواجهة الأمامية في المستقبل غير البعيد. وبالمثل ، فإن الفوائد التي يقدمها خيار Offline First المثالي للمستخدمين هي خطوة كبيرة لإمكانية الوصول ، مما يوسع مدى وصول نمط حياتنا المحمول والمتصل إلى تلك الأماكن التي لا يذهب فيها الإنترنت نفسه.

توجه إلى Hoodie لمتابعة تقدم Hoodie ، ولكي تصبح جزءًا من التغييرات الجديدة والمثيرة التي تستعد للدخول فيها.

شكر خاص لفريق هوديي. يستخدم شعار Hoodie بإذن من Hoodie Open Source Project