上海 HTML5 サミット ノートのコレクションと概要_html/css_WEB-ITnose

私は、開始の 2 日前に Moments で iWeb サミットに関するニュースを見ただけで、少し急いでいたので、関連トピックについて学ぶのに 2 時間もかかりませんでした。かなり多くの知識が含まれており、中にはこれまで触れたことのないものも含まれていることがわかりました。したがって、一部の懸念事項や理解レベルは非常に限られており、誤解さえある可能性があります。これらは参照と知識の拡大のみを目的としています。

ツール アプリケーション カテゴリ

サミットのテーマは HTML5 で、ゲーム、ツール、マーケティングの 3 つの主要なモジュールに分かれています。主にツールセッションについて気になっているので、先にまとめておきます。

リアルタイム Web フロントエンド

講演は Wild Dog の共同創設者 Xiao Guangyu によって行われ、彼は冒頭で次のような質問をしました。所要時間は？次に、いくつかの例を示します。通常、リアルタイム データを取得するためだけに Weibo をチェックします。コードを更新できる場合、株価の上昇と下落をリアルタイムで表示する必要もあります。リアルタイムでコラボレーションできるため、コストを削減できます。

Web フロントエンドがリアルタイムにできない理由は遺伝子によって決まります。ほとんどすべての Web テクノロジは HTTP プロトコルを使用しており、その特徴は次のとおりです。 コネクションレス。これは、サーバーがクライアントのリクエストを処理し、クライアントの応答を受信した後、サーバーが切断されることを意味します。クライアントは、対応するリクエストを処理した後はクライアント情報を保持しません。

次に、HTTP に基づくリアルタイムの試行、ポーリングとロングポーリングについて説明します。

続きでは、HTML5 時代のリアルタイム技術 WebSocket について話しました。

そして、リアルタイムの基礎となるのは、メッセージ サブスクリプション モデル (pub/sub) とデータ同期 (Data Sync) です。

最後に、リアルタイム Web の将来、WebPush と WebRTC という 2 つの技術的なポイントについて説明します。

かなりの知識が必要ですが、漠然とした感想です。興味があれば技術的なポイントから検索してみるといいでしょうし、個人開発者が無料で使える公式サイトやAPIもチェックしてみてください。

共有コンテンツに似ている関連記事を見つけました: リアルタイム Web フロントエンド

ブログ: https://blog.wilddog.com/

彼ら 公開アカウント: Wild Dog

インテル特別セッション: HTML5 テクノロジーとハードウェアの組み合わせ

インテルは、主にオープンソース プロジェクト Crosswalk を宣伝する 2 つの講演を行いました。 Crosswalk は、Hybird プロジェクトで使用され、ネイティブ ブラウザを置き換えることができる Webkit の拡張バージョンとして簡単に理解できます。

マルチプラットフォーム サポート、WEBGL サポート、VR、RealSense サポート、Youdao クラウド アクセスなどのよく知られたアプリケーション、Google のモバイル Chrome アプリ チーム アクセス、互換性、パフォーマンス処理など、多くの利点について説明します。 。

3 つのアクセス モードがあります: 埋め込みモード: ネイティブにパッケージ化され、HTML5 ページの Web ビューとして使用されます。共有モード: 単一のアプリにパッケージ化する必要がなく、システムは 1 つのクロスウォークのみを必要とします。呼び出すすべてのアプリケーション、およびダウンロードモードがあります。アプリケーションはCrosswalkに依存する必要があるようですが、その後、自動的にApp Storeにアクセスしてダウンロードしますか？これはよくわかりませんが、.net Framework に依存する必要がある PC 上の一部のアプリケーションと同じモデルだと思います。

最後に、チームでの使用を促進する上での欠点は、やはりサイズの問題だと思います。crosswalk を導入するために、インストール パッケージは 10M ですが、フル バージョンは 10M です。必ずしも受け入れられるわけではありません。

ブースで体験したWebVRミニゲームはとても眩しくて、思わずアニメ「ソードアート・オンライン」を思い出しました。この講演では、離れた場所から手で車の動きを制御できる Web for RealSense と呼ばれるテクノロジーについても触れられました。テクノロジーの発展は私たちの理解を大きく変え、私たちのこれまでの夢は将来実現するかもしれません。

Weex

主に、一般的な紹介、デモの表示、デバッグ方法、およびいくつかの技術的な実装の詳細について説明しました。 Weex は現在プライベートプロジェクトであり、公式 Web サイトで申請することで許可を取得できます。6 月には完全にオープンソースになる予定です。

React-Native と同じタイプのフレームワークですが、weex は軽量でシンプルな構文、そして簡単に始められることに重点を置いています。 Weex は vue を利用しており、vue の学習コストは React に比べて比較的低いです。

weex フレームワークは、フロントエンド開発者として、js を使用してネイティブ開発するモデルにもさらに注意を払う必要があります。さらに、今年は vue コミュニティがより活発になり、より注目を集めるはずです。

関連情報:

Weex について知っておくべきことすべて

アリババのモバイル高性能動的ソリューション Weex の詳細な公開

最新情報ワイヤレス ビジネス ソリューションについての考え

Alibaba Wireless Front End がリリースした Weex についてどう思いますか?

ES6+ コード スタイルと品質基準を策定および実装する方法

どの先輩ですか?彼は、このスピーチが有益であることが判明したと述べました 元の情報: http://johnhax.net/2015/es6-code-style/#0

現場で印象に残ったこと: Eslint は高度に構成可能で、多数の事前設定されたルールがあり、共有して再利用できる (git search eslint-config) など、チーム内で昇格して使用できる。ルールは、考えられるエラー、ベスト プラクティス、変数宣言などに分かれています。He 先輩の提案は、使用できるすべてのルールを使用することです。 ES6+ の一般的な原則: ajax => Promise、Class Factory => ネイティブ Class 構文、args、|| => などの構文を使用してください。 =>ヘッドカット機能など。

その後、スペースとタブの問題について話し合い、He 氏が作成した Atom プラグイン elastic-tabstops を共有しました。私自身も試してみましたが、とてもうまくいきました。 Atom エディターも PC では遅いと聞きましたが、私の Mac では非常にスムーズに使えます。プラグインも豊富で、カスタマイズも簡単で、見た目も良いです。使用中に問題が発生しました: プラグインが有効になりませんでした。 解決策: 設定でタブタイプ項目をハードとして選択し、再起動します。プラグインが有効になった後、タブ文字が目立ちすぎて見苦しい場合は、自分でスタイルをカスタマイズできることがわかります (エントリ ファイル: Atom -> スタイルシート)。方法としては、commond+option+iでデバッグツールを呼び出し、該当するクラスを見つけてスタイルファイルに書き換えます。たとえば、私は Seti を使用しており、コードは次のとおりです。

atom-text-editor::shadow {    span.hard-tab {         box-shadow : inset -1px 0;         display    : inline-block;         &:not(.indent-guide) {            color: rgba(255, 255, 255, .1);         }        &.indent-guide:first-child {             box-shadow : inset 1px 0, inset -1px 0;        }    }}atom-text-editor::shadow span.hard-tab{    color: rgba(255, 255, 255, .1);}

Tmall e-commerce ツール - Hilo エンジン & TidaSDK

Hilo は軽量です。ゲーム開発 このエンジンは主にレンダリングの問題を解決し、淘宝網のダブル 11 の多くの小規模ゲームなど、電子商取引プロジェクトの迅速な開発に使用されます。インターフェイスの構築では引き続きネイティブのキャンバスと CSS を使用できます。共有で言及されている技術的なポイントの 1 つは、Flash アニメーションを CSS アニメーションに自動的に変換することです。ツール名は Tahiti と呼ばれるようですが、ネット上では関連情報が見つかりません。

ご興味がございましたら、公式 Web サイトと次の記事をご覧ください: Tmall Double 11 Party と Carnival City の背後にあるテクノロジーを明らかにする

信頼できるフロントエンドを構築する方法チーム

Qunar.com の開発ディレクター、Du Yao 氏が講演し、印象に残ったいくつかの点について簡単に話しました。

自分自身から始めて、内部的には、自分の役割、役割、外部的には、昇進能力、リソース調整能力、判断力について考えてください。

チームから始めましょう: チームにさらなる利益をもたらし、チームの安定性を向上させるために最善を尽くします。

チームメンバーの能力を最大化する

人員構成とテクノロジースタック: チームが現在必要としている人材を採用します。たとえば、React-Native を推進するには、ネイティブ開発者を採用する必要がある場合があります。個性の異なるメンバーを採用する 調整;

オーナーシップの精神を動員するためにプロジェクトごとに責任者を指名する

チームメンバーが一定期間内にビジネスニーズを満たせない場合、開発を優先する作品は重要度に基づいて選択されます

ゲストから非常によくある質問があり、非常に参考になると思います。これは次のようなものです。チームの新入社員は能力が不足しており、多くの緊急のタスクを抱えています。自分一人で責任を負っていてはチームメンバーの成長につながらないし、新入社員に任せると指導に時間がかかり、プロジェクトの進行に影響が出てしまうのではないか。答えは次のとおりです。プロジェクトの枠組みを設定し、新しい同僚にいくつかの業務を任せて、徐々に慣れてもらい、初期段階でより多くの指導を提供する必要があります。実際、それは前述したオーナーシップの動員を体現し、チームメンバーの熱意を動員し、達成感を向上させ、チームメンバー自身の成長にもつながります。

HTML5ゲームについて

普段ゲームにはあまり注目しないのですが、午前の部にゲームも混じっていたので少し聞いてみました。

まず最初に、Butterfly Interactive CEO の Ling Hai 氏が「HTML5 ゲームの品質とサービス」について説明しました。 Butterfly Interactive は国産 HTML5 ゲームの兄貴分であるようで、その「Legendary World」Web 版は月間収益が 2,000 万です。このスピーチ全体が、HTML5 ゲーム業界全体に希望とビジョンをもたらしたと感じています。

その他:

スピーチの内容は非常に複雑で、理解できなかった点も多いかもしれませんが、それでも、D2 に参加したときと比べて得るものはたくさんありました。卒業後初めて記録して、来年比較してみます。

いくつかの経験を共有したいと思います:

最初は上海に行くのが面倒だと思って、生放送を見たいと思っていました。行ってみて、雰囲気がとても良いと感じました。ライブ配信を見るだけでは根気が続かないかもしれません。事前にいくつかの準備をしなければなりません。なぜなら、講演者は自分が学んだ核となることを必ず聴衆と共有したいと考えており、多くのエネルギーを費やしますが、聴衆はある程度の基礎と考え方を持っていないと理解するのが難しいかもしれません。もっと聞いて共有するときに、もっと価値のある問題を思いつくことができますか。機会を無駄にしないでください。

わからなくても大丈夫、フロントエンド技術全体の開発動向を把握したり、知識を得ることができます。おそらく、特定の技術的なフレームワークやソリューションがあなたのチームにより適している可能性があります。

頂上にはたくさんの賞品がありましたが、逃したのが残念でした。ただし、コーディングによって発行されるスプーンとフォークで、コーディングという文字が印刷された小さなギフトもあります。いつも奇妙に感じますが、それは食事中、「コードをうまく書かないと食べ物がなくなる」ということを思い出させてくれるのでしょうか？