Webアプリ：高速、安価、クール

各Webアプリは、小さくて楽しいフロントエンドアドベンチャーです。

iFunnyでは、「ウェブアプリマラソン」を開催し、何百万人ものユーザーを楽しませ、その過程で多くのお金を稼ぎました。 これで、すべてがどのように発生したかを説明する準備が整いました。

まず、自己紹介をしてください。 私の名前はアントンです。FunCorpフロントエンドチームのチームリーダーです。

この記事では、モバイルWebViewに基づいたインタラクティブなWebアプリケーションの開発での経験を共有します。

Web アプリ 表示する

WebViewは、モバイルアプリケーションに組み込まれたブラウザです。

ブラウザを使用している場合は、HTML5、JS、CSSの広範な機能もあります。

これは理論上です。 しかし、本当に何ですか？

しかし実際には、他の問題に興味がありました。

• iFunnyの視聴者は新しいフォーマットをどれだけ受け入れますか？
• そのようなアプリケーションは開発中にどの程度問題がありますか？ 2年前、同社はこの分野での経験がなく、実際に追いつきたいと思っていました。
• この技術は時間とお金を節約しますか？ そのようなアプリケーションの開発サイクルはより短いため、そのような機会があります。

Webアプリ＃1：Hellowinner

当時、チームは2人で構成されていましたが、私はすべてのWebアプリで一人で作業しました。 チームに参加してから2か月が経過したので、船から「ウェブアプリボール」に直行しました。

最初のアプリは、ハロウィーンの10月31日までに準備されました。 2つのボタンがあるミニゲームを使用して、ユーザーの神経をくすぐり、まさにそのような反応を引き起こすことが計画されていました。

アプリケーション自体は次のようになりました。

興奮したユーザーがボタンをキャッチし、アプリケーションはそれをさらに速くするように見せかけた。 時間Xで、悲鳴、音、振動が画面に突然現れ、感情の嵐を引き起こしました。 また、ユーザーだけでなく、このうさぎを見ると、まだ少しうんざりしています。

テクノロジースタックはシンプルでした。

• 静的サイトハープのジェネレータ。
• テンプレートエンジンJade（現在のPug）;
• 少ないプリプロセッサ。

Harpジェネレーターはすぐに使用できる完全なインフラストラクチャを提供したので、コードを記述し、CSS、HTML、JSを使用して静的Webサイトを生成し、CDNにすべてを配置し、WebViewでラップして満足しました。 そして、何かがありました。Webアプリケーションの最初の経験がトラフィックのピークをもたらし、後に各プロダクトマネージャーが何か面白いものを考え出すことが自分の義務だと考えました。

Webアプリ＃2：プーチン対トランプ

この話は失敗に関する記事で部分的に言及されました。 すべてが本当にどうだったかを話す時が来ました。

次のWebアプリでは、ユーザーポーリングを実施することが決定されました。 もちろん、好きな形式で-滑りやすくてホットなトピックについて。 最初の投票は大統領と呼ばれ、その中でプーチンかトランプを選ばなければなりませんでした。

最初のアプリケーションとは異なり、2番目はサーバーパーツの存在を暗示しており、データベースを操作します。 当時は非常にシンプルだと考えられていたので、私はフロントエンド開発者としてそれを処理できました。 コピーされました。 いくつかの予約あり。

データベースとしてMongoDBを使用しました。iFunnyモバイルクライアントのAPIはこのシステム上で正確に回転し、準備が整ったクラスターがあり、選択は明らかでした。 Express.jsがサーバーフレームワークとして選択されました。 テンプレートエンジンとしてのすべての同じade（パグ）、プリプロセッサとしてのLESS、およびGulpを使用したスタティックの構築。

新しいアプリケーションの起動後最初の数時間で、100万人以上のユーザーが投票しました。 そして、面白いことが起こりました：興味の量が100％を超えました。 もちろん146％ではありません。

データベースからの標準増分を使用する代わりに、私は一般的な「現在の値=現在の値+ 1」を使用しました。 そして、本番環境でのみクエリの競争力などのことを学びました。 ええ、彼らは象を中国の店に入れました。

それはおかしいことが判明し、ユーザーはそれを良い冗談として受け入れました。

震える手とマットで、夜遅くにエラーを修正しました。 これらの1秒あたり1万件のリクエストは良い教訓となり、私はこれを二度としないと約束しました。

同じ調査、修正：

Webアプリ＃3：Booby Bird

以前のwebappsの印象的な成功の後、完全なHTML5ゲームを開始することが決定されました。 また、この部門にはまだ2人が働いていたため、開発は中国のフリーランサーに任せられました。

よくやった、頑張った：

• WYSIWYGエディターでゲームを組み立てました。
• StackOverflowを使用してマニュアルでPHPのサーバーパーツを作成しました。
• 彼だけが知っている接着剤でこれらの部品を固定しました。
• 難読化されたファイルの形式で結果を示しました。

アプリケーションが戦闘ドメインでの実行を完全に拒否した後、私の楽観主義はついに枯渇しました。 その結果、テスト済みのExpress.jsにコードを転送し、可能な限り難読化されたクライアントコードにパッチを適用しました。 ゲームが生き返った。 それでも、デザインが壊れやすく、仮釈放にかかっていることは明らかでした。

ゲームの終わりに、最高のプレイヤーの評価があり、そしてもちろん、リリースの10分後に壊れました。 ユーザーは結果を保存するためのリンクを発掘し、その値を大幅に変更し始めました。 JWTトークンを使用してリンクをパーソナライズしたアップデートをリリースし、トップの大量の山が終了しました。

