Loader of the Things: One Library to Load Them All

The esri-loader library hit the 2.0.0 milestone this week.  This release doesn’t add any features, but merely removes the old callback APIs that were deprecated when we introduced the promise-based ones in v1.5.0. If you’ve been using the new APIs, you can save yourself a few bytes by upgrading to 2.0.0. You can read more in the 2.0.0 release notes.

One does not simply load modules from the ArcGIS API

One does not simply load modules from the ArcGIS API

The work leading up to this milestone got me reflecting on the broader state of loading ArcGIS API for JavaScript modules and I came to this conclusion:

If your ArcGIS web application uses any other module loader besides the Dojo loader (i.e. webpack, Rollup.js, etc.), you should be using esri-loader.

That’s a bold statement, so let me back it up.

Continue reading “Loader of the Things: One Library to Load Them All”

Happy holidays from the cedar team!

cedar logo - holiday style

This week we released cedar 1.0.0 in beta and updated the charts in the Hub to use the new version. This lays the ground work for us to make it simpler for ArcGIS Hub users to create and share richer visualizations of their open data.

The focus of cedar v1 is making it easier to create multi-series charts with data from one or more feature layers. Here are a few highlights of what will be changing in v1:

Take a few moments to play around with the new cedar for yourself and let us know what you think.

Cedar multi-series line chart

Continue reading “Happy holidays from the cedar team!”

Using the ArcGIS API for JavaScript in Applications built with webpack

Update: See my Jan 2018 post on esri-loader for my most recent thoughts on how to load ArcGIS API for JavaScript modules.

It seems like webpack is becoming the most popular module bundler in the Angular 2 and React communities. It is not (yet) possible to have webpack directly load modules from the ArcGIS API For JavaScript. However, the ArcGIS developer community has come up a couple innovative workarounds that make it easy to add ArcGIS maps and services to applications built with webpack. Unfortunately I’ve seen a few developers run into trouble because they don’t understand how these abstractions work.

In this post, I’ll explain the hack that underlies these solutions and explore the pros and cons of two patterns for loading ArcGIS modules in applications that are built with a module bundler. Although most of the examples shown use webpack, the same patterns can be applied to rollup.js as well.

Continue reading “Using the ArcGIS API for JavaScript in Applications built with webpack”

ArcGIS Image Service Support in Esri Leaflet

I’m excited to see support for ArcGIS image services landing in Esri Leaflet Beta 6. In addition to serving up raster data such as imagery and digital elevation models, image services provide powerful analytical capabilities. Now Leafelt users can visualize infrared imagery and LiDAR data, get the elevation where a user clicks, and much more. I’m looking forward to seeing how the Leaflet community brings these new capabilities into their applications.

Infrared Imagery in Esri Leaflet
Using the new L.esri.ImageMapLayer class to display an ArcGIS image service in Esri Leaflet

Continue reading “ArcGIS Image Service Support in Esri Leaflet”

Generating Custom Widgets for Esri’s WebApp Builder with Yeoman

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.

Screenshot of running the generator-esri-appbuilder-js generators
The generator prompts you for widget properties and then scaffolds out the required files.

Continue reading “Generating Custom Widgets for Esri’s WebApp Builder with Yeoman”

Bye-bye tomwayson.net

In my former professional life, I used to do a lot of .Net development, mostly ASP.Net development focussed on whatever alternative to WebForms was available at that time – e.g. ASP.Net MVP (remember that?), ASP.Net MVC, ASP.Net Web Pages.

These days, however, I’m primarily a JavaScript developer and it’s been years since I’ve written any .Net code. At Esri I get to focus on front-end web development, and if I’m developing on the server it’s in Node.js. To quote David Spriggs as he was musing about Node and GitHub, “we’re lucky to be alive at this point in history.”

So, I’ve finally decided to shut down my windows hosting account. Continue reading “Bye-bye tomwayson.net”

Using Bootstrap Map? You Might Not Need jQuery…

I’ve been working with Allan Laframboise to add examples of how to use Esri’s popular Bootstrap Map framework without a dependency on jQuery. The Dojo-Bootstrap library, a Dojo port of the Twitter Bootstrap JavaScript modules, finally has a release candidate that is compatible with Bootstrap 3.x. This enabled us to replace the references to the Bootstrap JavaScript with references to the Dojo-Bootstrap modules and completely remove the reference to jQuery.

Bootstrap Map: Now with Dojo-Bootstrap
Now you can choose whether you’d like to get started using Bootstrap with jQuery or Dojo.

You can try out the new Dojo examples live at:

http://esri.github.io/bootstrap-map-js/demo/dojo/getstarted.html

Continue reading “Using Bootstrap Map? You Might Not Need jQuery…”

Removing Unused Dependencies with grunt-amdcheck

I’ve recently been playing with the grunt-amdcheck plugin to remove unused dependencies from AMD modules. It’s common for define statements in an AMD project to accumulate unused dependencies over time as developers refactor, and it’s a good idea to clean those up from time to time as unused dependencies can:

  • Make it harder to maintain your code
  • Cause the browser to make unnecessary asynchronous requests at run time
  • Increase file size and download times

I worked with Mehdi Shojaei, the plugin’s author, on a couple of pull requests to make the plugin work better for my workflow. Namely I suggested that the plugin try to preserve the whitespace between arguments in define paths and module lists, and that it include an option to not overwrite files and that did not have unused dependencies.

Continue reading “Removing Unused Dependencies with grunt-amdcheck”

Resources from our Esri DevSummit Presentation on JavaScript Testing

At the recent 2014 Esri Developers Summit in Palm Springs, Dave Bouwman, David Spriggs, and I presented on Testing Tools & Patterns for JavaScript Mapping Apps.

The video, slides (PDF), and links to related resources from that talk are all now available at the GitHub repository we created for the talk.

Personally, I think Dave Bouwman’s introductory section on the how and why of JavaScript unit testing is as good as any presentation or book (mapping or no) that I’ve seen or read on the subject and is definitely worth a watch.

Beyond that, if you’re interested in the mechanics of testing mapping apps with any of the frameworks we cover (the Intern, Jasmine, Karma, etc) there are plenty of resources to get you going.

My GitHub 30 Day Challenge

Last month I challenged myself to try make at least one contribution a day to GitHub for 30 days straight, and as a result I’ve been able to make long overdue updates to all of my existing repositories as well as make meaningful contributions to other peoples’ open source projects. Some of the things I accomplished during the challenge:

The challenge also helped me up my Git Fu a bit, since (sadly) most of my work projects are not managed in Git. If you’re like me, most of your GitHub activity takes place outside of your normal work hours, and this kind of challenge can really help you get to things that have been on the back burner for too long.

My 2013 GitHub contribution calendar
31 days so far… The gaping holes in the above calendar could be labeled “TFS/SVN Time.”

I’d definitely recommend others try a similar challenge. Here are my (self evident) tips for successfully completing your challenge:

Continue reading “My GitHub 30 Day Challenge”