008 Guy Bedford - jspm & SystemJS - Unity and simplicity in loading CommonJS, AMD, and ES6 JS packages
07/02/14 • 22 min
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 Info
- Episode: CW 008
- Published: July 2nd, 2014
- Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf
- Duration: 22:12
Episode Notes
- 03:00 - es6-module-loader
- 04:25 - CommonJS, AMD, ES6 modules. Browserify
- 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
- 08:00 - SystemJS workflow - dynamic loading and build capability
- 10:00 - Using SystemJS with build tools
- 10:30 - SystemJS community
- 11:30 - Auto file type detection (CJS, AMD, UMD, ...) or can specify
- 12:45 - Optional configuration. Made to be as easy as possible to get going
- 14:30 - jspm - JavaScript Package Manager - CDN for SystemJS, require by name.
- 15:30 - Core ideas - making requiring really simple and making package management really simple
- 16:00 - Design of loader and manager
- 17:28 - Ready for review and full workflow. An invitation to the community
- 18:26 - GitHub locations for projects, examples
- 20:34 - How to follow up, closing remarks
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, js...
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 Info
- Episode: CW 008
- Published: July 2nd, 2014
- Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf
- Duration: 22:12
Episode Notes
- 03:00 - es6-module-loader
- 04:25 - CommonJS, AMD, ES6 modules. Browserify
- 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
- 08:00 - SystemJS workflow - dynamic loading and build capability
- 10:00 - Using SystemJS with build tools
- 10:30 - SystemJS community
- 11:30 - Auto file type detection (CJS, AMD, UMD, ...) or can specify
- 12:45 - Optional configuration. Made to be as easy as possible to get going
- 14:30 - jspm - JavaScript Package Manager - CDN for SystemJS, require by name.
- 15:30 - Core ideas - making requiring really simple and making package management really simple
- 16:00 - Design of loader and manager
- 17:28 - Ready for review and full workflow. An invitation to the community
- 18:26 - GitHub locations for projects, examples
- 20:34 - How to follow up, closing remarks
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, js...
Previous Episode
007 Forrest Norvell on ES6 and our community's role at JSConf 2014
Episode Info
- Episode: CW 007
- Published: June 24th, 2014
- Tags: nodejs, js,es6,jsconf
- Duration: 38:33
Episode Notes
- 01:36 - Forrest explains his new position at npm Inc.
- 02:20 - Discussion of Forrest’s JSConf 2014 talk
- 03:30 - Rise of community standards, Douglas Crockford’s the Good Parts, John Resig jQuery, Promises A+ standard
- 05:50 - Standards committees, an inside look
- 08:00 - ES4, ES5, Harmony, ES7 (champion for each feature)
- 10:00 - test262 - conformance test suite
- 11:58 - Our community has the power to figure out what features in ES6 are useful. Sort out the parts that are genuinely useful. Figure out the good parts now.
- 14:48 - Module proposal benefited from critical discussions from the community
- 16:00 - Tools for using ES6 features now
- 17:26 - Development community needs to get on top of things and teach how we use the features with emphasis on the compelling parts.
- 18:50 - Forrest no longer recommends Crockford’s Good Parts to new developers because half is scar tissue and dogma, instead Dave Herman’s Effective JavaScript which gives them a mental toolkit to determine their own style
- 20:55 - Don’t concentrate on what’s cool, but concentrate on what’s stable and effective. As an educator be conservative.
- 21:29 - Warnings from Java, Perl history
- 24:00 - Typescript and Coffeescript bring things to the table but they could fragment the community
- 24:40 - ES timeline
- 26:30 - Features need enough examination to ensure they are finished
- 28:00 - Keeping some things in user land to see what community comes up with. Developers as leaders in this transition.
- 29:00 - npm growth, npm Inc dev ops, addressing pain points in npm CLI
- 34:30 - All software languages have something that is terrible. Community is something that makes Node.js special.
- 35:45 - Node.js in the enterprise is happening very rapidly. A very interesting time to be in the middle of this evolution.
Links
- Forrest Norvell, npm product maker at npm Inc. twitter
- npm Inc. - npm, Inc. supports the JavaScript community by providing the registry where developers publish and share packaged open-source modules.
- traceur - Traceur is a JavaScript.next-to-JavaScript-of-today compiler. Compile ES6 code into JS which can be used by today’s browsers.
- es6-shim - Provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6 (Harmony).
- es6-module-transpiler - ES6 Module Transpiler is a JavaScript library for converting JavaScript files written using the ES6 draft specification module syntax to existing library-based module systems such as AMD, CommonJS, or simply globals.
- sweet.js - Macros for javascript which can be used to add in ES6 features.
- es6ify - browserify v2 transform to compile JavaScript.next (ES6) to JavaScript.current (ES5) on the fly.
- ES6 compatibility table - ES6 compatibility table, comparing browser versions, Node.js. Links to ES6 feature descriptions.
- Spider Monkey - Firefox JS engine written in C++. Currently Spider Monkey is leading in the number of ES6 features that are implemented. (56/66 according to Kangax)
- Effective JavaScript - David Herman’s book
- Jeff Barczewski, Founder, CodeWinds twitter
- CodeWinds twitter
Videos
Next Episode
009 Spike Brehm - Sharing javascript in browser and server - building isomorphic apps
Spike explains the different categories of Isomorphic apps and how this is accomplished. He mentions various tools for facilitating sharing across browser, server, and devices. He shares how Airbnb, Yahoo, Flickr, Facebook, Instagram are using some of these technologies today. Finally, he provides resources to help others learn and get started.
Episode Info
- Episode: CW 009
- Published: July 16th, 2014
- Tags: nodejs, js,jsconf
- Duration: 13:48
Episode Notes
- 01:50 - Isomorphic definition
- 03:15 - Tools for sharing code across browser and server
- 04:00 - Browserify for using Node.js packages in browser
- 05:20 - Categories of Isomorphic code
- 06:20 - Superagent - HTTP client
- 07:08 - Airbnb’s Rendr - render Backbone apps on client and server
- 07:30 - Compelling reasons for building isomorphic apps
- 08:00 - Flickr main page isomorphic, modown project
- 08:39 - Meteor framework
- 09:25 - Getting started with Isomorphic JavaScript
- 10:10 - ReactJS - client and server rendering, can attach event handlers to server rendered page
- 10:40 - Facebook and Instagram using ReactJS for Isomorphic apps
- 11:30 - Following Spike Brehm and Isomorphic JavaScript
Links
- Spike Brehm’s Isomorphic Resources
- Airbnb blog - Isomorphic JavaScript: The Future of Web Apps
- Isomorphic Tutorial
- Isomorphic JavaScript website
- Nodejitsu - Scaling Isomorphic Javascript Code
- Browserify - packaging NPM modules for the browser
- Superagent - HTTP client for browser and Node.js
- Airbnb’s Rendr - Rendering Backbone apps on the client and server
- Yahoo’s Modown project
- Meteor framework
- ReactJS framework for building user interfaces
- Spike Brehm Twitter
- Jeff Barczewski, Founder, CodeWinds twitter
- CodeWinds twitter
Video / Slides
Watch Spike Brehm’s JSConf talk on YouTube
Slides from Spike Brehm JSConf 2014: Building Isomorphic Apps - Slideshare
If you like this episode you’ll love
Episode Comments
Generate a badge
Get a badge for your website that links back to this episode
Select type & size
<a href="https://goodpods.com/podcasts/codewinds-leading-edge-web-developer-news-and-training-javascript-reac-23131/008-guy-bedford-jspm-and-systemjs-unity-and-simplicity-in-loading-comm-818813"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to 008 guy bedford - jspm & systemjs - unity and simplicity in loading commonjs, amd, and es6 js packages on goodpods" style="width: 225px" /> </a>
Copy