フロントエンドライブ2020：新しいフォーマット-新しい機会

今年のフロントエンドライブでは、開発で最も関連性の高いトピックについて再度話し合います。アーキテクチャ、パフォーマンス、テスト、および設計に関する4つのトラックがあります。ただし、フロントエンドの開発と拡張が進むにつれて、関連する問題についても説明します。古い（および新しい）問題に対する興味深い解決策が表示されます。もちろん、新しい調査項目もあります。



いつものように、レポートに加えて、インテンシブ、マスタークラス、ワークショップ、そしてもちろんオープンディスカッションもあります（誰でもこれを行うことができます-ディスカッションのトピックを提案し、参加者を招待します）。







あなたの視野を広げるために、私たちは再び実際のプロジェクトに関する創造的で実用的なレポートのみを選択しました。すべてがどのように機能し、機能するかについての新しいアイデアとデモンストレーションに関するレポートがあります。マスタークラスでは、チームが突然の困難をどのように解決するか、チームが発明した新しいノウハウ、そしてその結果として得たものについて説明します。美しさについてもお話します。

そして美しく安全

よくある質問のトラックでは、スピーカーはテクノロジーを深く掘り下げて興味深い結果を返すことを恐れません。コードレベルで外部からの侵入を防ぐ方法と、静的型付けランタイムTypeScriptで作業する方法について説明します。スピーカーは少しハードコアを追加し、美しい側面の開発から、サウンド、ダンス、アイコンについて多くの興味深いことがあります。



アレクサンダーインキン（Tinkoff.ru）情熱的な角度のある開発者、Google Developer Expert、作曲家、映画ファンが、ブラウザでシンセサイザーを再生するための彼のアプリを紹介します。アレクサンダーは、彼の素晴らしいデモで、必須のWeb AudioAPIを宣言的なスタイルで使用する方法を説明します。また、作成されたブロックを簡単に再利用するのに役立つものについても説明します。一般に、コンポーネントアプローチを使用してWebコンポーネントまたはフレームワークの環境でAPIを使用するのは快適です。Web開発で11年の経験を持つルクセンブルク出身の3Dエバンジェリストである



VasilikaKlimova（Avaloq）は、フロントエンドが主流になる前から、フロントエンドで3Dテクノロジーを使用するのが大好きでした。私はArtec3Dのフロントエンドチームリーダーであり、WebGLの3Dの世界に精通していました。



Vasilikaは、彼女が3Dモデルにダンスを教えた方法を示し、リギングとは何か、スキニングモデル、および3Dボーンモデルの理由を学びます。



私たちの業界では、人々はそのような小さな家庭用品をsvgアイコンと考えることはめったにありません。アーキテクチャチームの主要なフロントエンド開発者であるNikitaMostovoy（HeadHunter）は、彼らの素晴らしい世界に没頭し、インラインコンポーネントを介してサイトへのアイコンの追加を最適化する方法について説明します。 Nikitaは、SSR中に非キャッシングアイコンの問題を解決する方法、アイコンを変更する方法、およびアイコンの読み込みプロセスを最適化する方法についても説明します。



オープンソースでトレーニングを数週間節約したい場合は、Tinkoff.ruのRomanSedovが、角度の開発者であり、高度な角度に関するインタラクティブな本の著者）は、あなたが何をして知る必要があるかを教えてくれます。 Romanは、Angularの世界でオープンソースプロジェクトをサポートおよび開発しており、NPMライブラリを作成することがいかに楽しいかを実際に知っています。また、ドキュメントの作成方法、不要なコードなしでパッケージがどのように見えるか、ソースではなく原材料の印象を与えない方法、コード検証を設定する方法、およびアップロードする方法についても説明します。



コードをアップロードした後、ハッカーもそれを理解できるように準備する必要があります。セキュリティの観点から経験豊富なペンテスターおよびソースコード監査人であるTatianaNovikova （TSARKA）は、どのような攻撃ベクトルが存在し、ハッカーがフロントエンドの脆弱​​性をどのように悪用するかを示します。また、Webフレームワークが開発者をセキュリティエラーから保護しない理由と、それらすべてに対処する方法についても説明します。



Tatianaは、XSSから始まり、最も人気のないタイプの攻撃で終わるフロントエンドの脆弱​​性の世界をツアーします。これにより、衛生的な最小値があると自信を持って言えるようになります。



そしてもちろん、ハードコアなしで。フロントエンドテクノロジーは絶えず進化しており、私たちは常にこの開発に追いつくとは限りません。Facebook Developer Circle：Moscowのシニアソフトウェアエンジニア/コミュニティリードであるAlexander Rudenko（X5Labs）は、前回の会議から継続します。昨年、AlexanderはRelay Modernを紹介しました。今年は、その中でNetwork＆DataLayersを操作する方法を説明します。



