Get best of the week

قسم الواجهة على DUMP2020: سنكون في طليعة أنه سيكون هناك منزل كامل مرة أخرى. أهم تقارير العام الماضي وموضوعات هذا

من يوافق على أن الواجهة الأمامية الحديثة صعبة ، ارفع يديك! ما الذي نعانيه لإعداد Webpack؟ لماذا يتطلب تنفيذ SSR كتابة الكثير من التعليمات البرمجية ، وهل نحتاجها حقًا بهذه التكلفة؟ على من يقع اللوم وماذا يمكننا كمطورين أن نفعل؟

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



أفضل ثيمات 2019


في Yekaterinburg DUMP العام الماضي ، ذهب المركز الأول إلى تقرير الكسندر Korotaev (Tinkoff.ru). يعلم الجميع أن WebGL سريع جدًا. أريد أن أعيد كتابة كل شيء على الفور ، لكن التكنولوجيا تبدو وكأنها طارت على الويب من كوكب آخر. يبلغ عمر المعيار ما يقرب من 9 سنوات ، وهناك عدد قليل جدًا من المتخصصين فيه.

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


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

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

لمعرفة كيفية التفكير بشكل تفاعلي وليس بشكل استباقي ، انظر الحديث أدناه:


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


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

هذا التقرير للمطورين المتوسطين والكبار الذين يعملون مع قاعدة رمز مركزية كبيرة (وأولئك الذين يريدون قطع قاعدة التعليمات البرمجية هذه).


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

Polina Gurtova (Evil Martians) حللت تشريح الأشكال المختلفة (PNG و JPG و WebP و SVG وغيرها) وأخبرتها عن كيفية اختيار الشكل المناسب.

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


SvelteJS هو واحد من أسرع أطر جافا سكريبت نموًا. هل يستطيع النزوح من وجهة نظر React و Angular و Vue؟

تحدث بافيل ماليشيف ، المشرف على المشروع والميسِّر للمجتمع الناطق بالروسية ، عن الوضع الحالي لإطار SvelteJS ونظامها البيئي ومجتمعها ، فضلاً عن سبب عدم كونها "إطار JS آخر" ويجب إلقاء نظرة فاحصة عليه.


في الذكرى السنوية DUMP2020 في ايكاترينبرج ، ستستوعب قاعة قسم الواجهة الأمامية الآن 400 شخص. سنكتشف أن هذه الغرفة ستكون مملوءة بنسبة 100٪ في بعض التقارير.

لجنة برنامج القسم: بولينا جورتوفايا (Evil Martians) و ايجور خوديريف (توشكا) تحدثا عن الموضوعات التي تنتظر والتي تم الإعلان عنها بالفعل.

مفهوم وتطبيق DUMP2020


نحن نبحث عن تقارير باللغتين الروسية والإنجليزية تستغرق 30-40 دقيقة. إذا لم تكن تؤدي في أي مكان من قبل - لا توجد مشكلة. سنساعدك على التفكير من خلال الهيكل وجمع المحتوى والتدرب على العرض التقديمي.

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

الموضوعات الرئيسية



  • الأدوات: IDEs، plugins، linters، builders
  • المنهجيات والعمارة والمبادئ: SOLID ، الخدمات الدقيقة ، BEM
  • التحسين: الأداء ، إدارة الذاكرة ، WebAssembly
  • تطوير الخادم: Node.js ، V8 ، ChakraCore
  • إدارة الدولة: Redux ، MobX ، Flux
  • مزامنة بيانات العميل وتخزينها: REST و GraphQL و Web Sockets
  • تطوير المحمول: PWA ، ReactNative ، VueNative
  • تطبيقات سطح المكتب: Electron، NW.js
  • الأمن: القرصنة والحماية ، نقاط الضعف في npm
  • ECMAScript: ميزات المواصفات الجديدة
  • بدائل JS: Typescript و ClojureScript و Elm و Dart
  • الاختبار: السيلينيوم ، اختبارات الوحدة ، TDD
  • الإطار: رد فعل ، الزاوي ، فيو
  • الأنماط: المعالجات الأولية ، وحدات CSS ، CSS-in-JS ، المكونات ذات النمط
  • الرسومات: SVG و WebGL و VR
  • التوفر: دلالات ، ARIA ، قارئات الشاشة
  • النماذج: Figma ، أنظمة التصميم
  • Fan: IoT و Game Dev والتجارب
  • القصص: النجاحات والفشل ، والتفاعل مع الأعمال
  • أخرى: Web API ، مستقبل المعايير ، المصدر المفتوح ، مديرو الحزم ، إلخ.

يمكنك التقدم بطلب للحصول على التقرير هنا .



تم الإعلان عن مواضيع هذا العام


هل نحتاج إلى xt.js N (e / u)؟
(Grigory Petrov، Evrone)

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

GameDev in Frontend

Anna Blok (مساعدة الواجهة الأمامية ، مصمم التخطيط النموذجي) و Daria Pushkarskaya (Web Hero School)
تقرير حول إمكانيات تغيير الاتجاهات إذا كنت تحلم دائمًا بتطوير الألعاب.

ستعرض آنا وداريا قائمة بالتقنيات والفرص التي يتم إنشاء الألعاب بها.
وفي النهاية سيقدمون لعبتهم الخاصة من أجل إظهار أنه لا يوجد شيء معقد.

حول Lighthouse
Seryozha Popov (League A. / HTML Academy)

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

WebAssembly: ميزات جديدة ومشكلات جديدة
Polina Gurtovaya (Evil Martians)

في التقرير سوف نفهم ما هو WebAssembly.

لنتحدث عن WebAssembly كتنسيق غير متعلق بالويب ، وناقش كيف تعيش WebAssembly في المستعرضات.

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

إدارة مستودعات أحادية مع NX
Anton Nikulin (Tinkoff.ru)

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

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



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

هل ترغب في التحدث في أكبر مؤتمر للمطورين في منطقة الأورال الفيدرالية في قاعة المؤتمرات الجديدة في القاعة لـ 400 شخص؟

التقديم قبل فوات الأوان.

أو تعال / تعال إلى DUMP في 15 مايو للاستماع إلى الموضوعات التي مرت بمفرمة اللحم الوحشية ؛)

بالإضافة إلى البرنامج الرئيسي ، نعدك بالكثير من الأشياء المثيرة للاهتمام .

More articles:


All Articles