こんにちは カティアです Yandex.Moneyでフロントエンドを書いています。

大企業で働くことで、タイプセッターからプログラマーに成長するのにどのように役立ったかを説明します。 貧弱なアーキテクチャと低いrpsで、ブラウザの機能と最初の段階で苦労をやめた方法について。 このストーリーで、実際のフロントエンドと戦うのではなく、ランディングページをスタンプする才能のある開発者の時間を節約できます。

この記事では、ワークフローを最適化する方法と、ソフトスキルを開発する理由を開発していることを説明します。 第二部は来ています-それは技術的です。 その中で、スタックの詳細、それらが2つある理由、Reactを使用したBEMの友人（スポイラー：多くのコードがある）について詳しく説明します。 行こう！

更新しました。 2番目の部分が出ました 。

パート1.プロセスについて

2015年まで。Grunt.jsは、Bootstrapカルーセルを使用して厄介なjavascriptコードを収集し、styles2.cssを作成します。

2016年はReactを私の人生にもたらします。 しかし、私はまだ型を作り、ボタンを押します、そして誰かが夜にそれを食物に転がします。 フロントエンドは最もうらやましい職業ではないと考え始めていますが、マタンを知っていれば、本当のプログラマーになるでしょう。

2017年はYandex.Moneyで始まり、私は同じ「本物のプログラマー」として始まります。

CSSからNode.jsへのワンステップ

-こんにちは。 会社Yandex.Money。 おしゃべりは楽ですか？

-o_o

-面接に招待したいと思います。

-O_o

頭の中のノック：「アルゴリズム！ 難易度も判断できません！ ソートはいくつ知っていますか？ あなたは何ですか、おそらくあなたもそれらを書くことができますか？ Node.jsアプリケーションをクラスター化する方法を知っていますか？ IISを構成しますか？ これがバックエンドです、ベイビー！ そして、あなたはCanvasで猫を描く方法を知っているだけです。」 ポンピングの準備と開始に1週間かかります。データ構造について読み、アルゴリズムの問​​題を解決し、Node.jsのパターンとプロセスコントローラーを学習します。 ネタバレ：O（n）とO（log n）を区別することや、Node.jsのアプリケーション管理方法を知っていることを誰も期待していませんでした。

Yandex.Moneyでのインタビューは、私がすでに訪れたインタビューとは非常に異なっていました。 私は仕様のニュアンスについて尋ねられず、抽象的な問題を解決するよう求められませんでした。 これにより、安心して時間を過ごすことができます。

最初の段階では、javascriptの将来について議論し、Lodashのメソッドをいくつか実装し、用語とパターンについても議論しました。 第二段階では、将来のリーダーと出会い、すぐに自分についてのフィードバックを受け取りました。

彼らは超自然的なものを必要としませんでした：

-JavaScriptの自信のある知識（クロージャ、タイプ、継承）;

-サーバーとやり取りする機能（トランスポート、OSIモデル、REST API）;

-ブラウザプロセスの理解（リソースの読み込み、コードの解析、レンダリング）。

バックエンドについては、Node.jsのイベントループデバイスを理解し、Expressでの最も単純なアプリケーションについて説明するのに十分であることが判明しました。

そのため、httpsのhttpsとプロトタイプの__proto__の違いを知って、Yandex.Moneyに行き着きました。

大企業のプロセス、または1日で1行のコードを記述しない方法

私たちの部署には50人がいます。 そして、まだ人が必要です。 サービスの数は増え続けています。新しい方向性が始まり、新しいアプリケーションが増えています。 熟練したフロントエンドワーカーの13チームがYandex.MoneyのWebサイトで作業しています。 当社のマイクロサービスはかなり孤立しており、チームは個々の製品をサポートする責任を負っています。 そのため、開発者はアプリケーションのコードに精通しており、ユーザーのニーズを理解しています。 また、別のチームの一部として、テクノロジーの導入に関する実験を実施できます。

各チームには独自の詳細があります。 ExpressではなくKoaのどこか、promiseではなくasync / awaitのどこか。 複雑なサーバーロジックを記述するものもあれば、エレガントなインターフェイスを記述するものもあります。 重要なタスクと内部ツールは、R＆Dチームによって改善されています。 重要なモジュールのリファクタリングを実行し、パフォーマンスを分析し、スタック開発用のツールを実装します。 別のチームがインフラストラクチャに関与しているため、他のチームの開発者は外部ユーザー向けの新機能のための時間を確保できます。

私は、Yandex.Cashの個人アカウントを開発しているチームで始めました。 オンラインストアの所有者向けのインターフェイスを作成し、支払い履歴を確認して顧客に請求できるようにしました。 現在、私はR＆Dチーム「F-platform」で働いています。 Node.jsアプリケーションの負荷の高いプロファイリングに取り組んでおり、Reactアプリケーションを作成およびサポートするためのプラットフォームを作成しています。 各開発者は、自分の専門知識を高め、ここで今興味のあることを行うために別のチームに切り替えることができます。

コードベースは急速に成長しています。 1日あたり平均26のプルリクエストが開かれます。 1週間に最大20個のフロントエンドコンポーネントのリリースが行われます。 このマジックポットを何らかの形で管理するために、定期的なアーキテクチャ会議とコードレビューを開催しています。

多くの会議があります。 彼らはすべて、すべて、そして全員と議論します。 四半期の終わりに、会議室は2週間で予約されます。 交渉は分かれており、劣っていて、新しいものを装備しています。 しかし、会議に費やした時間は常に報われます。 私はそれを証明するためにいくつかの例を挙げます。