アレクサンダーは、リレーモダンの基本原則を思い出させてから、データレイヤーとネットワークレイヤーに飛び込んで、サーバー側への適切な接続について話します。



TypeScriptサムライとReasonMLファンのレギュラースピーカーであるMikeBashurov（WiseBits）が、TSの静的型付けをランタイムにドラッグする方法を説明します。何のために？たとえば、JSON、その他のデータの検証、またはプロパティベースのテスト用です。簡単なことではありませんが、本当にやりたいのであれば、できます！



マイクは、タイプ指向のエミットとは何か、それを使用する方法、他のソリューションと比較する方法、およびトランスパイラーAPIの詳細を説明します（そして、このアプローチのレーキが何であるかを確認します。タイプがランタイムに移動してデータを検証する方法をご覧ください..。

外だけでなく中も美しい

開発者はまた、美しく便利なコードで作業したいと考えています。もちろん、アーキテクチャが優れているかどうかを評価することは困難です。あるプロジェクトでは成功し、別のプロジェクトでは「何かがうまくいかない」のです。それでも、明確なアーキテクチャは常にプロジェクトでの作業に役立ちます。コードの拡張や変更は、コードの理解とテストに大きな困難を伴うことなく行われます。他人のコードを手にしただけでも。 「Architecture」トラックのレポートは、開発者の生活を楽にする方法に関するものです。技術開発マネージャーの



DenisKrasnovsky（DomClik）は、コードの最適化に関するレポートを再度提供します。今回、デニスは多くのプロジェクトで磨かれたリファクタリング方法について話します。その助けを借りて、あなたは最も理解できないコードに新しい命を吹き込むことができます。



新しいアルゴリズムを使用すると、レガシーのプロジェクトに既に参加している場合に、問題に対処する決定を下すのが簡単になります。



Ivan Soloviev（Evrone）は、フロントエンドJS開発者であるだけでなく、Go andRustの実践者でもあります。彼はそれらを互いに比較したりJavaScriptと比較したりするのが好きです。 Ivanは、モノリスとマイクロサービス、およびモノリポジトリとポリレップの選択が、大規模プロジェクトの複雑さとの闘いにどのように影響するかについて話します。



Ivanはまた、選択したアーキテクチャが、リリースサイクル、成長中のベンダー、コードの廃止、依存関係の評価、コードの重複、共有コードなど、大規模なフロントエンドの病気の防止にどのように役立つかについても共有します。



アリ・ラヒモフ（オッコ）2013年以来のフロントエンド開発者である、は、Web開発アーキテクチャにおけるTypeScriptの利点と、開発者がプロ​​ジェクトにTypeScriptをますます選択している理由について説明します。また、この言語を使用することの長所と短所、およびTypeScriptで最初のWebサイトを開始するのがいかに簡単かについても説明します。



別のブロックはタイピングに専念します。これは、経験豊富な開発者でさえつまずく言語の基礎です。開発者向けの開発者プラットフォームである技術リーダーのAndreyMarchenko



（Tinkoff.ru）が、彼のプロジェクトのストーリーを語ります。 Tinkoffでフロントエンドアーキテクチャがどのように変化し、進化したかをご覧ください。 2015年に5人の開発者がReact0.13でサイトtinkoff.ruを作成した方法と、プロジェクトの現在の状況。



現在、すでに60人の開発者がおり、モノリスは40の個別のアプリケーション、マイクロフロント、モノレップ、および技術製品で構成されています。



検索インターフェイス開発部門の共有コンポーネントサービスの責任者であるVladimirGrinenko（Yandex）が、すべての人を単一の設計システムに追い込まないようにすると同時に、視覚的な自己識別を維持するための完璧なバランスを見つける方法を紹介します。Yandexは非常に異なる製品（検索、タクシー、音楽、食品、教育、映画）を製造しているため、Yandex全体のインターフェイスの一貫性（一貫性）は、視覚的および技術的観点から矛盾する現象です。



ウラジミールは、一般的なコードの利点の公式を示します：それが機能する場所、そしてあなた自身の自転車を書くのがより良い場所、そしてテクノファシズムと実験を止めることなくコードを再利用する方法を教えます。

ニースと結果

たとえ結果が良好であっても、理解できない結果でテストに時間を費やしたり、困難なテスト条件をくぐり抜けたりすることを望んでいる人は誰もいません。結果を期待に応えるために、スピーカーは、テスターやマネージャーでもテストを理解できるようにする方法、開発に切り替えた元QAの観点からテストがどのように見えるかを説明します。また、「テスト」では、レポートに加えて、テスト自体、特にnodejs-web-servicesとUIがあります。ソフトウェアエンジニアの苦痛と喜びについてチャンネルのホストである製品マネージャーの



