REQUIRE.js
Using AMD to fight the good, the bad, and the ugly of JavaScript.
David Shariff
Technical Director, Richi.
May 18th, 2013 @ JSDC.tw
About Me
Previously @
Now @
The Problem
We don't build webpages anymore
Manual DEPENDENCIES
WE KNOW THAT JAVASCRIPT TAGS BLOCK PAGE RENDERING
Not every javascript file is needed when the page first loads
Mutli-page applications start copying & pasting script tags.
AS THE SITE GROWS, SO DOES COMPLEXITY.
NO ENCAPSULATION OR EXPORT OF VALUE.
NAMESPACE POLLUTION
Poor man's solution
破舊立新 !
Lets get rid of the old way, and do the new way
AMD
Asynchronous Module Definition
The good stuff :=)
The good stuff :=)
-
Modules are encapsulated and sandboxed.
- Create and reuse code from different products.
- No cross domain loading issues, can load modules without a build process or server-side tool.
- Structured, clean codebase.
-
Async loading, managed dependencies.
- Lazy load modules (stuff not used by the user yet can be loaded in background when needed on demand).
- Not a technology, but a specification proposal.
But why modules ?
I love Frameworks, don't i ?!
ughhhhhhh....
Why frameworks suck ?
inversion of control
You don't tell the framework what to do, it tells you.
Encourages plug and play.
Huge, complicated structure that is not relevant to your application.
Steep learning curve, like learning a new language.
so Why do modules rock ?
Single purpose responsibility.
Sandboxed.
Reusable, maintainable, scaleable, distributable.
Abstract interface with well defined import & export.
AMD Implementation
require.js
Created by James Burke.
Implements the AMD specification.
Optimised for the browser, but can be used by Node, Rhino.
Can handle cross domain asset fetching
Current release is 2.1.6, already well adopted.
Who uses it?
2 important concepts
define() vs require()
define()
Creates a module that can be used by other modules.
How define() works
Lazy evaluation of code contained inside module, only executed when it's needed.
Once executed, subsequent calls are cached, no need to fetch the module again.
One module per file.
require()
When you only need to use modules, not create them.
conditional requires
Dependencies that can not be evaluated until runtime or only loaded when a specific event occurs.
Module inheritance
loader plugins
Load different resources that are not JavaScript files
domReady
i18n
text
Many others....
Configuring requirejs
baseUrl
Root path for module lookups.
waitSeconds
Number of seconds before timing out.
urlArgs
Add args when fetching resources, useful for Cache busting.
config
Pass application wide values to modules.
Paths
- Looks up modules that are not located under baseUrl.
- Path / CDN fallback:
Map
When calling a specific module,
substitute it with a different module.
Useful for large projects that have multiple module versions.
Shim
Supports non AMD compliant, old JavaScript files.
SHIM describes code relationships, but doesn't load files.
packages
useful for MANAGING large applications
Follows the CommonJS directory structure, every package includes a main.js module.
multiversion support
Multiple instances of a module using different contexts.
OPTIMISATION with r.js
Modular codebase for development.
Minification and concatenation during build process.
Reduces multiple http requests for better performance.
Reactive error handling
Perform different operations when a module fails.
richi is hiring
Web Developer
Sr. Web Developer
Software Engineer
Sr. Software Engineer
Principal Software Engineer
thanks
RequireJS @ JSDC.tw 2013
By David Shariff