<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:clearspace="http://www.jivesoftware.com/xmlns/clearspace/rss" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
  <channel>
    <title>Blog Posts From Active Product Development Tagged With widgets</title>
    <link>http://community.active.com/blogs/productdev</link>
    <description>Miscellaneous Rants from the people who develop active.com</description>
    <pubDate>Thu, 11 Mar 2010 00:27:02 GMT</pubDate>
    <generator>Jive SBS 4.5.5.2  (http://jivesoftware.com/products/clearspace/)</generator>
    <dc:date>2010-03-11T00:27:02Z</dc:date>
    <item>
      <title>Active Realtime</title>
      <link>http://community.active.com/blogs/productdev/2010/03/10/active-realtime</link>
      <description>&lt;!-- [DocumentBodyStart:b3f9a240-d2cd-4644-a24a-32396e87bdec] --&gt;&lt;div class="jive-rendered-content"&gt;&lt;p&gt;&lt;strong&gt;&lt;a class="jive-link-external-small" href="http://labs.active.com/realtime"&gt;Active Realtime&lt;/a&gt;&lt;/strong&gt; is the newest addition to our product incubator &lt;a class="jive-link-external-small" href="http://labs.active.com"&gt;labs.active.com&lt;/a&gt;.&amp;#160; Every day thousands of people are searching and registering for things to do at Active.&amp;#160; The idea behind Active Realtime is to provide a window in to actual user activity,&amp;#160; giving a sense of whats happening right now at Active.&amp;#160; We also aggregate popular activities on a local level, which reveals favored events and activities in a region.&amp;#160; We also have the opportunity to look at trending topics over time, which will perhaps yield new insight into what is keeping us Active.&lt;/p&gt;&lt;a href="http://community.active.com/servlet/JiveServlet/showImage/38-17304-13255/realtime-architecture2.png"&gt;&lt;img alt="realtime-architecture2.png" class="jive-image" height="399" src="http://community.active.com/servlet/JiveServlet/downloadImage/38-17304-13255/310-399/realtime-architecture2.png" style="float: right;" width="310"/&gt;&lt;/a&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;div&gt;Presently data for Active Realtime is provided by our newly launched &lt;a class="jive-link-external-small" href="http://search.active.com"&gt;search engine&lt;/a&gt; .&amp;#160; In the future we hope to include realtime data from other parts of Active, such as &lt;a class="jive-link-external-small" href="http://search.active.com/"&gt;event registration openings&lt;/a&gt; or &lt;a class="jive-link-external-small" href="http://community.active.com//"&gt;community posts&lt;/a&gt;.&amp;#160; Keeping this in mind, we designed a technical infrastructure for Active Realtime that would allow us to add additional sources of data in the future, as well as allow other applications at Active tap into the information.&lt;/div&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;div id="_mcePaste"&gt;To accomplish this, we used&amp;#160; &lt;a class="jive-link-external-small" href="http://xmpp.org/extensions/xep-0060.html"&gt;XMPP Publish Subscribe&lt;/a&gt;, an addition to the venerable IM protocol.&amp;#160;&amp;#160; Using XMPP PubSub, we are able to keep &lt;a class="jive-link-external-small" href="http://search.active.com"&gt;Active.com Search&lt;/a&gt; and &lt;a class="jive-link-external-small" href="http://labs.active.com/realtime"&gt;Active Realtime&lt;/a&gt; loosely coupled, so each service can be independently maintained and scaled.&amp;#160; Additionally, we developed a Search Logger, which acts independently of the Search site.&amp;#160; The Search Logger acts as the Publisher, and pushes search data over the XMPP bus.&amp;#160; Any interested part of the Active infrastructure may subscribe to receive these updates, and the Realtime application is just that.&amp;#160; The Realtime architecture includes a Ruby daemon that acts as Subscriber, registering an interest for search activity and receiving data accordingly.&amp;#160; This data is recorded into the Realtime database, which&amp;#160; then can be displayed on the Realtime site.&amp;#160; A diagram showing the architecture is included to the side.&lt;/div&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;div&gt;The payoff for investing the time to create this architecture, rather than just querying the search infrastructure directly, is twofold.&amp;#160; First, it provides a simple and scalable way for future datasource&amp;#160; additions to be made to the Realtime application.&amp;#160; Secondly, it de-couples realtime with each of the data publishers, allowing all systems to function and scale independently, without having an impact on one another.&lt;/div&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;div&gt;I hope you enjoy this window into Active.&amp;#160; The data on &lt;a class="jive-link-external-small" href="http://labs.active.com/realtime"&gt;Active Realtime &lt;/a&gt;is generated by Active users, so perhaps another like minded person will help you to find a great local activity to participate in.&lt;/div&gt;&lt;/div&gt;&lt;!-- [DocumentBodyEnd:b3f9a240-d2cd-4644-a24a-32396e87bdec] --&gt;</description>
      <category domain="http://community.active.com/blogs/productdev/tags">active</category>
      <category domain="http://community.active.com/blogs/productdev/tags">architecture</category>
      <category domain="http://community.active.com/blogs/productdev/tags">widgets</category>
      <category domain="http://community.active.com/blogs/productdev/tags">leg</category>
      <category domain="http://community.active.com/blogs/productdev/tags">product_development</category>
      <category domain="http://community.active.com/blogs/productdev/tags">cloud_computing</category>
      <category domain="http://community.active.com/blogs/productdev/tags">labs</category>
      <category domain="http://community.active.com/blogs/productdev/tags">realtime</category>
      <category domain="http://community.active.com/blogs/productdev/tags">xmpp</category>
      <pubDate>Thu, 11 Mar 2010 00:27:02 GMT</pubDate>
      <author>guest</author>
      <guid>http://community.active.com/blogs/productdev/2010/03/10/active-realtime</guid>
      <dc:date>2010-03-11T00:27:02Z</dc:date>
      <clearspace:dateToText>3 years, 2 months ago</clearspace:dateToText>
      <clearspace:replyCount>1</clearspace:replyCount>
      <clearspace:objectType>0</clearspace:objectType>
      <wfw:comment>http://community.active.com/blogs/productdev/comment/active-realtime</wfw:comment>
      <wfw:commentRss>http://community.active.com/blogs/productdev/feeds/comments?blogPost=17304</wfw:commentRss>
    </item>
    <item>
      <title>Active Widgets</title>
      <link>http://community.active.com/blogs/productdev/2010/03/01/active-widgets</link>
      <description>&lt;!-- [DocumentBodyStart:fe24ccdf-bd90-4f5c-be70-9f60bb65b9bc] --&gt;&lt;div class="jive-rendered-content"&gt;&lt;p&gt;Hi, I'm Rob and I'm a Software Architect on the Light Engineering Group here at Active. LEG, as we call it, was modeled after the &lt;a class="jive-link-external-small" href="http://blog.linkedin.com/2008/06/23/web-scalability-practices-bumper-sticker-on-rails/"&gt;LED group at LinkedIn&lt;/a&gt;. LinkedIn was looking for a way to rapidly prototype new technologies and architectures with &lt;a class="jive-link-external-small" href="http://rubyonrails.org"&gt;Ruby on Rails&lt;/a&gt;. Their first product was &lt;a class="jive-link-external-small" href="http://www.facebook.com/apps/application.php?id=2427603417"&gt;Bumper Sticker&lt;/a&gt; which at one point was the mostly highly trafficed Facebook application in existence! You can find many of the fruits of LEG's labor at &lt;a class="jive-link-external-small" href="http://labs.active.com"&gt;http://labs.active.com&lt;/a&gt;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;This morning we officially launched our new Active Widgets site at &lt;a class="jive-link-external-small" href="http://widgets.active.com"&gt;http://widgets.active.com&lt;/a&gt; This was a quick two week project to create an embeddable window into Active.com's thousands of registerable events. The idea being that the blog you write about running/cycling/baseball can show a list of upcoming marathons/track events/Little League games in your area. The widget is customizable as far as what activities it displays, where it displays them, whether or not the user can change those settings, as well as the size and color of the widget itself. Once your done just click a button and you're given a couple of simple Javascript tags to drop onto your site wherever you want the widget to appear. And since the widget is written out onto your page like any other HTML, you can further customize it using your own CSS.&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;&lt;a href="http://community.active.com/servlet/JiveServlet/showImage/38-17130-12987/widget.png"&gt;&lt;img alt="widget.png" class="jive-image" height="409" src="http://community.active.com/servlet/JiveServlet/downloadImage/38-17130-12987/308-409/widget.png" width="308"/&gt;&lt;/a&gt;&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;The Technical Stuff&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;This customization site (known as The Configurator) is a &lt;a class="jive-link-external-small" href="http://www.sinatrarb.com"&gt;Sinatra&lt;/a&gt; application written in Ruby. There is no database&amp;mdash;the data store is a single &lt;a class="jive-link-external-small" href="http://yaml.org"&gt;YAML&lt;/a&gt; file which defines a widget and what about it is customizable. The widget itself is written in Javascript and after minification with the &lt;a class="jive-link-external-small" href="http://developer.yahoo.com/yui/compressor/"&gt;YUI Compressor&lt;/a&gt;, the whole thing is 14K (for comparison, the Google homepage is 47K).&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;Since we planned on having the widget be embeddable on any website we couldn't use Ajax to pull in the event listings. Ajax is subject to strict cross-domain security policies set by your browser&amp;mdash;you can only access servers in the same domain that the page itself was served from. This is quite a problem since search results are coming from &lt;a class="jive-link-external-small" href="http://search.active.com"&gt;http://search.active.com&lt;/a&gt;&amp;#160; The workaround for this issue is to make server calls with &lt;span style="font-family: 'courier new', courier;"&gt;&amp;lt;script&amp;gt;&lt;/span&gt; tags and then wrap the resulting code in a function call known as a callback. When the &lt;span style="font-family: 'courier new', courier;"&gt;&amp;lt;script&amp;gt;&lt;/span&gt; tag is added to the page the browser immediately executes it as valid Javascript. Since this Javascript contains a function call (the callback) it looks a function you've already defined with the same name and calls it, passing in the returned data.&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;The server itself is an Amazon EC2 instance running in their cloud infrastructure. This allows us to quickly react to any scaling needs by simply spinning up a new instance of the same server and deploying the code to it. Nearly half our division's products are now running on EC2 and we're moving more there every day. We've found it be an fast, secure and cost effective way to get our applications live.&lt;/p&gt;&lt;p style="min-height: 8pt; height: 8pt; padding: 0px;"&gt;&amp;#160;&lt;/p&gt;&lt;p&gt;Stay tuned for more exciting projects from the LEG team!&lt;/p&gt;&lt;/div&gt;&lt;!-- [DocumentBodyEnd:fe24ccdf-bd90-4f5c-be70-9f60bb65b9bc] --&gt;</description>
      <category domain="http://community.active.com/blogs/productdev/tags">events</category>
      <category domain="http://community.active.com/blogs/productdev/tags">widgets</category>
      <category domain="http://community.active.com/blogs/productdev/tags">leg</category>
      <category domain="http://community.active.com/blogs/productdev/tags">cloud_computing</category>
      <category domain="http://community.active.com/blogs/productdev/tags">amazon</category>
      <category domain="http://community.active.com/blogs/productdev/tags">ec2</category>
      <category domain="http://community.active.com/blogs/productdev/tags">labs</category>
      <category domain="http://community.active.com/blogs/productdev/tags">ruby</category>
      <category domain="http://community.active.com/blogs/productdev/tags">sinatra</category>
      <pubDate>Tue, 02 Mar 2010 00:11:07 GMT</pubDate>
      <author>guest</author>
      <guid>http://community.active.com/blogs/productdev/2010/03/01/active-widgets</guid>
      <dc:date>2010-03-02T00:11:07Z</dc:date>
      <clearspace:dateToText>3 years, 2 months ago</clearspace:dateToText>
      <clearspace:objectType>0</clearspace:objectType>
      <wfw:comment>http://community.active.com/blogs/productdev/comment/active-widgets</wfw:comment>
      <wfw:commentRss>http://community.active.com/blogs/productdev/feeds/comments?blogPost=17130</wfw:commentRss>
    </item>
  </channel>
</rss>

