JavaScript not only powers the web but now servers, desktop applications, and all the tooling that brings them to life. In this session, we'll look at the future of tools for Ext JS. Building off the power of NPM, this future is open and extensible for JavaScript developers. Tools are the backbone of every application, so come to this session to stay ahead of the curve!

1. The Modern Toolchain
Ross Gerbasi
Senior Software Engineer, Sencha

2. Where we’ve been

3. “Javascript was a browser language”
7 years ago

4. Where we are now

5. Desktop Phones Tablets
Robotics PlatformSmartTV
Javascript Now

6. Where we heading

7. Where are we heading

8. The Future of Build Tools

9. “NodeJS is a Javascript runtime built
on Chrome’s V8 JavaScript engine”

10. Package Managers: NPM vs Yarn
• Package Version Management
- NPM uses an optional shrinkwrap for package version guarantee
- Yarn uses mandatory Yarn.lock file generated during every installation
• Parallel vs Sequential Installation
- NPM installs sequentially
- Yarn install in Parallel
• Bottom Line
- Yarn is faster & more secure but also new and untested
- NPM is slower but has years of usage and testing

11. Package Managers: NPM vs Yarn
NPM Yarn

13. module.exports = {
entry: './app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
resolve: {
alias: {
'somePackage': '/path/to/my/code’
}
},
module: {
loaders: [{
test: /.js$/,
loader: 'babel',
query: {
plugins: [
'babel-plugin-transform-es2015-modules-commonjs'
]
}
}]
}
};
Webpack 2.0 Configuration
• Entry point and output initialization
• Alias resolution allows code to be
located in locations what work for
developers
• Module Loaders allow for code
transformation before bundling
Entry & Build
Basic config for
entry point and
location of build files
entry: './app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},Resolver & Alias
Powerful aliasing
features allow you
to keep code where
you want.
resolve: {
alias: {
'somePackage': '/path/to/my/code’
}
},
Loaders
Transformations
applied to a file in
your application.
This can be used to
do anything from
transpile to
compress images
loaders: [{
test: /.js$/,
loader: 'babel',
query: {
plugins: [
'babel-plugin-transform-es2015-modules-commonjs'
]
}
}]

14. // Minified output
function (t, n, r) {
function e() {
return "foo"
}
n.foo = e
}
// helpers.js
export function foo() { return 'foo'; }
export function bar() { return 'bar'; }
// main.js
import {foo} from './helpers';
console.log(foo());
Webpack 2.0 Tree Shaking
• Two Stage process
- Any exports that are not imported are not
exported anymore
- Bundle is minified removing dead code
• Will not work reliably for CommonJS
modules, as they cannot be statically
analyzed for unused exports
Code Sample from: http://www.2ality.com/2015/12/webpack-tree-shaking.html
// Webpack bundled output
function(module, exports, __webpack_require__) {
/* harmony export */ exports["foo"] = foo;
/* unused harmony export bar */;
function foo() { return 'foo'; }
function bar() { return 'bar'; }
}

15. Babel: The Javascript Transpiler
• Support for ES2015 and beyond
• Plugin based allows control of what code is transpiled
• Polyfill for new functionality not supported in your target target browser
• Source maps for debugging compiled code in the browser
• Easy to try in the browser at: http://babeljs.io/repl/

16. Webpack & Babel: Code
Demo

17. Package and Repository
Organization

18. import {magic} from '../../../packages/magic-sauce/magic'
NPM Structure
app.js
webpack.config.js
package.json
packages
magic-sauce
magic.js
// Main.js
MyApplication
node_modules
package_a
app
view
main
Main.js

19. import {magic} from '../../../../magic-sauce/magic'
NPM Structure
MyApplication
app.js
webpack.config.js
package.json
node_modules
package_a
app
magic-sauce
magic.js
view
main
Main.js
// Main.js
cd magic-sauce
npm link
cd ../MyApplication
npm link magic-sauce

20. Package Organization with NPM
• Relative Paths
- Messy Code
- Annoying to refactor your folder structure
• NPM Link
- Globally installed
- Hard to share across a team of people

21. Lerna
import {magic} from 'magic-sauce'
// Main.js
app.js
webpack.config.js
package.json
packages
magic-sauce
magic.js
MyApplication
node_modules
package_a
app
view
main
Main.js
magic-sauce
index.js
linked together
require('../../packages/magic-sauce/magic.js')
import {test} from 'magic-sauce/magic/some/sub/folder/test.js'
One Extra Folder
A ‘packages’ folder is available but
you are not able to add other folders
to your ‘classpath’
Babel Github Repo

23. Mondorepo Structure {
"name": "my-mondo-repo",
"version": "0.0.1",
"mondo": {
"repo": true,
"packages": ”packages",
"uses": {
"magic-sauce": {
"repository": "sencha/magic-sauce”,
"branch”: "top-secret-dev"
},
"my-utilities": {
"repository": "my-user/my-utilities"
}
}
},
"license": "ISC",
"dependencies": {
…
}
}
app.js
webpack.config.js
package.json
mondo_repos
magic-sauce
MyApplication
node_modules
package_a
my-utilities
addinator
subtractifier
packages
import {magic} from 'magic-sauce’
import {add} from 'addinator’
import {sub} from 'subtractifier’
import {trim} from 'addinator/src/utils/trim'
Repo can also be a NPM package
Repo can be a container of packages
const Repo = require('mondorepo').Repo;
const repo = Repo.open();
…
resolve: {
alias: repo.allPackageAliases
},
const Repo = require('mondorepo/src/init’);
const add = require('addinator');
// Node Require shim allows for easy module
mondo run index.js
// Mondo CLI will inject initialization automatically!
const add = require('addinator');
{
'magic-sauce': '/path/to/mondo_repos/magic-sauce’,
'addinator': '/path/to/mondo_repos/my-utilities/packages/addinator’,
’subtractifier': '/path/to/mondo_repos/my-utilities/packages/subtractifier’
}

24. Mondorepo Demo

25. Build ToolsScanner
Indexer
Compressor
Optimizer
Upgradinator

26. Upgradinator Sneak Peek