تطوير الموقع على WebAssembly باستخدام NetCore 3 و Blazor

رأيي هو أن WebAssembly هو مستقبل الإنترنت. هذه التكنولوجيا مدمجة حاليًا في معظم المتصفحات الحديثة (أو بالأحرى في محركاتها) على أجهزة الكمبيوتر والأجهزة المحمولة. على المتصفحات مثل Chrome و Edge و Firefox و WebKit.

في هذه المقالة ، سأشرح كيفية بدء تطوير موقع WebAssembly في Visual Studio. هذه المقالة مناسبة لأولئك الذين يرغبون في فهم كيفية بدء تطوير تطبيقات SPA دون استخدام JavaScript ، مع العلم فقط بتخطيط asp.net mvc و c # و html و css.

في وقت إصدار هذه المقالة ، كان إطار عمل NetCore 3 في مرحلة RC1 ، وكان لدى Blazor الإصدار 3.0.0-preview9.19457.4. من المقرر إصدار NetCore 3 في سبتمبر 2019. أما بالنسبة لـ Blazor ، فسيتم إصداره في وقت لاحق في نوفمبر 2019 ، على الأرجح بعد إصدار NetCore 3.1

جدول المحتويات:

• أنا التثبيت
• II إنشاء مشروع WebAssembly من قالب
• ثالثا هيكل القرار
• IV بدء تصحيح أخطاء WebAssembly
• أحجام الملفات V ورابط
• السادس للنشر و LazyLownload ، مكتبات العناصر
• سابعا الاستنتاجات

أنا التثبيت (تأكد من وضع الإصدار الحالي ، بعد نوفمبر 2019 على الأرجح الإصدار)

1. معاينة Visual Studio - visualstudio.microsoft.com/en/vs/preview
2. قالب Blazor - devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-release-candidate-1

II إنشاء مشروع WebAssembly من قالب

1. افتح معاينة VS 16.3 معاينة 4
   
   
2. إنشاء مشروع جديد. حدد قالب تطبيق Blazor وحدد نوع WebAssembly.
   
   
   عملية خلق في الصور

   
   
   
   
   
   
   
   

ثالثا هيكل القرار

كما ترون ، يتكون الحل الافتراضي من 3 مشاريع:

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

IV بدء تصحيح أخطاء WebAssembly

1. تعيين اثنين من نقاط التوقف. واحد في رمز تطبيق العميل ، والثاني في رمز خادم الخدمة. يمكنك على الفور ملاحظة أن الحدث onclick button يستدعي C # code ، وليس JavaScript. لا يوجد شيء غير عادي حول رمز خادم الخدمة.
   
   
2. قم بتشغيل الحل في وضع بناء التصحيح. بعد التجميع الناجح ، سيتم فتح المتصفح وسيتم تحميل موقع الويب المستند إلى تجميع الويب
   
   
3. دعنا نحاول الذهاب إلى قسم "جلب البيانات". يحتوي هذا القسم على الكود الذي يقدم الطلب إلى الواجهة الخلفية. بمجرد أن نحاول الانتقال إلى هذا القسم ، ستعمل نقطة الإيقاف المحددة مسبقًا في وحدة تحكم الخدمة فورًا. السلوك هو المعيار ، لا شيء جديد. متابعة تنفيذ التعليمات البرمجية
   
   
4. الآن دعنا ننتقل إلى قسم "عداد". هنا يتم تنفيذ التعليمات البرمجية التي يتم تنفيذها بالكامل على العميل. من خلال النقر على زر "click me" ، نحصل على نتيجة غير متوقعة. ستعمل الشفرة (إضافة إلى العدد الحالي 1) ، لكن نقطة التوقف المحددة في الكود لن تعمل.
   
   
5. الحقيقة هي أن تصحيح تطبيق عميل يستند إلى تجميع ويب يحدث في المستعرض. تماما مثل تصحيح جافا سكريبت. للقيام بذلك ، اضغط على shift + alt + D في النافذة مع تشغيل الموقع. ولكن هناك العديد من الشروط.
   يجب أن يكون للمتصفح اتصال مباشر مع الاستوديو المرئي الجاري. للقيام بذلك ، يجب أن يعمل Chrome في وضع تصحيح الأخطاء مع إمكانية الوصول إلى واجهة برمجة تطبيقات المتصفح من خلال منفذ محدد.
   انسخ السطر المقترح لتشغيل المتصفح. أغلق جميع نوافذ المتصفح. وتنفيذ الخط المنسوخ سابقا.
   
   
