JSFoo 2015

This talk will introduce the challenges in building WYSIWYG systems using MVC frameworks like Ember.js. UI Bindings have emerged as a useful pattern to provide instant UI feedback but live feedback becomes a challenge when your view is isolated in an external IFRAME.

The talk will cover why IFRAMES are necessary part of building UI’s for curation environments and how UI bindings do not scale elegantly when your VIEW is in an IFRAME. The talk will go on to showcase how cross-frame UI bindings can be extended to work interchangeably with server side rendering of the IFRAME contents.

Outline

When your UI is composed of IFRAMES and distributed across domains (in cases of building WYSIWYG apps), UI bindings as a design pattern doesn’t fit automatically and using MVC frameworks become hard.

The talk will first introduce the class of applications (Landing Page Builders for instance) that have a unique WYSIWYG environment composed of Views locked in IFRAMES. It will showcase a production Ember.js application as an example to illustrate the challenges that audience will come across to make UI bindings work in a multi-frame DOM environment.

The talk will then take the audience through an iterative solution set from simple to elegant and will finally showcase how server side rendering of client side templates can be used to scale UI bindings across the IFRAME boundaries.

Requirements

Working level knowledge of Iframes and JavaScript MVC frameworks(like Emberjs) and how UI bindings work.

Speaker bio

UI developer building multi-channel marketing tools for small businesses. Previously at RockMelt, eBay and GoDaddy. I have been working with JavaScript for the last 5 years primarily building a lot of WYSIWYG tools.

Links

• Video from a Flash Talk I gave: https://hasgeek.tv/bangalorejs/4/378-rajat-mittal-flash-talk

Slides

https://docs.google.com/presentation/d/1_31nuJEyFgD4xbwbwn15FvamDCiEn0ZryDGmfscOVN4/edit?usp=sharing