AlexanderIossa（Diginavis）が、WebアプリケーションのBDDテストと、それがE2Eテストをより安くより速く書くのにどのように役立つかについて話します。サイプレスと組み合わせたGherkin構文が、開発者だけでなく、テスターやマネージャーにとってもテストを理解できるようにする方法を示します。



アレクサンダーは、テストの書き方と、誰がいつテストを書くべきか、そしていつ書くことができるかを教えます。 ci / cdパイプラインで受け入れテストの場所を定義し、以前に作成したブロックを再利用できるようになります。そうすれば、テストプロセスの保守と拡張が簡単になります。



アレクサンダーはまた、彼が4年以上住んでいるイノポリスで何を釣るかを知っています。彼にそれについて尋ねる機会をお見逃しなく



） 10年の経験を持つテスターであり、Reactのフロントエンド開発者でありアニメーターであるNikolay Moskalenko（Raiffeisenbank）は、テストの品質について厄介な質問をします。開発に移行した元QAの目を通してテストで状況を見ていきます。そして、コードをすばやくテストする方法を考えてみましょう（見た目よりも多くの欠陥があります！）。



Nikolayは、時間を節約するためにどのテストを選択するのが良いかについても教えてくれます。フロントエンドアプリケーションをテストするときに、どの手法とツールが外部の依存関係を排除するかを理解します。しかし、それだけではありません！ Nikolayは、JavaScriptでの自動テストの記述を高速化し、jest-cucumberライブラリであるGherking表記を使用して読みやすさを向上させる方法を説明します。

デザートには、Puppeteerでのエンドツーエンドテスト用のPageObjectパターンがあり、UI自動テストのサポートが簡素化されます。



そして最後に、マキシム・ソスノフ（SKB Kontur）が2つものテストマスタークラスを実施します。、リード開発者、俊敏性とDevOps哲学への準拠を目指して努力する卓越した技術文化のエンジン。マキシムは、パターンとアンチパターンとは何か、有用なテストを作成する方法、および開発者が鼻を上げないようにテストをチームに販売する方法を説明します。



マスタークラス1.nodejs-webサービスのテスト



最初のマスタークラスで、マキシムはnodejsサービスを適切にテストする方法を示します。 mocha、chai、nock、supertest、ベストテストプラクティス、および常識を使用して、信頼性の高い機能テストを取得する方法。このようなテストがリファクタリングにどのように役立つかを見てみましょう。



マスタークラス2。UIテスト



マキシムと協力して、最良のテスト手法をレイアウトに適合させ、UIテストに最適なテストの組み合わせを見つけます。スクリーンショットテストや機能テストなどのプラクティスと、それらを開発プロセスに簡単に組み込む方法について説明します。使用済みツール：

• 童話
• loki.js
• テストライブラリ
• 冗談

素晴らしくて速い

ユーザーがアプリケーションを開くとどうなりますか？クリックするたびに2分待つのですか、それとも楽しく仕事に没頭するのですか？



現在、パフォーマンスは遡及的に改善されているのではなく、開発によって改善されています。開発者は、アーキテクチャの決定がロード、レンダリング、インタラクティブ性などの速度にどのように影響するかをすぐに確認します。これには、継続的な監視が必要です。テストと測定には、膨大な数のパラメーターに依存するメトリックが必要です。たとえば、ユーザーはどのデバイス、どのブラウザ、どのネットワーク、どのファイアウォールでアプリケーションを開きましたか？ステージングサーバー、キャッシュ、プロキシ、その他の詳細は言うまでもありません。そして、これらすべての努力の後でさえ、加速は開発者にとって問題と頭痛の種のままです。



これらすべての困難にもかかわらず、Nikolay Ryabov（Avito）は、Avito内のフロントエンドのパフォーマンスに関連するすべて（メトリックの収集、プロファイリング、最適化）を扱います。 Nikolayは、ビジネスのタスクは機能を効率的に作成することであると確信しています。



会議では、ニコライは、Lighthouse、webpack-bundle-analyzer、およびChrome DevToolsPerformanceの機能を1つのツールに統合することを提案します。このさまざまなツールだけでは、継続的にパフォーマンスを監視できない理由を確認してください。



ビクタールサコビッチ（GPソリューション）、jQuery、Backbone、Knockout、Angular、Elm、Clojure、RxJS、そして最後にReactを使用して、多くのフレームワークとライブラリを確認したフロントエンド開発者。ビクターは、クライアントのサイトのパフォーマンスに関する統計を収集するためのメトリックとツール、どのような結論を導き出すことができるか、統計がデータを収集するだけでなく、サイトの速度を向上させる方法について詳しく説明します。



