1 Reply Latest reply on Jan 11, 2016 9:23 AM by kohlmannj

    Issues loading multiple compositions within a RequireJS environment

    kohlmannj

      Hi there,

       

      First, I'm aware that Edge Animate CC is no longer being actively developed. I started using it on a production project before Adobe announced this.

       

      Anyway: I'm using three Edge Animate compositions in this page: http://nytimes.com/aig

       

      The Edge Animate library is loaded using a RequireJS shim config, with an init callback that uses jQuery: https://gist.github.com/kohlmannj/1846a4c766e249ab601a


      I also have some code inside a Require module that accesses the Adobe Edge library (hence the RequireJS shim configuration). This code checks if the compositions are available via AdobeEdge.getComposition() and then performs additional post-initializations by calling window.adobeEdgePostLoadBootstrap() within an AdobeEdge.bootstrapCallback() function.


      Here's the problem: sometimes, across multiple browsers and platforms (Chrome and iOS Safari come to mind, but I've also seen issues over cellular data connections and on Firefox for Windows), only one composition ever successfully loads.


      Since some of the post-init code checks to see if one or more compositions have been loaded, this effectively breaks the page. Sometimes everything works out—making me wonder if this is either a network race condition or a browser caching issue somewhere along the line.

       

      There are a few console.log() messages that should appear in the production version. Here's the output I see in the Safari Web Inspector on a "good" load (when all three animations load correctly):

      AIG - Good Console Output.png

      When everything works out, all three animations are visible and correctly scaled within the post layout:

      AIG - When Everything Works.png

       

      Here's an example of the console output for the failure case (either after a hard refresh or a normal one):

      AIG - Bad Console Output.png

      A telltale sign of failure: only one composition appears on the page, and doesn't animate:

      AIG - Telltale Sign of Failure.png

       

      By the way, these screenshots are from Safari, but I have seen reproduced the in Chrome and iOS Safari, plus I have heard similar reports from Firefox.

       

      Here are some workarounds I have tried:

       

      • Implemented: moved AdobeEdge.bootstrapCallback() and AdobeEdge.loadComposition() calls out of my Require module body (though it's now in a Require shim config's init callback)
      • Implemented: used jQuery.when() and jQuery.ajax() to load all three of the *_edge.js files before attempting to call AdobeEdge.loadComposition() (in an attempt to work around AJAX timeout issues)
      • Abandoned: making all three AdobeEdge.loadComposition() calls within a 2.5 second timeout (i.e. setTimeout(loadCompositions, 2500); )
      • Abandoned: calling loadCompositions() again (a maximum of four attempts) from window.adobeEdgePostLoadBootstrap() if a composition or its stage are of type undefined
      • Considered: getting AdobeEdge library load and AdobeEdge.loadComposition() calls out of the RequireJS infrastructure entirely
        • I have observed issues with our RequireJS environment that may be symptomatic of race conditions that are the underlying cause of only one of the compositions loading.
        • This is what I would consider implementing next, but I was attempting to work within our RequireJS environment for purposes of adhering to my team's development best practices.

       

      Beyond this, I would greatly appreciate comments and ideas from the (former) Adobe Edge Animate development team, as well as any other interested parties. Thanks for your time.

       

      JOSEPH KOHLMANN

      Front End Developer, T Brand Studio

      The New York Times

      O: 212-556-5169 | C: 262-422-9550

      joseph.kohlmann@nytimes.com

      T Brand Studio: Facebook | Twitter | Instagram