Sharing javascript code between lightning web component

In this blog we are going to see how can we share javascript code to other javascript file of same component bundle or different component bundle.

When we create lightning web component, it get created with component bundle which contains below file:

                               


We can't write our entire logic in myComponent.js file. Code reusability is main factor while developing any application. So there can be two possibilities to maintain our reusable javascript code and share that code with other javascript file :

1. We can create one more  Js file(ES6 module)  in same component bundle. Use standard export statement to export any function or variable. myComponent.js file can use standard import statement to use exported function or variable. See below reuse.js and myComponent.js file.

reuse.js file:

Create Addition function in reuse.js file and use export keyword to export Addition function.



  

myComponent.js:

use import statement in myComponent.js to import Addition function from reuse.js file.

2. The other way to maintain reusable code is to Create another component bundle called util and import util bundle to myComponent.js file.

     
util.js file:

In util.js file we have created subtraction and multiplication method and exported using export keyword.





Lets see how you can import this component module to  myComponent.js file .

myComponent.js:

while importing a util component module to myComponent.js we have to mention the "namespace/moduleName" . In our case it will be "c/util" where "c" is default namespace to salesforce and "util" is name of our component bundle.

Introduction to Lightning Web Component

Lightning Web Component(LWC) is a new programming model built on modern web standards to build lightning component.
It came up with  :

Enhanced Productivity : It uses modern language of web like ECMA7, custom element, module,template which makes it more productive than Aura.

Built for Performance: Most of the code executed by browser instead of javascript which makes LWC faster than Aura. Most of the feature are part of Web and not build using javascript.

Compatible and easy to use:  LWC can coexist and interoperable with aura component. They can exist on same page and can talk to each other. both can happily live on single page.


Lots of people are asking why salesforce has to come up with LWC when salesforce already has Aura framework. I think to understand that we have to go back to Year 2014 and has to understand what has happened to web standard.

In 2014 :

As you see Web standard is not that much inovative to provide feature like custom template, rendering optimization , language. Framework has to build those feature using Javascript to fill gaps which are not provided by web standards which makes framework language proprietary  and not standard.

Disadvantages :

• Components are not interoperable : Around that time so many framework came like Angular,react including Aura. All this framework are written with there own language to fill the gap of platform. So component written in react can't be bring to Aura or vice versa.

• Skills are not transferable :  If you are working in react that means you are react language developer as you learned react code and features and same with Aura. So if react developer wants to move to Aura he has to learn Aura structure, which makes hard to find resources.

• Framework abstraction are slow : As most of the abstraction are written in Javascript and not over the web it takes time to load. As browser has to parse ,compile and render the javascript.

Now lets see what happened from 2014 to 2019  to web standards: 

                                                     

As you can see since 2019 most of the feature are part of web standard and not framework specific.All proprietary  thing which framework has to do is now part of web standard.Only the specialized service of salesforce are the part of framework like Lightning locker service,Lightning data service and lightning bse component.

Benefits:

• More standards, less proprietary : Most of the things are part of web standard and not build as part of framework using javascript similar to other framework like react, angular.
• Transferable skills : In LWC we are going to learn standards which are used by other framework so developer can easily switch between different framework.
• Better performance