HOME > 開発者向けBLOG > Sencha Blog >  Fashion: 圧倒的に速い Ext JS のテーマ操作

Technology Note 開発者向けBLOG

Sencha Blog

Fashion: 圧倒的に速い Ext JS のテーマ操作

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Fashion: Blazing Fast Theming For Ext JS を翻訳したものです。

SenchaCon で行われた数多くの発表の中でも特に反響があったのが Fashionでした。参加者の皆さんには、瞬きをした隙にアプリケーションのスタイルやカラーが変わる、素晴らしいデモンストレーションを見ていただきました。Ext JS 6 のリリースと共に、どのような背景で Fashion が生まれたのかと、実際の技術を披露する Phil Guerrant の映像を紹介したいと思います。

始まりは…

まず、始まりは CSS でしたが、たくさんの問題点や欠点がありました。変数が無かったり、管理するのが難しかったため、コードを再利用することなど不可能でした。次第に開発者は、制御がきかないために書き直さなければいけない巨大な CSS ファイルが存在することに気づき始めるのでした。

そこから SASS (Syntactically Awesome StyleSheets) が登場し、CSS が便利になるシンタックスが加えられました。変数があり、ネスト化されたルールがあり、mixin によってコードを再利用でき、色や文字列などを操作する機能が備わりました。

CSS3 では、スタイリングが全てのブラウザに渡って機能することが必要であったため、Compass と SASS の組み合わせの方向に走りました。しかし、この組み合わせには Ruby へのシステム依存があり、ビルド時間コンパイル問題などが生じました。

Fashion の登場

我々は、テーマ体験を改善させたかったのですが、Ext JS 4 や 5 で使用されている SASS シンタックスと互換性のあるソリューションである必要がありました。そこで発案されたのが Fashion でした。全ての SASS系のシンタックスに対応し、ブラウザ内でSASS を CSS にその場でコンパイルし、カスタムエクステンションを作るための新しい JavaScript API を含んでいます。Phil が実際に Fashion を使うビデオをご覧ください。

 

PAGETOP