Learn Javascript framework (SystemJs framework)

Welcome everyone In this video will discuss about a nice open source JavaScript framework called as SystemJS If we go to this repository github.com/systemjs/ It says SystemJS is an universal dynamic module loader In JavaScript when we create a project we divide all project into small small components We are creating a customer management system will create different components like we will create a component for Customer A separate Customer.js where we will have Customer component If we need addresses then it will be in a separate file must be addresses.js Add addresses.js In this project we have two components. One is Customer.js which has a customer code and one is Addressjs which has address code To use these files in the project We load Addressjs first then Customerjs We load the components on the top of the UI Wherever we wanted we start using the components In projects we create small small modules and use those modules in the UI Think about situation where we have lots of modules like customer, addresses, phone, sales etc We are using those modules on the UI We want to load these modules on demand Whenever we need it we will load Customerjs, whenever we need the address object will load the address module If we don’t want to load all of these js in one go In this situation will do an alert “Customer not needed” till here Till here customer is not needed and only after this line of code we need the customer In reality, if we run the project At this moment we are using google chrome to run the project, using visual studio Do a F12 and watch Network Put a debug point and go to System.html put a debug point on the alert If we load this project In network it has already loaded the Customerjs and already loaded the Addressjs In Sources we are on this line of code at this moment We need the customer object here Before this itself the objects are loaded We want to load on demand, Start loading at this moment and don’t start loading the files in the first place With this we will have very less memory footprint and it will increase performance of the JavaScript application Which is a right place to put JavaScript files Put JavaScript files on the head, somebody says put it on the last of the html etc It is not about where the JavaScript files are placed it is about when they are loaded We we can placed the JavaScript files wherever we wish but we should only load them on demand That’s what exactly the SystemJS does This big punch line of system.js it says I am a dynamic module loader In this case we are at this line of code It has loaded already the AddressJS and already loaded the CustomerJS for no reason We will load dynamically System.js says wherever we want to load dynamically just say SystemJS.import In whichever place we want to load the file just say System.import We need the Customerjs here System.import The customer.js at this moment After that will say We will create the object of customer He will only load Customer.js and also When we parse this line of code and not at this line of code If we run this Do a reload We have put a debug point and waiting If we go to Network tab We don’t need this files at the top SystemJS will load the objects We need to drag up the SystemJS We should not be putting Address and CustomerJS at the top because System.JS is responsible to load those objects dynamically Again reload it Do F12 Till this point we said, we don’t need the Customer If we go to Network, it has made no call to CustomerJS Go to sources, at the left hand side the Customer.JS has still not been loaded in memory From the network tab it is clear the CustomeJS at this moment has still not been loaded in memory If we say load it now go to the network tab, it has made a call to CustomerJS Once the CustomerJS is loaded, we can always create the object of Customer We are able to create the object of customer and we can use it As the name says System.JS is a module loader It loads the module on demand With this we will have very less memory footprint If we have a large module system where we have lots of modules we can load on demand We have seen the basic syntax We need to put at the top System.JS Whenever it sees the import statement it will load the JS at that moment and not at the first place itself In this session we were talking about JavaScript open source framework called as SystemJS Thank You


Add a Comment

Your email address will not be published. Required fields are marked *