Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Sencha Ext Community Editionを発表

November 7, 2018 143 Views
Show
この記事は、Sandeep AdwankarによるAnnouncing Sencha Ext Community Editionの抄訳です。

昨年、コミュニティから次のような強い要望が寄せられました。JavaScript開発者は、シンプルかつモダンなツールを利用し、見栄えのよいクロスプラットフォーム エンタープライズアプリケーションをより簡単かつ迅速に構築できるようにしたい。私たちは、そうした声に耳を傾けてきました。

そして今回、Sencha Ext JS Community Edition(CE)のリリースを発表することになりました。コアフレームワーク、数百のモダンコンポーネント、マテリアルテーマ、オープンツールなどが、限定された商用利用ライセンスで無料提供されます(ライセンス規定の詳細はこちらをご覧ください)。

Ext JS CEは、学生、趣味のプログラマー、フリーランス、スタートアップ企業や非営利団体が、Ext JSフレームワークとコンポーネントを使用してアプリケーション開発を学習、構築するのに最適な選択肢です。新しいプログラミング言語の学習、クロスプラットフォームWebアプリケーションの開発、オープンソースのJavaScriptプロジェクトのメンテナンス、Ext JSフレームワークの学習などにも役立ちます。

Ext JS CEを用いれば、100以上のコンポーネントを備えた包括的なJavaScriptフレームワークを利用できます。Ext JS CEで開発を始めても、収益が10,000ドルを超えた場合には、商用ライセンスにシームレスに移行できます(詳細は、ライセンス規定をご確認ください)。

初期投資の限られたスタートアップ企業や組織にとって、Ext JS CEは完璧なソリューションであると言えます。Community Editionは、規模の拡大に応じたツール、リソースを用意しているので、本格的なエンタープライズアプリケーションの構築に向けても不安なく利用することができます。

Ext JS Community Editionのダウンロード

Ext JS Community Editionの機能ハイライト

  • クロスプラットフォームエンタープライズWebアプリケーション構築をサポートするコアフレームワーク
  • スプレッドシートの選択、セル編集などの機能を備えたGridを含む、数百ものモダンコンポーネント
  • 包括的なデータパッケージ – 膨大なデータセットの管理とスムーズスクロールを実現する仮想ストアを使用し、データ解析アプリケーションを容易に作成可能
  • 美しいアプリ作成をサポートするマテリアルテーマ
  • スターターアプリを生成/ビルドできるオープンツール
  • npm、WebPack、Babelのサポート
  • ホストされたnpmリポジトリへのアクセス
  • サンプルアプリケーション – チュートリアルとガイド
  • Stencils – アプリデザインのための完全なUIアセットツールキット
  • Fiddle – Ext JSのコードサンプルを作成、実行、共有するためのオンラインユーティリティ

Ext JS Community Editionに含まれるもの

クロスプラットフォームエンタープライズWebアプリケーション構築をサポートするExt JSコアフレームワーク

Ext JS Community Editionは、Ext JSコア、数百のモダンコンポーネント、マテリアルテーマ、オープンツールなど、Webアプリケーション構築のための完全なフレームワークを提供します。

Ext JS Community Editionに含まれるもの

モダングリッドを含む数百ものモダンコンポーネント

Ext JSには、あらかじめ統合されテスト済の、最も包括的な高性能UIコンポーネントのコレクションが含まれています。これらのコンポーネントには、グリッド、ツリー、リスト、フォーム、メニュー、ツールバー、パネル、ウィンドウなどが含まれます。Ext JS Gridは、インラインセル編集に加え、フォームベースの行編集、グループヘッダー、Microsoft Excelで行えるようなデータの選択を可能にするselectable 設定をサポートする、最も一般的なコンポーネントの1つです。

Ext JS Grid

Ext JS Grid

膨大なデータセットを管理する包括的なデータパッケージ

Ext JS Gridには、非常に大きなデータセットのレンダリングとスクロールが可能なグリッドとリストを作成できる仮想ストアが含まれています。仮想ストアは、グリッドに必要なページのみを読み込みます。リストコンポーネントのinfinite設定(グリッドではデフォルトでオン)と組み合わせれば、ロードされたこれらのレコードのほんの一部のみがDOMにレンダリングされます。こうした最適化により、プレゼンテーション中のデータの量にかかわらず、ブラウザのパフォーマンスが維持されるのです。

Ext JS Forms with input masking and advanced validation

入力マスキングと高度な検証機能を備えたExt JSフォーム

美しいアプリを作成できるマテリアルテーマ

Ext JSコンポーネントは、マテリアルを組み込みテーマとして利用できます。マテリアルテーマは、特定のブランドアイデンティティを反映するように、簡単にカスタマイズすることができます。マテリアルテーマには、カスタムテーマのデザインのために変更することができる数百の変数が公開されています。

Ext JS Kitchensink app with Mocha Pop style

Ext JS Kitchen Sinkアプリ、Mocha Popスタイル

スターターアプリを生成/ビルドできるオープンツール

