Web /モバイルアプリケーション開発の加速

アイデアが有用なものを作成することである場合、通常、できるだけ早くプロトタイプ（またはバージョン1.0）を作成する必要があります。 誰かにとって、迅速な結果を見ることは、アイデアをさらに発展させる良い動機です。 他の人にとっては、主なことは「開始」することです。完成品の完成/作り直しはゼロから書くよりもはるかに簡単であるというよく知られている真実です。 したがって、次のお茶と金融市場の議論の過程で、私たちはアイデアやニュースを交換するための簡単なサービスを作成するだけでなく、金融市場の現在の状況（いわゆるトレンド）を決定するというアイデアを持っていました-トレンドを知っているので、より効率的に取引することができます。
要件は、Webサービス、モバイルバージョン（できればアプリ）、簡単な集合管理パート、およびシンプルなインターフェースでした。
この記事では、CxInvestorアプリケーションのWebバージョンとモバイルバージョンの両方を非常に迅速に「ブラインド」する方法について説明します。

開発

解決する必要がある最初の質問は、サーバーを何に書き込むかでした。

サーバーレスFirebase

私のphpの知識は90年代にまで及んだため、 ASP.NETまたはJavaで小型で軽量のサーバーを作成したくありませんでした。 「サーバーレス」のWebアプリケーションを作成するという考えは良すぎるように思えましたが、インターネットを掘り下げた後、結局Firebaseを試すことにしました。 アカウント、データベースを作成し、簡単な例を実装するのにたった20分しかかかりませんでした。 Firebaseには、「リアルタイム」データベースに加えて、ユーザー、特権、およびFacebookやTwitterとのさまざまなログイン統合システムが組み込まれていることに注意してください。 実際、ユーザー、パスワード、特権を管理するシステム全体がボールに与えられました。
まあ...実際にはボールではありません、あなたがより大きなアプリケーションを持っている場合-最低有償アップグレードは月額50ドルです。

Firebase ：

長所：

• 非常に迅速なセットアップ
• 使いやすさ
• 作業速度

短所：

• 非リレーショナル/ NoSqlデータベースは、多少なりとも単純な場合にのみ適しています。
• 価格-サポート、サーバーのメンテナンス、セキュリティには価値があるため、これはプラスになる可能性が高い

Firebaseの魔法は次のとおりです。

var fb = new Firebase("https://YOUR.firebaseio.com/"); fb.set({ name: "Alex Wolfe" }); 

レスポンシブブートストラップとAngularJs

フロントエンドの場合、選択はかなり明白でした。TwitterBootstrapを使用すると、任意のデバイスでサービスを簡単に操作できますが、 AngularJsはすぐには思い付きませんでした。 AngularJsを支持する主な論点は、それが本格的なフレームワークであるということでした。つまり、2つまたは3つのメインJavaScriptライブラリ（たとえば、RequireJs + KnockoutJs）のバンドルを学ぶ必要はありません。 また、AngularJsには優れたモジュール構造があり、プレゼンテーションをロジックから分離し、長いパスをサポートしています。
一般に、AngularJsは私たちを失望させませんでした。発生した問題はすべてgoogleを使用して迅速に解決され、アプリケーションに新しい機能を追加するのは簡単で快適でした。

AngularJs ：

長所：

• 明確なモジュール構造
• 組み込み依存システム
• すべてのWeb要素はデータ変数にサブスクライブするため、Firebaseが変更を送信すると、すべてがフロントエンドに自動的に表示されます

短所：

• 新しいバージョンで修正されるか、簡単にバイパスされる少数の問題/バグ
• ライブラリの重量はまだかなり大きいですが、長期的には報われるはずです

