Merge pull request #4435 from dannon/es6

Galaxy client tooling overhaul, ES6

.gitignore

@@ -125,6 +125,7 @@ sprite-*.less
 static/scripts/bundled/[0-9]*
 node_modules
 bower_components
+client/galaxy/scripts/libs/*
 
 # Documentation build files.
 doc/build

Makefile

@@ -12,10 +12,6 @@ VENV?=.venv
 IN_VENV=if [ -f $(VENV)/bin/activate ]; then . $(VENV)/bin/activate; fi;
 CONFIG_MANAGE=$(IN_VENV) python lib/galaxy/webapps/config_manage.py
 PROJECT_URL?=https://github.com/galaxyproject/galaxy
-GRUNT_DOCKER_NAME:=galaxy/client-builder:16.01
-GRUNT_EXEC?=node_modules/grunt-cli/bin/grunt
-WEBPACK_EXEC?=node_modules/webpack/bin/webpack.js
-GXY_NODE_MODULES=client/node_modules
 DOCS_DIR=doc
 DOC_SOURCE_DIR=$(DOCS_DIR)/source
 SLIDESHOW_DIR=$(DOC_SOURCE_DIR)/slideshow
@@ -117,43 +113,18 @@ release-check-blocking-prs: ## Check github for release blocking PRs
 release-bootstrap-history: ## bootstrap history for a new release
 	$(IN_VENV) python scripts/bootstrap_history.py --release $(RELEASE_CURR)
 
-npm-deps: ## Install NodeJS dependencies.
-	cd client && npm install
+node-deps: ## Install NodeJS dependencies.
+	cd client && yarn install --check-files
 
-grunt: npm-deps ## Calls out to Grunt to build client
-	cd client && $(GRUNT_EXEC)
+client: node-deps ## Rebuild all client-side artifacts
+	cd client && yarn run build
 
-style: npm-deps ## Calls the style task of Grunt
-	cd client && $(GRUNT_EXEC) style
+charts: node-deps ## Rebuild charts
+	cd client && yarn run build-charts
 
-client-install-libs: npm-deps ## Fetch updated client dependencies using bower.
-	cd client && $(GRUNT_EXEC) install-libs
-
-client: grunt style ## Rebuild all client-side artifacts
-
-charts: npm-deps ## Rebuild charts
-	NODE_PATH=$(GXY_NODE_MODULES) client/$(WEBPACK_EXEC) -p --config config/plugins/visualizations/charts/webpack.config.js
-
-grunt-docker-image: ## Build docker image for running grunt
-	docker build -t ${GRUNT_DOCKER_NAME} client
-
-grunt-docker: grunt-docker-image ## Run grunt inside docker
-	docker run -it -v `pwd`:/data ${GRUNT_DOCKER_NAME}
-
-clean-grunt-docker-image: ## Remove grunt docker image
-	docker rmi ${GRUNT_DOCKER_NAME}
-
-grunt-watch-style: npm-deps ## Execute watching style builder for dev purposes
-	cd client && $(GRUNT_EXEC) watch-style
-
-grunt-watch-develop: npm-deps ## Execute watching grunt builder for dev purposes (unpacked, allows debugger statements)
-	cd client && $(GRUNT_EXEC) watch --develop
-
-webpack-watch: npm-deps ## Execute watching webpack for dev purposes
-	cd client && ./node_modules/webpack/bin/webpack.js --watch
-
-client-develop: grunt-watch-style grunt-watch-develop webpack-watch  ## A useful target for parallel development building.
-	@echo "Remember to rerun `make client` before committing!"
+client-watch: node-deps ## A useful target for parallel development building.
+	cd client && yarn run watch
+	@echo "Remember to 'make client' when finished developing!"
 
 
 # Release Targets

client/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

client/GruntFile.js

@@ -20,9 +20,7 @@ module.exports = function(grunt) {
 	    grunt.config.set( 'paths', TOOLSHED_PATHS );
     }
 
-    grunt.loadNpmTasks('grunt-check-modules');
     // see the sub directory grunt-tasks/ for individual task definitions
     grunt.loadTasks( 'grunt-tasks' );
-    // note: 'handlebars' *not* 'templates' since handlebars doesn't call uglify
-    grunt.registerTask( 'default', [ 'check-modules', 'uglify', 'webpack' ] );
+    grunt.registerTask( 'default', [ 'uglify' ] );
 };

client/README.md

@@ -1,123 +1,62 @@
 Client Build System
 ===================
 
-Builds and moves the client-side scripts necessary for running the Galaxy webapps. There's no need to use this system
-unless you are modifying or developing client-side scripts.
+Installs, stages, and builds the client-side scripts necessary for running the
+Galaxy webapp. There's no need to use this system unless you are modifying or
+developing client-side scripts.
 
-The base dependencies you'll need are Node.js and the Node Package Manager
-(npm).  See nodejs.org for more information.
+The base dependencies you will need are Node.js and Yarn.  On OSX the easiest
+way to get set up is using homebrew and the command `brew install nodejs yarn`.
+More information including instructions for other platforms is available  at
+nodejs.org and yarnpkg.com.
 
 
-Simple Full Build
-=================
+Complete Client Build
+================================================
 
-The simplest way to rebuild the entire client to incorporate any local changes
-is to run the 'client' rule in the Galaxy makefile, which is in the repository
-root.  This will also ensure any local node modules are installed.
+There are many moving parts to the client build system, but the entrypoint for
+most people is the 'client' rule in the Makefile at the root of the Galaxy
+repository.  Execute the following to perform a complete build including
+dependency staging, style building, script processing and bundling.
 
     make client
 
 
-Detailed Build Instructions
-===========================
+Automatic Rebuilding (Watch Mode)
+=================================
 
-Once npm is installed, install the grunt task manager and its command line into your global scope:
+When you're actively developing, it is sometimes convenient to have the client
+automatically rebuild every time you save a file.  You can do this using:
 
-    npm install -g grunt grunt-cli
+    make client-watch
 
-Next, from within this directory, install the local build dependencies:
-
-    cd client
-    npm install
-
-You're now ready to re-build the client scripts after modifying them.
-
-
-Rebuilding
-==========
-
-There are two methods for rebuilding: a complete rebuild and automatic, partial rebuilds while you develop.
-
-A complete rebuild can be done with the following (from the `client` directory):
-
-    grunt
-
-This will:
-
-1. compress the files in client/galaxy/scripts and place them in static/scripts
-2. generate source maps and place them in static/maps
-3. rebuild the webpack-based client apps
-
-
-Rebuilding Scripts Only
-=======================
-
-To re-minify all the individual javascript files:
-
-    grunt scripts
-
-
-Rebuilding Webpack Apps
-=======================
-
-To rebuild the webpack bundles for apps (compressed for production):
-
-    grunt webpack
-
-To rebuild the apps without compression:
-
-    grunt webpack-dev
-
-To rebuild without compression and watch and rebuild when scripts change:
-
-    grunt webpack-watch
+This will first stage any dependencies (yarn-installed packages like jquery,
+etc), and then will watch for changes in any of the galaxy client source files.
+When a file is changed, the client will automatically rebuild, after which you
+can usually force refresh your browser to see changes.  Note that it is still
+recommended to run 'make client' after you are finished actively developing
+using 'make client-watch'.
 
 
 Changing Styles/CSS
 ===================
 
-The CSS and styling used by Galaxy is also controlled from this directory. Galaxy uses LESS, a superset of CSS that
-compiles to CSS, for its styling. LESS files are kept in client/galaxy/style/less. Compiled CSS is in static/style/blue.
-
-Use grunt to recompile the LESS in into CSS (from the `client` directory):
-
-    grunt style
-
-
-Grunt watch
-===========
-
-Grunt can also do an automatic, partial rebuild of any files you change *as you develop* by:
-
-1. opening a new terminal session
-2. `cd client`
-3. Watch with:
-    1. `grunt watch` to watch the *scripts/* folder
-    2. `grunt watch-style` to watch the *style/* folder
-
-This starts a new grunt watch process that will monitor the files, in the corresponding folder, for changes and copy and
-rebuild them when they change.
-
-You can stop the watch task by pressing `Ctrl+C`. Note: you should also be able to background that task
-if you prefer.
-
-
-Using a Locally Installed Version of Grunt
-==========================================
+The CSS and styling used by Galaxy is also controlled from this directory.
+Galaxy uses LESS, a superset of CSS that compiles to CSS, for its styling. LESS
+files are kept in client/galaxy/style/less. Compiled CSS is in
+static/style/blue.
 
-A non-global version of grunt and the grunt-cli are installed when using 'npm install'. If you'd rather build with that
-version, you'll need to use the full, local path when calling it:
+As mentioned above, 'make client' will also rebuild styles.  If you *only* want
+to run the style task, use the following command from the `client` directory:
 
-    ./node_modules/.bin/grunt
-    # or
-    ./node_modules/.bin/grunt watch
+    yarn run style
 
 
 The Toolshed Client Build
 =========================
 
-The commands mentioned above in 'Rebuilding' and 'Grunt watch' also can be applied to toolshed scripts by using the
-`--app=toolshed` option:
+The toolshed client is not tightly integrated with the rest of the build
+system.  To build the toolshed client, execute the following command from the
+`client` directory.
 
-	grunt watch --app=toolshed
-	grunt --app=toolshed
+	yarn run build-toolshed

client/bower.json

@@ -8,32 +8,18 @@
   ],
   "homepage": "usegalaxy.org",
   "dependencies": {
-    "jquery": "~1.12",
-    "ravenjs": "~3",
-    "underscore": "~1",
-    "backbone": "~1.3",
     "bootstrap": "~3.3.2",
     "bootstrap-tour": "~0.10.2",
-    "d3": "~3",
     "farbtastic": "~2.0.0-alpha.1",
     "toastr": "~2.1.0",
-    "bib2json": "git://github.com/galaxyproject/bib2json#galaxy",
     "jquery-form": "~3.46.0",
     "jquery-autocomplete": "git://github.com/dyve/jquery-autocomplete",
     "select2": "~3.5.2",
     "jStorage": "~0.4.12",
-    "jquery.cookie": "~1.4.1",
     "dynatree": "~1.2.5",
-    "jquery-mousewheel": "~3.1.12",
     "wymeditor": "~1.0.0-rc.1",
     "jstree": "~3.0.9",
     "jquery-ui": "git://github.com/jquery/jquery-ui.git#~1.11.2",
-    "jquery.complexify": "git://github.com/danpalmer/jquery.complexify.js.git#~0.5.1",
-     "threedubmedia.jquery.event": "*",
-    "jquery-migrate": "~1.4",
-    "requirejs": "~2"
-  },
-  "resolutions": {
-    "jquery": "~1.12"
+     "threedubmedia.jquery.event": "*"
   }
 }

client/galaxy/scripts/apps/panels/history-panel.js

@@ -1,5 +1,5 @@
 var Ui = require( 'mvc/ui/ui-misc' ),
-    historyOptionsMenu = require( 'mvc/history/options-menu' );
+    historyOptionsMenu = require( 'mvc/history/options-menu' ),
     CurrentHistoryView = require( 'mvc/history/history-view-edit-current' ).CurrentHistoryView,
     _l = require( 'utils/localization' );
 
@@ -84,7 +84,7 @@ var HistoryPanel = Backbone.View.extend({
         ].join('');
     },
 
-    toString : function() { return 'historyPanel' }
+    toString : function() { return 'historyPanel'; }
 });
 
 module.exports = HistoryPanel;