LWC

LWC

Transcript

1. SFDC在日華人交流会
2. Introducing Lightning Web Components 譚林涛 2019/3/30
3. 2013 2014 2015 Lightning Web Components登場の背景2013~2015 Auraフレームワーク が開発開始 Data services UI components Component model Templates Rendering optimization Modules Language extensions Frameworks ECMAScript 5 Events Standard Elements Renderting Web Standards 従来UI開発欠点 ・UI最適化されていなかった ・標準UIタグは表現力に乏しい ・UIタグカスタマイズする方法がなかっ た ・大規模エンタープライズアプリケー ションのフロントを担うようなモダンな構 造が無かった Spring’15 Auraフレームワー クが登場! Auraフレームワークの特⾧ ・状態をクライアントのみに持ち可能 ・通信にはJSONフォーマット（REST）を使用する ・イベントドリブン（Event Driven） ・モバイルプラットフォーム およびクロスブラウザのサポート Auraフレームワークの課題 ・フレームワーク自体が言語の様な独自性を持つ ・スキルが流用できない ・OSS上で相互運用性がなかった
4. 2015 2016 2017 2018 2019 ECMAScript7,8,9 が登場! Lightning Web Components登場の背景2015~2019 ECMAScript6 が登場! ECMAScriptには ・classes ・modules ・promises ・decorators などが追加 HTML標準には ・Web components ・Custom elements ・Templates and slots ・Shadow DOM HTML標準も進化 Specialized services Dada services UI components Frameworks Web Components Templates Custom elements Shadow DOM Modules ECMAScript7 Events Standard Elements Rendering Web Standards
5. 2019～ Lightning Web Components利点 Lightning Web Components登場の背景2019~ ・共通コンポーネントモデル ・共通プログラミングモデル ・共通技術を使うため、技術者が見つかりやすい、自ら 成⾧も早い ・コンポーネント相互利用可能（OSS上で） ・コア機能がWebエンジンにネイティブに実装されている ため、パフォーマンスが向上 Security Lightning Dada services Base Lightning Lighting Web Components登 場! Web Components Templates Custom elements Shadow DOM Modules ECMAScript7 Events Standard Elements Rendering Web Standard s
6. Web Componentsを構成するWeb標準 Template and slots １．<template>はHTML5で導入された、JavaScriptからのみ操作 可能なブラウザ上に描画されないHTMLテンプレート用のタブ要素LWCで はHTML部分のコードは<template>要素として作成する。 ２．<slot>はテンプレート内で使用される変数（動的に要素の値を変 更する）を実現する要素 Custom elements １．HTMLページ内にカスタムタグを表示するための標準的な仕組み。 個々のカスタムタグ要素は、JavaScriptのクラスとして表現される ES6 or higher １．LWCがサポートするのは、ES6（ECMAScript2015）以上のバー ジョンのJavaScript ２．サポートするブラウザはChrome、Firefox、Safari、Edge。IE11 はコンパチビリティーモードを使って制限付きでサポートされる（性能面の issueあり） Custom elements １．Shadow DOMと呼ばれる独自のDOMツリーを定義する仕組み ２．Shadow DOMはHTML本体から遮断された独自のスコープを持ち、 CSSやJavaScriptの名前空間が他と干渉しない ３．コンポーネントのカプセルか、再利用を促進する
7. LWCとAuraコンポーネントの共存 ・Auraコンポーネントの中にLWCを含めることはできます ・LWCの中にAuraコンポーネントを含めることはできません Auraコンポーネント LWCコンポーネント LWCコンポーネント Auraコンポーネント 注意 Security Lightning Data Service Base Lightning Components Custom componet model Custom templates Custom components Rendering optimization Custom module Custom events Web Components Templates Custom elements Shadow DOM Modules Standard events Events Standard Elements Rendering Aura Programming Model LWC Programming Model Lightning Components ECMAScript 5 ECMAScript 7
8. LWC開発:ソース構成
9. LWC開発:Playgroundで開発 https://developer.salesforce.com/docs/component-library/tools/playground
10. LWCの開発ワークフロー １．Dev Hub and Scratch Orgs ・Salesforce Command Line Interface (CLI) ・Visual Studio Code Extension ・GitHub ２．Non-Scratch Orgs 開発ワーク フロー 関連ツール
11. 最小限のjsコード 修飾子 Decorators ・@api: Marks a property as public for use in your template or other components. ・@track: Marks a property for internal monitoring. ・@wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org. LWCのJSファイル ・モジュールlwc ・クラスLighiningElemnt
12. LWCコンフィグファイル（メタデータxmlファイル） １．<apiVersion> ２．<isExposed> 必須要素
13. lifecycle hook fires Created Inserted Removed Renders Errors コンポーネントライフサイクルイベント constructor() connectedCallback() disconnectedCallback() renderedCallback() errorCallback()
14. イベント通信 Create and Dispatch Events ・CustomEvent() ・EventTarget.dispatchEvent() Communicate Between Components ・publish-subscribe pattern Aura application events https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/pubsub
15. Aura ComponentsからLightning Web Componentsへ移行 Migrate Component Bundle Files Migrate Markup GitHub ・/lwc/pubsub
16. Aura ComponentsからLightning Web Componentsへ移行 Migrate CSS Aura LWC .THISを削除
17. Lightning Web Componentsのテスト Write Jest tests to: ・Test a component in isolation ・Test a component’s public API (@api properties and methods, events) ・Test basic user interaction (clicks) ・Verify the DOM output of a component ・Verify that events fire when expected Jest tests work in: LWC Aura How to ｗrite Jest Tests ・folder named __tests__ ・Update .forceignore with **/__tests__/** ・@salesforce/wire-service-jest-util ・registerLdsTestWireAdapter(wireAdapter)
18. ご清聴ありがとうございました