Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Lightning Web Component - LWC
Similar a Lightning Web Component - LWC (20)
Más de Thierry TROUIN ☁
Más de Thierry TROUIN ☁ (20)
Último
Último (20)
Lightning Web Component - LWC
- 1. Toulouse Salesforce Developer Group Welcome Ligthning Web Component
- 2. Introducing Lightning Web Components
- 3. Enhanced productivity Use the modern language of the web: ES6+, Custom Elements, and Shadow DOM Built for performance More code executed by the browser instead of JavaScript abstractions for a blazing fast experience Compatible and easy to use Runs side-by-side with existing Lightning components and can be composed with clicks or code Introducing Lightning Web Components Generally Available Spring ‘19 (Feb) New programming model built on modern web standards
- 5. Fragmentation ● Proliferation of frameworks ● Components are not interoperable ● Skills are not transferable ● Resources are hard to find ● Framework abstractions are slow
- 6. W3C and ECMAScript Standardization ● ECMAScript 6,7,8,9 ● Classes ● Modules ● Promises ● Decorators ● Web components ● Custom elements ● Shadow DOM ● Templates and slots
- 9. Benefits ● More standards, less proprietary ● Common component model ● Transferable skills ● Easier-to-find / easier-to-ramp-up developers ● Interoperable components ● Better performance
- 11. Summary 1. Game changing web standards 2. Performance 3. Coexist and interoperate with Aura
- 12. Sample gallery Get inspired with sample apps, explore reference code, and learn best practices Get your hands on applications fully developed with Lightning Web Components, already available in the sample gallery. Upload source code directly from Github and integrate applications into your platform with Salesforce DX.
- 13. Demo Time! Lightning Web Components in Action
- 14. LWC Playground • Go to URL • https://developer.salesforce.com/ • Click Menu • Ressource • Lightning Component Library • Click Tab • Playground • Code
- 15. Lightning Web Components Pop Quiz!
- 16. Quiz: Lightning Web Components 1. Where should you put your template markup in a Lightning web component bundle? a. The HTML file 2. How does the @track decorator affect a JavaScript property? a. It makes the property reactive, so when the value of a property changes it will re-render in the HTML 3. What tool do you use to create a Lightning web component bundle? a. The Salesforce CLI 4. What does the (cacheable=true) Apex annotation mean? a. It allows the platform to create and manage a client-side cache for any data returned by Apex.
- 17. Get Hands On with a Trailmix! sforce.co/lwc
Notas del editor
- [Welcome Slide]
- Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, which means you can use more of the modern language of the web, build components that have blazing fast performance, and what you build can coexist and interoperate with the original Aura programming model. Lightning Web Components est un nouveau modèle de programmation pour la création de composants Lightning. Il s'appuie sur les avancées technologiques des cinq dernières années en matière de normes Web, ce qui signifie que vous pouvez utiliser davantage les langages du Web moderne, créer des composants offrant des performances époustouflantes. De plus, ce que vous développez peut coexister avec le modèle de programmation Aura d'origine (lightning Component).
- To understand why we are launching Lightning Web Components, it is helpful to go back a few years and take a look at the web stack in 2014. Back then, web standards only offered a limited foundation for the full stack that developers need to build large scale web applications: a rendering engine, standard elements, events, and a core language (ECMAScript 5). In addition to being rudimentary, that foundation had other shortcomings traceable to its roots as a page rendering platform, not an application execution platform. For example: Rendering wasn't optimized for continuous UI transformation Standard UI elements were scarce and the standard didn't support the creation of custom elements The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc.) As it is often the case, the community and software vendors jumped in to fill the gaps. For example: Different libraries provided different language extensions to support modular and large-scale development: modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component model and html templating approaches. New techniques were developed to optimize rendering (for example, the virtual DOM in React, Ember, and Vue). In 2014, when we launched the Lightning Component framework along with the Aura programming model, we were part of that effort to push the web forward and enable large scale client-side application development on the web. ----------------------------------------------------------------------------------------+ Pour comprendre pourquoi nous lançons Lightning Web Components, il est utile de remonter quelques années en arrière et de jeter un regard sur le Web de 2014. À l'époque, les normes Web n'offraient qu'une base limitée dont les développeurs avaient besoin pour créer des applications Web à grande échelle: - un moteur de rendu, des éléments standard, des événements et un langage principal (ECMAScript 5). En plus d'être rudimentaire, cette fondation présentait d'autres faiblesses imputables à ses racines en tant que plate-forme de rendu de page, et non de plate-forme d'exécution d'application. Par exemple: Le rendu n'a pas été optimisé pour la transformation continue de l'interface utilisateur. Les éléments d'interface utilisateur standard étaient rares et la norme ne prenait pas en charge la création d'éléments personnalisés Le langage principal manquait de structures modernes pour écrire des applications d'entreprise et modulaires au niveau du client (modules, classes, promesses, décorateurs, etc.) Comme c'est souvent le cas, la communauté et les éditeurs de logiciels se sont mobilisés pour combler les lacunes. Par exemple: Différentes bibliothèques ont fourni différentes extensions de langage pour prendre en charge le développement modulaire et à grande échelle: modules (AMD et CommonJS), promises, classes et autres utilitaires généraux. Différents cadres ont introduit différents modèles de composants et approches de modèles HTML. De nouvelles techniques ont été développées pour optimiser le rendu (par exemple, le DOM virtuel dans React, Ember et Vue). En 2014, lorsque nous avons lancé le cadre de composant Lightning avec le modèle de programmation Aura, nous avons participé à cet effort pour faire progresser le Web et permettre le développement d'applications à grande échelle côté client sur le Web.
- Although these community and software vendor efforts made it possible to develop large scale client-side apps on the web, they also came with a number of challenges: Frameworks became the language. React, Angular, and the Lightning Component Framework are all JavaScript frameworks, but they provide such a high level of abstraction that they feel like different languages. As a result, skills were not transferable, and developers were hard to find and ramp up. Apps and components written with different frameworks are not interoperable. This fragmentation underscored the need for standardization. -------------------------------------------------------------------------------------------------------------------------------- Bien que ces efforts de la part de la communauté et des fournisseurs de logiciels aient permis de développer des applications client à grande échelle sur le Web, ils ont également présenté un certain nombre de défis: Les Frameworks sont devenus des languages. React, Angular et le Lightning Component Framework sont tous des frameworks JavaScript, mais ils fournissent un niveau d'abstraction tellement élevé qu'ils se sentent comme des langages différents. En conséquence, les compétences n'étaient pas transférables et les développeurs difficiles à trouver. Les applications et les composants écrits avec des frameworks différents ne sont pas interopérables. Cette fragmentation soulignait le besoin de normalisation.
- That is when the standard organization woke up: the last five years have seen an unprecedented level of innovation and standardization, mostly driven by the W3C/WHATWG and the ECMAScript Technical Committee (TC39) of which Salesforce is a member. The list of standards developed during the last five years includes: ECMAScript 2015 (6), 2016 (7), 2017 (8), 2018 (9) and beyond (adding classes, modules, promises, decorators, etc.) Web components Custom elements Templates and slots Shadow DOM ------------------------------------------------------------------------------- C'est à ce moment-là que l'organisation standard a pris forme: les cinq dernières années ont été marquées par un niveau sans précédent d'innovation et de normalisation, principalement impulsé par le W3C et le comité technique ECMAScript, dont Salesforce est membre. La liste des normes élaborées au cours des cinq dernières années comprend: ECMAScript 2015 (v6), 2016 (v7), 2017 (v8), 2018 (v9) et au delà (avec l’ajout des classes, modules, promises, decorators, etc.) Web components Custom elements Shadow DOM Templates and slots
- As a result, the web stack looks very different today than it did five years ago, with its weight now heavily tilting towards standards. The core stack finally got the update it needed to become an application development platform in its own right. Many features that required frameworks now come standard: you no longer need a proprietary component model, proprietary language extensions, proprietary modules, etc. The standardization of the core stack is incredibly exciting and opens the door to a new breed of frameworks: frameworks whose major task is no longer to fill in the gaps in the core stack, but to provide a thin layer of specialized services on top of a standard stack that is now suitable for large scale app development. ------------------------------------------------------------------------------------------------------------------------ En conséquence, la pile Web semble très différente aujourd'hui de ce qu'elle était il y a cinq ans, son poids étant désormais fortement orienté vers les normes. La pile de base a finalement obtenu la mise à jour nécessaire pour devenir une plate-forme de développement d'applications à part entière. De nombreuses fonctionnalités nécessitant des infrastructures sont désormais standard: vous n'avez plus besoin d'un modèle de composant propriétaire, d'extensions de langage propriétaires, de modules propriétaires, etc. La standardisation du noyau est incroyablement excitante et ouvre la voie à une nouvelle génération de frameworks: des frameworks dont la tâche principale n’est plus de combler les lacunes de du noyau, mais de fournir une fine couche de services spécialisés qui convient maintenant au développement d'applications à grande échelle.
- Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond. Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including: The Base Lightning Components, a set of over 150 UI components all built as custom elements. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization. The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains. ----------------------------------------------------------------------------------------- Lightning Web Components est l’implémentation par Salesforce de cette nouvelle génération de frameworks légers et basés sur les standards Web. Il exploite des éléments personnalisés, des modèles, des DOM fantômes, des décorateurs, des modules et d'autres nouvelles constructions de langage disponibles dans ECMAScript 7 (et les versions ultérieures). Lightning Web Components fournit une couche de services Salesforce spécialisés sur la pile principale, notamment: Les composants de base Lightning, un ensemble de plus de 150 composants d'interface utilisateur, tous construits en tant qu'éléments personnalisés. Lightning Data Service, qui fournit un accès déclaratif aux données et métadonnées Salesforce, à la mise en cache des données et à la synchronisation des données. L'API d'interface utilisateur, le service sous-jacent qui permet aux métadonnées du service de données Lightning et des composants Lightning de base, génère des gains de productivité importants.
- The benefits are substantial: Common component model Common programming model Transferable skills and easier-to-find / easier-to-ramp-up developers Interoperable components Better performance because core features are implemented natively in web engines instead of in JavaScript in framework abstractions -------------------------------------------------------------------------------------------------------------------- Les avantages sont substantiels: Modèle de composant commun Modèle de programmation commun Compétences transférables et développeurs faciles à trouver Composants interopérables Meilleures performances car les fonctionnalités principales sont implémentées de manière native dans les moteurs Web plutôt qu'en JavaScript dans les abstractions de la structure
- With the addition of Lightning Web Components, there are now two ways to build Lightning components: Aura Components, leveraging its own component model, templates, and modular development programming model. Lightning Web Components, built on top of the web standards breakthroughs of the last five years: web components, custom elements, Shadow DOM, etc. Aura components and Lightning web components can coexist and interoperate, and they share the same high level services: Aura components and Lightning web components can coexist on the same page Aura components can include Lightning web components Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components. Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.). If you are already developing Lightning components with Aura, you can continue to do so. Your Aura components will continue to work as before. You can build new components with Aura or Lightning Web Components. Your Aura and Lightning Web Components can coexist and interoperate. Over time, you can consider migrating your Aura Components to Lightning Web Components, starting with the components that would benefit the most from the performance benefits of Lightning Web Components. If you are new to developing on Lightning, or if you are starting a new project, we recommend using Lightning Web Components. ----------------------------------------------------------------------------------------------------------------- Avec l'ajout des Lightning Web Component, il existe désormais deux méthodes pour créer des composants Lightning: Aura Components, en exploitant son propre modèle de composant, ses propres modèles et son propre modèle de programmation de développement modulaire. Lightning Web Components, construit sur les avancées technologiques des cinq dernières années dans le domaine des normes Web: composants Web, éléments personnalisés, DOM Shadow, etc. Les composants Aura et les composants Web Lightning peuvent coexister et interopérer, et partagent les mêmes services de haut niveau: Les composants Aura et les composants Web Lightning peuvent coexister sur la même page. Les composants Aura peuvent inclure des composants Web Lightning Les composants Aura et les composants Web Lightning partagent les mêmes composants de base Lightning. Les composants de base Lightning étaient déjà implémentés en tant que composants Web Lightning. Les composants Aura et les composants Web Lightning partagent les mêmes services sous-jacents (service de données Lightning, API d'interface utilisateur, etc.). Si vous développez déjà des composants Lightning avec Aura, vous pouvez continuer à le faire. Vos composants Aura continueront à fonctionner comme auparavant. Vous pouvez créer de nouveaux composants avec Aura ou Lightning Web Components. Vos composants Web Aura et Lightning peuvent coexister et interopérer. Au fil du temps, vous pouvez envisager de migrer vos composants Aura vers Lightning Web Components, en commençant par les composants qui bénéficieraient le plus des avantages de Lightning Web Components en termes de performances. Si vous débutez dans le développement sur Lightning ou si vous démarrez un nouveau projet, nous vous recommandons d’utiliser Lightning Web Component.
- Exciting time to be a Salesforce developer! Build with a state-of-the-art framework build on web standards breakthrough Deliver High-Performance Apps... … that coexist and interoperate with Aura ---------------------------------------------------- Un moment passionnant pour devenir un développeur Salesforce! Construire avec un cadre ultramoderne basé sur la percée des normes Web Fournir des applications hautes performances ... … Qui coexistent et interagissent avec Aura
- Mettez la main sur des applications entièrement développées avec Lightning Web Component, déjà disponibles dans la galerie d’exemples. Téléchargez le code source directement depuis Github et intégrez des applications dans votre plate-forme avec Salesforce DX.
- Use either the Live Demo Script or the Video Guide to complete this portion Utilisez soit le script de démonstration en direct, soit le guide vidéo pour compléter cette partie.
- Où devez-vous placer votre balise de modèle dans un ensemble de composants Web Lightning? Le fichier HTML Comment le décorateur @track affecte-t-il une propriété JavaScript? Il rend la propriété réactive. Ainsi, lorsque la valeur d’une propriété change, elle sera restituée dans le code HTML. Quel outil utilisez-vous pour créer un ensemble de composants Web Lightning? Le CLI Salesforce Que signifie l'annotation Apex (cacheable = true)? Il permet à la plate-forme de créer et de gérer un cache côté client pour toutes les données renvoyées par Apex.
- This Trailmix is dedicated to all things Lightning Web Components. It’s full of useful resources and hands-on projects to take you deep into the new component programming model, the new tools available to build and deploy, and ways to connect with Salesforce Developers around the world! --------------------------------------------------- Ce Trailmix est dédié à tout ce qui concerne les composants Web Lightning. Il regorge de ressources utiles et de projets pratiques pour vous familiariser avec le nouveau modèle de programmation de composants les nouveaux outils disponibles pour la construction le déploiement les moyens de vous connecter aux développeurs Salesforce du monde entier!