Ext JSオープンツールは、コード生成、ビルドインテグレーション、ワークスペース管理をサポートします。ExtGenは、Ext JS npmパッケージを使用して新しいアプリケーションをすばやく作成できる強力な新ツールです。ExtGenには、モバイル、デスクトップ、最小限のアプリケーションを構築するための複数の新しいテンプレートが用意されています。独自のテンプレートを使用して、新しいExt JSアプリケーションを作成することもできます。

npm、WebPack、Babelによる最新のWebテクノロジーツールのサポート

JavaScriptツールは、品質とメンテナンス性の向上により、短いタイムラインでWebアプリケーションを作成できるように進化しています。npmは、JavaScript向けパッケージマネージャであり、世界最大のソフトウェアレジストリです。そこには、開発者がアプリケーションで使用できる700,000個以上のJavaScriptベースのコードパッケージのリポジトリがホストされています。Ext JSは、最新のJavaScript標準をサポートするExt JS npmパッケージ、nodeベースのクロスプラットフォームコマンドラインツール、およびBabelベースのツールチェーンを備えた最新のWebテクノロジーツールを使用します。生成されたすべてのアプリケーションは、WebPack開発サーバーを使用するため、アプリケーションへの変更はブラウザに即座に反映されます。

ホストされたnpmリポジトリへのアクセス

Ext JSのフレームワーク、コンポーネント、テーマは、npmリポジトリでホストされるnpmパッケージとして利用することができます。Ext JS開発者は、プロジェクトにパッケージを追加したり、依存関係を管理したり、使用されているパッケージのバージョンを管理したりするための簡単なコマンドを実行できます。また、Ext JSアプリケーションに、サードパーティ製JavaScriptライブラリを容易に組み込むこともできます。

例えば、次のコマンドを使用すれば、簡単にExt JS Tree Grid npmパッケージをプロジェクトに追加できます。

npm i –save @sencha/ext-modern-treegrid

Ext JS Tree Grid

Ext JSツリーグリッド

サンプルアプリケーション – チュートリアルとガイド

Ext JSでは、iTunes Webサイトからパブリックデータ、特に最新の高評価ビデオを描画して、カスタムミュージックビデオプレビュープレーヤーを構築する方法を示す「クイックスタート」チュートリアルを提供しています。ユーザーは次のようなアプリケーションを構築できます。

  • Ext JS TabPanelコンポーネントを使用したランディングページ
  • Ext JSのグリッドコンポーネントを使用したビデオのカスタムテーブル
  • Ext JSのDataviewコンポーネントを使用したカスタムスタイルのサムネイルのコレクション

各タブでは、データビューからサムネイルのクリック、あるいはグリッドからレコードのクリックにより、Ext JSのDialogコンポーネントを使用したホバリングモーダルウィンドウに、30秒のビデオプレビューをレンダリングします。

Create Ext JS app using Quick Start tutorialクイックスタートチュートリアルを使用してExt JSアプリケーションを作成

Stencils – アプリデザインのための完全なUIアセットツールキット

Sencha Stencilsは、Ext JSで動作する完全なUIアセットキットです。Stencilsは、Adobe Illustrator、Sketch、Balsamiq用に提供され、他のプログラムで使用するために、SVG/PNGでの出力にも対応しています。Stencilsには、Ext JSフレームワークで使用されるすべてのコンポーネントとスタイルが含まれています。

Fiddle – Ext JSのコードサンプルを作成、実行、共有するためのオンラインユーティリティ

Sencha Fiddleは、ローカル環境設定のオーバーヘッドがかからずサンプルを実行表示できるオンラインIDEを提供します。Sencha FiddleをExt JSで使用すれば、ブラウザでExt JSコードをダウンロードしたりインストールすることなく試すことができます。また、Fiddie URLを保存して共有することで、簡単にExt JSコードを共有することもできます。

Ext JS Community Editionをダウンロードしてフィードバックをお寄せください

皆さんがExt JS CEを用いて、すばらしいWebアプリケーションを作成することを楽しみにしています。Ext JSフォーラムサーベイに、ぜひ皆さんのご意見、ご感想をお寄せください。

Recommended Articles

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript エコシステムの最新情報について学ぶユニークな機会と言えます。

JS Frameworks: A Guide to Dodging 10 Common Blunders

Ext JS is one of the most popular JS frameworks for creating interactive websites. However, beginners often face challenges when using it. This guide helps…

JS Frameworks’ Shorthand Syntax for Developers

Looking to make your JS frameworks code simpler and easier to read? JavaScript’s shorthand syntax can help. This blog explores the basics and advanced uses…

JS Frameworks Dynamic UIs: A Guide to Elevating User Interfaces

Today, we will explore the beauty of dynamic UIs in web development. We’re here to show you how to turn plain web pages into exciting…

JS Frameworks: JavaScript for Device Characteristic Detection

In web development, we are always looking to enhance the user experience. One of the best ways to achieve this is by understanding user environments.…

Debugging JS Frameworks: Identify and Fix Errors with Techniques

JavaScript is one of the most flexible programming languages used in web development. However, it comes with major challenges instead of higher complexity and flexibility.…

View More