レポートのリスナーは、質問に対する回答を受け取ります。

• 何をどのように収集しますか？
• どのように、そしてなぜ分析するのですか？
• なぜユーザーから統計を収集するのですか？
• サイトの読み込みとパフォーマンスの速さをどのように知っていますか？
• なぜウェブサイトの速度を気にするのですか？

技術リーダー、JavaScript、フロントエンド開発者であるVitaly Sysolyatin（Delivery Club）が、SSRをできるだけ速くする方法と、解決する必要のある問題について説明します。例として、サーバー側レンダリングを実装した単一ページアプリケーションとして起動された新しいサイトdelivery-club.ruがあります。



Vitalyは、彼らがどのような種類のレーキを経験したか、そしてサーバー環境のjavascriptのフロントエンド開発者にとって何が問題になるかを教えてくれます。 Vitalyと一緒に、アプリケーションの効率のためにJavaScriptの弱点を回避する方法を学びます。実生活の話もあります！



アレクサンダーバルツェビッチ（シネシス）、教育実験を実践するリードで科学者主導のブロガー。フロントエンドライブでは、Alexanderが毎秒大量の更新を行ってもReactが60 fpsを提供する方法を説明します。ReactがO（n ^ 3）のオーダーのツリー比較を使用して、最先端のアルゴリズムでO（n）の比較速度を達成する方法を理解しましょう。



そしてもちろん、そのような加速で足を撃つ方法の戦闘例を見ていきます！

美しく四角い

開発者とユーザーの頭脳は異なる波で動作します。 1つ目は機能が優れているのに対し、2つ目はバスケット内のアイテムの数を変更しようとすると混乱するだけです。そして、ユーザーが望んでいることは、天才にとって耐え難いほど単純に思えます。それでも、開発者はアプリを使用し、デザイン、インターフェイス、または色でさえ、注文したものを手に入れることができない場合にも同じように苦しみます。デザイントラックでは、ユーザー向けの色とインターフェースに関するレポートがあります。



Glafira Zhur（SpurIT）、チームリーダーでありアクセシビリティの開発者であり、幼い頃からインターフェースとそのアクセシビリティに情熱を注いでいます。フロントエンドライブでは、ファッション、トレンド、顧客の気まぐれに依存しない色の心理的影響について話します。インターフェイスの色が情報の認識にどのように影響するか、開発者がそれを使用して気分、選択、顧客体験を制御する方法を明らかにします。



また、カラーソリューションの観点からインターフェイスのアクセシビリティについても学習します。



Anna Selezneva（Spiral Scout）、クリエイティブなフロントエンド開発者、会議やミートアップでの講演者、MinskCSSとMinskJSのミートアップおよびCSSMinskJS会議の共同主催者。アンナは、私たちがユーザーインターフェイスを開発していることを思い出させます-。インターフェースを実装するときに実際の人がそれを使用するという考えを覚えておく方法を学びましょう。



アンナによると、「10年前、私たちの問題はクロスブラウザの丸みを帯びた角でした。今では、サイトを応答性が高く、アクセスしやすく、効率的にする必要があります」。



最後に、オンラインマガジンの共同創設者であり、書籍の著者であり、オープンマインドなフロントエンド/ UXコンサルタントであるVitalyFridman（Smashing Magazine）が、サービスの利便性がコンバージョンと主要なビジネス指標に与える影響について説明します。 Vitalyの講演は、エンドユーザー向けのWebフォームの開発についてです。エンドユーザーは、サービス全体の利便性を正確に判断することがよくあります。

Webフォームにはアクセスできないことが多く、使用が困難です。Vitaliyは、クライアントが頻繁に直面する典型的な問題点について説明します。最後に、クライアントから友好的な方法で情報を受信できるようにするインターフェイスを作成する方法を学習します。これにより、コンバージョンと主要なビジネス指標の両方を支援します。会議の



Webサイトでレポートの完全なリストを参照してください。このサイトのモバイル版では、好きな講演をスケジュールに追加できます。チケットを予約することを忘れないでください（価格は9月15日に上がります）。フロントエンドライブ2020



2020年9月23日から2020年10月2日まで世界中でオンラインで開催されます。オフライン会議と同じくらい効果的な新しい形式を作成しました。コミュニティのエネルギーを感じ、充電し、業界の仲間とつながり、専門家からアドバイスを得ることができます。あなたはあなたの人生とキャリアのために朝まで自転車でオンラインのアフターパーティーを持つことさえできます。すべてが人生のようです:)毎日の



スケジュールはすでに作成されていますが、小さな変更が可能です。そして、会議のイベントチップについて、電報、フェイスブック、ツイッター、VKontakteで書きます。