これは、いくつかのモジュールの依存関係を定義する方法です。

  var controllerId = 'calendar'; angular.module('app').controller(controllerId, ['$rootScope', 'common', 'datacontext', calendar]); function calendar($rootScope, common, datacontext) { 

携帯電話のギャップ

理論的には、前の3つの要素（ Firebase 、 BootstrapおよびAngularJs ）を追加すると、モバイルWebブラウザーで機能する既製のサービスができました。 Phonegapにすべてを詰め込み、Webサービスからモバイルアプリケーションを作成することは論理的な追加でした。

いくつか混乱しました：

1. AppleがPhonegapラッパーを好まないという話を読んで、アプリケーションにAppStoreを通過させ、賛否両論を検討した後、試してみることにしました。 ちなみに、アプリケーションのシンプルさ、および明らかに非iOSユーザーインターフェイスの設計にもかかわらず、最初のバージョンでは2回目のレビューが行われました（最初のパッケージでは、必要なサイズではないアイコンをオンにしました）
2. 必要な機能の安定性と可用性
3. 作業速度

判明したように、いくつかのことはまだ希望どおりに機能せず、アプリケーションの最初のバージョンの速度はまだ望まれていませんでした（後でさらに詳しく説明します）。

同じ機能のためにいくつかの異なるプラグインを試して、javascript（知っている-理解する）でアラート（「yoo」）で苦しめられましたが、私はまだ機能をデバッグし、iPhoneで作業バージョンを起動しました。 将来的には、それにもかかわらず、プラグインに付属する例だけで主な問題が発生したことに注意してください。 ほとんどの場合、プラグイン開発者にはサンプルを時間通りに更新する時間がありません（または面倒です）。その結果、マイナーな構文エラーや呼び出しパラメーターの変更により、アプリケーションを動作させるためにお茶 、デバッガー、アラートで一晩過ごす必要があります。

速度にはさらに多くの問題がありました！ Phonegapでまとめた後、アプリケーションは率直に言って完全に非対話型に見えました（一部の部分は完全に禁止されていました）。 モバイルアプリケーションでの{{myData}}などのAngularJsブラケットの素晴らしい発明は、 一瞬一瞬あちこちに現れ、完全なファイルのように見えたため、呪いであることが判明しました。 その結果、システムの主要部分は、可能な限りキャッシュし、要素をできるだけ更新しないように書き直す必要がありました。 すべてのcssおよび角度アニメーションは完全に削除する必要がありました（原則として、私はほとんど後悔していません）。 そして、すべてのブラケット{{myData}}をng-bind = "myData"に置き換える必要がありました。
さらに、不要なjavascript、未使用のcssが最大化され、最終的にFastClickが追加されました。

  <script type="application/javascript"> window.addEventListener('load', function () { FastClick.attach(document.body); }, false); </script> 

結果？ アプリケーションはよりインタラクティブになりました。もちろん、速度はネイティブアプリケーションとは明らかに異なります（良くはありません）が、紛れもないプラスです。Phonegapを使用すると、すべてのモバイルプラットフォームでアプリケーションを一度に作成できます。

だからPhonegap ：

長所：

• ラッパーはすべてのプラットフォームで動作します（Webバージョンを開発し、ギフトとしてモバイルバージョンを取得します）
• build.phonegap.comでの使用は簡単です
• ほとんどのモバイル機能は、javascriptプラグインとして利用できます。

短所：

• デバッグには多くの時間と労力がかかります。
• アプリケーションの速度が重要な要素である場合、phonegapは機能しない可能性があります。

インストールとセットアップ

ドメインの登録、ftpクライアントのホスト、使用は必要ですが、ビルドの準備と管理のシステムはさらに重要です。 まず、サーバーに送信するものを分離し、新しいバージョンとタグを生成し、本番構成を適用し、javascriptとcssを難読化し、必要に応じてhtaccess、sitemap.xml、robots.txtを再構成し、最後にユーザーブラウザーがキャッシュされないことを確認する必要がありますすべての古いファイルなので、ユーザーはWebアプリケーションが更新されたことを知りません。

ビルドシステム

ソースの難読化を自動化し、バージョン管理を維持する必要があったため、小さなビルドシステムを作成するというアイデアがすぐに生まれました。 判明したように、実際には、ftpクライアントでコピーを実際に開始する前に、他の多くのタスクを自動化することができます（そして必要です）（自動化することもできます）。
PowerShellは、そのモジュール性、使いやすさ、およびコマンドラインパラメーターとの良好な連携により、スクリプトビルドとして選択されました。
Closure Compilerがjavascriptコンパイラとして選択され、cssはyuicompressorを使用してコンパイルされました。

  Write-Output "Compiling js files..." java -jar compiler.jar --language_in ECMASCRIPT5 --angular_pass ` --js $BaseDir\scripts\jquery-2.0.3.js ` --js $BaseDir\scripts\angular.js ` ... 

したがって、Webサービスは準備が完了してGoogleインデックスに追加されますが、1つの問題があります-Google ボットはページでjavascriptを実行できないため、AngularJsビューにつながるURL（たとえば、 www.mywebsite.com/#!/myView ）は実行するにはjavascriptが必要なため、 google botによって正しく読み込まれます。 これはおそらく、AngularJsを使用するときの最も不快な瞬間の1つです。WebサービスのSEOが自動的に複雑になり、開発者としての作業が増えるからです。
現時点では、Google（および他の検索エンジン）の推奨事項は、いわゆるhtmlスナップショットをサポートすることです。これは、要求されたページをjavascriptなしで完全に表示します（これにより、厳密にgoogle-HTMLスナップショットとjavascriptバージョンが非常に異なる場合、Googleは罰します）。
スナップショットは、 www.mywebsite.com /？ _ escaped_fragment _ = / myViewの特別なURLで入手できます。
気味が悪いようです...幸いなことに、Apacheルールが助けになりました。これは.htaccessファイルで定義できます。

  RewriteCond %{QUERY_STRING} ^_escaped_fragment_=/?(.+)$ [NC] RewriteRule ^ /snapshots/%1.html? [NC,L] 

そしてそれは簡単です-javascriptがすべてのデータをロードして完全に機能した後、すべてのビューを巡回し、完成したhtmlファイルを保存します。 その後、 PowerShellを使用してこのプロセスを自動化し、サーバー上のスナップショットを自動的に更新しました。 また、インターネットには、ささやかな支払いのためにすべてを行うサービスがいっぱいです（同様のハンドルを.htaccessに入れて、 GoogleボットをサブスクリプションサービスのWebサイトにリダイレクトするだけです）。

次は？

開発プロセス中に、元の機能要件の多くが変更され、多くの新しいアイデアが追加されました。

間違いなく、次のステップはサービスとモバイルアプリケーションの宣伝ですが、それはまた別の機会にです。