2

保守性の問題とパフォーマンスの問題により、フロントエンドをリファクタリングする必要がある非常に大きな Web サイトがあります。

トリッキーな点:

  • 複雑すぎるスクリプトがたくさん
  • 非常に複雑な CSS と膨大なファイルサイズ
  • セレンテストは実施されていません
  • js テストが実施されていない
  • バックエンドの開発者は、何か壊れることに関心を持っていました
  • サイトはしばらく稼働しており、クライアントは満足しています

利用可能なツール:

  • バージョンをテストするための複数のサーバー
  • Continuos 統合のセットアップ
  • バージョン管理
4

4 に答える 4

5

いくつかの考え（バックエンド側でより大きなリファクタリングも行った後）：

  • 「落書き」リファクタリングを開始するプレイブランチを作成します。そこで、リファクタリングがどのように感じられるかを見ることができます。特に大きなリファクタリングは、設計/プログラミングを開始するようなものであることがよくあります。実際に手を動かして、リファクタリングの対象がどのように感じられるかを確認する必要があります。これは、全体的な労力をより正確に見積もるためにも役立ちます。
  • あなたのクライアントは満足しており、それは将来への投資であるため、漸進的なアプローチを採用してください。ビッグバン リファクタリングを行わないでください。いくつかのリファクタリング領域 (javascript と CSS など) やページごとに分割してみてください。
  • 簡単なリファクタリング手順から始めます。彼らはあなたがより難しいものに「合う」ようにするのに役立ちます.
  • scm はあなたの親友の 1 人です。リファクタリングの際には、迅速に元に戻し、安心できることが重要です。より大きな作業のためのリファクタリング ブランチでも、さらに「マイナー ブランチ」を作成して、より大きなリファクタリング ステップを進めることができます。
  • 回帰テストは不可欠です。最初にテストを実施します。100% テストを自動化することはほとんど不可能です。そのため、QA/テスト チーム メンバーの 1 人に、大きなリファクタリング ステップごとにリファクタリングと回帰テストを手伝ってもらいましょう。リファクタリングの 3 か月後の「もう機能しない」は、あなたを打ちのめすだけです。
  • より困難なリファクタリング (テストが難しい) と不安定なコード構造の場合は、「ペア プログラミング」を行います。
  • バックエンド開発者が大規模なリファクタリングを信頼していないことを恐れているのは正しいことです。彼らを真剣に受け止め、助けを求めてください (特に回帰テストの要件について)。
于 2010-08-11T23:06:57.343 に答える
1

ここにいくつかのアイデアがあります：

  • 数時間かけてサイトにアクセスし、クリックして機能を理解する
  • コアページ、または主な改善点に焦点を当てたいページに焦点を合わせます。それに1時間費やす
  • より重要なことに注目してください: A) 保守性/あなたや他の誰かが来て機能を拡張するための迅速な能力 B) ページ読み込みパフォーマンス - 100kb 以上削減する方法と、タイプに基づいて本当に価値があるかどうかを検討するサイトの C) ui レイテンシです。スティッキーで断続的な遷移、ロード後にサイトがどれほど遅く感じるか。

頭の中で図を思いつく。あなたにとっては2日間の仕事ですか？2週間？上記のすべてにどのような利点がありますか？ここで、あなたが雇った新しい開発者があなたと同じプロセスを経て、あなたのレベルになるまでにどれくらいの時間がかかるかを考えてみてください。

選択した特定のコンポーネントの考えられるすべてのユーザー ジャーニーとバリエーションを理解したら、次のことを行うのにどれくらいの時間がかかるかを検討してください。

  1. 既存の遅い/信頼できない/変化する環境/ライブサイトなどの外で、単一ページの同じファイル階層を独自のサーバーに再作成することで、これに取り組もうとしている速度を加速できます (約 3/4 日)
  2. 開発/研究/進行中の記録/中断、他のプロジェクトの管理などの間でヘッドスペースを切り替えます (約 1 時間)
  3. 必要なテストを作成し、ゼロから開発し、既存の fe アーキテクチャーをエミュレートして、希望どおりに正確に記述します。(コンポーネントごとに 1 日 - html、アクセシビリティ、sass、js など)
  4. この単一のコンポーネントを既存のアーキテクチャ/環境に統合し、周囲の何も壊さずに既存の部分を削除する方法を検討してください。
  5. それを環境に統合します。時は金なりですが、プロジェクトに着手する前に徹底的な調査を行うことで、事業主との重要な話し合いに備えることができます。
于 2015-07-17T06:03:00.620 に答える
1

プロジェクトを新しいワークスペースにコピーし、バージョン管理用の場所を作成することから始めます。このようにして、バックエンド開発者はもう怖がる必要はありません。次に、css ファイルを見てみましょう。それらを変更してすぐに違いを確認できるからです。あなたが持っているCSSが気に入ったら、スクリプト部分に進むことができます。

ここでは間違いなくテストが必要です。そうしないと、望ましくないエラーや変更が確実に発生するからです。私は個人的にスクリプトを非常に (!) 小さなジャンクに移行するので、エラーを非常に迅速に見つけて、変更したすべての小さなことに対してテストを実行できます。これは、私の経験上、最も永続的な結果につながります。

もう 1 つ考慮する必要があるのは、展開です。つまり、常にいくつかの要件または依存関係があるということです (あなたの問題がそうであるかどうかはわかりませんが、実際にそれを確認し、バックエンドの担当者と協力して、問題の可能性がある場所にヒントを与えることができるようにする必要があります)。

于 2010-08-11T13:30:47.037 に答える
1

あなたが直面している主な問題は、JavaScript/Selenium テストが終了していないことだと私には思えます。それらを適切に配置したら、小さなステップを踏んでリファクタリングの実際の作業を開始できます。間違いが修正されることを確信しています。

最初にテストを実施せずにリファクタリングしないでください。

于 2010-08-11T13:22:39.483 に答える