6. أعد تشغيل تصحيح الأخطاء. إذا حاولت تصحيح تطبيق عميل تم فتحه في chrome عدة مرات ، فستتلقى رسالة خطأ. اترك علامة تبويب مفتوحة واحدة فقط مع الموقع وعلامة تبويب تصحيح واحدة فقط.
   
   
7. في علامة التبويب "تصحيح" ، في بنية الملف ، سترى الملفات الموجودة على القرص. حيث يقع رمز المصدر. الآن ، بالانتقال إلى ملف "Counter.razor" ، يمكننا تعيين نقطة توقف في الإجراء المسمى onclick event. عند النقر فوق الزر "Click me" ، ستعمل نقطة توقف ، وسنكون قادرين على الوصول إلى مكدس الاتصال وعرض قيم المتغيرات
   
   

أحجام الملفات V ورابط

1. كما هو موضح في المثال ، فإن أحجام بيانات الموقع التي تم تنزيلها تكون 2.4 ميغابايت (بعد التفريغ على العميل 5.4 ميجابايت). عند تحميل الموقع لأول مرة ، يتم تحميل مكتبات الارتباط الحيوي (DLL) المطلوبة للموقع للعمل (مثال على ذلك هو كيفية تحميل مكتبات JS) ، ولا يتم إعادة تحميلها لاحقًا ، ولكن يتم استخدامها من ذاكرة التخزين المؤقت للمستعرض.
   
   
2. يجب عليك أيضًا الانتباه إلى حقيقة استخدام رابط. هذا يسمح لك لتقليل حجم ملفات dll الناتجة ، أي يتم قطع وظائف التعليمات البرمجية غير المستخدمة تلقائياً من الملفات.
   
   على سبيل المثال ، أصبح System.Text.Json.dll من 288 كيلو بايت 114 كيلو بايت ، وأصبح System.Memory.dll من 146 كيلو بايت 58.5 كيلو بايت. يتم ضمان ذلك من خلال عمل رابط ، وكذلك عن طريق ضغط الملفات المنقولة.
   
   أيضًا ، يمكن تكوين هذه العملية يدويًا docs.microsoft.com/ru-ru/aspnet/core/host-and-deploy/blazor/configure-linker؟view=aspnetcore-3.0
   
   

السادس للنشر و LazyLownload ، مكتبات العناصر

1. نشر موقع يستند إلى تجميع ويب من خلال محركات IIS أو ASP.NET Core. مزيد من التفاصيل هنا .
2. على الرغم من أن تقنية WebAssembly نفسها تسمح لك بتنزيل ملفات wasm حسب طلب المطورين . google.com/web/updates/2018/04/loading-wasm.
   لا تملك blazor حاليًا القدرة على تحميل dlls (مكونات wasm) وفقًا لاحتياجات صفحة معينة. أي ، سيتم تنزيل جميع المكونات في أول مرة تدخل فيها إلى الموقع.
   
   التوصية واحدة - "لا تستخدم المكتبات المعقدة لتنفيذ وظيفة بسيطة تكتبها في ثلاثة أسطر من التعليمات البرمجية." لا ترث 100 + ميغابايت دلل في تطبيق العميل من أجل إمكانية التنفيذ البسيط للتسجيل (الإحجام عن كتابة 5 سطور من الكود بنفسك).
   
   والخبر السار هو أنهم يعدون بتنفيذ تحميل وحدات في الأساسية 3.1
3. إذا كنت ترغب في استخدام مكونات جاهزة لتنفيذ المواقع ، فقد وصلت بالفعل مجموعات من الشركات المعروفة مثل telerik أو devexpress أو على سبيل المثال الحزمة المجانية www.matblazor.com إلى blazor

سابعا الاستنتاجات

• يمكن استخدام تقنية Weassambly في الوقت الحالي بشكل كامل في تطوير الموقع.
• للعمل بشكل مريح مع blazor لمشاريع الإنترنت ، مطلوب LazyLownload. التي وعد لإضافة في المستقبل القريب
• إذا كان المشروع إنترانت ، فسيكون استخدام blazor في التطورات الجديدة موضع ترحيب. لا يجدر بالمناقشة في هذا السياق أن أجهزة الكمبيوتر الشخصية الموجودة على الشبكة الداخلية يمكن أن تكون ذات وصول بطيء ، ويمكن حلها باستخدام عميل RDP الرفيع.
• ASP.NET + 3 blazor هو المكان الذي يجب أن يتطور فيه المطور c #
• أعتقد أن هذه التكنولوجيا ستؤدي إلى رفض كامل لجافا سكريبت في المستقبل ، لكن هذا رأيي الشخصي.