CodeWinds - Leading edge web developer news and training | javascript / React.js / Node.js / HTML5 / web development - Jeff Barczewski
CodeWinds - Leading edge web developer news and training | javascript / React.js / Node.js / HTML5 / web development - Jeff Barczewski
Jeff Barczewski
008 Guy Bedford - jspm & SystemJS - Unity and simplicity in loading CommonJS, AMD, and ES6 JS packages
22 minutes Posted Jul 2, 2014 at 1:00 pm.
es6-module-loader
CommonJS, AMD, ES6 modules. Browserify
SystemJS - loads ES6 modules, AMD, CommonJS and global scripts. Designed in spec itself, IE8+, suitable for production, runs in browser and Node.js, promises API
SystemJS workflow - dynamic loading and build capability
Using SystemJS with build tools
SystemJS community
Auto file type detection (CJS, AMD, UMD, …) or can specify
Optional configuration. Made to be as easy as possible to get going
jspm - JavaScript Package Manager - CDN for SystemJS, require by name.
Core ideas - making requiring really simple and making package management really simple
Design of loader and manager
Ready for review and full workflow. An invitation to the community
GitHub locations for projects, examples
How to follow up, closing remarks
0:00
22:12
Download MP3
Show notes
JavaScript module loading has traditionally been difficult due to diverse module formats and difficult configuration. With so many competing standards it is hard to get everything to work well together.
Guy has come forward with a solution which simplifies loading and management of JS packages. This is a full workflow solution including both dynamic loading and capability to build bundles for production.
Episode InfoEpisode NotesSimple example of SystemJS in browserLinksVideosOther podcasts
Episode Info
Episode: CW 008
Published: July 2nd, 2014
Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf
Duration:
Episode Notes
03:00 - es6-module-loader
05:10 - SystemJS - loads ES6 modules, AMD, CommonJS and global scripts. Designed in spec itself, IE8+, suitable for production, runs in browser and Node.js, promises API
14:30 - jspm - JavaScript Package Manager - CDN for SystemJS, require by name.
Simple example of SystemJS in browser
<script src="system.js"></script>
<script>
System.import('app/app')
.catch(function(e) {
// we add this since promises suppress all errors
setTimeout(function() {
throw e;
});
});
</script>
Links
es6-module-loader - ES6 module loader polyfill
SystemJS - Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.
SystemJS-Build-Tool - Build tool for SystemJS which can bundle for production
jspm - Package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader. Load any module format (ES6, AMD, CommonJS and globals) directly from endpoints such as npm and github with flat versioned dependency management. For production, use the jspm CLI tool to download packages locally, lock down versions and build into a bundle. In development, load modules directly from CDN for frictionless experimentation, switching into production on the same code with a single configuration change. Supports SPDY with server push.
jspm-es6-demo - jspm ES6 module loading workflow demo - write ES6 modules, load external from CDN, install locally using CDN versions, bundle into single file for production
jspm Google Group - Discussion forum for JSPM
Guy Bedford’s Twitter
Guy Bedford’s GitHub repositories
Jeff Barczewski, Founder, CodeWinds twitter
CodeWinds twitter
Videos
Fluent Conf 2014 - Guy Bedford on ES6 modules, jspm, SystemJS
Mountain West JS 2014 - Guy Bedford on the genesis of jspm, SystemJS
JSConf 2014 videos - Videos from the JSConf 2014 sessions (videos are in progress of being posted)
Other podcasts
JSJabber 115