 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about migration from Aura component to lightning web component. So we will be discussing about migrating markup, CSS and JavaScript. So in each slide, I will be comparing Aura with LWC. So how features we use to implement an Aura component and how those features we need to implement in lightning web component. So I'm assuming prior to this video, you have gone through Aura component videos. So you know much about Aura and I'm assuming that you know less about LWC so that you can compare what you implemented in Aura and now how that feature will be implemented in lightning web component. So first, if we discuss about markup. So if you want to create markup file, so in Aura, it is saved with .CMP, right? So .CMP file is known as markup file where we can write all the HTML related code and that file starts with Aura colon component. So above tech can contain HTML and Aura specific tags. So this markup file will be containing all the tags and whenever we render or load our component on the browser. So whatever is written in this file that will be rendered on the UI. Now if we talk about LWC, so it contains markup in .HTML file that I demonstrated you in the previous video. Then file starts with template and the tag contain HTML and directives for dynamic content, right? So in Aura, we use Aura colon component tag to start the file but in LWC, we will be using this template. Now if we compare attributes, so in lightning Aura component for variable creation we used attributes. Now in lightning web component, you have to use them in form of properties. So if you want to create a variable in lightning Aura component, so what we need to write Aura colon attribute and that too in the markup file. But in LWC, properties are created in JavaScript file. So in LWC to create properties you can use Adderit API or Adderit track, so these are known as decorators. So about Adderit API and Adderit track I will be discussing in the upcoming video so that you understand what is the difference and what is the use of these decorators. So here is the example like how we declare variables in Aura, those are known as attributes. So you need to write Aura colon attribute then you need to define the name of the attribute and then type. And these statements we used to write in the markup file. Right, so again I'm assuming like you already gone through Aura topics you know about them so that you know like in Aura how we used to implement these features and now how we will be using these features in lightning web component. So we talk about lightning web component so in lightning web component whenever you need to create a variable. So firstly it will be known as property and that property will be declared in lightning web components JavaScript file. So here you can see this is JavaScript file and how you can recognize it is JavaScript file because it is using import statement and then we have a class which is extending lightning element functionality. And here two properties are declared one is message and one is employer. So message is annotated with ad-rate API decorator and employee is written directly. So both are correct and what is the use of ad-rate API and what if we don't use any decorator. So these things you will get to know in upcoming videos. So right now you can just understand like if you want to create any variable in lightning web component. So those variables you need to create in JavaScript file. Now after understanding the variable declaration in Aura it is called attribute in lightning web component it is called property. So how to use those variables in Aura and like lightning web component. So basically if you use those attributes or properties so they will be used with the help of expression. So in Aura expressions are written like this you need to write curly base then exclamation then v dot total. So total is the attribute right then in LWC if you have created a property named as total items in JavaScript file. So you just need to enclose that property name in curly basis. You don't need to write exclamation and v dot right. So this is the basic difference like how you will be writing expressions in Aura and expressions in lightning web component. So Aura expressions so here you can see in Aura component like if you want to create attribute so attribute name is page pages and type is in teaser. Then again attribute name is total type is in teaser then we have a handler which is calling this function c dot doing it. So again if you have already gone through Aura so you will be able to understand like this is Aura handler which is handling function that is defined as doing it in the JavaScript controller. So if I go to next slide so here you can see doing it function is defined and here we are setting the values into total and pages variables. So total will be having 20 and pages will be having 100 right. If I go back so here you can see the expressions exclamation v dot total and this is enclosed in curly basis and then we got pages enclosed in curly basis. So this way in Aura component we use to create attributes and we use to use expressions. And this is how a JavaScript controller is written like how we can fetch the values. Now, if you want to do the same thing in lightning web component so how you can do. So here this is HTML file which is having only template here you can see we don't have any attributes declared right because I already told you if you want to create any variable in lightning web component. So those will be treated as properties and those will be declared in JavaScript file. So here total and total pages are two properties which are enclosed in curly basis directly without any exclamation and v dot. So this unit to remember if you're migrating from aura to LWC so these are the changes that you need to remember. So that is why I'm preparing this video so that you can just relate and you can remember like how things we used to implement in aura and how things we need to implement in lightning web component. So here you can see in this JavaScript file we have two properties space size and total then in aura sorry in lightning web component we can define getter properties. So this is a spatial property which can have a curly base and then we can apply some code here inside curly basis. So whatever be the result of this calculation it will be returned to the HTML file. So name of this property is total pages and it is written with get so it will be treated as getter. So if you use this total pages directly so whatever calculation will be done there it will be rendered on the UI with the help of this total pages property. And what is the difference between this normal property and getter property so this in detail with practical implementation I will be demonstrating in upcoming videos. So next is aura conditional and HTML conditional so HTML conditionals means LWC HTML conditionals. So in aura if you want to apply any condition so you need to write aura colon if but in LWC you need to write if colon true or if colon false. So how we can do that let's focus on this so in aura if you want to apply condition so you need to write aura colon if then is true equals to and then attribute. If it is true then true part will be executed and through aura set equals to we can set the false part as well. So this way we write syntax for conditionals in aura. Now if you want to implement in lightning web component so you just need to use template then if colon true equals to and then the property. If it is true then the true part will be evaluated and if you want to implement the false part so again you need to write if colon false. So this is the basic difference between the conditionals how it is implemented in aura and how it is implemented in LWC. Then our iteration versus HTML iteration so in aura we used to write aura colon iteration whereas in LWC we need to write for colon each. So this way we need to write iteration in aura so aura colon iteration then item so this is a collection. This will be a list and one by one each element of list will be available with this variable and this variable we can process like this. So I am not going to explain the detail functionality I am just giving you high level difference between particular features so that you can relate and detailed specification we will see in individual videos. So in HTML iteration how we need to write so you need to write template then for colon each and then you need to pass a list and through that list one by one data will be available into this variable. So you need to write for colon item right and then inside this block you can write particular code. Now aura init versus lifecycle hooks so in aura we generally use aura colon handler and name equals to init so whenever component loads loads and you want to perform some operation on load of the component automatically. So for that purpose we can just handle init event right and we can define the JavaScript function in the JavaScript file in case of aura in case of LWC we have connected callback which is a lifecycle hook. So I will be creating a separate video to explain all lifecycle hooks because we have different different lifecycle hooks so I will be explaining the whole lifecycle. Right now you can just remember like in aura we use init event handler whereas in LWC we will be doing the init functionality with the help of connected callback method and it is part of lifecycle hooks. So this is the way we write aura init like how to handle that so aura handler then name is init value equals to this and action equals to C dot on init. So on init will be a function that will be defined in the JavaScript and this is LWC connected callback function. So in JavaScript you need to define this block whatever you write in this block so that will be executed automatically on the load of the component. Then how to write aura base component so you need to write lightning colon formatted number this way you will be implementing if you need to write this in LWC. So this also I explained earlier like we discussed about camel case and kebab case. So if I go back so here you can see it is written in camel case first word is small formatted and number n is capital whereas in lightning web component you need to implement it with the help of kebab case. So lightning hyphen formatted hyphen number so this way you need to write and if you begin it so you need to close it as well. But in aura if you don't close you just place slash in the open opening markup so that will also work. So these are the differences so I hope now you understood the difference between camel case and kebab case notation. So now you need to remember this kebab case notation like every time whenever you will be using any base component so you need to write it like this so you need to open it as well as you need to close it. Then this is the way we used to write CSS in aura so we need to write dot this then dot and then the markup name or tag name where we want to apply the CSS. And in LWC you just need to write dot and then the name of the tag where you want to apply the CSS. You don't need to write this dot CS dot this in case of lightning web component it doesn't make any sense in LWC. Then our JavaScript so in JavaScript this way we used to write function like previous space is a function. Then next page is a function and here we are writing some statements so here we are finding the events like so this way JavaScript file is implemented in aura. So in JavaScript file you just need to define the functions so you can define functions by comma separated. And you can define any number of functions in any sequence. Whereas if we see the LWC JavaScript file so we can import the pre built functionalities like here we are importing LWC module and lightning element and API are the functionalities. Then we are extending lightning element functionality with this class. We are using export so that the function which are defined in this class we can use those function into another JavaScript file. Then we have created a property outside of the function so that we can use this property in multiple functions and previous handler. This is a function then this is a data like is for space so it is similar to a variable or property but this property can have some statements basis on that. Those statements some calculation will be performed and the returned result you can render on the HTML. So this way you need to implement your JavaScript file so this JavaScript file can contain properties, getters, setters other than functions. Whereas in aura we just need to define functions properties we need to define in component markup file and those properties are known as attributes in case of aura. So this is the difference between both JavaScript files. And lastly like if you want to use third party JavaScript library so in aura we need to use LTNG pool and require and then you need to write script. So let's say you want to use static resource so how you can write it and then if you want to use it in LWC so you just need to import it like this. So this is all about like how you can migrate from aura to LWC. So some brief and common and important features I discussed in this video so I hope this will help you to relate like how features used to implement in aura and how we can implement them in lightning web component. And if you want to see those features implementation in detail so just follow all the videos so that you can understand them in detail. Thank you.