What are Lightning Web Components











up vote
4
down vote

favorite












Salesforce has just announced a new feature, Lightning Web Components. What is this? What does it have to do with Lightning Components?










share|improve this question




























    up vote
    4
    down vote

    favorite












    Salesforce has just announced a new feature, Lightning Web Components. What is this? What does it have to do with Lightning Components?










    share|improve this question


























      up vote
      4
      down vote

      favorite









      up vote
      4
      down vote

      favorite











      Salesforce has just announced a new feature, Lightning Web Components. What is this? What does it have to do with Lightning Components?










      share|improve this question















      Salesforce has just announced a new feature, Lightning Web Components. What is this? What does it have to do with Lightning Components?







      lightning-components lightning-web-components lwc






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 43 mins ago

























      asked 1 hour ago









      pchittum

      14.1k33474




      14.1k33474






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          4
          down vote













          Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.




          • Align with modern web standards

          • Interoperability with the original Aura-based Lightning component development model

          • Performance


          Standards



          LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).



          Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.



          LWC bundle in VS Code



          Here's an example of the code from a Lightning web component:



          HTML Template:



          <template>

          <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

          <div class="slds-m-around_medium">

          <lightning-record-edit-form
          object-api-name="objectApiName"
          record-id="recordId">
          <lightning-messages></lightning-messages>
          <lightning-input-field field-name="Name"></lightning-input-field>
          <lightning-input-field field-name="Title"></lightning-input-field>
          <lightning-input-field field-name="Phone"></lightning-input-field>
          <lightning-input-field field-name="Email"></lightning-input-field>
          <div class="slds-m-top_medium">
          <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
          </div>
          </lightning-record-edit-form>

          </div>

          </lightning-card>

          </template>


          JS Module:



          import { LightningElement, api } from 'lwc';

          export default class RecordEditFormDynamicContact extends LightningElement {
          @api recordId;
          @api objectApiName;
          }


          While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.



          Interoperability



          In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.



          Performance



          Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.



          Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.



          Learn More



          For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.






          share|improve this answer























            Your Answer








            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "459"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f242469%2fwhat-are-lightning-web-components%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            4
            down vote













            Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.




            • Align with modern web standards

            • Interoperability with the original Aura-based Lightning component development model

            • Performance


            Standards



            LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).



            Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.



            LWC bundle in VS Code



            Here's an example of the code from a Lightning web component:



            HTML Template:



            <template>

            <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

            <div class="slds-m-around_medium">

            <lightning-record-edit-form
            object-api-name="objectApiName"
            record-id="recordId">
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="Title"></lightning-input-field>
            <lightning-input-field field-name="Phone"></lightning-input-field>
            <lightning-input-field field-name="Email"></lightning-input-field>
            <div class="slds-m-top_medium">
            <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
            </div>
            </lightning-record-edit-form>

            </div>

            </lightning-card>

            </template>


            JS Module:



            import { LightningElement, api } from 'lwc';

            export default class RecordEditFormDynamicContact extends LightningElement {
            @api recordId;
            @api objectApiName;
            }


            While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.



            Interoperability



            In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.



            Performance



            Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.



            Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.



            Learn More



            For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.






            share|improve this answer



























              up vote
              4
              down vote













              Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.




              • Align with modern web standards

              • Interoperability with the original Aura-based Lightning component development model

              • Performance


              Standards



              LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).



              Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.



              LWC bundle in VS Code



              Here's an example of the code from a Lightning web component:



              HTML Template:



              <template>

              <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

              <div class="slds-m-around_medium">

              <lightning-record-edit-form
              object-api-name="objectApiName"
              record-id="recordId">
              <lightning-messages></lightning-messages>
              <lightning-input-field field-name="Name"></lightning-input-field>
              <lightning-input-field field-name="Title"></lightning-input-field>
              <lightning-input-field field-name="Phone"></lightning-input-field>
              <lightning-input-field field-name="Email"></lightning-input-field>
              <div class="slds-m-top_medium">
              <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
              </div>
              </lightning-record-edit-form>

              </div>

              </lightning-card>

              </template>


              JS Module:



              import { LightningElement, api } from 'lwc';

              export default class RecordEditFormDynamicContact extends LightningElement {
              @api recordId;
              @api objectApiName;
              }


              While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.



              Interoperability



              In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.



              Performance



              Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.



              Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.



              Learn More



              For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.






              share|improve this answer

























                up vote
                4
                down vote










                up vote
                4
                down vote









                Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.




                • Align with modern web standards

                • Interoperability with the original Aura-based Lightning component development model

                • Performance


                Standards



                LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).



                Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.



                LWC bundle in VS Code



                Here's an example of the code from a Lightning web component:



                HTML Template:



                <template>

                <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

                <div class="slds-m-around_medium">

                <lightning-record-edit-form
                object-api-name="objectApiName"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
                </lightning-record-edit-form>

                </div>

                </lightning-card>

                </template>


                JS Module:



                import { LightningElement, api } from 'lwc';

                export default class RecordEditFormDynamicContact extends LightningElement {
                @api recordId;
                @api objectApiName;
                }


                While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.



                Interoperability



                In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.



                Performance



                Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.



                Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.



                Learn More



                For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.






                share|improve this answer














                Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.




                • Align with modern web standards

                • Interoperability with the original Aura-based Lightning component development model

                • Performance


                Standards



                LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).



                Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.



                LWC bundle in VS Code



                Here's an example of the code from a Lightning web component:



                HTML Template:



                <template>

                <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

                <div class="slds-m-around_medium">

                <lightning-record-edit-form
                object-api-name="objectApiName"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
                </lightning-record-edit-form>

                </div>

                </lightning-card>

                </template>


                JS Module:



                import { LightningElement, api } from 'lwc';

                export default class RecordEditFormDynamicContact extends LightningElement {
                @api recordId;
                @api objectApiName;
                }


                While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.



                Interoperability



                In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.



                Performance



                Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.



                Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.



                Learn More



                For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited 24 mins ago


























                community wiki





                3 revs
                pchittum































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Salesforce Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f242469%2fwhat-are-lightning-web-components%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    What visual should I use to simply compare current year value vs last year in Power BI desktop

                    How to ignore python UserWarning in pytest?

                    Alexandru Averescu