lightning componentとlightning design system

Lightning Componentと Lightning Design System

カスタムページを作ってみました2015/10/29NORIKO IWAI

© 2015 Appirio, Inc. - Confidential

Agenda

Lightning Component の期待と実際

Lightning Design System の期待と実際

意外に使えた AuraJS

まとめ

自己紹介• 岩井法子 • 株式会社アピリオ• SFDC の開発とか色々• SFDC 歴 3 ヶ月• それまでは

l Java とか C# とか・・・l jQuery とか Backbone.js とか Node.js とか・・・

3

資格制度変わっちゃいましたが

今回作ったアプリ

4

• Lightning Component と Lightning Design System とAuraJS だけで頑張ってみた。

※ 開発環境は Sublime Text 3 + MavensMate V7 beta

苦行

Lightning Component に対する自分の理解

5

• クライアント - サーバの Web アプリケーションを開発するためのフレームワーク

• クライアントサイドは HTML + JavaScript （ Aura フレームワーク）、サーバサイドは Apex

• シングルページアプリケーション（ SPA ）の開発に特化

• コンポーネント同士を組み合わせて階層的に利用することが可能

• Lightning Design System は Salesforce Lightning の外観に合わせたカスタム CSS 、アイコン、ベストプラクティスのガイドなどの UI 補助ツール集

Lightning Component に期待していたこと

6

• HTML ／ JavaScript の知識があれば学習コストが低く抑えられる。

ほぼ期待通り

• Apex のメソッドを JavaScript からシームレスに利用できる。

• コードの見通しが良くなる。

• 便利な標準コンポーネントが最初から揃っている。

• 再利用性が高い。

Lightning Design System に期待していたこと

7

• Twitter Bootstrap みたいに簡単・便利なコンポーネントがたくさん使える。

なんかちがった

• 少ない工数でリッチな UI がすぐに作れる。

• モダンなアニメーション効果を手軽に実現できる。

• Lightning Component と親和性が高い。

Lightning Design System の実際

8

• Twitter Bootstrap みたいに簡単・便利なコンポーネントがたくさん使える。→ 提供されているのは HTML サンプルだけ

→ カレンダーすら要自作

→ 提供されているのは HTML サンプルだけ

→ カレンダーすら要自作

9

• 少ない工数でリッチな UI がすぐに作れる。

show: function(component, event, helper) { var element = component.get(‘modal’).getElement(); $A.util.toggleClass(element, 'slds-show'); $A.util.toggleClass(element, 'slds-hide');}

<div aura:id=“modal” class="slds-hide”> …</div>

CONTROLLER

COMPONENT

→ CSS だけならまだしも動きまで表現するとなると要自作


10

• モダンなアニメーション効果を手軽に実現できる。

.THIS .transition-font-size {-webkit-transition: 0.2s font-size

linear; transition: 0.2s font-size linear;}

.THIS .transition-font-size.on { font-size: 1.5em;}<li class=“transition-font-size" onclick="{!c.selectMemberType}" onmouseover="{!c.toggleFontSize}" onmouseout="{!c.toggleFontSize}"> …</li>

STYLE

COMPONENT

→ Lightning のフレームワークではなく CSS3 で要自作


11

• Lightning Component と親和性が高い。

例）aura:inputDate の標準アイコン

STYLE で位置を調整しないとテキストボックスを飛び出す

→ 表示がおかしくなってしまう標準コンポーネントもあった

そんな中で・・・意外に使えた AuraJS

※ https://github.com/forcedotcom/aura のソースから抜粋

https://github.com/forcedotcom/aura

jQuery でおなじみクラス操作系

13

• $A.util.toggleClass• $A.util.addClass• $A.util.removeClass• $A.util.hasClass• $A.util.swapClass

var element = component.find("member-type-modal").getElement();$A.util.toggleClass(element, 'slds-show');$A.util.toggleClass(element, 'slds-hide');

便利な配列操作

14

• $A.util.forEach• $A.util.every• $A.util.map• $A.util.filter

var Name = $A.util.filter( component.get("v.memberTypes"), function(obj, index) { if (obj.Id === id) { return true; } return false; })[0].Name;

データ操作も OK

15

• $A.util.getDataAttribute• $A.util.setDataAttribute• $A.util.hasDataAttribute

var id = $A.util.getDataAttribute(event.currentTarget, "id");

<aura:iteration items="{!v.memberTypes}" var="memberType"> <li data-id="{!memberType.Id}”> <a href="#" role="option"> {!memberType.Name} </a> </li></aura:iteration>

まとめ（１）

16

• 当初期待していたような「少ない工数」「簡単でリッチなUI 」実現は難しい。

• フロントエンドの UI に限って言えば、通常の Web アプリを一から作るのと労力は変わらない。同じ機能を実装するなら、 Visualforce ベースの方がはるかに簡単。

• 生産性、保守性ともに良いとは言えないため、現状は SI のようなカスタム・アプリ開発の現場で Lightning Design System をそのまま使うのは難しいと思われる。

• もう少し Lightning Design System が成熟する or 別の方法が提示されるまで待った方が良さそう。

まとめ（２）

17

• 自作コンポーネントが溜まってくれば、開発工数はかなり抑えられる（はず。 App Builder 環境に期待）。

• 依存度が低く組み合わせの自由度が高いので、開発者ごと、開発会社ごとの色が出やすくなった。

• AuraJS の豊富な機能を見ていると、今後 Lightning Component と Lightning Design System のつなぎになるような標準機能やベストプラクティスがもっと増えるのではないか。

以上です

lightning componentとlightning design system

Technology