كما هو الحال دائمًا ، بالإضافة إلى التقارير ، سيكون هناك أيضًا مكثف ، وفصول رئيسية وورش عمل ، وبالطبع مناقشات مفتوحة (يمكن لأي شخص القيام بذلك - اقتراح موضوع للمناقشة ودعوة المشاركين).
لتوسيع أفقك ، اخترنا مرة أخرى التقارير الإبداعية والعملية فقط عن مشاريع الحياة الواقعية. ستكون هناك تقارير عن الأفكار الجديدة والعروض التوضيحية حول كيفية عملها وعملها. في فصول الماجستير ، سنخبرك كيف تحل الفرق الصعوبات المفاجئة ، وما هي الدراية الجديدة التي اخترعوها وما الذي حصلوا عليه نتيجة لذلك. سنتحدث أيضًا عن الجمال.
وجميل وآمن
في مسار الأسئلة الشائعة ، لا يخشى المتحدثون التعمق في التكنولوجيا والعودة بنتائج مثيرة للاهتمام. سيعلمونك كيفية منع الاختراق من الخارج على مستوى الشفرة ، وكذلك كيفية العمل في وقت تشغيل الكتابة الثابتة TypeScript. ستضيف مكبرات الصوت القليل من المتشددين ، ومن تطور الجانب الجميل سيكون هناك الكثير من الأشياء المثيرة للاهتمام حول الصوت والرقص والأيقونات.
الكسندر إنكين (Tinkoff.ru)، وهو مطور شغوف وخبير مطور Google وملحن ومشجع للأفلام ، سيعرض تطبيقه لتشغيل المزج في متصفح. سيشرح ألكساندر في عروضه التوضيحية المذهلة كيف يمكنك استخدام واجهة برمجة تطبيقات Web Audio الضرورية بأسلوب تعريفي. سيتحدث أيضًا عما سيساعدك على إعادة استخدام الكتل التي تم إنشاؤها بسهولة ، وبشكل عام من المريح استخدام واجهة برمجة التطبيقات في بيئات مكونات الويب أو الأطر باستخدام نهج مكون.
أحب Vasilika Klimova (Avaloq) ، وهو مبشر ثلاثي الأبعاد من لوكسمبورغ يتمتع بخبرة 11 عامًا في تطوير الويب ، استخدام تقنية ثلاثية الأبعاد في الواجهة الأمامية حتى قبل أن تصبح سائدة. كنت قائد فريق الواجهة الأمامية في Artec3D ، حيث تعرفت على العالم ثلاثي الأبعاد لـ WebGL.
ستعرض Vasilika كيف علّمت نموذجها ثلاثي الأبعاد الرقص ، وسوف تتعلم ما هو التزوير ونماذج الجلد ولماذا نماذج العظام ثلاثية الأبعاد.
في صناعتنا ، نادرًا ما يفكر الناس في الأدوات المنزلية الصغيرة مثل رموز svg. نيكيتا موستوفوي (HeadHunter) ، مطور الواجهة الأمامية الرائد في فريق الهندسة المعمارية ، سوف ينغمس في عالمهم الرائع ويخبرنا عن كيفية التحدث عن كيفية تحسين إضافة الرموز إلى الموقع من خلال مكون مضمّن. سيوضح لك Nikita أيضًا كيفية حل مشكلة الرموز غير المخزنة مؤقتًا أثناء SSR ، وكيفية تغيير الرموز وتحسين عملية تحميلها.
إذا كنت ترغب في فتح المصدر وتوفير أسبوعين من التدريب ، إذن رومان سيدوف من Tinkoff.ru، مطور زاوية ومؤلف كتاب تفاعلي عن الزاوية المتقدمة) ، سيخبرك بما تحتاج إلى أن تكون قادرًا على فعله ومعرفته. يدعم Roman ويطور مشاريع مفتوحة المصدر في العالم Angular ويعرف عمليًا كم هو ممتع إنشاء مكتبات NPM. وكذلك كيفية كتابة التوثيق ، وكيف تبدو الحزمة بدون رمز غير ضروري ، وكيف لا تعطي انطباعًا عن المواد الخام بدلاً من المصادر ، وكيفية إعداد التحقق من الكود وكيفية تحميله.
بعد تحميل الكود ، يجب أن تكون مستعدًا لفهم المتسللين له أيضًا. ستوضح تاتيانا نوفيكوفا (TSARKA) ، وهي مدقق خبير ومدقق شفرة المصدر من وجهة نظر أمنية ، ماهية موجات الهجوم وكيف يستغل المتسللون نقاط الضعف في الواجهة الأمامية. سيوضح أيضًا سبب عدم حماية أطر الويب للمطور من الأخطاء الأمنية وكيفية التعامل معها جميعًا.
ستأخذ Tatiana جولة في عالم نقاط الضعف الأمامية ، بدءًا من XSS وتنتهي بأنواع الهجمات ليست الأكثر شيوعًا ، بحيث يمكنك القول بثقة أن لديك حدًا أدنى من النظافة.
وبالطبع ، حيث بدون المتشددين. تتطور تقنيات الواجهة الأمامية باستمرار ، ولا نواكب هذا التطور دائمًا. الكسندر رودينكو (X5Labs) ، كبير مهندسي البرمجيات / قائد المجتمع في Facebook Developer Circle: موسكو ، سيواصل ذلك من المؤتمر الأخير. قدم لنا ألكساندر في العام الماضي Relay Modern ، وسيخبرك هذا العام بكيفية العمل مع طبقات الشبكة والبيانات فيها.
سوف يذكرك Alexander بالمبادئ الأساسية لـ Relay Modern ، ثم يغوص في طبقة البيانات وطبقة الشبكة للتحدث عن اتصال كفء إلى جانب الخادم.
سيشرح مايك باشوروف (WiseBits) ، المتحدث المقيم ، ومحبي TypeScript samurai و ReasonML ، كيفية سحب الكتابة الثابتة إلى وقت التشغيل في TS. لاجل ماذا؟ على سبيل المثال ، للتحقق من صحة JSON ، أو بيانات أخرى ، أو للاختبار القائم على الخاصية. إنه ليس بالأمر السهل ، ولكن إذا كنت تريد ذلك حقًا ، فيمكنك ذلك!
سيوضح لك مايك ماهية الانبعاث الموجه بالنوع ، وكيفية استخدامه ، ومقارنته بالحلول الأخرى ، والغوص في تفاصيل واجهة برمجة تطبيقات التحويل (وسنرى ماهية هذا الأسلوب. تعال وشاهد كيف تنتقل الأنواع إلى وقت التشغيل والتحقق من صحة البيانات ...
جميل ليس فقط في الخارج ، ولكن أيضًا في الداخل
يريد المطورون أيضًا العمل في كود جميل ومريح. بالطبع ، من الصعب تقييم ما إذا كانت الهندسة المعمارية جيدة أم لا - ستكون ناجحة في مشروع ما ، وفي مشروع آخر "سيحدث خطأ ما". ومع ذلك ، فإن البنية المفهومة تساعد دائمًا في العمل في المشروع: يتم تمديد أو تغيير الكود دون صعوبات كبيرة في فهمه واختباره. حتى لو حصلت للتو على كود شخص آخر بين يديك. تدور تقارير مسار "الهندسة المعمارية" حول كيفية جعل الحياة أسهل للمطور.
سوف يرضي دينيس كراسنوفسكي (DomClik) ، مدير التطوير التقني ، مرة أخرى بتقرير عن تحسين الكود. هذه المرة سيتحدث دينيس عن منهجية إعادة البناء التي تم شحذها في العديد من المشاريع. بمساعدتها ، يمكنك بث حياة جديدة في أكثر التعليمات البرمجية غير المفهومة.
باستخدام الخوارزمية الجديدة ، سيكون من الأسهل اتخاذ قرار للتعامل مع المشكلات عندما تكون قد وصلت بالفعل إلى مشروع قديم.
Ivan Soloviev (Evrone) ، ليس فقط مطور JS للواجهة الأمامية ، ولكن أيضًا ممارس Go and Rust - يحب مقارنتها مع بعضها البعض ومع JavaScript. سيتحدث إيفان عن كيفية تأثير الاختيار بين monolith و microservices ، وكذلك المستودع الأحادي و polyrep ، على مكافحة التعقيد في المشاريع الكبيرة.
سيشارك إيفان أيضًا كيف ستساعد البنية المختارة في منع مثل هذه الأمراض التي تصيب الواجهة الأمامية الكبيرة مثل دورة الإصدار ، والبيع في النمو ، وتقادم الكود ، وتقييم التبعية ، ونسخ الكود ، والرمز المشترك.
علي رحيموف (أوكو)، مطور الواجهة الأمامية منذ 2013 ، سيتحدث عن فوائد TypeScript في هندسة تطوير الويب ولماذا يختار المطورون TypeScript بشكل متزايد لمشاريعهم. وأيضًا حول إيجابيات وسلبيات استخدام اللغة ومدى سهولة بدء موقع الويب الأول الخاص بك في TypeScript.
سيتم تخصيص كتلة منفصلة للكتابة ، وهي حجر الزاوية في اللغة التي يتعثر فيها حتى المطورون المتمرسون. سوف يروي
Andrey Marchenko (Tinkoff.ru) ، techlead ، منصة المطورين للمطورين ، قصة مشروعه. اكتشف كيف تغيرت بنية الواجهة الأمامية وتطورت في Tinkoff. كيف أنشأ 5 مطورين في عام 2015 موقع tinkoff.ru على React 0.13 وكيف يعيش المشروع الآن.
يوجد الآن بالفعل 60 مطورًا ، ويتكون المونوليث من 40 تطبيقًا منفصلاً ، وواجهات صغيرة ، و monoreps ومنتجات تقنية.
سيوضح لك فلاديمير جريننكو (ياندكس) ، رئيس خدمة المكونات المشتركة في قسم تطوير واجهة البحث ، كيفية إيجاد التوازن المثالي حتى لا تدفع الجميع إلى نظام تصميم واحد وفي نفس الوقت الحفاظ على التعريف الذاتي البصري. نظرًا لأن Yandex تصنع منتجات مختلفة تمامًا (البحث وسيارات الأجرة والموسيقى والطعام والتعليم والسينما) ، فإن اتساق (تناسق) الواجهات عبر Yandex يعد ظاهرة متناقضة من وجهة نظر بصرية وتكنولوجية.
سيُظهر فلاديمير معادلة فوائد الكود المشترك: أين ستعمل ، وأين من الأفضل أن تكتب دراجتك الخاصة ، وسيخبرك بكيفية إعادة استخدام الكود دون الفاشية التقنية وإيقاف التجارب.
لطيفة والنتيجة
لا أحد يرغب في إضاعة الوقت في الاختبار بنتائج غير مفهومة أو الخوض في ظروف اختبار صعبة ، حتى لو كانت النتائج جيدة. لجعل النتيجة تلبي توقعاتك ، سيخبرك المتحدثون لدينا بكيفية جعل الاختبارات مفهومة حتى بالنسبة للمختبرين والمديرين ، وكيف تبدو الاختبارات من منظور ضمان الجودة السابق الذي تحول إلى التطوير. وفي "الاختبار" ، بالإضافة إلى التقارير ، ستكون هناك اختبارات بحد ذاتها ، على وجه الخصوص ، خدمات الويب nodejs وواجهة المستخدم.
سيتحدث ألكساندر إيوسا (Diginavis) ، مدير المنتج ، مضيف القناة حول آلام وأفراح مهندسي البرمجيات ، عن اختبار BDD لتطبيقات الويب وكيف يساعد في كتابة اختبارات E2E أرخص وأسرع. يوضح كيف تجعل صيغة غيركين مع Cypress الاختبارات مفهومة ليس فقط للمطورين ، ولكن أيضًا للمختبرين والمديرين.
سوف يعلم ألكساندر كيفية كتابة الاختبارات ، بالإضافة إلى من يجب أن يكتبها ومتى يمكنه كتابتها. سوف تكون قادرًا على تحديد مكان اختبارات القبول في خط أنابيب ci / cd ، وإعادة استخدام الكتل المكتوبة مسبقًا ، وبعد كل هذا ، من السهل الحفاظ على عملية الاختبار وتوسيعها.
يعرف ألكساندر أيضًا ماذا يصطاد في إنوبوليس ، حيث يعيش منذ أكثر من 4 سنوات. لا تفوت فرصة سؤاله عن ذلك)
سيطرح Nikolay Moskalenko (Raiffeisenbank) ، المختبِر الذي يتمتع بخبرة 10 سنوات ، ومطور الواجهة الأمامية في React و Animator ، أسئلة محرجة حول جودة الاختبار. سنرى الوضع مع الاختبارات من خلال عيون QA السابق الذي انتقل إلى التطوير. ودعنا نتعرف على كيفية اختبار الكود بسرعة (هناك عيوب أكثر مما يبدو!).
سيخبرك Nikolay أيضًا عن الاختبارات الأفضل لاختيارها لتوفير الوقت. سوف تفهم التقنيات والأدوات التي تقضي على التبعيات الخارجية عند اختبار تطبيقات الواجهة الأمامية. لكن هذا ليس كل شيء! سيخبرك Nikolay بكيفية تسريع كتابة الاختبارات التلقائية في JavaScript وزيادة قابليتها للقراءة باستخدام تدوين Gherking ، مكتبة jest-cucumber.
بالنسبة للحلوى ، يوجد نمط PageObject للاختبارات الشاملة على محرك العرائس ، والذي يبسط دعم الاختبارات التلقائية لواجهة المستخدم.
وأخيرًا ، سيتم إجراء ما يصل إلى فصلين رئيسيين في الاختبار بواسطة Maxim Sosnov (SKB Kontur)، مطور رئيسي ، محرك لثقافة التميز التقني التي تسعى جاهدة لتكون رشيقة ومتوافقة مع فلسفة DevOps. سيخبرك مكسيم ما هي الأنماط والأنماط المضادة ، وكيفية إجراء اختبارات مفيدة ، وكيفية بيع الاختبارات لفريق حتى لا يغير المطورون أنوفهم.
فئة رئيسية 1. اختبار خدمات nodejs-web
في الفصل الرئيسي الأول ، سيوضح مكسيم كيفية اختبار خدمة nodejs بشكل صحيح. كيفية الحصول على اختبارات وظيفية موثوقة باستخدام mocha و chai و nock و supertest ، باستخدام أفضل ممارسات الاختبار والفطرة السليمة. دعونا نرى كيف تساعد مثل هذه الاختبارات في إعادة البناء.
درجة الماجستير 2. اختبار واجهة المستخدم
جنبًا إلى جنب مع Maxim ، سنقوم بتكييف أفضل ممارسات الاختبار للتخطيط ومعرفة مجموعة الاختبار المثالية لاختبار واجهة المستخدم. سيغطي ممارسات مثل اختبار لقطة الشاشة والاختبار الوظيفي وكيفية دمجها بسهولة في عملية التطوير الخاصة بك. الأدوات المستخدمة:
- قصة
- loki.js
- مكتبة الاختبار
- مزاح
لطيف وسريع
ماذا يحدث للمستخدم عندما يفتح التطبيق؟ هل ينتظر دقيقتين بعد كل نقرة أو ينغمس في العمل بسعادة؟
في الوقت الحاضر ، لم يعد الأداء يتحسن بأثر رجعي ، ولكن عن طريق التطوير. يتحقق المطورون فورًا من كيفية تأثير القرارات المعمارية على سرعة التحميل والعرض والتفاعل وما إلى ذلك. هذا يتطلب مراقبة مستمرة. يتطلب الاختبار والقياس مقاييس تعتمد على عدد كبير من المعلمات. على سبيل المثال ، على أي جهاز ، وفي أي متصفح ، وفي أي شبكة وبأي جدار ناري فتح المستخدم التطبيق؟ ناهيك عن الخوادم المرحلية وذاكرة التخزين المؤقت والوكلاء والتفاصيل الأخرى. وحتى بعد كل هذه الجهود ، لا يزال التسريع يمثل مشكلة ومتاعب للمطورين.
رغم كل هذه الصعوبات ،Nikolay Ryabov (Avito) ، يتعامل مع كل ما يتعلق بأداء الواجهة الأمامية داخل Avito - مجموعة من المقاييس ، والتنميط ، والتحسين. نيكولاي مقتنع بأن مهمة الشركة هي جعل الميزات بكفاءة.
في المؤتمر ، سيقترح نيكولاي الجمع بين إمكانات Lighthouse ومحلل حزم الويب و Chrome DevTools Performance في أداة واحدة. اكتشف لماذا لن تساعدك هذه المجموعة المتنوعة من الأدوات وحدها في مراقبة الأداء بشكل مستمر.
فيكتور روساكوفيتش (GP Solutions)، مطور الواجهة الأمامية الذي شاهد العديد من أطر العمل والمكتبات ، يعمل مع jQuery و Backbone و Knockout و Angular و Elm و Clojure و RxJS وأخيراً React. سيتحدث فيكتور بالتفصيل عن المقاييس والأدوات لجمع الإحصائيات حول أداء مواقع العملاء ، وما هي الاستنتاجات التي يمكن استخلاصها ، وكيف أن الإحصائيات لا تجمع البيانات فحسب ، بل تحسن أيضًا سرعة المواقع.
سيتلقى مستمعوا التقرير إجابات على الأسئلة:
- ماذا وكيف نجمع؟
- كيف ولماذا نحلل؟
- لماذا تجمع الإحصائيات من المستخدمين؟
- كيف تعرف مدى سرعة تحميل موقعك وأدائه؟
- لماذا تهتم بسرعة الموقع على الإطلاق؟
سيخبرك Vitaly Sysolyatin (Delivery Club) و techlead و JavaScript ومطور الواجهة الأمامية ، بكيفية جعل SSR في أسرع وقت ممكن وما هي المشكلات التي سيتعين عليك حلها. مثال على ذلك هو موقع delivery-club.ru الجديد ، والذي تم إطلاقه كتطبيق صفحة واحدة مع تطبيق عرض جانب الخادم.
سيخبرك Vitaly بنوع أشعل النار التي مروا بها ، وما الذي سيكون مشكلة لمطور الواجهة الأمامية في جافا سكريبت في بيئة الخادم. جنبًا إلى جنب مع Vitaly ، سنتعلم كيفية تجاوز نقاط ضعف JavaScript من أجل كفاءة التطبيق. قصص الحياة الحقيقية ستكون هناك أيضًا!
الكسندر بالتسيفيتش (سينسيس)، مدوِّن رائد وعالِم يمارس التجارب التعليمية. في Frontend Live ، سيشرح ألكساندر كيف تقدم React 60 إطارًا في الثانية حتى مع تدفق ضخم من التحديثات كل ثانية.لنكتشف كيف يحقق React سرعة مقارنة O (n) مع الخوارزميات الأكثر تقدمًا مع مقارنات الشجرة بترتيب O (n ^ 3).
وبالطبع ، سنرى أمثلة قتالية لكيفية إطلاق النار على قدمك بمثل هذا التسارع!
مربعة بشكل جميل
يعمل عقل المطور والمستخدم على موجات مختلفة. سيجد الأول الميزة رائعة ، بينما سيشوش الثاني ببساطة عند محاولة تغيير عدد العناصر في السلة. وما يريده المستخدم يبدو بسيطًا للغاية بالنسبة إلى عبقري. ومع ذلك ، يستخدم المطورون أيضًا التطبيقات ويعانون بنفس الطريقة عندما يمنعهم التصميم أو الواجهة أو حتى اللون من وضع أيديهم على ما طلبوه. في مسار التصميم ، ستكون هناك تقارير عن اللون والواجهة للمستخدمين.
جلافيرا زور (سبوريت)، رئيس فريق ومطور إمكانية الوصول ، شغوف بالواجهات وإمكانية الوصول إليها منذ سن مبكرة. في Frontend Live ، سيتحدث عن التأثير النفسي للون ، والذي لا يعتمد على الموضة والاتجاهات ونزهة العميل. سيكشف عن كيفية تأثير اللون في الواجهة على إدراك المعلومات ، وكيف يمكن للمطورين استخدامه للتحكم في الحالة المزاجية والاختيار وتجربة العميل.
سوف نتعرف أيضًا على إمكانية الوصول إلى الواجهات من حيث حلول الألوان.
آنا سيليزنيفا (Spiral Scout) ، مطورة الواجهة الإبداعية ، ومتحدثة في المؤتمرات والاجتماعات ، والمنظمة المشاركة لاجتماعات MinskCSS و MinskJS ومؤتمرات CSSMinskJS. سوف تذكرك Anna بأننا نعمل على تطوير واجهات المستخدم -. سوف نتعلم كيف نضع في اعتبارنا فكرة أن الأشخاص الحقيقيين سيستخدمونها عند تنفيذ واجهة.
وفقًا لآنا ، "قبل 10 سنوات كانت مشكلتنا عبارة عن زوايا دائرية عبر المتصفح ، والآن نحتاج إلى جعل الموقع سريع الاستجابة ويمكن الوصول إليه وفعالاً".
وأخيرًا ، سيتحدث فيتالي فريدمان (مجلة Smashing) ، المؤسس المشارك للمجلة الإلكترونية ، ومؤلف الكتب ومستشار الواجهة الأمامية / UX مع نظرة عامة ، عن تأثير ملاءمة الخدمة على التحويلات ومؤشرات الأعمال الرئيسية . سيكون حديث فيتالي حول تطوير نماذج الويب للمستخدم النهائي ، الذي غالبًا ما يحدد مدى ملاءمة الخدمة بأكملها من خلالهم تحديدًا.
غالبًا ما يتعذر الوصول إلى نماذج الويب ويصعب استخدامها ، وسيصف فيتالي نقاط الألم النموذجية التي يواجهها العملاء كثيرًا. أخيرًا ، سوف نتعلم كيفية إنشاء واجهة تتيح لنا تلقي المعلومات من العميل بطريقة ودية ، وبالتالي مساعدة كل من التحويلات وزيادة مؤشرات الأعمال الرئيسية.
انظر القائمة الكاملة للتقارير على موقع المؤتمر . في النسخة المحمولة من الموقع ، يمكنك إضافة المحادثات التي تريدها إلى جدولك الزمني. لا تنس حجز تذكرتك (سترتفع الأسعار في 15 سبتمبر).
الواجهة الأمامية لايف 2020من 23 سبتمبر 2020 إلى 2 أكتوبر 2020 عبر الإنترنت حول العالم. لقد أنشأنا تنسيقًا جديدًا له ، وهو فعال مثل الاجتماعات غير المتصلة بالإنترنت. يمكنك أن تشعر بطاقة المجتمع ، وإعادة شحنه ، والتواصل مع أقرانه في الصناعة والحصول على مشورة الخبراء. يمكنك حتى أن يكون لديك حفلة عبر الإنترنت مع الدراجات حتى الصباح لحياتك وحياتك المهنية. كل شيء يشبه الحياة :) تم بالفعل وضع
جدول زمني لكل يوم ، لكن التغييرات الصغيرة ممكنة. وسنكتب عن شرائح الحدث الخاصة بالمؤتمر في telegram و facebook و twitter و VKontakte .