This document discusses modules in JavaScript. It defines what modules are, their benefits like abstraction, encapsulation, reusability and managing dependencies. It describes how earlier versions of JavaScript did not support modules natively and workarounds used like IIFE and Revealing Module Pattern. It also explains key aspects of modules like module format, module loader and build tools. Finally, it provides details on popular module formats like AMD, CommonJS, module loaders like SystemJS, RequireJS, configuration options of SystemJS like baseURL, bundles, map etc.
What is Java Technology (An introduction with comparision of .net coding)Shaharyar khan
A introductory slides for those who want to learn and know some basics of Java.Also for those persons who want to compare coding difference between Java and .net
What is Java Technology (An introduction with comparision of .net coding)Shaharyar khan
A introductory slides for those who want to learn and know some basics of Java.Also for those persons who want to compare coding difference between Java and .net
Mahika Tutorials sharing PPT slide for core java programming language. Go threw this slide and visit our YouTube page too
https://www.youtube.com/c/mahikatutorials
Mahika Tutorials sharing PPT slide for core java programming language. Go threw this slide and visit our YouTube page too
https://www.youtube.com/c/mahikatutorials
Writing NodeJS applications is an easy task for JavaScript developers. However, getting what is happening under the hood in NodeJS may be intimidating, but understanding it is vital for web developers.
Indeed, when you try to learn NodeJS, most tutorials are about the NodeJS ecosystem like Express, Socket.IO, PassportJS. It is really rare to see some tutorials about the NodeJS runtime itself.
By this meetup, I want to spot the light on some advanced NodeJS topics so as to help developers answering questions an experienced NodeJS developer is expected to answer. Understanding these topics is essential to make you a much more desirable developer. I want to explore several topics including the famous event-loop along with NodeJS Module Patterns and how dependencies actually work in NodeJS.
I hope that this meetup would help you to be more comfortable understanding advanced code written in NodeJS.
This presentation gives introduction to kernel module programming with sample kernel module.
It helps to start with kernel programming and how it can be used to develop various types of device drivers.
Eclipse plug-in development seminar held by the Bulgarian Java User group covering basic aspects of Eclipse plug-in development and the new stuff in e4
Java 9 ships in July, are you ready for Java 9 modules? Java 9 modules (aka Project Jigsaw) is the biggest fundamental change to the Java runtime. Code that use Oracle/Sun private APIs will break. This session will cover the basics of Java 9 modules and also the current state of tooling. The ramifications to existing and legacy applications will be covered along with the steps you’ll need to take to harness the power of modules and write more maintainable systems.
An introduction to Java 9 Module System.
Presented at Software Craftsmansip Turkey Community (https://www.meetup.com/Software-Craftsmanship-Turkey/) (08.Nov.2017)
Webpack has quickly become one of the most popular choices among web developer builder tools. It can build, minify, split and do others awesome things to your assets.
We will do a simple walk through to let you familiar with the basics of webpack and all its potential.
Java Core | Java 8 and OSGi Modularisation | Tim Ellison & Neil BartlettJAX London
The talk will cover a bit of background first to set things up: what is a module, why do we need a module system, summary of Java's existing support for modularity. Then it will move on to give a comparison of OSGi's and Jigsaw's dependency models. Pros and cons of each model in different environments will be discussed. Finally, opportunities and challenges for interoperability: from the perspective of both application developers (who may need to integrate modules from both kinds) and from library module developers (who may need to target both module systems)
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
Hand Rolled Applicative User ValidationCode KataPhilip Schwarz
Could you use a simple piece of Scala validation code (granted, a very simplistic one too!) that you can rewrite, now and again, to refresh your basic understanding of Applicative operators <*>, <*, *>?
The goal is not to write perfect code showcasing validation, but rather, to provide a small, rough-and ready exercise to reinforce your muscle-memory.
Despite its grandiose-sounding title, this deck consists of just three slides showing the Scala 3 code to be rewritten whenever the details of the operators begin to fade away.
The code is my rough and ready translation of a Haskell user-validation program found in a book called Finding Success (and Failure) in Haskell - Fall in love with applicative functors.
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
What is Augmented Reality Image Trackingpavan998932
Augmented Reality (AR) Image Tracking is a technology that enables AR applications to recognize and track images in the real world, overlaying digital content onto them. This enhances the user's interaction with their environment by providing additional information and interactive elements directly tied to physical images.
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Łukasz Chruściel
No one wants their application to drag like a car stuck in the slow lane! Yet it’s all too common to encounter bumpy, pothole-filled solutions that slow the speed of any application. Symfony apps are not an exception.
In this talk, I will take you for a spin around the performance racetrack. We’ll explore common pitfalls - those hidden potholes on your application that can cause unexpected slowdowns. Learn how to spot these performance bumps early, and more importantly, how to navigate around them to keep your application running at top speed.
We will focus in particular on tuning your engine at the application level, making the right adjustments to ensure that your system responds like a well-oiled, high-performance race car.
Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics.
To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
Software Engineering, Software Consulting, Tech Lead, Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Transaction, Spring MVC, OpenShift Cloud Platform, Kafka, REST, SOAP, LLD & HLD.
GraphSummit Paris - The art of the possible with Graph TechnologyNeo4j
Sudhir Hasbe, Chief Product Officer, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Artificia Intellicence and XPath Extension FunctionsOctavian Nadolu
The purpose of this presentation is to provide an overview of how you can use AI from XSLT, XQuery, Schematron, or XML Refactoring operations, the potential benefits of using AI, and some of the challenges we face.
2. Production
Incidents
What is a module
Definition from Wikipedia
– single-purpose
– self-contained
– interchangeable
– promote reuse, maintainability, etc.
Separating the functionality of a program into independent, interchangeable modules.
With modular programming, concerns are separated such that modules perform logically discrete
functions, interacting through well-defined interfaces.
3. Production
Incidents
• abstract code: When we call a function, we don’t need to understand the complexity of
actual implementation.
• Encapsulation: to hide code inside the module so that code is hidden and can be swapped or
upgraded.
• Reusability: to avoid writing the same code over and over again
• Dependency management: to easily change dependencies without rewriting our code
• Define their own Scope: Not-Polluting the Global Scope (in JavaScript)
Why do we need Modules
4. Production
Incidents
• JavaScript doesn’t come with an out-of-the-box way to modularize code, except for,
distributing code over different files.
• If we wanted to call a function in some other file, we need to explicitly load that file via script
tags before you call the function.
• If you tried to use code that you forgot to add via a script tag, then JavaScript would
complain.
• Developers should make sure that the dependencies are satisfied at the point of execution of
any block of code.
ECMAScript 5 and earlier versions of JavaScript don’t have modules.
Over time, developers came up with different patterns to simulate modular design in JavaScript.
ES6 finally introduced a standard way of defining modules.
Modules in JavaScript
5. Production
Incidents
Scripts Modules
Default mode Non-strict Strict
Top level variables are Global Local to module
Value of this at top level Window Undefined
Executed Synchronously Asynchronously
Declarative imports
(import statement)
No Yes
File extension .js .js
Scripts vs Modules
6. Production
Incidents
Two simple and widely popular workaround of Modules with JavaScript are:
– IIFE
– Revealing Module Pattern
• Both of them doesn’t satisfy all the goals of the modular programming. They cover few of them.
• They don’t require any additional software/process for loading & executing JavaScript code
• No way to programmatically import modules
• Dependencies need to be handled manually.
• Asynchronous loading of modules is not possible.
• Circular dependencies can be troublesome.
Modules in JavaScript
7. Production
Incidents
Immediately Invoked Function Expressions allow us to:
• encapsulate code complexity inside IIFE so we don't have to understand what the IIFE code does
• define variables inside the IIFE so they don't pollute the global scope
• they don't provide a mechanism for dependency management.
(function(){
console.log('test');
})();
Modules - IIFE
8. Production
Incidents
In Revealing Module pattern, modules are defined as functions that encapsulate private members
and methods, and which expose public methods.
var myModule = function(){
var message = "Hello, Welcome ";
function printMessage(myName){
console.log(message+myName);
}
return {
wishUser:printMessage
}
};
var myUser = new myModule();
myUser.wishUser();
Modules – Revealing Module Pattern
10. Production
Incidents
A module format is the syntax used to define a module.
Module Format defines the
• Identifier - name or location of the module
• Include the dependencies
• Export the API of this module
This metadata is usually defined in a configuration file.
Modules – Module Format
11. Production
Incidents
Since Module has its own format/structure, it requires software that can read and understand
the format and accordingly performs necessary actions.
A module loader at runtime:
– load the module loader(itself)
– load the root module, which is usually entry point.
– resolve dependencies and inject the dependent modules
– can asynchronously downloads the required modules in the right order and binds them
together.
– register the module
– Performs bootstrap process, that initialize all variables, their specific special methods,
and injects dependencies.
– The bootstrap also establishes a formal entry point for the module, and should be in
charge of initializing the module and kicking off the entire process.
– loader hooks are called at various points in the process of loading a module
Modules – Module Loader
12. Production
Incidents
Some of the most widely adapted and well known formats are:
– Asynchronous Module Definition (AMD)
– CommonJS
– Universal Module Definition (UMD)
– System.register
– ES6 module format
Module formats
13. Production
Incidents
// myModule
define(myModule, [], function (lib) {
// behavior for our module
function foo() {
console.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return { foobar: foo }
});
Somewhere else the module can be used with:
define(["myModule"], function(myModule) {
myModule.foobar();
});
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the module or object*/
);
Name of the module
List of dependencies(provided in an array)
Sample Code
Asynchronous Module Definition (AMD Format)
14. Production
Incidents
function foo() {
console.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
module.exports.foobar = foo;
Somewhere else the module can be used with:
Var myModule = (‘./myModule.js’);
myModule.foobar();
var <requiremod> = require (‘<module>’);
definition function /*function for instantiating the module or object*/
module.exports.<functionName> = functionName;
Method name exposed to be used by others
Include dependent module
Sample Code
CommonJS format
15. Production
Incidents
Some of the most widely adapted and well known loaders are:
– SystemJS
– RequireJS
– StealJS
Module Loaders
Module
Format
SystemJS RequireJS StealJS
AMD Yes Yes Yes
CommonJS Yes No Yes
ES6 Yes No Yes
Global Yes No Yes
16. Production
Incidents
SystemJS is a universal module loader. It can load modules synchronously or asynchronously.
SystemJS also caches the loaded modules so if at any point in that process one of the modules has been loaded
previously then SystemJS will use the cached version instead of performing additional load and instantiation
steps.
SystemJS uses static analysis to examine the code for dependencies. It first determines the module format
used, then the modules included, and loads the modules accordingly.
Module Format Supported:
– esm: ECMAScript Module
– cjs: CommonJS
– AMD: Asynchronous Module Definition
– global: Global shim module format
– register: SystemJS’s internal module format
Module Loader - SystemJS
17. Production
Incidents
SystemJS – Configuration parameters
baseURL
• The baseURL provides a mechanism for knowing where to load plain modules names from, regardless of which parent
module they are being loaded from.
For example:
SystemJS.config({
baseURL: '/modules'
});
System.import('x');
will load x from /modules/x.
bundles
• Bundles allow a collection of modules to be downloaded together as a package whenever any module from that
collection is requested. Useful for splitting an application into sub-modules for production.
SystemJS.config({
bundles: { bundleA: ['dependencyA', 'dependencyB']
}
});
In the above any require to dependencyA or dependencyB will first trigger a SystemJS.import('bundleA') before
proceeding with the load of dependencyA or dependencyB.
depCache
• When a module specified in depCache is loaded, asynchronous loading of its pre-cached dependency list begins in
parallel.
Module Loader - SystemJS
18. Production
Incidents
SystemJS – Configuration parameters
map
• allows you to map a module alias to a location or package:
map: {
'local/package': {
x: 'vendor/x.js'
},
'another/package': {
x: 'vendor/y.js'
}
}
Means that import "x" within the file local/package/index.js will load from vendor/x.js, while the same
import in another/package/file.js will load vendor/y.js
map: {
"@angular/": "../../vendor/angular2/2.4.9-tsc/node_modules/@angular/",
"rxjs/": "../../vendor/angular2/2.4.9-tsc/node_modules/rxjs/"
}
Module Loader - SystemJS
19. Production
Incidents
SystemJS – Configuration parameters
meta
• Module meta provides an API for SystemJS to understand how to load modules correctly.
• Meta is how we set the module format of a module, or know how to shim dependencies of a global script.
Module Loader - SystemJS
meta: {
// meaning [baseURL]/vendor/angular.js when no other rules are present
// path is normalized using map and paths configuration
'vendor/angular.js': {
format: 'global', // load this module as a global
exports: 'angular', // the global property to take as the module value
deps: [ // dependencies to load before this module
'jquery' ]
}
}
Options for meta:
authorization
crossOrigin
deps
esModule
exports
format
globals
integrity
loader
nonce
sourceMap
scriptLoad
20. Production
Incidents
SystemJS – Configuration parameters
packages
• Packages provide a convenience for setting meta and map configuration that is specific to a common path.
defaultExtension
format
main
map
meta
Module Loader - SystemJS
packages: {
// meaning [baseURL]/local/package when no other rules are present
// path is normalized using map and paths configuration
'local/package': {
main: 'index.js',
format: 'cjs',
defaultExtension: 'js',
map: {
// use local jquery for all jquery requires in this package
'jquery': './vendor/local-jquery.js',
/* import '/local/package/custom-import' should route to
‘/local/package/local/import/file.js' */
'./custom-import': './local/import/file.js'
},
meta: {
// sets meta for modules within the package
'vendor/*': { 'format': 'global' }
}
}
}
21. Production
Incidents
SystemJS – Configuration parameters
packageConfigPaths
• Instead of providing package configuration information in the packages argument for System.config(), this option
allows specifying where a config file can be loaded to get the configuration for a package.
SystemJS.config({
packageConfigPaths: [
'packages/*.json',
'packages/abc/*/package.json',
'packages/abc/def/*/config.json'
]
});
paths
• Paths allow creating mappings that apply after map configuration.
• paths is similar to map, but acts as the final step in the normalization process.
• A token is first processed by map. If, after this step, it is preluded by path information, it's getting normalized (i.e.
transformed into an absolute URL, considering baseURL).
• Finally, if the token is not an absolute URL yet, it is getting matched against paths.
• It is usually advisable to use map configuration over paths unless you need strict control +over normalized
module names.
SystemJS.config({
paths: {
'app/': 'https://code.mycdn.com/app-1.2.3/'
}
});
Module Loader - SystemJS
22. Production
Incidents
SystemJS – Configuration parameters
pluginFirst
• Plugins may be loaded via plugin syntax some/file.txt!text
• Setting the pluginFirst property to true makes SystemJS follow the AMD-style plugin rules.
transpiler
• Sets the module name of the transpiler plugin to be used for loading ES6 modules.
• Represents a module name for SystemJS.import that must resolve to a valid plugin that supports transpilation of
ES modules.
warnings
• Enables the output of warnings to the console, including deprecation messages.
wasm
• When enabled, and in a browser that supports WebAssembly, all module loads will first be checked
for Web Assembly binary headers and executed as WebAssembly in browsers if so.
Module Loader - SystemJS
23. Production
Incidents
SystemJS – API
SystemJS.config
• SystemJS configuration helper function.
SystemJS.constructor
• This represents the System base class, which can be extended or reinstantiated to create a custom System instance.
SystemJS.getConfig
• Returns a clone of the internal SystemJS configuration in use.
SystemJS.import
• Loads a module by name taking an optional normalized parent name argument.
• Promise resolves to the ES module namespace value.
SystemJS.import(moduleName [, normalizedParentName]) -> Promise(Module)
SystemJS.isModule
• Given any object, returns true if the object is either a SystemJS module or native JavaScript module object, and false
otherwise.
Module Loader - SystemJS
24. Production
Incidents
SystemJS – API
SystemJS.newModule
• Given a plain JavaScript object, return an equivalent Module object.
• Useful when writing a custom instantiate hook or using SystemJS.registry.set.
SystemJS.register
• Declaration function for defining modules of the System.register polyfill module format.
SystemJS.registerDynamic
• Companion module format to System.register for non-ES6 modules.
• Provides a <script>-injection-compatible module format that any CommonJS or Global module can be converted
into for CSP compatibility.
SystemJS.resolve
• Companion module format to System.register for non-ES6 modules.
SystemJS.resolveSync
• Synchronous alternative to SystemJS.resolve.
Module Loader - SystemJS
25. Production
Incidents
SystemJS – API
SystemJS.registry
• SystemJS registry object supporting:
– SystemJS.registry.set(resolvedKey, namespace): Set a module namespace into the registry.
– SystemJS.registry.get(resolvedKey): Get a module namespace (if any) from the registry.
– SystemJS.registry.has(resolvedKey): Boolean indicating whether the given key is present in the registry.
– SystemJS.registry.delete(resolvedKey): Removes the given module from the registry (if any), returning true or
false.
– SystemJS.registry.keys: Function returning the keys iterator for the registry.
– SystemJS.registry.values: Function returning the values iterator for the registry.
– SystemJS.registry.entries: Function returning the entries iterator for the registry (keys and values).
– SystemJS.registry[Symbol.iterator]: In supported environments, provides registry entries iteration.
Module Loader - SystemJS
26. Production
Incidents
Most commonly used aspects of using SystemJS loader:
– Load the SystemJS Loader
– Set the configuration for the loader
– Import the startup module
Simple Example:
<script src="system.js">
</script>
<script>
SystemJS.config({
meta: {
format: "cjs" //use commonjs module format
}
});
SystemJS.import('game.js');
</script>
Module Loader - SystemJS
27. Production
Incidents
SystemJS.config({
packages: {
// meaning [baseURL]/local/package when no other rules are present
// path is normalized using map and paths configuration
'local/package': {
main: 'index.js',
format: 'cjs',
defaultExtension: 'js',
map: {
// use local jquery for all jquery requires in this package
'jquery': './vendor/local-jquery.js',
/* import '/local/package/custom-import‘ should route to
/local/package/local/import/file.js' */
'./custom-import': './local/import/file.js'
},
meta: {
// sets meta for modules within the package
'vendor/*': {
'format': 'global'
}
}
}
}
});
Module Loader - SystemJS
Configuration
Parameters
Example
28. Production
Incidents
• RequireJS loads plain JavaScript files as well as more defined modules.
• It implements the Asynchronous Module API.
• Each dependent module will start loading through asynchronous requests in the given order.
• Even though the file order is considered, it cannot guarantee that the first file is loaded before the second
file due to the asynchronous nature.
Module Loader - RequireJS
29. Production
Incidents
RequireJS – Configuration parameters
baseURL
• the root path to use for all module lookups.
paths
• path mappings for module names not found directly under baseUrl.
• The path settings are assumed to be relative to baseUrl, unless the paths setting starts with a "/" or has a URL
protocol in it ("like http:").
bundles
• allows configuring multiple module IDs to be found in another script.
• This only sets up where to find a module inside a script that has multiple define()'d modules in it.
• It does not automatically bind modules to the bundle's module ID. The bundle's module ID is just used for
locating the set of modules.
shim
• Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts
that do not use define() to declare the dependencies and set a module value.
Module Loader - RequireJS
30. Production
Incidents
RequireJS – Configuration parameters
packages
• configures loading modules from CommonJS packages.
nodeIdCompat
• This option only applies to treating the ".js" suffix differently.
waitSeconds
• The number of seconds to wait before giving up on loading a script.
context
• This allows require.js to load multiple versions of modules in a page, as long as each top-level require call
specifies a unique context string.
deps
• An array of dependencies to load.
callback
• An array of dependencies to load.
Module Loader - RequireJS
31. Production
Incidents
RequireJS – Configuration parameters
enforceDefine
• If set to true, an error will be thrown if a script loads that does not call define() or have a shim exports string
value that can be checked.
xhtml
• If set to true, document.createElementNS() will be used to create script elements.
urlArgs
• Extra query string arguments appended to URLs that RequireJS uses to fetch resources.
scriptType
• Specify the value for the type="" attribute used for script tags inserted into the document by RequireJS. Default
is "text/javascript“
skipDataMain
• If set to true, skips the data-main attribute scanning done to start module loading.
Module Loader - RequireJS
32. Production
Incidents
RequireJS – API
RequireJS includes three main API functions:
• define – the function is used to define a module. Each module is defined with a unique module ID
which will be used by RequireJS runtime functionality.
• require – the function is used to load required dependencies.
• config – the function is used to configure the requirejs runtime functionality.
Module Loader - RequireJS
33. Production
Incidents
Example:
Module Loader - RequireJS
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: "/this/path",
paths: {
“another": “another/v1.0"
},
waitSeconds: 15
});
require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule, myModule) {
//This function will be called when all the dependencies
//listed above are loaded. Note that this function could
//be called before the page is loaded.
}
);
</script>
34. Production
Incidents
The data-main attribute in our single script tag tells Require.js to load the script located at “scripts/main.js". It
automatically appends the ".js"
Module Loader - RequireJS
Project.html file contents
<script data-main="scripts/main" src="scripts/require.js"></script>
main.js file contents
//Pass a config object to require
require.config({
"packages": ["cart", "store"]
});
require(["cart", "store", "store/util"],
function (cart, store, util) {
//use the modules as usual.
});
35. Production
Incidents
• A module bundler replaces a module loader. It generates a bundle of all code at build time
• you run the module bundler to generate a bundle file at build time (e.g. bundle.js). You load
the bundle in the browser
• If you open the network tab in your browser's developer console, you will see that only 1 file
is loaded. No module loader is needed in the browser. All code is included in the bundle.
Examples of popular module bundlers are:
• Browserify: bundler for CommonJS modules
• Webpack: bundler for AMD, CommonJS, ES6 modules
Module Bundlers