ستكون التقارير عامة حول مواضيع الواجهة الأمامية ، وفي الأيام الأخرى من المؤتمر ، سيتحدث المتحدثون بعمق أكبر حول كل موضوع ، مع الفروق الدقيقة والتفاصيل والممارسة والمناقشات. لقد تحدثنا بالفعل عن بعض التقارير التي ستكون في هذين اليومين للجميع ، واليوم سوف نقدم لكم بقية الخطب المفتوحة.
ما الجديد في Frontend وما الذي يمكننا فعله بشكل أفضل؟
نتحدث كل عام عن الاتجاهات الجديدة التي ظهرت خلال العام الماضي ، وكيف أثرت على الواجهة الأمامية بأكملها. أصبح بعضها أدوات مفيدة للغاية ، والبعض الآخر أصبح شيئًا من الماضي. تحدث فيتالي فريدمان العام الماضي عن الاتجاهات في عالم الواجهة الأمامية ، وسيراجع فيليب نيخيف هذا العام تقرير " الرادار التكنولوجي: الاتجاهات كما نراها ". فيليب هو رئيس الواجهة الأمامية في Tinkoff ، وخاصة بالنسبة للمؤتمر ، سيشارك التقنيات التي سيقودها العام المقبل ، وفقًا لـ Tinkoff ، والتي أصبحت منذ فترة طويلة المعيار الفعلي ، ما ترفضه الشركات في السوق وما تخلى عنه Tinkoff.
نتوقع على الأقل أداءً جيدًا من كلا النظامين الجديد والقديم ، أي مدى سرعة استجابته للنقرات والأصوات والطلبات. إذا استجاب النظام دون تأخير ، فإن الأمر بالنسبة لنا يشبه التحدث إلى الناس في حياتنا الحقيقية. وفي عصرنا ، نتوقع هذا بشكل متزايد من جهاز كمبيوتر. بالطبع ، سيعتمد إدراكنا على ما نقوم به أثناء الانتظار - فالجميع يكره الانتظار السلبي لتحميل الصفحة ، وعندما نكون نشطين ، يمر الوقت بشكل أسرع. تعرف Eva Ferreira من Aerolab اختصارًا لتحسين أداء الواجهة الأمامية بطريقة صحية وسهلة التنفيذ. في خطابه " من 45 إلى 85 ، رحلة أداء"، ستعرض لك Eva بعض الحيل التي يمكنك استخدامها لتحسين أداء خدمة الويب الخاصة بك ، وكذلك لقياس مدى تأثير ذلك على تحميل الموقع. سوف تتحدث Eve باللغة الإنجليزية.
إذا تمكنا من قياس شيء ما ، فيمكننا تحسينه. بالطبع ، بالنسبة لكل شركة ، ستكون أهم وأفضل المقاييس هي طرق مختلفة لقياس أداء صفحة الويب. لا يوجد مؤشر عام للجميع ، في كل حالة سيكون الاختيار فرديًا. ومع ذلك ، بالنسبة لأي قياس ، نختار أولاً من مجموعة أساسية تغطي عادةً المقاييس الأكثر شيوعًا. مارتن سبليتسيقدم حديثًا ممتازًا "أساسيات الويب الأساسية - ما هي ولماذا هي مهمة؟" حول أداة من Google تسمح لك بمراقبة المقاييس الأساسية لأداء الواجهة. سيكون التقرير باللغة الإنجليزية.
وأثناء قياس الأداء ، يمكننا تحسين خدمات الويب الخاصة بنا وتغييرها كثيرًا بحيث لا ينسى زوار الموقع بطء عرض الصور فحسب ، بل يرضون أيضًا عن التواصل معك من خلال نماذج الويب. نعم ، نماذج فبراير سيئة السمعة ، والتي ، كما قدمنا بالفعل ، سيقدمها فيتالي فريدمان " الحصول على نماذج الويب الصحيحة: من مربعات الاختيار إلى القوائم المنسدلة". سيشارك Vitaly كيف يمكن للزوار الوثوق في نماذج الويب الخاصة بنا مرة أخرى دون الانتظار للتغلب على عقبات العثور على صنابير إطفاء الحرائق أو بلدهم في قائمة طويلة (بدون بحث!). وسيقدم نصائح عملية للتنفيذ الفوري وتحسين تجربة المستخدم لمشاريع الويب الخاصة بك.
هل كل شيء رائع داخل الفريق؟
لا يجب إرضاء زوار خدمات الويب فحسب ، بل يجب أيضًا إرضاء فرق التطوير التي تقوم بإنشائها وتحسينها وتغييرها. يعمل الكثير من الأشخاص في أي مشروع: المطورين والمديرين وضباط الأمن والمسئولين عن الشبكات والمحاسبين والسعاة. لا يعتمدون جميعًا على بعضهم البعض فحسب ، بل قد يؤثر أيضًا خطأ ، على سبيل المثال ، في حساب الوقت لكل مهمة ، على العملاء. يساعد Scrum على مزامنة أفعالهم مع بعضهم البعض ، وسوف تتحدث Alexandra Baptizmanskaya عن هذا في حديثها “ What Scrum؟ أنا فقط أريد أن أكتب كود! ". استنادًا إلى خبرتها الواسعة في إنشاء فرق ناجحة ، ستشارك ألكسندرا ملاحظاتها حول كيفية استفادة مطور عادي من Scrum ، وسبب الحاجة إلى فريق وعملية جماعية على الإطلاق
كل فريق لديه أعضاء صغار. إذا كان هادفًا ، فسيجد طريقه الخاص ، ولكن في بعض الأحيان يكون التوجيه على الصغار مفيدًا لكبار السن. دانييل بيليبينكو ، مؤسس ومدير مركز SymbioWay IT أخصائي التوظيف، وسوف اقول لكم لماذا هو بارد جدا ومفيدة لأي مطور المتوسطة للحصول على Padawan يونيو وتدريبه بنجاح. في تقريره " الطريق إلى الكبار" من خلال توجيه المبتدئين "يشرح دانيال سبب أهمية المرحلة الصغيرة ، وكيفية تنمية أخصائي مبتدئ يكون مفيدًا للفريق ، وكيفية التفاعل معه لتحقيق المنفعة العامة لكل من المبتدئين والفريق ، وللمشروع.
من أجل أن يكون التفاعل سهلاً وفعالاً ، وفي نفس الوقت يأخذ في الاعتبار خصوصيات أسلوب الحياة (والعمل) لجميع المطورين ، سيكون من المثالي عدم استخدام العديد من برامج المراسلة ، ولكن واحدة ، مع الكثير من الوظائف الضرورية للواجهة الأمامية. في حين أن وظائف بوابات ودردشات الشركات نادرة نوعًا ما. لكن جورجي بوجاكوف (كان يبرمج منذ أن كان في السابعة من عمره!) لديه فكرة عن كيفية إنشاء تطبيق SuperApp كامل للموظفين باستخدام Slack و Node.js. وهذا مشروع حقيقي يستخدمه أكثر من 40 فريق تطوير. في حديثه " إنشاء تطبيق فائق للشركات على أساس Slack و Node.js " ، سيوضح جورجي ما يمكن أن تفعله الروبوتات في Slack حقًا ، وما يمكن تعويضه بأدوات خارجية.
ولكن لن يساعدك برنامج مراسلة واحد في تصحيح أخطاء عمليات التطوير والاختبار والتشغيل والربط بينها. يصبح DevOps رابطًا متصلاً ، والذي يتضمن فهم العديد من الأشياء - كل من الشفرة نفسها واختبارها ومبادئ الهندسة المعمارية. بالإضافة إلى ذلك ، يجب أن تأخذ في الاعتبار المخاطر ونقاط الضعف المحتملة للنظام ، لتكون قادرًا على أتمتة العمليات. ناهيك عن تقديم الدعم قبل الإصدار وبعده. في حديثه " البرنامج التعليمي على CI / CD للواجهة الأمامية على مثال GitLab " سيشرح Timofey Tiunov بأمثلة ما يمكن أن يكون "devops" في الواجهة الأمامية وما هي الواجهة الأمامية من وجهة نظر مهندس DevOps أو مسؤول النظام.
فريق سعيد - مستخدمين سعداء؟
عندما يعمل كل فرد في الفريق بالفعل بانسجام ، فهم يفهمون بعضهم البعض ولا تتعطل المواعيد النهائية للإصدار ، فقد حان الوقت لتذكر الأعمال على هذا النحو واحتياجات مستخدمي خدمات الويب على وجه الخصوص. التصميم الرائع هو ما يراه الزوار على موقع الويب أولاً. و ستيفاني والتر في حديثه " تصميم التكيف مكونات (ما وراء نقاط استجابة) " سوف ألفت انتباهكم إلى السبب في أنه من الأفضل أن نفكر في "سياق الاستخدام" من الشاشة، بدلا من عدد من بكسل. ستوضح ستيفاني أنه في بعض الأحيان يمكن أن تخرج المكونات النشطة عن الشاشة ، ويمكن أن يكون هذا تصميمًا رائعًا أيضًا ، وسيحبه الجمهور وسيكون مريحًا في استخدامه. تقرير باللغة الإنجليزية.
وهكذا يكون التصميم الرائع أيضًا جميلًا بشكل مبهج ، كاثلين ماكماهونفي الحديث " مكونات React ذات النكهة الخاصة بإمكانية الوصول تجعل نظام التصميم الخاص بك لذيذًا! »سيشارك تجربته وخبرته في الوصول إلى التصميم وأنظمة التصميم نفسها. باللغة الإنجليزية. سوف تشرح كاثلين كيف وماذا يمكنك استخدامه في React لهذا الغرض ، وكيفية مزج مكونات واجهة المستخدم المختلفة ، وإظهار أمثلة تفاعلية لأفضل الممارسات ، وتحديد قواعد ما يمكنك فعله لخبز منتج وما لا يجب عليك فعله. يأخذ
Hui Jing Chen من Shopify الاستجابة خطوة إلى الأمام. جنبًا إلى جنب مع HJ ، سنلقي نظرة على استجابة CSS من خلال DevTools في استخدام DevTools لفهم تخطيطات CSS الحديثة". مباشرة من سنغافورة ، سيوضح HJ كيف يمكن استخدام DevTools لأكثر من مجرد أداة تصحيح. وسيوضح لك كيف يمكن لـ DevTools مساعدتك في محاذاة التخطيطات التي نريد إنشاءها مع ما يتم عرضه بالفعل على الصفحة. سيساعدك هذا على فهم أفضل لكيفية تفسير المتصفح لقيم CSS التي تحددها. على سبيل المثال ، تغيير الحجم باستخدام Flexbox أو خيارات متنوعة لتغيير حجم المسارات في الشبكة. نتيجة لذلك ، ستسمح هذه التقنيات للتصميمات بالتكيف بشكل أفضل مع مجموعة واسعة من أحجام الشاشات. سيكون التقرير ، بالطبع ، باللغة الإنجليزية.
واستمرارًا لموضوع اللغات المختلفة. كم مرة صادفت حقيقة أنه أثناء دراسة بعض المعلومات باللغة الإنجليزية ، تريد مشاهدتها باللغة الروسية؟ ولكن ، بعد أن قمت بتحويل الموقع إلى اللغة الروسية ، فأنت لا تجد هذه المعلومات فقط (نفس الشيء بالنسبة لجميع اللغات) ، ولكن بشكل عام يمكن أن يصبح الموقع فجأة مختلفًا "قليلاً"؟ على الأرجح ، حدث خطأ طفيف في توطين مثل هذا الموقع كما نود. كيفية التعامل مع صعوبات التوطين هذه على الجانب الأمامي ، خاصةً عندما يكون المشروع ضخمًا والفريق كبير ، سيقول ديمتري أندريانوف في تقريره " الخوف والبغض من التوطين في المشاريع الكبيرة ". سيوضح ديمتري كيف تم تنظيم الترجمة في Yandex.Direct - وهو مشروع يضم عشرات الآلاف من أجزاء النص وفريق مكون من أكثر من 40 شخصًا.
يمكن للمطور أن يكون ساحرا؟
بالطبع ، يا له من مؤتمر أمامي (وبالطبع أي مشروع) بدون المطورين أنفسهم! عندما يكون لديك فريق ، تصميم ، يتم إطلاق عملية العمل ، تتبع السباقات واحدة تلو الأخرى ، يبدو أن كل ما تبقى هو كتابة التعليمات البرمجية. ولكن ليس فقط الأشخاص في الفرق هم من يعانون من مشاكل التوصيل البيني. داخل التطبيقات ، يمكن استخدام لغات مختلفة ، وتحتاج المكونات إلى اتصالات مع بعضها البعض ، ولكن في نفس الوقت ، يمكن أن تتطور كل عقبة إلى مهمة جادة تعمل على تطوير الواجهة وتحريكها إلى الأمام.
يمكن أن يزداد التعقيد داخل التطبيقات بسبب حقيقة أن الحالات المختلفة موزعة على العديد من المكونات ، وأنها بحاجة إلى اتصال فيما بينها. الكسندر شوشونوف في حديثه " قلب تطبيق Vue»لا يقدم فقط مدير Vuex State الذي يأتي مع إطار عمل Vue. سيتحدث الإسكندر عن بعض الفروق الدقيقة في العمل معه ويشرح هيكله الداخلي. مدير الدولة هو قلب تطبيق الويب الحديث. ومع ذلك ، فإن Vuex بسيط للغاية - ليس من السهل العثور على أمثلة معقدة لاستخدامه. لكن ألكساندر سيوضح كيف يتم استخدام Vuex في EPAM Systems ، وما هي المشكلات التي واجهها الفريق ، وما علاقة الأداء بها. لا يهم إذا كنت تستخدم Veux أم لا حتى الآن - ستكون المعلومات مفيدة للجميع.
لكن هناك تحدٍ آخر - هل توجد حياة بدون JavaScript؟ هل يمكن أن يكون الموقع تفاعليًا مع أدوات أخرى؟ بالطبع يعمل JavaScript على أنظمة التشغيل Windows و macOS و Linux وعلى الأنظمة الأساسية للجوّال ، أي في كل مكان. على الكمبيوتر الشخصي ، قامت الأنظمة الأساسية Node.js و Angular و React Native بإخراج JavaScript من حدود المتصفح. ومع ذلك ، يدعوك ديمتري شرابين للاستماع إلى رأيه. يعتقد ديمتري أن مستقبل HTML قد حان بالفعل بفضل Mavo ، التي يتم تطويرها في معهد ماساتشوستس للتكنولوجيا (MIT) تحت قيادة Lea Verou. في تقريره " أسرار مافو. حل مهام مطور الويب اليومية بدون JavaScript"سيُظهر ديمتري مزاياه بوضوح وسيجيب على سؤال ما إذا كانت التقنيات مثل تطوير تطبيقات الويب التفاعلية مطلوبة الآن فقط عن طريق كتابة HTML و CSS.
سيتم دعم البرمجة بدون JC من قبل Ilya Chertorylsky ، مطور الواجهة الأمامية في Raiffeisenbank. في حديثه " WebAssembly SPA-framework " سيأخذ إيليا في الاعتبار هذه الاتجاهات في تطوير الواجهة الأمامية مثل GO و RUST و C # و PHP من حيث استخدام أطر عمل كاملة تسمح لك بكتابة موقع ويب جاهز بلغة مألوفة بدون JavaScript. يمكن كتابة الواجهة الأمامية بأي لغة برمجة تقريبًا ، وسيخبرك إيليا بكيفية تنفيذها عمليًا. سيواصل فاديم باتسيف
موضوع فضح الأساطير حول عدم وجود مهام مهمة في تطوير الواجهة الأماميةمن Yandex ، والتي ستظهر في التقرير " أين أنا وأين آلة الدولة؟ أن هناك مهام معقدة ومثيرة للاهتمام للمبرمجين في تطوير الويب. الواجهة الأمامية ليست مجرد تثبيت للأشكال ، بل هي حل القضايا والعقبات الجادة ، وتنفيذ الأفكار الكبيرة. يعتقد فاديم أنه يمكنك تجربة أشياء مثل آلة الدولة المحدودة ، وسلاسل ماركوف ، وما إلى ذلك دون خوف. تعال واستمع إلى شيء غير عادي!
إذا كنت ترغب في المناقشة ، اطلب المشورة أو شارك قصصًا من العمل ، اشترك في قناة FrontendConf Talks Telegram . وسنكتب عن شرائح الحدث الخاصة بالمؤتمر في telegram و facebook و twitter و VKontakte .