Skip to content

Instantly share code, notes, and snippets.

@browniefed
Last active January 2, 2016 03:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save browniefed/8244234 to your computer and use it in GitHub Desktop.
Save browniefed/8244234 to your computer and use it in GitHub Desktop.
Slowly replacing ExtJS with Ractive.js + AMD modules.

##Jama and Ractive.js

Jama has been originally focused on hiring full stack/Java developers. As of May 2012 the first full time front end developer was hired, and I was hired shortly after in July. Jama is mostly a monolithic ExtJS application which is great if you know nothing about front end development and want something up relatively quickly and easily and do not understand how to build structure your own HTML/CSS well.

Our goal was to replace ExtJS but rebuilding the application from the ground up was not an option. So we devised a plan to utilize Ext Containers that would simply render on the page and allow us to use whatever we wanted in them. This allows us to start granular and slowly start replacing larger and larger Ext components.

Another part of the application was already built with AMD modules so in order to encourage module reuse we extend Ext container, and implement a few methods to pull in an AMD module, pass in configuration data that may be still coming from the Ext world, bind to necessary Ext events, and handle destroying and tearing down the instanitated AMD module.

Built correctly this gives us tremendous testing capabilities. We can use Mocha/Chai to easily unit test our modules. We are able to render our modules in isolation and run acceptance tests with selenium on them. Finally we can continue writing selenium tests against our application but now we don't have to come up with extra complex selectors.

One of the biggest issues with ExtJS is the DOM that it generates. It uses it's own layout engine instead of relying on the browser. Using the 3D DOM visualization tool in FireFox shows an extreme drop in DOM elements with our new method.

We've setup the JamaSoftware organization and will open sourcing the Ext amd module loading container with a few examples so that others who are on Ext can slowly start replacing their application.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment