Recently I’ve been developing custom widgets for the ArcGIS Web AppBuilder, and I have found that there is a lot of boilerplate code that you have to create for each new widget. I thought that a Yeoman generator would be a useful way to scaffold out the widget files, so I created generator-esri-appbuilder-js.
What It Does
The package contains a couple of generators that walk users through a series of prompts to gather information about a custom widget that they want to develop for the Web AppBuilder, and then scaffolds out the widget’s files.
After running the generators in the Web AppBuilder’s stem app, the developer will be able to see the widget in the builder and add it to applications.
As you can see, the scaffolded widget doesn’t do much as is, so it’s up to the developer to build upon this foundation and add functionality. My hope is that developers will find it useful to have all the plumbing in place so they can focus on the logic and UI that makes their widget unique.
This generator might work a little differently than you’d expect in that the default generator (yo esri-appbuilder-js) doesn’t do much. Instead, the main work of scaffolding out widget files is done by a subgenerator, yo esri-appbuilder-js:widget. The idea is that we can add more subgenerators for other tasks such as scaffolding out a theme, or a test config file. The default generator is only run once, but the subgenerators are run each time you need a new widget, theme, etc.
Other Yeoman Generators for Esri JavaScript Applications
You should also check out a couple of other Yeoman generators that are useful when scaffolding out Esri JavaScript applications:
- Steve Gourley and Scott Davis created generator-dojo-widget to scaffold out the files needed for a Dojo widget. I really like this generator because it can be used in any Esri Dojo application, and because it generates a Jasmine test suite and as well as a functional test page!
- Dave Bouwman created generator-bootmap to scaffold out an entire application based on Allan Laframboise’s bootstrap-map-js – a light-weight extension for building responsive web mapping apps with the ArcGIS API for JavaScript andBootstrap (ver 3.x)
Also, if you’re interested in other ways to automate your application development workflow, you ought to check out Josh Peterson’s talk on JavaScript tooling from the 2014 Esri Developer Summit, which covers Grunt, jshint, bower, stylus and more.
Next Steps
There are some obvious improvements that can be made to the way the widget generator scaffolds out a custom widget that I’ll be working on over the next couple weeks.
Beyond that, the generator is up on npm and GitHub. Take it out for a spin, and let me know what you think. Pull requests are gladly accepted, especially by anyone that is interested in creating a subgenerator to scaffold out a custom Web AppBuilder theme.