System webpack-jspm
•
5 likes•9,213 views
This document discusses JavaScript module systems including CommonJS, RequireJS, Browserify, ES6 modules, Webpack, and JSPM. It begins with a history of JavaScript modules and loading external scripts. It then covers CommonJS for Node.js, RequireJS for asynchronous loading in browsers, and Browserify for using CommonJS modules in browsers. ES6 modules are described as the standard module solution. Webpack is presented as a module bundler with many features. Finally, JSPM is discussed as a package manager that works with SystemJS to provide modules from npm and GitHub for both browsers and Node.js.
Report
Share
System webpack-jspm
- 1. SYSTEM, WEBPACK, & JSPM JESSE WARDEN | RVA.JS | NOV 3 2015
- 2. TEXT WHAT? ▸ DevOps & Lean Engineering ▸ Brief on Angular/React/Backbone & Node Workflow ▸ Deep Dive in JavaScript Modules
- 4. WINDOW GLOBAL ▸ In the beginning… there was window
- 5. NO SCALE GLOBAL BAD ▸ global variables: they fast… ▸ … but no clue who’s setting them, access control ▸ global state ▸ no control
- 6. <SCRIPT SRC> EXTERNAL FILES ▸ load via block ▸ parse ▸ "run"
- 8. YOU SHOULDN’T WRITE ‘EM SCRIPT PROBLEMS ▸ order issue ▸ flat dependency != tree
- 9. NODE COMMONJS ▸ Encapsulation / Global Safe (unless you r t3h l@m3 and use global) ▸ Module system ▸ Version Safe (via local node_modules) ▸ synchronous ▸ dependent loading ▸ Node (server or build system)
- 10. NODE COMMONJS
- 11. BROWSER REQUIRE.JS ▸ asynchronous ▸ different than <script defer> ▸ back when "pages" vs. "views" or "components" nomenclature ▸ CDN hosted libs ▸ "load on the fly" ▸ minor dependency injection ▸ build via r.js
- 13. BUILD GRUNT / GULP ▸ Angular (ok) ▸ Manual Dependency Ordering (insane, no scale)
- 14. REQUIRE IN THE BROWSER BROWSERIFY ▸ "work everywhere" ▸ Node rocks with CommonJS, let’s use it ▸ "universal JavaScript" ▸ i.e. lodash ▸ build system, not runtime ▸ supports bundles (atomify, cssify, tsify) ▸ https://github.com/substack/browserify-handbook
- 15. REQUIRE IN THE BROWSER BROWSERIFY
- 16. REQUIRE IN THE BROWSER BROWSERIFY
- 17. REQUIRE IN THE BROWSER BROWSERIFY ▸ static analysis (uses detective) ▸ creates Abstract Syntax Tree (AST)
- 18. REQUIRE IN THE BROWSER BROWSERIFY ▸ injectable ▸ hot replace ▸ via beefy, wzrd, browserify-middleware, etc.
- 19. REQUIRE IN THE BROWSER BROWSERIFY
- 20. REQUIRE IN THE BROWSER BROWSERIFY ▸ built in classes for Node in the browser ▸ transforms (CoffeeScript, TypeScript, CSS, images, etc) ▸ customizable browser fallback
- 21. NEW JS ES6 ▸ ECMAScript 2015 ▸ No one calls it that except for standards people ▸ OOP: Yay, classes! ▸ Functional: Yay, new features! ▸ DevOps: Yay, static dependency tree! ▸ http://exploringjs.com/es6/ch_modules.html
- 22. EXAMPLE ES6
- 23. EXAMPLE ES6
- 24. EXAMPLE ES6
- 25. EXAMPLE ES6 Scripts Modules HTML <script> <script type="module"> Top-Level variables are global local to module Value of this at top level window undefined Executed sync async import statement no yes Promise-based API yes yes File extension .js .js
- 26. OTHER BENEFITS ES6 ▸ better cyclic dependencies ▸ module renaming on consumer ▸ import { name1 as localName1, name2 } from ‘src/my_lib'; ▸ static initializer ▸ import 'src/my_lib';
- 27. LOADER OF EVERYTHING WEBPACK ▸ better Require.js ▸ more features / API’s than Browserify ▸ built in vs. plugins/3rd party ▸ does that matter…? ▸ … only for ES6 ▸ … AND RUNTIME ▸ https://webpack.github.io/
- 30. LOADER OF EVERYTHING WEBPACK ▸ bundle it
- 31. LOADER OF EVERYTHING WEBPACK ▸ npm install webpack-dev-server -g ▸ webpack-dev-server —progress —colors ▸ Code Splitting: http://webpack.github.io/docs/code-splitting.html
- 32. LEVEL 1: BOILERPLATE ES6-MODULE-LOADER ▸ programmatically work with modules ▸ configure module loading ▸ Loader: NOT part of the standard ▸ System: NOT part of the standard ▸ … both are expected to be ▸ https://github.com/ModuleLoader/es6-module-loader
- 33. SPECIFICS ES6-MODULE-LOADER ▸ Provides System.import ▸ Runtime, not build time ▸ Assumes Traceur, Babel, or TypeScript ▸ ES6 circular refs ▸ paths ▸ [show basic]
- 36. LEVEL 2: FOR USAGE SYSTEMJS ▸ Built on ES6-Module-Loader ▸ loads any module format (CommonJS, AMD, ES5, ES6, None) ▸ Supports RequireJS-style maps, paths, shims, etc. ▸ Loader plugin works with CSS, JSON, and Images ▸ Browser + Node ▸ Gallons of plugins like Browserify & Webpack have
- 37. LEVEL 2: FOR USAGE SYSTEMJS ▸ Zebra Striping ▸ Modules ▸ Standalone
- 40. LEVEL 3: ALL YOU NEED JSPM ▸ package manager for SystemJS ▸ called ES6 module loader (but you know better) ▸ loads from npm and Github ▸ dev == load, prod == standalone (or load) ▸ CLI for installing; use jspm instead of npm ▸ global registry ▸ http://jspm.io/
- 41. LEVEL 3: ALL YOU NEED JSPM ▸ npm should work out of the box ▸ NodeJS libs for Browser are same as Browserify ▸ GitHub version is semvar ▸ package.json by default, or overridden by you ▸ flattens dependencies
- 42. LEVEL 3: ALL YOU NEED JSPM ▸ improves package.js with new tags
- 43. LEVEL 3: ALL YOU NEED JSPM ▸ standalone (production)
- 44. DONE. CONCLUSIONS ▸ JSPM should be all you need ▸ Will probably be standard ▸ Runtime + Build time ▸ All 3 libraries built-on top of each other ▸ supports 3 languages and all module formats
- 45. THANKS! JESSE WARDEN ▸ @jesterxl ▸ jesse@jessewarden.com ▸ https://www.youtube.com/user/jesterxl ▸ http://jessewarden.com/blog/