WEBPACK & CxJS

What is webpack?

https://webpack.js.org/

Main Features

• Asset Loading
• Development Server
• Code Splitting
• Bundling & Production

What is CxJS?

https://cxjs.io/

Main Features

• Widgets
• Charts
• Layout
• Themes
• Routing
• Localization

Demo Apps

• Home Expenses
• Dashboards
• Starter Kit
• Worldoscope
• Hacker News PWA
• tdo
• State of JS 2016

Getting Started

(Node.js and yarn required)

yarn create cx-app demo-app
cd demo-app
yarn start
	            

Demo App

Source Code

Webpack Configuration

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.js/, use: 'babel-loader' }
    ]
  },
  plugins: []
};

module.exports = config;
	            

Webpack Docs

Webpack Loaders

webpack loaders transform all types of files into your application's dependency graph:

• ES6 (Babel)
• TypeScript
• CSS, Sass, PostCSS
• Images
• Icons & Fonts

babel-loader

{
    test: /\.js$/,
    //register here any ES6 based library
    include: (app|cx|cx-react|cx-google-maps)[\\\/]/,
    loader: 'babel-loader',
    query: {
        presets: [
            ["cx-env", {
                targets: {
                   chrome: 50,
                   ie: 11,
                   ff: 30,
                   edge: 12,
                   safari: 9
                },
                modules: false,
                loose: true,
                useBuiltIns: true,
                cx: {
                   imports: {
                      useSrc: true
                   }
                }
            }]
        ]
    }
}
	            

webpack-development-server

devServer: {
    port: 8088,
    historyApiFallback: true,
    proxy: {
        '/api': {
            target: 'https://other-server.example.com',
            secure: false
        }
    },
    hot: true,
    inline: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]
	            

Hot Module Replacement (HMR)

• Retain application state
• Tweak styling faster
• Works best with two screens

HMR (in the app)

//CxJS store
const store = new Store();

//webpack (HMR)
if (module.hot) {
   //register module for HMR
   module.hot.accept();

   // remember data on dispose
   module.hot.dispose(function (data) {
      data.state = store.getData();
      if (stop)
         stop();
   });

   //apply data on hot replace
   if (module.hot.data)
      store.load(module.hot.data.state);
}
	            

Code-splitting

Splits your codebase into “chunks” which are loaded on demand. You define split points in your code and Webpack takes care of the dependencies, output files and runtime stuff.

Benefits

• Startup performance
• Caching per chunk
• Saved bandwidth

Split Points

import(/* webpackChunkName: 'map' */ "./map")
  .then(module => {
    //do stuff with map loaded
  });
	            

Bundling & Production

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.ModuleConcatenationPlugin(), // scope hoisting
    new webpack.optimize.UglifyJsPlugin()
]
	                

Long-Term Caching

output: {
    filename: "[name].[chunkhash].js",
    chunkFilename: '[name].[chunkhash].js',
    hashDigestLength: 5,
}
	            

Bundle Analyzer