{"id":2009,"date":"2010-06-19T05:20:00","date_gmt":"2010-06-18T18:20:00","guid":{"rendered":"https:\/\/stage.creately.com\/blog\/?p=2009"},"modified":"2011-08-04T19:45:17","modified_gmt":"2011-08-04T08:45:17","slug":"how-we-converted-our-online-app-into-a-plugin","status":"publish","type":"post","link":"https:\/\/stage.creately.com\/blog\/development\/how-we-converted-our-online-app-into-a-plugin\/","title":{"rendered":"How we Converted our Online App into a Plugin"},"content":{"rendered":"
<\/div>

\"CreatelyHere at Cinergix, we are committed to delivering Creately to all of \u00a0you who have the burning need to put that great idea into a nice picture. Over time we have heard and felt the love from everyone who’s been using Creately.\u00a0 Our desire to reach out to you gave birth to the idea of a Creately Plugin – an architecture that would allow us to integrate Creately to different platforms so you can continue to use Creately right within the platforms you work in every single day. And Creately for FogBugz<\/a> is just the first in many more to come.<\/p>\n

The Approach<\/h3>\n

Taking the current version of Creately that was built as a SAAS service and turning it into a portable component that works on any platform was quite a lot of fun and somewhat challenging. When we designed the Creately Plugin we had to make sure it could be easily reused and quickly integrated into any platform out there. This way Creately can be made available on your favorite wikis, blogs, case management and productivity tools in the near future with minimal rework.<\/p>\n

Creately SWF & Wrapper<\/h3>\n

Basically, there are two parts to converting an online application like Creately to support a plugin infrastrusture. The first is the the actual application, Creately, that can be compiled in 2 different modes. The Online SWF Mode for SAAS delivery and the Plugin SWF Mode for integrating into plugin platforms.<\/p>\n

The second component, the Plugin Wrapper, is responsible for integrating the application into the platform that hosts the plugin. This Plugin Wrapper needs to be built specifically for the platform that it is hosted on, using the platform’s API’s. Platforms like FogBugz<\/a> have detailed documentation<\/a> on how a plugin can be built for it. In the case of FogBugz, we also had the folks at FogCreek <\/a>helping us get the best diagramming plugin out to you guys. Thanks, we couldn’t have done it without you guys.<\/p>\n

\"The<\/p>\n

Deconstructing the Application<\/h3>\n

So we started with the most important component, the Creately SWF, the flex code that runs in the Flash Player in your browser. We worked in a layer of separation to enable us to compile the Creately SWF to run in different modes. Based on the mode, the Creately front end functionality and the backend interaction would work completely differently. The mode is specified in a configuration file that is used when compiling Creately.<\/p>\n

The Online Mode SWF uses Remote Objects<\/a> to connect and interact with the Creately backend services (Jupiter Service). The Plugin Mode SWF would expect a set of http endpoints to be available for it to communicate, to send and receive the required data. The Plugin Wrapper would expose these endpoints required by the Plugin Mode SWF and are configured in the configuration file.<\/p>\n

This way by simply switching the configuration file and compiling, the Creately swf can be used to either generate Creately to run as a SaaS service or as a FogBugz plugin or a plugin for a completely new platform. This method not only enables us to easily build Creately plugins for more platforms but also lets us deliver all the cool new features we build into Creately to all distributions of Creately. Its great to be able to do this without ever splitting our code base.<\/p>\n

More Ideas!<\/h3>\n

You think thats cool? Well then you are going to like what I have to say next. This very approach will enable us to build a desktop version of Creately for you in the future. \ud83d\ude42 How about that?<\/p>\n

Tell us what you think and how much you like the idea of Creately on your desktop. Also, if there’s another platform out there you’d love to see Creately on drop leave us a note here.<\/p>\n

@Hiraash<\/a><\/p>\n

Header Image by Jake Mates<\/a> \/ CC BY-NC-ND 2.0<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"

Here at Cinergix, we are committed to delivering Creately to all of \u00a0you who have the burning need to put that great idea into a nice picture. Over time we have heard and felt the love from everyone who’s been… Read More<\/a><\/span><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[683,106,7,105],"class_list":["post-2009","post","type-post","status-publish","format-standard","hentry","category-development","tag-features","tag-flex","tag-release","tag-technology"],"_links":{"self":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/2009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/comments?post=2009"}],"version-history":[{"count":46,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"predecessor-version":[{"id":2052,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions\/2052"}],"wp:attachment":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}