Vasyaはjavascriptを愛していますが、弱い型付けは好きではありません。 Vasyaは不幸です。 毎週のフロントエンドバー会議は彼を助けます。 彼らは、スタック開発のための新しいアプローチとツールについて議論し、問題を共有し、妥協を求めます。 ここで彼はタイプスクリプトを見たものを伝え、彼の世界はもはや同じではありません。 Typescriptが私たちにとって有用な場所を見つけ、Vasyaは志を同じくする人々を見つけ、彼のプロジェクトにそれを実装します。 Vasyaは幸せです-彼は信頼できるコードを持っています。 部門の全員が満足しています-Typescriptは、便利で必要な場合にのみ使用します。 また、必要に応じて、明るい側に移動することもできます。

リリーはその反応について書いています。 リリーは、データを保存する場所（ローカル状態またはストア）を決定しません。 リリーはsetState（）を実行しますが、友人は彼女を笑います。 リリーはすべてをストアに保存することにしましたが、コードのレビューで競合するコメントを取得します。 リリーは不幸です。 彼女はロジックのレビューを手伝います。 これは、異なるレベルのフロントエンド開発者が互いにアーキテクチャ上の誤った決定を回避するのを助ける会議です。 ここで、リリーと私はさまざまなケースを見て、すべてのニュアンスを考慮に入れて、最良の解決策を見つけます。 リリーは結論を記録し、コードレビューに合格します。リリーは幸せです。 この質問は他の人を困惑させることはありません-部門の誰もが幸せです。

スケジュールされた会議に加えて、月に数回技術通訳を実施し、トレーニングコースを開催しています。 たとえば、Reactへの移行中に、部門の何人かが残りの講義を準備しました。 これらのレクチャーは、Reactを使用していない開発者が、それに関連するタスクを評価して完了することができるように、必要な最小限を提供しました。 そして数週間後、安全コースが始まります。 フロントエンドに支払いロジックがないという事実にもかかわらず、私たちはユーザーの忠誠心と信頼に責任があり、それは簡単に失われ、コードに脆弱性を残します。

会議に出席することは負担になりません。 私はそれらが好きです。私は有用だと感じ、痛みと結論を共有し、新しいことを学び、部門の生活に参加できます。 結局、生きているコードはプログラマーだけではありません。 そして、ただ座ってコードを書くことはできません。 チームの一員となり、プロジェクトのすべての段階に参加します。 そして、離れて行く：

1. プロダクトマネージャーとプロジェクトについて話し合い、技術的な解決策を作成し、問題のケースに取り組みます。 そして、フロントエンドには間違いなく提供するものと警告する場所があります。 また、プロジェクトを開始する前に、必須のロジックレビューを実施します。
2. タスクの分解を実行し、実装時間を計画します。 誰も計画するのが好きではありません。 しかし、誰もがそれを行います。 誰も締め切りモードで働くのが好きではないからです。 しかし、誰もが時々それをします。
3. 開発を開始します。 やった！ コードを書くことができます！ すぐではありません。 コードをアプリケーションまたはライブラリの全体構造にエレガントに統合するために、各モジュールのAPIを検討します。これにより、他の開発者が将来コードを簡単に操作できるようになります。 これが私たちのほとんどの時間、つまり小さなソリューションのアーキテクチャです。
4. コードレビューを実施します。 ここで、フロントエンドに関する多くの興味深いことがわかります。 そして自分自身に。 一部のアプリケーションでは、永続的なレビュー担当者を割り当てます。 人がコンテキストにとどまり、ロジックをよく理解するために、コードをより深く分析し、重要なコメントをすることができます。
5. 私たちはリリースしています。 フロントエンドは、システム管理者ほど時間をかけません。リリースプロセスは、Jenkinsを使用して可能な限り自動化されます。 また、何かが足りない場合は、jsまたはgroovyにスクリプトを追加できます。

これらのプロセスへの参加は、私の仕事時間の大部分を占め、食い続けています。 私はコードの60％を書いています。 残りの40％は、部門の開発とプロジェクトサポートへの参加に費やされます。 アクティブなライフスタイルを持つシニア開発者は、多くの場合、コードを直接書くのにかかる時間は半分以下です。 同僚の相談、戦闘中の事件の分析、管理者やマネージャーとのやり取り-これらはすべて私たちの仕事の一部です。 そして、確かに、素晴らしい部分です。

コードにより多くの時間を割くために、到達可能なすべてを自動化します。 Jenkinsを使用します。リリースプロセスだけでなく、機能のアセンブリと展開、テスト実行、脆弱性チェックも簡素化しました。これらはすべてボタンをクリックするだけで実行できます。 そして、最もアクティブなフロントエンド開発者は、内部ツールを使用してリポジトリを作成しました：フォームの事前入力、レビュアーの「スマート」選択、メニューバーからのJiraでのプルリクエストとタスクのリストへのアクセス。

これはすべてルーチンを排除するため、より重要なことを行います。 たとえば、記事を翻訳し、ポッドキャストを書きました。 :)

組版だけではもはやクールではない理由

ニューラルネットワークはすでに補うことができるからです。 スクリプトに置き換えられないようにするにはどうすればよいですか？ プログラマになる。 優れたプログラマーになってください！==美しいコードを書くか、matanを知ってください。 ソフトスキルの設計とアップグレードを学びます。

多くの明白でないタスクは、フロントエンドと優秀なプログラマーの肩にかかっています。 リファクタリングの必要性をマネージャーに伝え、時間の割り当てを調整できる必要があります。 時間がない場合は、設計者にインターフェイスを簡素化するよう説得してください。 また、関連部門向けのソリューションを開発する際には、同僚のニーズを分析し、ドキュメントを検討し、技術的なソリューションを独自に策定します。 あなたがまだそのような仕事に従事していないなら、きっとあなたはそれらに出会うでしょう。 おそらくここでも、私たちと一緒に、Yandex Moneyで。 ;）