Lightning FrameWork

The Lightning Component framework is a UI framework for developing single page

applications for mobile and desktop devices

1) Aura Component Model

2) Lightning Web Component

Aura Vs LWC                                                    Shadow DOM

Too much Code to Write                                         Web Component

Rendering wasn't optional                                     Custom elements         

modern features was not available                             template  and slots

like modules, classes and promises

ES5 (2009)                                      ES62015 ES72016 ES82017 ES92018

Aura build on

this javascript

version

What is Lightning Web Component

Lightning Web Component is a new programming model for building Lightning components. 

It uses the core concepts of web Standards

Benefits

1. Lightweight framework

2. Better Performance

3. No need to learn different framework to developing application in salesforce

4. Interoperbility with lightning aura components

5. Better testing using jest

6. Better Security 

Component Naming Convention

 The folder and its files must follow these naming rules.

 

 . Must begin with a lowercase letter

 . Contain only alphanumaric or underscore characters

 . Must be unique in the namespace

 . Can't include whitespace

 . Can't end with an underscore

 . Can't contain two consective underscores

 . Can't contain a hyphen (dash)

 

 html

  helloWorld

 <template>

 </template>

 

 

 .xml

 

 <?xml version="1.0" encoding="UTF-8">

 <LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata">

 <apiVersion>49.0</apiVersion>

 <isExposed>false</isExposed>

 </LightningComponentBundle>

 

 Component Folder Structure

 

 Component

  helloWorld.html

  helloWorld.js

  helloWorld.js-meta.xml

  helloWorld.css

  helloWorld.svg

  moreSharedCode.js

  _test__/helloWorld.test.js

  

  

  

  Default files

  

  Files that should have same name as component and can have one file of same type in the

  component folder

  

  Any number of JS file you can add

  

  test file with same name as component with .test.js extension

  

  Naming Convention for LWC

  

  1. CamelCase : Each word in the middle of the respective phrase begins with a capital letter

  2. PascalCase : It is Same like Camel Case where first letter always in Capitalized 

  3. kebab-case : Respective phrase will be transferred to all lowercase with hyphen(-) separating 

     words

 

CaseName           camelCase          PascalCase               kebab-case

Exmple              helloWorld         HelloWorld              hello-world

usage               component Name     Component class Name    Component reference and Html attribute Name

 

Data Binding in a Template

Data binding in the Lightning web components is the Synchronization between the controller and 

the template(HTML)

                 My Full Name is {fullname}    Template(HTML)

 

fullname one way flow

from controller to Html 

js            fullname = "Salesforce"

Things to remember

1) In template we can access properly value directly if it's primitive  or object

2) Dot notation is used to access the property from an object 

3) LWC doesn't allow computed expressions like Name[2] 

    4) The property in {} must be valid javascript identifier or member expression.

     Like {name} or {user.name}

    5)  Avoid adding spaces around the property for example, {data}