Web Notes
1.0.0
اقرأ عبر الإنترنت >>
حالات الكود · المواد المرجعية
من السهل البدء في تطوير الويب ولكن من الصعب التعرف عليه. وهي مقسمة إلى مراحل مثل النظرة الأولى عند الباب ، ودخول الغرفة ، ودمج العملية بأكملها. إذا كنت تقرأ سلسلة المقالات للمؤلف لأول مرة ، فمن المستحسن الذهاب إلى المسار الفني لدب معين لفهم شامل. في هذه السلسلة ، يلتزم المؤلف باستكشاف كيفية تحسين كفاءة البحث والتطوير في الفريق بشكل فعال والتسليم الكامل في الوقت المناسب والموثوقية طوال دورة حياة تكرار المنتج ؛ في الوقت نفسه ، يمكنه التحكم في التعقيد الكلي للنظام وتحسين أداء النظام وخبرته باستمرار.
إذا نظرنا إلى الوراء في التغييرات الرائعة في تكنولوجيا الويب والبيئة على مدار العقود الماضية ، فقد شهدنا تغييرات مثيرة وغالبًا ما فقدنا في الارتباك المفضل. من خلال ابتكار إصدارات المتصفح وتحسين أداء الأجهزة ، دخلت تطوير الويب الأمامي على الويب عصرًا سريعًا ومتغيرًا باستمرار. تتنافس عدد لا يحصى من أطراف التنمية الأمامية والأنظمة التقنية على Beauty ، والتي تركت المطورين مرتبكين وحتى في حيرة. خاصة مع ظهور أطر عمل الأمامية الحديثة على شبكة الإنترنت (Angular ، React ، Vue.JS) ، وتحسين ميزات اللغة مثل JavaScript و CSS و HTML ، وما إلى ذلك ، والمفاهيم النظرية المقترحة مثل الهندسة ، والتأثير على الطحالب المتقاطعة ، والواجهة الأمامية الصغيرة ، والمجتمع الكبير ، ومجتمع التكنولوجيا ، والمجتمع. حالة. أما بالنسبة إلى ما يسمى المهندسين الأماميين الحديثين ، فإنهم عادة ما يحتاجون إلى استخدام الكثير من المعرفة المهنية لحل المشكلات الهندسية ، بما في ذلك كيفية تعديل المشروع ، وكيفية تصميم التفاعلات بين المكونات ، وكيفية تحسين قابلية إعادة الاستخدام ، وكيفية تحسين كفاءة التغليف ، وتحسين أداء المتصفح ، وما إلى ذلك ؛ لم يعد كما كان من قبل ، فهي تحتاج فقط إلى روتين HTML/CSS/JS لتطوير صفحات ثابتة.
بشكل عام ، سيخوض أي نظام بيئي للبرمجة ثلاث مراحل ، أولاً وقبل كل شيء ، الفترة الأصلية. نظرًا لأنه من الضروري التوسع في لغة واجهات برمجة التطبيقات الأساسية ، فإن هذه المرحلة ستولد عددًا كبيرًا من الأدوات المساعدة. في المرحلة الثانية ، عندما تصبح الأشياء التي تم إجراؤها أكثر تعقيدًا ، هناك حاجة إلى مزيد من المنظمات ، وسيتم تقديم عدد كبير من أنماط التصميم والأنماط المعمارية. سوف تلد هذه المرحلة عددًا كبيرًا من الأطر. في المرحلة الثالثة ، مع مزيد من التعقيد للطلب وتوسيع الفريق ، دخلت المرحلة الهندسية ، وظهرت أنظمة MVC ، MVP ، MVVM ، إلخ ، التنمية البصرية ، والاختبار الآلي ، وأنظمة التعاون الجماعي.
ومن المثير للاهتمام ، عندما نقف في نقاط مختلفة في الوقت المناسب ، فإن تقسيم هذه المراحل الثلاث غير متسقة أيضًا. وفقًا للفهم الحالي للمؤلف ، يتم تقسيمه إلى ثلاث مراحل مختلفة: عرض القالب ، والفصل الأمامي والتطبيق من صفحة واحدة ، والهندسة والواجهة الأمامية الصغيرة ، والواجهة الأمامية الكبيرة.
بالطبع ، سترافق كل مرحلة صغيرة ظهور أطر جديدة وأدوات جديدة:
يمكن تتبع التطوير في الواجهة الأمامية على شبكة الإنترنت إلى ذكر تيم بيرنرز-لي العام لوصف HTML في عام 1991 ، ثم أصدرت W3C معيار HTML4 في عام 1999. كانت هذه المرحلة بشكل أساسي بنية ب/ث ، ولم يكن هناك ما يسمى مفهوم التطوير الأمامي. في هذا الوقت ، كانت في الغالب صفحات ثابتة على أساس تقديم القالب. الشيء الرئيسي هو كتابة بعض القوالب الديناميكية من خلال JSP و PHP وغيرها من التقنيات ، ثم تحليل القوالب في ملفات HTML من خلال خادم الويب. المتصفح مسؤول فقط عن تقديم ملفات HTML هذه. لا يوجد تقسيم من العمل بين الأمام والخلفية في هذه المرحلة ، وعادة ما يكتب مهندس النهاية الخلفية صفحة الواجهة الأمامية.
في السنوات القليلة المقبلة ، مع إدخال المعايير المعمارية مثل Ajax Technology و REST ، أصبحت مفاهيم الفصل الأمامي والعميل الغني معترف بها بشكل متزايد. نحن بحاجة إلى التوسع في اللغة وواجهة برمجة التطبيقات الأساسية. في هذه المرحلة ، ظهرت سلسلة من الأدوات المساعدة الأمامية التي يمثلها JQuery. استنادًا إلى Ajax ، فتحت الأطراف الأمامية والخلفية أيضًا طريق الفصل ، وأصبحت بنية فصل النهاية الأمامية والخلفية شائعة. الواجهة الأمامية هي المسؤولة عن الواجهة والتفاعل ، والنهاية الخلفية مسؤولة عن معالجة منطق العمل. تتفاعل النهايات الأمامية والخلفية من خلال الواجهة. لم نعد بحاجة إلى كتابة HTML HTML في كل لغة خلفية. لقد تحول تعقيد صفحات الويب أيضًا من خادم الويب الخلفي إلى JavaScript من جانب المتصفح.
منذ عام 2009 ، أصبح تطوير الهواتف الذكية شائعة ، ولم تكن موجة محطات المحمول غير قابلة للتوقف. أصبح مفهوم التصميم لتطبيق SPA من صفحة واحدة شائعة أيضًا. تعتبر النموذجية الأمامية ذات الصلة ، وتنظيم المكونات ، والتطوير المتجاوب ، والتطوير المختلط ، والتقنيات الأخرى ملحة. لا سيما ظهور Node.js في عام 2009 ، بالإضافة إلى مواصفات CommonJS المصاحبة وآلية إدارة حزمة NPM ، أنجبت سلسلة من الأطر الممتازة مثل Angular 1 و Ionic ، وكذلك معايير الوحدة النمطية مثل AMD ، CMD ، UMD ، تتطلب ، Seajs ، وأدوات مثل GULT و GULP. أصبح المهندسون الأماميون أيضًا مجالًا خاصًا للتطوير ، مع نظام تقني ونموذج بنية مستقلة عن الواجهة الخلفية.
في الماضي ، كنا بحاجة فقط إلى HTML و JS البسيطة. الآن اضطررنا إلى استخدام Manager Package لتنزيل حزم الطرف الثالث تلقائيًا ، واستخدام Module Manager لإنشاء ملف نص واحد ، واستخدام مترجم الترجمة لتطبيق وظائف JavaScript الجديدة ، واستخدام عداء المهمة لتنفيذ كل خطوة بناء تلقائيًا.
في العامين الماضيين ، مع زيادة تعقيد تطبيقات الويب ، وتوسيع موظفي الفريق ، وطلب المستخدم للتفاعل مع الود ، وتحسين الأداء ، نحتاج إلى إطار تطوير أكثر تميزًا ومرونة لمساعدتنا على إكمال التطوير الأمامي بشكل أفضل. ظهرت هذه المرحلة من العديد من الأطر ذات المخاوف المركزة نسبيًا ومفاهيم التصميم الأفضل. على سبيل المثال ، تتيح لنا أطراف المكونات مثل React و Vue.js و Angular 2 استبدال البرمجة الضرورية بعمليات DOM باعتبارها الأساسية بالبرمجة التعريفية ، مما يزيد من تطوير المكونات ويعزز قابلية إعادة الاستخدام والتكامل. Redux ، التي تتبع البرمجة الوظيفية ، و MOBX ، التي تقترض مفهوم البرمجة المستجيبة ، هي كلاهما أطر عمل جيدة جدًا لإدارة الدولة ، مما يساعد المطورين على فصل منطق العمل عن عرض العرض ، وتقسيم بنية المشروع بشكل أكثر معقولًا ، وتنفيذ بشكل أفضل لمبدأ المسؤولية المفردة وتحسين الكود. في أدوات بناء المشاريع ، تقوم إدارة عمليات المهام التي تمثلها أدوات التغليف Gulp و Gulp و Project التي تمثلها WebPack و Rollup و JSPM ، حيث تساعد المطورين على بناء عمليات بناء أمامية بشكل أفضل وأداء المعالجة المسبقة ، والتحميل غير المتزامن ، والتعبير ، والضغط وغيرها من عملياتها بطريقة تلقائية.
أدى نضج سلسلة الأدوات أيضًا إلى الطلب الهندسي ، حيث أبرزت الأعمال التجارية للتكنولوجيا وقيادة التكنولوجيا. تتمثل الهندسة الأمامية في توحيد وتوحيد عملية التطوير الأمامي ، والتكنولوجيا ، والأدوات ، والخبرة ، وما إلى ذلك استنادًا إلى خصائص أعمال محددة. الغرض منه هو تمكين التطوير الأمامي من تشكيل نظامه الخاص ، وزيادة كفاءة تطوير المهندسين الأمامي إلى الحد الأقصى ، وتقليل تكاليف التنسيق والاتصال الناتجة عن اختيار التكنولوجيا ، والتكليف المشترك في الواجهة الأمامية ، وما إلى ذلك ، إلخ.
إن التعقيد المنطقي للتطبيق والتحميل الهندسي والتعقيد المركب يجلب أيضًا بعض التحديات لأداء الواجهة الأمامية. على سبيل المثال ، سيكون لدى أطراف المكونات مثل React وقت شاشة بيضاء عند تهيئة الصفحة ، والتي ليست ودية لكبار المسئولين الاقتصاديين ؛ بدأت الواجهة الأمامية في محاولة لحل هذه المشكلة من خلال عرض الخادم ، واستبدال قوالب لغات الخادم مثل JSP و PHP استنادًا إلى التطبيقات المتسوية التي تنفذها React أو VUE ، وما إلى ذلك ، أو إعادتها إلى المتصفح في شكل مستند HTML كامل.
مع التركيز على المكدس الكامل ، بعد سنوات من التطوير ، تمتلك Node.js القدرة على دعم تطبيقات مستوى المؤسسة ولديها عدد كبير من الممارسات في العديد من الشركات المحلية والأجنبية مثل Lowe و Netflix و Alibaba. علاوة على ذلك ، لدى Node.js تقارب لغة طبيعية ، مما يسهل على المطورين تولي مسؤوليات المكدس الكامل. مع ظهور مفاهيم مثل بنية الخدمات الدقيقة و Cloud Native and Serverless ، تصبح واجهات الواجهة الخلفية تدريجياً ذرية ، ولم تعد واجهات الخدمات الصغيرة تواجه الصفحة مباشرة ، وأصبحت المكالمات الأمامية معقدة. لذلك ، ظهر مفهوم BFF (الواجهة الخلفية) التي يمثلها GraphQL. تمت إضافة طبقة BFF بين الخدمات المجهرية والواجهة الأمامية ، وتم تجميع الواجهة واختصاصها بواسطة BFF ، ثم الإخراج إلى الواجهة الأمامية.
أثناء حل مشاكل تنسيق الواجهة وتجميعها ، يحمل BFF أيضًا الضغط المتزامن الأصلي على الواجهة الخلفية ، مما يجلب أيضًا الكثير من الضغط على التطوير والصيانة للمهندسين الأماميين. يمكن أن يخفف الخادم هذه المشكلة. يمكننا استخدام وظائف لتنفيذ التجميع وزراعة الواجهات ؛ يتم تحويل طلب الواجهة الأمامية لـ BFF إلى مشغل لمشغلات FAAS HTTP. تنفذ هذه الوظيفة منطق العمل للطلب ، مثل استدعاء الخدمات المجهرية المتعددة للحصول على البيانات ، ثم إرجاع نتائج المعالجة إلى الواجهة الأمامية. وبهذه الطريقة ، تحول ضغط التشغيل والصيانة من خادم BFF السابق إلى خدمات FAAS ، ولم يعد يتعين على الواجهة الأمامية الاهتمام بالخادم. يمكن أيضًا تطبيق Serverless على تقديم جانب الخادم ، وتقسيم كل مسار سابق إلى وظائف ، ثم نشر الوظائف المقابلة على FAAS. وبهذه الطريقة ، يتوافق المسار الذي يطلبه المستخدم مع كل وظيفة فردية. وبهذه الطريقة ، يتم نقل عمليات التشغيل والصيانة إلى منصة FAAS. عندما يصنع الواجهة الأمامية جانب الخادم ، لا توجد حاجة لرعاية تشغيل وصيانة برنامج الخادم. بالإضافة إلى ذلك ، توفر البرامج المصغرة مثل WeChat و Alipay أيضًا منصات تطوير السحابة التي تتوافق مع المفاهيم بدون خادم ، مما يمكّن التكرار السريع للأجهزة الأمامية.
لمزيد من المعلومات والأدلة ، انظر مقدمة.
النسخة الصينية | النسخة الإنجليزية
إذا كنت مطورًا من ذوي الخبرة للغاية وترغب في معرفة الهندسة والهندسة المعمارية في الواجهة الأمامية ، فمن المستحسن قراءة التطور الأمامي للواجهة.
إذا لم يكن لديك فهم كامل لبناء JavaScript Basic Syntax ، فمن المستحسن أن تتصفح أولاً "أساسيات بناء جملة JavaScript الحديثة والممارسة الهندسية" لفهم بناء جملة JavaScript الأساسي والتطبيقات العملية.
إذا كنت ترغب في فهم تطوير المكدس الكامل Node.js ، فيمكنك الرجوع إلى Node Notes.
بعد فهم المعرفة النظرية ، يوصى بالذهاب إلى WX-FE للتحقق من جميع مشاريع المصدر المفتوح في الواجهة الأمامية للمؤلف.
تخضع جميع مقالات المؤلف لترخيص الإسناد المشترك الإبداعي-لا يجوز التجارة في الترخيص الدولي 4.0. إعادة الطباعة هي موضع ترحيب وحقوق الطبع والنشر محترمة. يمكنك أيضًا الانتقال إلى صفحة NGTE Books الرئيسية لتصفح قائمة الكتب لفئات متعددة بما في ذلك نظام المعرفة ولغة البرمجة وهندسة البرمجيات والمعمارية والهندسة المعمارية ، ومواقع الويب ، وممارسة التطوير الأمامي الكبيرة ، والهندسة الهندسية للهندسة ، والبنية التحتية الموزعة ، والذكاء الاصطناعي ، والتعلم العميق ، وعملية المنتجات والمنتجات ، والآخر:
