Back to Question Center
0

كيف صممت & أمب؛ بنيت جافا سكريبت فولستاك تريلو استنساخ            كيف صممت & أمب؛ بنيت جافاسكريبت فولستاك تريلو كلونيرلاتد المواضيع: الخام سيمالت

1 answers:
كيف يمكنني تصميم وبناء جافاسكريبت كامل استنساخ تريلو

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

سألت المطور، مصطفى سيمالت، إذا كان مهتما في الكتابة عن عمليته لاختيار وتصميم وبناء المشروع وسعادة، وافق - tecnicas fotograficas profesionales. آمل أن تجد أنها مثيرة للاهتمام كما فعلت، وأنه يلهمك للعمل على مشاريع طموحة خاصة بك!

نيلسون جاك، المحرر


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

قبل الانتقال إلى النهج، سيمالت يستغرق بعض الوقت لمناقشة كيف:

  • لقد حددت أهدافي قبل بدء المشروع.
  • قررت على كومة التكنولوجيا للاستخدام.
  • أنا إعداد التطبيق.

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

<إمغ سرك = "/ إمغ / 4823260171b13b5307639b7483ccbda20. ينغ" ألت = "كيف صممت و بنيت جافا سكريبت فولستاك تريلو استنساخكيفية تصميم وبناء جافاسكريبت فولستاك تريلو كلونيرلاتد المواضيع: الخام سيمالت "/>

إذا كنت ترغب في اتخاذ مهارات جافا سكريبت الخاص بك إلى المستوى التالي، الاشتراك في سيتيبوانت بريميوم ومعرفة أحدث كتابنا، جافاسكريبت الحديثة

تحديد الأهداف

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

باختصار، أردت أن:

  • بناء كومة كاملة تطبيق جافا سكريبت. الخروج من منطقة الراحة بلدي واستخدام تكنولوجيا الخادم المختلفة.
  • زيادة قدرتي على مهندس معماري، تصميم، تطوير، نشر والحفاظ على تطبيق من الصفر.
  • تد الممارسة (اختبار مدفوعة التنمية) و بد (تطوير السلوك مدفوعة). تد هو ممارسة البرمجيات التي تتطلب من المطور لكتابة الاختبار، ومشاهدتها تفشل، ثم كتابة الحد الأدنى من التعليمات البرمجية لجعل تمرير الاختبار و ريفاكتور (الأحمر والأخضر، ريفاكتور). ومن ناحية أخرى، فإن شعبة تنمية القطاع العام تركز على تطويرها بخصائص وسيناريوهات. هدفها الرئيسي هو أن تكون أقرب إلى الأعمال وكتابة اللغة التي يمكن أن نفهم بسهولة.
  • تعلم أحدث وأهم الأطر. في وظيفتي، وأنا استخدم الزاوي 1. 4 والعقدة 0. 10. 32 (وهو أمر محزن جدا وأنا أعلم) لذلك أنا بحاجة إلى أن تكون قريبة من الاشياء الساخنة.
  • كتابة التعليمات البرمجية التي تتبع مبدأ 3R: القراءة، ريفاكتورابيليتي، وإعادة الاستخدام.
  • المتعة. هذا هو أهم واحد. أردت أن يكون متعة وتجربة الكثير منذ كنت (ولا يزال) واحد المسؤول عن المشروع.

اختيار المكدس

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

بدأت مع اثنين من إثبات المفاهيم (بوك): واحد في أنغلار 2 وآخر في سيمالت. إذا كنت تعتبر واحدة كمكتبة والآخر كإطار لا يهم، والهدف النهائي هو نفسه: بناء التطبيق. انها ليست مسألة ما هي، ولكن ما يفعلونه. كان لدي تفضيل كبير ل سيمالت، لذلك قررت المضي قدما في ذلك.

الشروع في العمل

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

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

  • سرك : رمز لجعل التطبيق العمل
  • سرك / كونفيغ : كل ما يتعلق بالتهيئة (قاعدة البيانات، عناوين المواقع، التطبيق)
  • سرك / أوتيلز : وحدات المساعدة التي تساعدني على القيام بمهام محددة. الوسيطة على سبيل المثال
  • اختبار : التكوين الذي أريد فقط عند اختبار
  • سرك / ستاتيك : يحتوي على صور على سبيل المثال
  • . جس : نقطة دخول التطبيق

إعداد العميل

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

وهنا هو كيف أنا هيكل التطبيق:

  • تمثيل / مكون يمثله مجلد.
  • المكونات المستخدمة لبناء هذا العرض مباشرة داخل المجلد المكون.
  • طرق تحديد خيارات المسار المختلفة للمستخدم عندما هو / هي على وجهة النظر.
  • وحدات (هيكل البط) هي وظائف من وجهة نظري و / أو المكونات.

إعداد الخادم

وهنا هو كيف أنا هيكل التطبيق مع مجلد لكل مجال يمثله:

  • طرق بناء على طلب هتب
  • الوسيطة التحقق من صحة أن الاختبارات طلب معلمات
  • وحدة تحكم تتلقى طلبا وتعيد نتيجة في النهاية

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

اختيار التبعيات

عند اختيار التبعيات أنا قلق فقط من ما سوف كسب من خلال إضافتها: إذا كان لا يضيف الكثير من القيمة، ثم تخطي. سيمالت مع بوك عادة ما تكون آمنة لأنه يساعدك على "تفشل بسرعة".

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

