On Modern Widget Architectures
A version of this article originally appeared on http://blog.pixlee.com/on-modern-widget-architectures-pixlee.
(1) Many vendors injects native JavaScript widgets to deploy their experiences or services on client websites.
(2) Pixlee publishes through encapsulated code via iFrames.
iFrame versus Native JS is an ongoing debate played out by software vendors that live on client websites. While there are pros and cons for both, we are firmly in the iFrame with a thin native-js control layer camp. Our widgets have to work flawlessly with as many browsers as possible across desktop, mobile devices, and tablets. We're developers who are constantly evaluating all possible solutions to a problem and while it's tempting to implement the latest and greatest trends, we believe that iFrames are still the best for our given requirements. We’ve honed our approach for a few years now and have been able to produce an incredibly compelling set of products that minimize up-front integration resources, ongoing integration maintenance, and ensure maximum stability. We pride ourselves on being pioneers in the space.
Other JavaScript-only widgets are not protected in their own frame, and so are vulnerable to manipulation, intentional or otherwise, from other plugins and applications running code client-side. The inverse is also true, in that JavaScript-only widgets can corrupt site functionality and design. This creates a lot of friction and potential points of failure. It also moves more of the integration responsibility from the vendor to the brands. Because the barrier to entry is significantly lower to producing JavaScript-only plugins, there is a much wider scale in code quality and the last thing you want is shoddy vendor code disabling core functionality of your property.
All Pixlee code is protected & maintained by our team and operates within our sandboxed iFrame environment. This ensures that our integrations cannot interfere with any other site functionality or design and vice-versa.
In evaluating fundamentally different system architectures, there are two theoretical advantages of JavaScript-only widgets :
(1) Design control over style and functionality
(2) Speed and performance.
In practice however, we have been able to create a system that addresses both of these issues.
We provide marketers full control over gallery design without the need for development resources through a WSIWYG design editor, as well as a sandboxed environment for designers to customize our widgets to their hearts content without worrying about CSS resets, already-set styles, or any myriad of issues that may come up. There is no risk of conflict between Pixlee and other aspects of the host site. And because many of the most cutting edge companies have invested in iFrame and Cross-Domain techniques over the last few years, we’ve been able to stay ahead of the curve in speed and performance.
Our architecture allows brands to make improvements and optimizations on their Pixlee initiatives without disrupting or requiring involvement from engineering resources.
With an un-framed Javascript widget, any change to the host website related to the plugin or not, requires new test cycles and integration between vendors and your brand.
By directly injecting Javascript widgets on your site, overhead for upfront integration & continued maintenance increases dramatically. Because of our architecture, Pixlee is able to own full A/B tests of our deployments, fail-safe behavior, fallback behavior, and maintenance of all your UGC displays without corruption of the integrity and delivery of your online experiences.
Mohamed Rachidi - Senior software architect @Pixlee.