現在のAngular 2は、一種の「ブロック上の新しい子供」と見なされています。 多くの人々にとって興味深いことであり、主要なフロントエンド会議は言及せずに完了していることはほとんどなく、Reactに挑戦する準備ができています。 しかし、絶対的な栄光の光線はまだ遠いです-誰もが戦いでフレームワークを試すことができますが、まだ公式リリースはありません。 たとえば、 Wrikeでは、すでに実稼働環境でAngular 2をフル活用しています。
Googleのメンバーは新しいフレームワークに積極的に注目を集めており、最近では48時間のオンラインハッカソンANGULAR ATTACKを開催し、数百人の参加者を集めました。 その結果によると、270以上の作品が公開されました。 この記事では、ハッカソンへの私の参加の経験、そのような競技であなたを助けることができる印象と観察を共有したいと思います。 猫へようこそ。
そこで、Google、Rangle.io、Wijmoが主催するオンラインハッカソンANGULAR ATTACKが5月14〜15日に開催されました。 彼の目標は、Angular 2で48時間でWebアプリケーションを作成することでしたが、参加するには、サイトとgithubアカウントに登録する必要がありました。
ルールは非常に簡単です。
- チームあたり1〜4人
- アプリケーションの作成にちょうど48時間が割り当てられました（世界中で同時にハッカソンが開始されました）
- トピックは設定されていません-絶対に何でも書くことができました（ただし、Webアプリケーションが優先されました）。
- ツールの使用に関する制限もありませんでした。 ただし、Angular 2（チームが賞品を要求した場合）、無料のツール（サービス、ライブラリ、メディアファイル）を使用することをお勧めします。
- 重要な条件は、イベントの開始時に、チームがコード、画像、またはその他のものであっても、事前に準備されたデジタル資産を持っていないことです。 すべてのデジタルコンテンツは、割り当てられた48時間以内に直接作成されました。
- 競争の前に、他の準備が許可されていました：アーキテクチャを考える、スケッチを描く、環境と展開などを設定する
- 不正行為の増加により、一時的な失格が脅かされました。
主催者とスポンサーはさまざまな賞品 （現金を含む）を提供し、審査はいくつかの方向に進みました。
- 参加者の作品が好きな人（最も人気のある作品がオーディエンス賞を受賞しました）。
- メンバーは他のメンバーを評価し、フィードバックを残します。
- 審査員は、最も人気のある50作品を評価します。
ハッカソンの開始の約1日前に、主催者は各チームにプライベートリポジトリへのアクセスを許可しました。このリポジトリには、Angular 2の簡単なスタートアッププロジェクトがありました（ クイックスタート5分 ）。 また、 Surge展開サービスへのアクセスも許可されたため、アプリケーションを単一のコンソールコマンドとして展開できました。
ですから、土曜日の朝、仕事に取り掛かったとき、環境全体はほぼ準備ができていました。アセンブリが進行し（アセンブリにwebpackを使用しました）、展開が機能しました。 開発言語として、変更のためにTypeScriptを選択しました（ WrikeではDartを使用しています ）。
しかし、コンピューターの前に座って、何を書くべきかまったくわからないことに気付きました。ハッカソンが忙しかった1週間前で、考える時間はありませんでした。 とても明らかですが、それでも非常に重要です
レッスン＃1：事前に参加する準備
先週まで延期しないでください。 早ければ早いほど良い。 ルールで禁止されていないすべてのものを準備する必要があります。アイデア、UXを考え直し、スケッチを描き、アーキテクチャを作成します。 開発ツール（言語、フレームワーク）に慣れていない場合は、事前に練習してください。 仕事で珍しいアルゴリズムを使用する場合は、事前に見つける必要があります。 もちろん、イベントの開始後にのみトピックを学習するハッカソンもありますが、これは準備をする必要がないという意味ではありません。 Hackathonの時間は非常に限られているため、webpackでcssを構築する方法など、考え出すのに費やすことはほとんどありません。
私はアプリケーションのアイデアを探し始め、ToDoリスト、タスクスケジューラ、さまざまな「Googleマップで最寄りの店舗へのルートを構築する」など、さまざまなありふれたものをすぐに一掃しました。 しかし、数時間の間、「有用な」アプリケーションのアイデアを生むことができなかったため、少なくとも楽しいものを作成することにしました。 たとえば、ゲームを作成します。
Angular 2ハッカソンだったので、キャンバス、既製のエンジン、またはWebでゲームを開発するために通常使用する他のものは使いたくありませんでした。 また、Angularはリアルタイムゲームの作成を目的としていないため、段階的に何かを作成するのが論理的でした。
すぐに、自動生成されたダンジョンを使用したターンベースのローグライクゲームのアイデアを思いつきました。 仕事に取り掛かりましたが、数時間後、ようやく建築の問題に行き詰まりました。 以前は「宿題」をしていなかったため、48時間で1人で実行するにはアイデアが複雑すぎることが明らかになりました。 ちなみに、参加者の1人がそのようなゲームのプロトタイプを作成しました （3人のチームでしたが）。
だから私は自分で抽出しました
レッスン番号2：あなたの強さを過大評価しないでください
複雑性が高いため、多くのプロジェクトはリリースに至りませんでしたが、アイデアは悪くありませんでした。 そして、後で気づいたように、理想的には、1日で、またはさらに半日（48時間の締め切りの場合）で実装できると考えるアイデアを取る価値があります。
だから、最初の日の終わりに向かって、私には何も準備ができていませんでした...私は仕事にかなり簡単なアイデアを取っているか、ハッカソンをゼロの結果で終えることに気付きました。 そこで、「Plan B」に切り替えました。これは、Windowsの標準ゲームセットでよく知られている「Minesweeper」というゲームを書くことです。
私はその後これから学んだ
レッスン＃3：シンプルなアイデアを過小評価しない
当初からマインスイーパのような普通のことをやりたくはありませんでした。なぜなら、それはあまりにもシンプルで、オリジナルではなく、ハッカソンには私の掃海兵以外にも数十種類のマインスイーパがあるからです。 私は完全に間違っていたことが判明しました。ハッカソンでは私の「マインスイーパ」だけが唯一のものでした。 さらに、このプロジェクトは、他の参加者からのレビュー数の点で最も人気のあるプロジェクトの1つになりました。
だから何
レッスン＃4：途中でやめないでください
この48時間の間に何度も、すべてを吐き出し、ビジネスに取り掛かりたいと思いました。 しかし、プライドが許さないたびに、私は自分自身を手に入れて、働き続けました。 その結果、多くの人が気に入った完全に機能するアプリケーションを作成することができました。
そして、私はこの結果さえ達成することはできません。
レッスン5：退却への道を考える
あなたは常に何かがうまくいかないかもしれないという事実に備えなければなりません。 アプリケーションを作成するとき、一度にすべてをつかまないことが重要です。 最小限の必要な機能のサークルを決定し、それらを終了し、時間がある場合にのみ、他の何かを仕事に取り始めることをお勧めします。 ハッカソンには、アニメーション、データベースの操作、Twitter経由の認証など、アプリケーションに可能な限りプッシュしようとする多くのチームがあり、多数のバグが原因で機能しない生のアプリケーションを受け取りました。主な目的の機能を果たしました。
「Minesweeper」の作業を開始した後、アプリケーションで実行する必要がある、または表示したい機能のリストを定義しました。 これらの機能はすべて、条件付きで4つのグループに分けられました 。
最初のグループには、ゲームが完成しない機能が含まれていました。
- 最小限のユーザーインターフェイス（競技場、セル周辺の地雷の数の表示、クリックに対するセルの反応）、
- ゲームの基本アルゴリズムのカバレッジ、
- 勝ち負けのチャンス。
2番目のグループでは、ゲームプレイを改善したタスクを次のように分類しました。
- 競技場のさまざまなサイズ
- 事前に地雷の位置を生成するのではなく、プレーヤーの最初の動きの後の地雷の配置（プレーヤーが最初の動きで地雷に当たらないようにするため）
- プレイヤーが推測しなければならない状況を除く、鉱山のスマートな配置（たとえば、競技場の一部が鉱山で囲われている場合）
- フラグを設定する機能
3番目のグループでは、スタイル、勝利と敗北の画面、アイコンなど、UXの改善に関連するすべてのものを取り上げました。
最後のグループには、ゲームタイマー、高得点表、Firebaseを介した高得点同期（参加者が競争できるように）などの機能が含まれていました。
最初のグループのすべてのタスクを実現したという事実にもかかわらず、優先順位付けにはさらに困難が生じました。 開発者は、どの機能がエンドユーザーにとって本当に重要であるかを常に適切に評価できるとは限りません。 ここから
レッスン＃6：できるだけ早くプロジェクトのテストに参加する
残念ながら、非常に単純なレコードのテーブルを除き、タスクの4番目のグループからはほとんど何もできませんでした。 そして、私は第2グループのタスク3と4を行わず、視覚的なデザインがより重要であると判断しました。 そして、一般的に、ゲームは機能し、見栄えは良かったのですが、怠け者だけがフラグを実装しなかったことを覚えていませんでした。 これは多くの人々にフラストレーションを引き起こし、おそらく他の参加者からの評価にマイナスの影響を与えました。 少なくとも2〜3人からフィードバックを事前に収集していた場合、おそらく、優先順位の低いタスクを放棄してフラグを立てることができたでしょう。
そして最後に、別の重要な
レッスン7：誰もコードに興味がない
奇妙に聞こえるかもしれませんが（まだハッカソンであると仮定して）、実際はそうです。 人々は、受け取った感情に基づいて、アプリケーションに投票してコメントを残します。 したがって、プロジェクトがどのように表示され、どのように動作するかは、プロジェクトの記述方法よりもはるかに重要です。
レッスン8：誇大広告は成功の鍵
プロジェクトの人気に影響を与えたもう1つの重要な要素は、作成者がどのように宣伝したかです。 主催者は参加者にSlackのコミュニケーション用チャンネルを提供し、これに加えて、チームはTwitterに更新を投稿しました 。 そして、プロジェクトについて積極的に書いた参加者は、より多くの注目とフィードバックを受けました。
概要：このハッカソンは私にとって素晴らしい経験でした。 そして、賞品は一切受け取りませんでしたが、私は興奮を味わい、Slackの興味深い人々と話をし、手を試し、時間通りに完了したプロジェクトに満足しました。
受賞者の完全なリストはhttps://www.angularattack.com/にあります。
最後に、私にとって興味深いと思われるいくつかの作品を共有したいと思います。
バラトン
https://www.angularattack.com/entries/1375-balaton
グループ順位の勝者。 一連のサウンドを再生するプレーヤー。 セットの各サウンドをオフにすることができます。 再生速度を制御できます。 回転する数字、音からプレイヤーの中心に向かう軸との交点が、現在の音量レベルを決定します。 形状と音のセットを変更すると、独自の「メロディ」を作成できます。
ngDungeon
https://www.angularattack.com/entries/1368-sarvivalas
そして、これは私の個人的なお気に入りです。 驚いたことに、このプロジェクトはどの候補にも当てはまりませんでした。 おそらく、ハッカソンで最も人気のあるプロジェクトの1つです。
彼らは2つの小さなレベルのルージュのようなゲームを作成しました-48時間で仕事に最適です。 最も貴重なことは、彼らがソースを発見したことです
算数
https://www.angularattack.com/entries/371-ng-elol
このプロジェクトの作成者は、ゲーム（すでにいくつかのプラットフォーム用に作成されていた）をAngular 2に移植しました。モバイルデバイスを含め、見た目も動作も良好です。 ソースコードも公開されています。
そして、ここに私が得たものがあります
https://www.angularattack.com/entries/2166-maple-syrup
https://andreichernykh.2016.angularattack.io/
場所のコードが最適に記述されていないことに注意してください。多くのコードとアプリケーションの使いやすさが大幅に向上します。 はい、そしてハッカソン中に、もちろん、モバイルデバイスで動作するようにゲームを最適化することができませんでした。 48時間は客観的には、これらすべてを行うのに十分ではありませんでした。 ご清聴ありがとうございました。ご意見をお聞かせいただき、コメント欄のすべての質問にお答えいたします。