How to start writing apps with ES6, Angular 1.x and JSPM
ES6 development and production workflow with JSPM
Couple weeks ago I have started to work on one of my personal projects (Employee Scheduling) and at that time I didn't think I will write any of my code in ES6 not because I wouldn't want to try one of the cool ES6 features but I was more concerned how to automating my development workflow with ES6 and I also want to get my code to production until I watched Guy Bedford video from JSConf2014 where he was talking about ES6 modules workflow using JSPM. As you may guess JSPM solves a lot of my concerns and today I want to share my ES6 development and production workflow using JSPM. The Employee Scheduling application screenshot: Before we start describing my workflow I want to mention that I am using Angular 1.x for my project but you could use similar ES6 workflow with EmberJS or ReactJS.
First clone an
employee-scheduling-ui repo and then install dependencies:
I have set npm postinstall script to run
jspm installso when you execute
npm installit will also install jspm packages under
Next when you open
package.json you can see jspm block that configures packages for jspm. The jspm block can be created manually or through
jspm init command and if you want to add a jspm packages just add them manually or through
jspm install <package> command:
jspm.config.js which tells SystemJS how to find modules (if you look closer you can see that configuration is similar like in require.js)
As the last thing open
src/index.html where we are loading
jspm.config.js files and importing
app/bootstrap module with all dependencies:
app/bootstrap module with all dependencies.
The SystemJS library use
6to5 (it depends on your configuration) to compile your ES6 to ES5 code and all this happened in the browser automatically so there is no need for any build steps. If you turn on
As I mentioned in previous section there is no build step required as all compilation from ES6 to ES5 happened in the browser so only thing that you want to set is to watch for changes and refresh the browser by using gulp or some other tool.
Bootstrap Angular 1.x Application
As we are using ES6 with Angular 1.x we can't use
ng-app directive to bootstrap the application as modules are loaded asynchronously instead of that we need to bootstrap the application manually:
If you run
employee-scheduling app and open the browser console you can see there are over 100 requests and with so many requests you probably don't want to go to production so let's create production bundle with
systemjs-builder by running
gulp bundle. This task will create self-executing bundle with all the modules imported by
src/app/bootstrap.js that can run without needing SystemJS by adding a micro-loader implementation and traceur-runtime into one bundle.
If you want to run my production code just run
npm start -- --env=PROD that will create production code under
build/dist directory and it will run code from this directory.
I think by now you have at least some idea how to start writing apps with ES6, JSPM and how you can start preparing for Angular 2 as it will be written in ES6. I have still plan to continue on this app and add some tests and slowly migrate to Angular 2 in the future. You can find the complete app code here: https://github.com/martinmicunda/employee-scheduling-ui