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 install so when you execute npm install it will also install jspm packages under jspm_packages folder.
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:
Next open 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 system.js, jspm.config.js files and importing app/bootstrap module with all dependencies:
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