しかし、ユーザーに完全に届くコードを保護できませんでした。難読化は整理され、ネットワーク経由のリクエストは対応するユーティリティで表示されました。 スニファーの使用方法を知っていた一部のユーザーは、結果とのリンクを再び分解し、そこに多くの異なるナンセンスを送信しました。 バンドルされたJWTトークンは彼らの力を超えていることが判明したため、彼ら自身は禁止に送られました。

このWebアプリはまだかなりの数のビューを取得しており、驚いたことに、非常に長いテールの繰り返しアクセスがありました。

Webアプリ＃4：休日のプレゼント

アメリカ人の最もお気に入りの休日の一つ-クリスマス-宝くじは、コンソール、ギフトカード、カメラ、Tシャツ、および他の多くのアメニティが演奏されて配置されました。 それぞれ厳密に定義された時間に合計4回の抽選が行われました。 次の抽選の後、次の抽選の登録が開かれました。

「フードの下」はすべて同じExpress.js、Jade（Pug）、LESSでした。 参加者の大きなピークが予想され、データベースとして別のMongoDBクラスターを使用しました。 そして、彼は負荷テストさえ実行したので、今度はすべてが本来のとおりになりました。 さて、あなたは理解しています。

Webアプリは優れた結果を示しました。約300万人の参加者がすでに第1ラウンドに参加しています。 しかし、成功には困難が伴いました。

最初に、アプリケーションインスタンスの管理に使用されたNGINXとPM2の組み合わせで問題が発生しました。 HTML5、CSS、JSなど、何をすべきか理解できませんでした。そして、ネットワーク上にタイムラインがあり、DevOpsエンジニアを困惑させ、テクニカルディレクターの静かで厳しい表情を見せていました。 しばらくして、問題は修正され、次の賞品が抽選されるまで時間の余裕がありました。 私は素朴に、今ではすべてがうまく、疲れ果てていると信じ始めました。

そして、ここでも問題があります。サーバー側に組み込まれたスケジューラーは、2回目の描画を拒否しました。 いくつかの直感のために、スクリプトの結果を確認することにしましたが、結果が欠けていることがわかりました。 窓の外に月があり、問題を局所的に議論することはできませんでした-すべてが機能し、時間は容赦なく過ぎました：2回目の抽選の結果の公表が近づいていました。 私は慎重に手動で起動する可能性を残したことを保存しました。 集会の結果が発表される1分前に、スクリプトを実行し、正しく動作することを確認して、息を吐きました。

これに続いて、眠れない夜の時間を過ごしました。その間、私はできる限り続けました。映画を見て、エラーの検索に夢中になり、目覚まし時計で抱きしめました。 午前3時に最終抽選を開始し、もう一度すべてをチェックして眠りに落ちました。

このような犠牲は正当化されました。24時間後、Webアプリの視聴回数は1,200万回を超え、コメントは数千件、ソーシャルネットワークでは多くのノイズが発生しました。 ユーザーは非常に興奮していました。彼らは間違いなくアプリケーションを気に入っていました。 はい、私は何を隠すのが好きでした。

webappsの長所と短所

短所 ：

• WebViewがデフォルトのブラウザであり、Samsungはすべてをカスタマイズするのが大好きだからです。 また、デスクトップブラウザー、モバイルChrome、およびSafariがWebアプリを正しく表示した場合、「サムスン」は常に何かを運びます。 このブランドはアメリカで非常に人気があり、修理が必要でした。
• すべての表示の問題が修正された後、アプリケーションが戦闘状態で正しく動作しなかったことが判明する可能性があります。 そして、その理由はありふれていました。モバイルアプリケーションを組み立てるときに、いくつかのチェックマークを付けるのを忘れた場合-そして再び！ -WebViewでのスクロールが正常に機能しなくなりました。 そして、これはほとんどの場合、新しいリリースであり、少なくとも数日遅れてリリースされます。

長所：

• 速い 。 開発期間の平均は2週間です。 最初の週-アクティブな開発、2番目の週-テスト、修正、改良。
• 安い 。 開発コストの節約は莫大です。 Webアプリは、すべてのプラットフォームに対して1人のフロントエンド開発者を作成できます。 親愛なるモバイル開発者はここには関与しません。 そして、たとえ惹かれても、それはまれであり、少数です。
• かっこいい 。 このフォーマットは、ユーザーにとって本当に興味深いものにすることができます。 多くの指標（コメントの数、登録、ゲームのセッション時間）から判断すると、視聴者はこの双方向性が好きです。 彼らは間違いを見つけてそれを味わうことを好みます。 そして、UGC製品の熱烈で関与したコミュニティよりも優れているものは何でしょうか？

9月から12月までの期間に、6つのWebアプリケーションが作成されました。 そして、それぞれが良い結果をもたらしました。 Web-App Marathonは、最も重要なものを含む、関心のあるすべての質問に答えることを可能にしました。はい、これは間違いなく継続する価値のあるトピックです。

現在、webappsの開発はすでにストリーム配信されています。過去2017年には94個があり、セッション数では約1億1千万件でした。 ところで、ほとんどはここで見ることができます 。

しかし、私は順番に、食料品会社で働くことについて何かを理解しました。

作業の変更の問題が解決したとき、私は1つの製品を退屈させる精神的に準備ができていたので、今後2年間は「サイトをカット」する必要がありました。 webappをしなければならなかったとき、少しずつ自分自身を燃やし、毎秒1万件以上のリクエストを見て、夜に手でスクリプトを実行しました。 私は本当に毎週「製品を見た」必要がありました-新しいもの。 そして、これは素晴らしいファンであり、スキルのまともな開発です。

ちなみに、これらの「今後2年間」は、最初から形成されたフロントエンドチームの新たなリードとしてのみ、「サイトをカット」する必要がありました。 この楽しいWebアプリの体験ができます。 彼については次の記事で説明します。