{"id":7950,"date":"2019-01-28T12:27:41","date_gmt":"2019-01-28T11:27:41","guid":{"rendered":"https:\/\/www.cloudcoachers.com\/lightning-web-components\/"},"modified":"2020-10-06T11:05:24","modified_gmt":"2020-10-06T09:05:24","slug":"lightning-web-components","status":"publish","type":"post","link":"https:\/\/www.cloudcoachers.com\/en\/lightning-web-components\/","title":{"rendered":"Lightning Web Components"},"content":{"rendered":"\r\n<p>2018 ended with an announcement of a highly significant change for Lightning developers, i.e. &#8211;<strong> Lightning Web Components<\/strong>: <a href=\"https:\/\/developer.salesforce.com\/blogs\/2018\/12\/introducing-lightning-web-components.html\">https:\/\/developer.salesforce.com\/blogs\/2018\/12\/introducing-lightning-web-components.html<\/a><\/p>\r\n<p>Although this change is extensive, users will not actually notice it (but they may realize performance has improved). However, this change is important from the development side.<\/p>\r\n<p>With this change, <strong>Lightning Components<\/strong> is now divided into two models:<\/p>\r\n<p>\r\n\r\n<\/p>\r\n<ul class=\"wp-block-list\">\r\n<li>\r\n<p><strong>Aura Components:<\/strong> <a href=\"https:\/\/github.com\/forcedotcom\/aura\">Aura<\/a> is the open source framework used to create the interface so far, and it was available to develop customized components. It was built without resorting to the most modern web standards and had some design issues. Therefore, its performance is not as good as it could be, and the learning curve is steep.<\/p>\r\n<\/li>\r\n<li>\r\n<p><strong><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/lwc\">Lightning Web Components<\/a> (LWC)<\/strong>: is a programming model taking advantage of all functionalities supporting the most modern browsers, including <a href=\"https:\/\/www.webcomponents.org\/introduction\">Web Components<\/a>, <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/scripting.html#the-template-element\">Templates<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\">Shadow DOM<\/a>, which are basically web standards defining methods to handle and define the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\">DOM<\/a> solely with HTML and JavaScript. This greatly enhances performance and, additionally, it feels much simpler.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<p>\r\n\r\n<\/p>\r\n<h3 class=\"wp-block-heading\">What are the benefits of this change?<\/h3>\r\n<p>\r\n\r\n<\/p>\r\n<p>One of the main benefits of Lightning Web Components (LWC), aside from <strong>performance<\/strong> and <strong>ease of use<\/strong>, is that because it is more <strong>standardized<\/strong>, any <strong>Front-end developer<\/strong> arriving from another technology (React, Angular etc.) will soon be able to exploit its advantages. Moreover, they can reuse the skill set learned as a LWC programmer for general front-end development. Any programmers who did not want to learn Aura because it was too specific no longer have an excuse \ud83d\ude09<\/p>\r\n<p>Additionally, Lightning Web Components fully supports <strong><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/lwc\/lwc.get_started_supported_javascript\">ES6, and some parts of ES7 and ES8<\/a><\/strong> \u2013 the ultimate versions of JavaScript, and this is super cool!<\/p>\r\n<p>\r\n\r\n<\/p>\r\n<figure class=\"wp-block-image is-resized\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-4324\" src=\"http:\/\/www.xpazeapps.com\/wptest\/wp-content\/uploads\/2019\/01\/image-1.png\" alt=\"\" width=\"580\" height=\"595\" srcset=\"https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/image-1.png 767w, https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/image-1-584x600.png 584w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure>\r\n<p>\r\n\r\n<\/p>\r\n<p>If, for any reason, your browser does not support these JavaScript versions, Salesforce <strong>transforms<\/strong> the code into a compatible version, and you need not concern yourself about it.<\/p>\r\n<p>Meanwhile, Salesforce published a series of <a href=\"https:\/\/marketplace.visualstudio.com\/search?term=publisher%3ASalesforce&amp;target=VSCode&amp;category=Programming%20Languages&amp;sortBy=Relevance\"><strong>extensions for VSCode<\/strong><\/a>. Together with <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.sfdx_dev.meta\/sfdx_dev\/sfdx_dev_intro.htm\"><strong>SFDX<\/strong><\/a>, this involves a dramatic increase in developer <strong>productivity<\/strong> when working with LWC, as the available functions include, among others, auto-complete, syntax highlighting, and linting for JavaScript.<\/p>\r\n<p>\r\n\r\n<\/p>\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"782\" height=\"265\" class=\"wp-image-4325\" src=\"http:\/\/www.xpazeapps.com\/wptest\/wp-content\/uploads\/2019\/01\/Screenshot-2019-01-21-at-15.38.40.png\" alt=\"\" srcset=\"https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/Screenshot-2019-01-21-at-15.38.40.png 782w, https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/Screenshot-2019-01-21-at-15.38.40-600x203.png 600w, https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/Screenshot-2019-01-21-at-15.38.40-768x260.png 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/figure>\r\n<p>\r\n\r\n<\/p>\r\n<p>Almost everything <strong>that you can do with Aura can be developed in Web Components*<\/strong>, and it is easier. This means that in the long-term Aura will not evolve (although it will also not be withdrawn) and the trend is using LWC. It seems that they have finally got it right, as this is an <strong>extensively tested pilot program<\/strong> published directly as GA (Generally Available).<\/p>\r\n<p>Additionally, Salesforce migrated all its components to Lightning Web Components, and this means that <strong>Lightning Experience<\/strong> (Lightning&#8217;s UI) should improve <strong>performance<\/strong> in forthcoming releases.<\/p>\r\n<p>Have you already <strong>developed Aura components<\/strong>? No sweat. From now on, you have two options. Either you let them co-exist with the new LWCs you develop or they can cohabit on the same page and communicate with each other, or you can <a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/lwc\/lwc.migrate_introduction\">migrate<\/a> them. The documentation has a guide on how to do this, and it is a walk in the park.<\/p>\r\n<p>We will continue to monitor any news to keep you updated. Meanwhile, if you want to start testing, you can get your first badge on Trailhead (<a href=\"https:\/\/trailhead.salesforce.com\/en\/content\/learn\/projects\/quick-start-lightning-web-components\">Quick Start: Lightning Web Components<\/a>).<\/p>\r\n<p><em>* Some functionalities which are not yet available for LWC are currently being developed. Salesforce says they will be published with forthcoming releases. These are mostly containers where LWC cannot be included yet, like Visualforce\/Lightning Out, Lightning Flows, Lightning for Gmail\/Outlook, Lightning Tabs and Action overrides. There is, however, a workaround. LWC can be included in an Aura component, which is supported in all these containers.<\/em><\/p>\r\n<p>\r\n\r\n<\/p>\r\n<p>&nbsp;<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>2018 ended with an announcement of a highly significant change for Lightning developers, i.e. &#8211; Lightning Web Components: https:\/\/developer.salesforce.com\/blogs\/2018\/12\/introducing-lightning-web-components.html Although this change is extensive, users will not actually notice it [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":7956,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[133],"tags":[139,140,141,138],"class_list":["post-7950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce-en","tag-desarrollo-en","tag-development-en","tag-lightning-en","tag-salesforce-en"],"jetpack_featured_media_url":"https:\/\/www.cloudcoachers.com\/wp-content\/uploads\/2019\/01\/rayo-3_ok.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/posts\/7950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/comments?post=7950"}],"version-history":[{"count":2,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/posts\/7950\/revisions"}],"predecessor-version":[{"id":7958,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/posts\/7950\/revisions\/7958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/media\/7956"}],"wp:attachment":[{"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/media?parent=7950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/categories?post=7950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudcoachers.com\/en\/wp-json\/wp\/v2\/tags?post=7950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}