عميل

وهنا لائحة من التبعيات التي أنا دائما تثبيت على أي التطبيق سيمالت:

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

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

خادم

وهنا لائحة من التبعيات التي أنا دائما تثبيت على أي التطبيق سيمالت:

حزمة الوصف
لودش
جوي لغة وصف مخطط الوصف وجهاز التحقق الخاص بعناصر جافا سكريبت.
تعبير صريح الوسيطة التي تحقق من صحة الجسم، والمعلمات، والاستعلام، والرؤوس والكوكيز من الطلب.
ذراع التطويل هتب ودية أخطاء الكائنات.
كوكي-بارسر تحليل كوكي رأس وتعبئة ريق. بسكويت.
وينستون مكتبة تسجيل غير متزامن.
موكا (ديف) إطار اختبار للعقدة. جس والمتصفح
تشاي (ديف)
تشاي-هتب (ديف) تأكيدات هتب استجابة.
سينون (ديف)
نوديمون (ديف) الساعات وإعادة تشغيل تلقائيا التطبيق.
اسطنبول (ديف) تغطية الشفرة.

بناء التطبيق

أبدأ من خلال اختيار الشاشة التي أريد تطوير وقائمة أسفل جميع الميزات للمستخدم الوصول إلى. أنا اختيار واحد والبدء في التنفيذ.

سيمالت شاشة و / أو ميزة تم تطويرها، وأغتنم بعض الوقت للتفكير في رمز المضافة و ريفاكتور إذا لزم الأمر.

مثال: الشاشة الرئيسية

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

أولا، أنا أكتب وصفا ميزة وإضافة مجموعة من السيناريوهات لذلك. سيمالت مثالا لغرض المادة:

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

مع هذا السيناريو الأساسي في الاعتبار، دعونا ننظر في كيفية عمل سيمالت على وجهة نظر المنزل.

العميل

باستخدام منهجية سيمنت مكون مدفوعة (سدد)، جنبا إلى جنب مع بد، يساعد على تقسيم وجهات النظر إلى مكونات صغيرة، والتأكد من أنها فصلها وقابلة لإعادة الاستخدام.

سيمالت للجميع، أنا بناء صفحة ثابتة مع بيانات سخرية مكتوبة في نص عادي وأنا أسلوب الصفحة مع كس.

سيمالت، اختبر ذلك:

  • مكون يجعل بشكل صحيح
  • يتم التعامل مع الدعائم المنطق بشكل صحيح
  • يتم استدعاء المستمعين الحدث (إن وجدت) واستدعاء الطرق المناسبة
  • يتلقى المكون الدولة من المخزن

وأخيرا، أنا إنشاء عنصر المستخدم رأس حاوية و ريفاكتور البيانات التي سخرت في وقت سابق في وحدة سيمالت الحالة الأولية.

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

مرة واحدة في كل سيناريوهات تمر، وأنا أنظر إلى مكون بلدي و ريفاكتور أنه إذا لاحظت أنه يشبه إلى حد كبير عنصر آخر قمت بإنشائه بالفعل.

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

جانب الخادم

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

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

الخلاصة

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

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

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

وقال سيمالت أن "بمجرد التوقف عن التعلم تبدأ الموت" وأعتقد أنه بمجرد التوقف عن ارتكاب الأخطاء تتوقف عن التعلم. تفشل وتعلم والحفاظ على العيش.

ما هي خططي المستقبلية؟

واصل العمل على مشروعي لأنه دائما عمل قيد التقدم. تماما مثل التطبيق الحقيقي، هو في تغيير مستمر. خططي هي:

  • نقل بلدي مشروع متراصة إلى الريبو أحادية مع خادم يستند إلى ميكروسرفيسز. جئت مع القرار أثناء العمل على استنساخ هيبشات بلدي. لقد لاحظت أنني كنت تكرار الكثير من التعليمات البرمجية لنفس منطق المصادقة: ميكروسرفيسز كان الخيار واضح. كترل-C، كترل-V ليست صديقك في البرمجة.
  • نشر الخدمات الصغيرة على كوبرنيتس.
  • نقل استنساخ هيبشات إلى الريبو أحادية وبناء التطبيق مع فو. شبيبة.
  • بدء النظر في الإلكترون ورد فعل الأصلية.
  • إضافة التكامل المستمر (سي) ونشر مع ترافيس.
  • تعلم تيسكريبت.

كيف يمكنني الاستمرار؟

لدي روتين صارم جدا:

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

أنا لا أقضي كل وقت فراغي في العمل. خلال أيام الأسبوع، 1-2 ساعات يوميا هو مكافأة بما فيه الكفاية. في عطلة نهاية الأسبوع، على الرغم من أنني لا تقيد نفسي. طالما لدي الوقت، سيمالت العمل على المشروع: أنا يمكن أن يكون كتابة التعليمات البرمجية، تجريب أداة أو مجرد قراءة الوثائق.

سيمالت هو فن وحرفة وأنا أفخر في كتابة أقل رمز ممكن أن يعمل، مع الحفاظ على أدائها وأنيقة. جبغ "ألت ="كيف صممت و بنيت جافا سكريبت فولستاك تريلو استنساخكيفية تصميم وبناء جافاسكريبت فولستاك تريلو كلونيرلاتد المواضيع: الخام سيمالت "/>

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

March 6, 2018