0
Rendering                    Client-side                Implications & philosophy of client-side                          ...
Me                    • Tim Oxley                    • @secoif                    • Freelance Node.js Consultant          ...
Who should be                     listening?Sunday, 20 May 12
Anyone who calls                      themselves a                     “web master”Sunday, 20 May 12
“Javascript is just for                    validations & animations.”Sunday, 20 May 12
“My site is living in 2001, I                 have a pantry full of ajax                 powered spaghetti, and           ...
What is                     Clientside                    Templating?Sunday, 20 May 12
What is Clientside                         Templating?                    1. Server sends Client templates + ‘application ...
Downsides of                     Server-side                    ArchitectureSunday, 20 May 12
CouplingSunday, 20 May 12
Server-side Load                    • Infrastructure                    • Dynamic pages can be expensive.                 ...
<li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLi...
<li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLi...
Sunday, 20 May 12
<li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLi...
<li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLi...
Not DRY                    • Transfer of Data + Markup for every                      requestSunday, 20 May 12
Not Efficient                    • Transfer of Data + Markup for every                      requestSunday, 20 May 12
Dumb ClientsSunday, 20 May 12
LagSunday, 20 May 12
Unoptimal UXSunday, 20 May 12
Ugly Clientside CodeSunday, 20 May 12
Upsides of a                    Thick ClientSunday, 20 May 12
Free StuffSunday, 20 May 12
Good Architecture                        for FreeSunday, 20 May 12
Decoupled Design                        for FreeSunday, 20 May 12
“Good Architecture                      Allows Future                        Features”                      - Yehuda KatzS...
API For FreeSunday, 20 May 12
Multiplatform for                          Free                                   API                                     ...
Structure for FreeSunday, 20 May 12
Separation of                Responsibilities for                      FreeSunday, 20 May 12
Modular Caching                       for FreeSunday, 20 May 12
More Static Assets                        for FreeSunday, 20 May 12
Simplicity for FreeSunday, 20 May 12
Power for FreeSunday, 20 May 12
Benefits of                    TemplatingSunday, 20 May 12
Why not just template                 with straight JS?               • Get a smaller stack               • Simpler       ...
Sunday, 20 May 12
Why not just use JS?               Uglies:               • String concatenation and array.push +                    join()...
displaySessions: function(sessions, domSelector) {       var li,html;       if (sessions.length === 0) {         $(domSele...
{{#if sessions.length}}   <li class="info">No sessions available</li> {{else}}   {{each sessions}}     {{with this}}      ...
Template Engine                          Benefits                    • Readable                    • Maintainable         ...
Downsides of                    Thick ClientSunday, 20 May 12
ComplexitySunday, 20 May 12
•I don’t like things that are                    different               •    A build process is usually                  ...
Finding the                    Sweet SpotSunday, 20 May 12
The Sweet Spot                                           Mostly Serverside                                           rende...
Hybrid Model                    • Twitter/Facebook/Google all render                      HTML serverside for initial page...
Hybrid Model                    • Reduces the number of requests                    • Shares rendering load between       ...
The FutureSunday, 20 May 12
The Future                    • Rails: the next 5 years                      @wycats                      http://lanyrd.co...
DHH, RailsConf 2011 @ 44:20      Source: http://www.youtube.com/watch?v=cGdCI2HhfAU&feature=player_profilepage#start=44:20S...
Meteor is ComingSunday, 20 May 12
What To Use?Sunday, 20 May 12
Spoilt for Choice                    • JQuery       • Hogan                    • HAML         • DustJS                    ...
Spoilt for Choice                    • JQuery       • Hogan                    • HAML         • DustJS                    ...
Stop Building                      Big AppsSunday, 20 May 12
More Smaller                    ComponentsSunday, 20 May 12
Constant                    GreenfieldSunday, 20 May 12
Damage ControlSunday, 20 May 12
Isolate ComplexitySunday, 20 May 12
How to get                     startedSunday, 20 May 12
Don’t rewrite your                           app!                    • Rewriting is (almost) never a good                 ...
Incremental                        Enhancement.                    • Use client side templating for the                   ...
Incremental                       Enhancement.                    • Per User Role                    • Per DeviceSunday, 2...
Build the UI first                    • Only add API features as required                    • Mock your serverSunday, 20 ...
Ember Rails                    • Clientside Framework                    • Handlebars                    • Rails integrati...
Thanks               • @secoif               • blog.timoxley.com               • Come talk to me about Node & JS          ...
campjs.comSunday, 20 May 12
Upcoming SlideShare
Loading in...5
×

Benefits of Clientside templating for Red Dot Ruby

3,461

Published on

Explore the implic­a­tions & philosophy of client-side ren­der­ing & templating.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,461
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Benefits of Clientside templating for Red Dot Ruby"

  1. 1. Rendering Client-side Implications & philosophy of client-side rendering.Sunday, 20 May 12
  2. 2. Me • Tim Oxley • @secoif • Freelance Node.js Consultant • blog.timoxley.comSunday, 20 May 12
  3. 3. Who should be listening?Sunday, 20 May 12
  4. 4. Anyone who calls themselves a “web master”Sunday, 20 May 12
  5. 5. “Javascript is just for validations & animations.”Sunday, 20 May 12
  6. 6. “My site is living in 2001, I have a pantry full of ajax powered spaghetti, and basically everything is a new page refresh. How can I make it slick?”Sunday, 20 May 12
  7. 7. What is Clientside Templating?Sunday, 20 May 12
  8. 8. What is Clientside Templating? 1. Server sends Client templates + ‘application code’. 2. Application code initialises the View 3. As user interacts with view, JSON data is transferred between client and server. 4. Application code applies templates to the data to update the view.Sunday, 20 May 12
  9. 9. Downsides of Server-side ArchitectureSunday, 20 May 12
  10. 10. CouplingSunday, 20 May 12
  11. 11. Server-side Load • Infrastructure • Dynamic pages can be expensive. • CachingSunday, 20 May 12
  12. 12. <li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLight uiListVerticalItemBorder" data-ft="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}" id="stream_story_4fae38784e6a97a91051591"><div class="storyHighlightIndicatorWrapper"></div><div class="storyContent"><div class="UIImageBlock clearfix"><a class="actorPhoto UIImageBlock_Image UIImageBlock_MED_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" aria-hidden="true" data- ft="{&quot;type&quot;:60,&quot;tn&quot;:&quot;u003C&quot;}" data-hovercard="/ajax/hovercard/hovercard.php?id=100000938073354"><img class="uiProfilePhoto profilePic uiProfilePhotoLarge img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><div class="storyInnerContent UIImageBlock_Content UIImageBlock_MED_Content"><div class="uiInlineBlock mlm uiPopover highlightSelector uiStreamHide" data-ft="{&quot;type&quot;:55,&quot;tn&quot;:&quot;V&quot;}" id="uisj4x_119"><a class="highlightSelectorButton uiStreamContextButton uiPopoverTriggerElem" href="#" aria-haspopup="true" role="menu" rel="toggle" id="uisj4x_120">Options</a></div><div class="mainWrapper"><h6 class="uiStreamMessage uiStreamHeadline" data-ft="{&quot;tn&quot;:&quot;:&quot;}"><div class="actorDescription actorName" data-ft="{&quot;type&quot;:2,&quot;tn&quot;:&quot;:&quot;}"><a href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/ hovercard/user.php?id=100000938073354">Bonnie Felice Newman</a></div></h6><h6 class="uiStreamMessage" data-ft="{&quot;type&quot;:1,&quot;tn&quot;:&quot;K&quot;}"> <span class="messageBody" data- ft="{&quot;type&quot;:3}">Faces with beards &gt; faces without beards</span></h6><form rel="async" class="live_393867123987887_131325686911214 commentable_item autoexpand_mode" method="post" action="/ ajax/ufi/modify.php" data-live="{&quot;seq&quot;:76754027}" onsubmit="return Event.__inlineSubmit(this,event)" id="uisj4x_153"><input type="hidden" name="charset_test" value="€,´,€,´,水,Д,Є"><input type="hidden" name="fb_dtsg" value="AQB5BhPE" autocomplete="off"><input type="hidden" autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot;100000938073354&quot;,&quot;target_fbid&quot;:&quot; 393867123987887&quot;,&quot;target_profile_id&quot;:&quot;100000938073354&quot;,&quot;type_id&quot;:&quot;22&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot; 0&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot;1336804069&quot;,&quot;check_hash&quot;:&quot;AQCF-FbqG1g6gOoP&quot;,&quot;source&quot;:&quot;1&quot;}"><span class="uiStreamFooter"><span class="UIActionLinks UIActionLinks_bottom" data-ft="{&quot;tn&quot;:&quot;=&quot;,&quot;type&quot;:20}"><button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button> · <label class="uiLinkButton comment_link" title="Leave a comment"><input data-ft="{&quot;type&quot;:24,&quot;tn&quot;:&quot;S&quot;}" type="button" value="Comment" onclick="return fc_click(this);"></label> · </span><span class="uiStreamSource" data-ft="{&quot;type&quot;:26,&quot;tn&quot;:&quot;N&quot;}"><a href="/bonnie.felice/posts/ 393867123987887"><abbr title="Saturday, 12 May 2012 at 16:27" data-utime="1336804069" class="timestamp livetimestamp">3 hours ago</abbr></a></span> · <a data-hover="tooltip" title="Shared with: Bonnies friends of friends" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator" href="#"><i class="lock img sp_66rfdh sx_eda74d"></i></a></span><div><ul class="uiList uiUfi focus_target fbUfi" data- ft="{&quot;type&quot;:30,&quot;tn&quot;:&quot;]&quot;}"><li class="ufiNub uiListItem uiListVerticalItemBorder"><i></i></li><li class="hidden_elem uiUfiLike uiListItem uiListVerticalItemBorder" data- ft="{&quot;type&quot;:31}"></li><li class="translateable_info hidden_elem uiListItem uiListVerticalItemBorder"><input type="hidden" autocomplete="off" name="translate_on_load" value=""></li><li class="uiUfiComments uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:32}"><ul class="commentList"><li class="uiUfiComment comment_76754027 ufiItem ufiItem" data- ft="{&quot;tn&quot;:&quot;R&quot;}"><div class="UIImageBlock clearfix uiUfiActorBlock"><a class="actorPic UIImageBlock_Image UIImageBlock_SMALL_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" data-ft="{&quot;type&quot;:34,&quot;tn&quot;:&quot;T&quot;}" data-hovercard="/ajax/hovercard/user.php?id=100000938073354"><img class="uiProfilePhoto uiProfilePhotoMedium img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><a data-hover="tooltip" title="Hide as Spam" class="commentRemoverButton UIImageBlock_Ext uiCloseButton" href="#" role="button" rel="async-post" ajaxify="/ajax/ufi/one_click_remove? comment_id=76754027&amp;commenter_id=100000938073354&amp;profile_id=100000938073354&amp;post_fbid=393867517321181&amp;can_remove=0&amp;can_report=1&amp;can_edit=0&amp;is_spam=0&amp;r eport_link=%2Fajax%2Freport.php%3Fcontent_type%3D74%26cid%3D393867517321181%26rid%3D100000938073354%26cid2%3D0%26profile%3D100000938073354%26h %3DAfgqqM70GpkG7LcJ&amp;feedback_params=%7B%22actor%22%3A%22100000938073354%22%2C%22target_fbid%22%3A%22393867123987887%22%2C%22target_profile_id%22%3A%22100000938073354%22%2C %22type_id%22%3A%2222%22%2C%22assoc_obj_id%22%3A%22%22%2C%22source_app_id%22%3A%220%22%2C%22extra_story_params%22%3A%5B%5D%2C%22content_timestamp%22%3A%221336804069%22%2C %22check_hash%22%3A%22AQCF-FbqG1g6gOoP%22%2C%22source%22%3A%221%22%7D"></a><div class="commentContent UIImageBlock_Content UIImageBlock_SMALL_Content" data-ft="{&quot;type&quot;: 33,&quot;tn&quot;:&quot;K&quot;}"><a class="actorName" href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;type&quot;:35,&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/hovercard/user.php? id=100000938073354">Bonnie Felice Newman</a> <span data-jsid="text" class="commentBody">Provided the faces are male, I suppose.</span><span></span><div class="commentActions fsm fwn fcg"><a class="uiLinkSubtle" href="/bonnie.felice/posts/393867123987887?comment_id=76754027&amp;offset=0&amp;total_comments=1" data-ft="{&quot;tn&quot;:&quot;N&quot;}"><abbr title="Saturday, 12 May 2012 at 16:29" data-utime="1336804155" class="timestamp livetimestamp">3 hours ago</abbr></a> · <span class="comment_like_76754027 fsm fwn fcg" data-ft="{&quot;type&quot;:36,&quot;tn&quot;:&quot;&gt;&quot;}"><button class="stat_elem as_link cmnt_like_link" type="submit" name="like_comment_id[76754027]" value="76754027" title="Like this comment"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button></span></div></div></div></li></ul></li><li class="uiUfiAddComment clearfix uiUfiSmall ufiItem ufiItem uiListItem uiListVerticalItemBorder uiUfiAddCommentCollapsed" data-ft="{&quot;tn&quot;:&quot;[&quot;}"><div class="UIImageBlock clearfix mentionsAddComment"><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41628_1245243750_9374_q.jpg" alt=""><div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content"><div class="commentBox"><div class="uiMentionsInput textBoxContainer" id="uisj4x_147"><div class="highlighter"><div><span class="highlighterContent"></span></div></div><div class="uiTypeahead mentionsTypeahead" id="uisj4x_149"><div class="wrap"><input type="hidden" autocomplete="off" class="hiddenInput"><div class="innerWrap"><textarea class="enter_submit DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox mentionsTextarea textInput" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {JSCC.get(j5reBLCqEq0jyN8rnQ17).init(JSCC.get(j5reBLCqEq0jyN8rnQ18));;JSCC.get(j5reBLCqEq0jyN8rnQ18).init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get(j5reBLCqEq0jyN8rnQ 16).init({&quot;max&quot;:10}, null, JSCC.get(j5reBLCqEq0jyN8rnQ17));;;});" id="uisj4x_148" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-invalid="false" aria-owns="typeahead_list_uisj4x_149" role="textbox" onkeydown="Bootloader.loadComponents([&quot;control-textarea&quot;], function() { TextAreaControl.getInstance(this) }.bind(this)); ">Write a comment...</textarea></div></div></div><input type="hidden" autocomplete="off" class="mentionsHidden"></div></div><label class="mts commentBtn stat_elem hidden_elem optimistic_submit uiButton uiButtonConfirm" for="uisj4x_150"><input value="Comment" class="enter_submit_target" name="comment" type="submit" id="uisj4x_150"></label></div></div></li></ul></div><input type="hidden" name="link_data" value="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}"></form></div></div></div></div></li>Sunday, 20 May 12
  13. 13. <li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLight uiListVerticalItemBorder" data-ft="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}" id="stream_story_4fae38784e6a97a91051591"><div class="storyHighlightIndicatorWrapper"></div><div class="storyContent"><div class="UIImageBlock clearfix"><a class="actorPhoto UIImageBlock_Image UIImageBlock_MED_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" aria-hidden="true" data- ft="{&quot;type&quot;:60,&quot;tn&quot;:&quot;u003C&quot;}" data-hovercard="/ajax/hovercard/hovercard.php?id=100000938073354"><img class="uiProfilePhoto profilePic uiProfilePhotoLarge img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><div class="storyInnerContent UIImageBlock_Content UIImageBlock_MED_Content"><div class="uiInlineBlock mlm uiPopover highlightSelector uiStreamHide" data-ft="{&quot;type&quot;:55,&quot;tn&quot;:&quot;V&quot;}" id="uisj4x_119"><a class="highlightSelectorButton uiStreamContextButton uiPopoverTriggerElem" href="#" aria-haspopup="true" role="menu" rel="toggle" id="uisj4x_120">Options</a></div><div class="mainWrapper"><h6 class="uiStreamMessage uiStreamHeadline" data-ft="{&quot;tn&quot;:&quot;:&quot;}"><div class="actorDescription actorName" data-ft="{&quot;type&quot;:2,&quot;tn&quot;:&quot;:&quot;}"><a href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/ hovercard/user.php?id=100000938073354">Bonnie Felice Newman</a></div></h6><h6 class="uiStreamMessage" data-ft="{&quot;type&quot;:1,&quot;tn&quot;:&quot;K&quot;}"> <span class="messageBody" data- ft="{&quot;type&quot;:3}">Faces with beards &gt; faces without beards</span></h6><form rel="async" class="live_393867123987887_131325686911214 commentable_item autoexpand_mode" method="post" action="/ ajax/ufi/modify.php" data-live="{&quot;seq&quot;:76754027}" onsubmit="return Event.__inlineSubmit(this,event)" id="uisj4x_153"><input type="hidden" name="charset_test" value="€,´,€,´,水,Д,Є"><input type="hidden" Facebook Post + Comment name="fb_dtsg" value="AQB5BhPE" autocomplete="off"><input type="hidden" autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot;100000938073354&quot;,&quot;target_fbid&quot;:&quot; 393867123987887&quot;,&quot;target_profile_id&quot;:&quot;100000938073354&quot;,&quot;type_id&quot;:&quot;22&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot; 0&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot;1336804069&quot;,&quot;check_hash&quot;:&quot;AQCF-FbqG1g6gOoP&quot;,&quot;source&quot;:&quot;1&quot;}"><span class="uiStreamFooter"><span class="UIActionLinks UIActionLinks_bottom" data-ft="{&quot;tn&quot;:&quot;=&quot;,&quot;type&quot;:20}"><button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button> · <label class="uiLinkButton comment_link" title="Leave a comment"><input data-ft="{&quot;type&quot;:24,&quot;tn&quot;:&quot;S&quot;}" type="button" value="Comment" onclick="return fc_click(this);"></label> · </span><span class="uiStreamSource" data-ft="{&quot;type&quot;:26,&quot;tn&quot;:&quot;N&quot;}"><a href="/bonnie.felice/posts/ 393867123987887"><abbr title="Saturday, 12 May 2012 at 16:27" data-utime="1336804069" class="timestamp livetimestamp">3 hours ago</abbr></a></span> · <a data-hover="tooltip" title="Shared with: Bonnies = friends of friends" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator" href="#"><i class="lock img sp_66rfdh sx_eda74d"></i></a></span><div><ul class="uiList uiUfi focus_target fbUfi" data- ft="{&quot;type&quot;:30,&quot;tn&quot;:&quot;]&quot;}"><li class="ufiNub uiListItem uiListVerticalItemBorder"><i></i></li><li class="hidden_elem uiUfiLike uiListItem uiListVerticalItemBorder" data- ft="{&quot;type&quot;:31}"></li><li class="translateable_info hidden_elem uiListItem uiListVerticalItemBorder"><input type="hidden" autocomplete="off" name="translate_on_load" value=""></li><li class="uiUfiComments uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:32}"><ul class="commentList"><li class="uiUfiComment comment_76754027 ufiItem ufiItem" data- ft="{&quot;tn&quot;:&quot;R&quot;}"><div class="UIImageBlock clearfix uiUfiActorBlock"><a class="actorPic UIImageBlock_Image UIImageBlock_SMALL_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" data-ft="{&quot;type&quot;:34,&quot;tn&quot;:&quot;T&quot;}" data-hovercard="/ajax/hovercard/user.php?id=100000938073354"><img class="uiProfilePhoto uiProfilePhotoMedium img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><a data-hover="tooltip" title="Hide as Spam" class="commentRemoverButton UIImageBlock_Ext uiCloseButton" href="#" role="button" rel="async-post" ajaxify="/ajax/ufi/one_click_remove? 9.1K of Markup comment_id=76754027&amp;commenter_id=100000938073354&amp;profile_id=100000938073354&amp;post_fbid=393867517321181&amp;can_remove=0&amp;can_report=1&amp;can_edit=0&amp;is_spam=0&amp;r eport_link=%2Fajax%2Freport.php%3Fcontent_type%3D74%26cid%3D393867517321181%26rid%3D100000938073354%26cid2%3D0%26profile%3D100000938073354%26h %3DAfgqqM70GpkG7LcJ&amp;feedback_params=%7B%22actor%22%3A%22100000938073354%22%2C%22target_fbid%22%3A%22393867123987887%22%2C%22target_profile_id%22%3A%22100000938073354%22%2C %22type_id%22%3A%2222%22%2C%22assoc_obj_id%22%3A%22%22%2C%22source_app_id%22%3A%220%22%2C%22extra_story_params%22%3A%5B%5D%2C%22content_timestamp%22%3A%221336804069%22%2C %22check_hash%22%3A%22AQCF-FbqG1g6gOoP%22%2C%22source%22%3A%221%22%7D"></a><div class="commentContent UIImageBlock_Content UIImageBlock_SMALL_Content" data-ft="{&quot;type&quot;: 33,&quot;tn&quot;:&quot;K&quot;}"><a class="actorName" href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;type&quot;:35,&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/hovercard/user.php? id=100000938073354">Bonnie Felice Newman</a> <span data-jsid="text" class="commentBody">Provided the faces are male, I suppose.</span><span></span><div class="commentActions fsm fwn fcg"><a class="uiLinkSubtle" href="/bonnie.felice/posts/393867123987887?comment_id=76754027&amp;offset=0&amp;total_comments=1" data-ft="{&quot;tn&quot;:&quot;N&quot;}"><abbr title="Saturday, 12 May 2012 at 16:29" data-utime="1336804155" class="timestamp livetimestamp">3 hours ago</abbr></a> · <span class="comment_like_76754027 fsm fwn fcg" data-ft="{&quot;type&quot;:36,&quot;tn&quot;:&quot;&gt;&quot;}"><button class="stat_elem as_link cmnt_like_link" type="submit" name="like_comment_id[76754027]" value="76754027" title="Like this comment"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button></span></div></div></div></li></ul></li><li class="uiUfiAddComment clearfix uiUfiSmall ufiItem ufiItem uiListItem uiListVerticalItemBorder uiUfiAddCommentCollapsed" data-ft="{&quot;tn&quot;:&quot;[&quot;}"><div class="UIImageBlock clearfix mentionsAddComment"><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41628_1245243750_9374_q.jpg" alt=""><div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content"><div class="commentBox"><div class="uiMentionsInput textBoxContainer" id="uisj4x_147"><div class="highlighter"><div><span class="highlighterContent"></span></div></div><div class="uiTypeahead mentionsTypeahead" id="uisj4x_149"><div class="wrap"><input type="hidden" autocomplete="off" class="hiddenInput"><div class="innerWrap"><textarea class="enter_submit DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox mentionsTextarea textInput" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {JSCC.get(j5reBLCqEq0jyN8rnQ17).init(JSCC.get(j5reBLCqEq0jyN8rnQ18));;JSCC.get(j5reBLCqEq0jyN8rnQ18).init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get(j5reBLCqEq0jyN8rnQ 16).init({&quot;max&quot;:10}, null, JSCC.get(j5reBLCqEq0jyN8rnQ17));;;});" id="uisj4x_148" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-invalid="false" aria-owns="typeahead_list_uisj4x_149" role="textbox" onkeydown="Bootloader.loadComponents([&quot;control-textarea&quot;], function() { TextAreaControl.getInstance(this) }.bind(this)); ">Write a comment...</textarea></div></div></div><input type="hidden" autocomplete="off" class="mentionsHidden"></div></div><label class="mts commentBtn stat_elem hidden_elem optimistic_submit uiButton uiButtonConfirm" for="uisj4x_150"><input value="Comment" class="enter_submit_target" name="comment" type="submit" id="uisj4x_150"></label></div></div></li></ul></div><input type="hidden" name="link_data" value="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}"></form></div></div></div></div></li>Sunday, 20 May 12
  14. 14. Sunday, 20 May 12
  15. 15. <li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLight uiListVerticalItemBorder" data-ft="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}" id="stream_story_4fae38784e6a97a91051591"><div class="storyHighlightIndicatorWrapper"></div><div class="storyContent"><div class="UIImageBlock clearfix"><a class="actorPhoto UIImageBlock_Image UIImageBlock_MED_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" aria-hidden="true" data- ft="{&quot;type&quot;:60,&quot;tn&quot;:&quot;u003C&quot;}" data-hovercard="/ajax/hovercard/hovercard.php?id=100000938073354"><img class="uiProfilePhoto profilePic uiProfilePhotoLarge img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><div class="storyInnerContent UIImageBlock_Content UIImageBlock_MED_Content"><div class="uiInlineBlock mlm uiPopover highlightSelector uiStreamHide" data-ft="{&quot;type&quot;:55,&quot;tn&quot;:&quot;V&quot;}" id="uisj4x_119"><a class="highlightSelectorButton uiStreamContextButton uiPopoverTriggerElem" href="#" aria-haspopup="true" role="menu" rel="toggle" id="uisj4x_120">Options</a></div><div class="mainWrapper"><h6 class="uiStreamMessage uiStreamHeadline" data-ft="{&quot;tn&quot;:&quot;:&quot;}"><div class="actorDescription actorName" data-ft="{&quot;type&quot;:2,&quot;tn&quot;:&quot;:&quot;}"><a href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/ hovercard/user.php?id=100000938073354">Bonnie Felice Newman</a></div></h6><h6 class="uiStreamMessage" data-ft="{&quot;type&quot;:1,&quot;tn&quot;:&quot;K&quot;}"> <span class="messageBody" data- ft="{&quot;type&quot;:3}">Faces with beards &gt; faces without beards</span></h6><form rel="async" class="live_393867123987887_131325686911214 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{&quot;seq&quot;:76754027}" onsubmit="return Event.__inlineSubmit(this,event)" id="uisj4x_153"><input type="hidden" name="charset_test" value="€,´,€,´, 水,Д,Є"><input type="hidden" name="fb_dtsg" value="AQB5BhPE" autocomplete="off"><input type="hidden" autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot; 100000938073354&quot;,&quot;target_fbid&quot;:&quot;393867123987887&quot;,&quot;target_profile_id&quot;:&quot;100000938073354&quot;,&quot;type_id&quot;:&quot; 22&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot;0&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot; 1336804069&quot;,&quot;check_hash&quot;:&quot;AQCF-FbqG1g6gOoP&quot;,&quotot;source&quot;:&quot;1&quot;}"><span class="uiStreamFooter"><span class="UIActionLinks UIActionLinks_bottom" data- ft="{&quot;tn&quot;:&quot;=&quot;,&quot;type&quot;:20}"><button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;" data- ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button> · <label class="uiLinkButton comment_link" title="Leave a comment"><input data-ft="{&quot;type&quot;:24,&quot;tn&quot;:&quot;S&quot;}" type="button" value="Comment" onclick="return fc_click(this);"></label> · </span><span class="uiStreamSource" data- ft="{&quot;type&quot;:26,&quot;tn&quot;:&quot;N&quot;}"><a href="/bonnie.felice/posts/393867123987887"><abbr title="Saturday, 12 May 2012 at 16:27" data-utime="1336804069" class="timestamp livetimestamp">3 hours ago</abbr></a></span> · <a data-hover="tooltip" title="Shared with: Bonnies friends of friends" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator" href="#"><i class="lock img sp_66rfdh sx_eda74d"></i></a></span><div><ul class="uiList uiUfi focus_target fbUfi" data-ft="{&quot;type&quot;:30,&quot;tn&quot;:&quot;]&quot;}"><li class="ufiNub uiListItem uiListVerticalItemBorder"><i></i></ li><li class="hidden_elem uiUfiLike uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:31}"></li><li class="translateable_info hidden_elem uiListItem uiListVerticalItemBorder"><input type="hidden" autocomplete="off" name="translate_on_load" value=""></li><li class="uiUfiComments uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:32}"><ul class="commentList"><li class="uiUfiComment comment_76754027 ufiItem ufiItem" data-ft="{&quot;tn&quot;:&quot;R&quot;}"><div class="UIImageBlock clearfix uiUfiActorBlock"><a class="actorPic UIImageBlock_Image UIImageBlock_SMALL_Image" href="http:// www.facebook.com/bonnie.felice" tabindex="-1" data-ft="{&quot;type&quot;:34,&quot;tn&quot;:&quot;T&quot;}" data-hovercard="/ajax/hovercard/user.php?id=100000938073354"><img class="uiProfilePhoto uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><a data-hover="tooltip" title="Hide as Spam" class="commentRemoverButton UIImageBlock_Ext uiCloseButton" href="#" role="button" rel="async-post" ajaxify="/ajax/ufi/one_click_remove? comment_id=76754027&amp;commenter_id=100000938073354&amp;profile_id=100000938073354&amp;post_fbid=393867517321181&amp;can_remove=0&amp;can_report=1&amp;can_edit=0&amp;is_spam=0&amp;r eport_link=%2Fajax%2Freport.php%3Fcontent_type%3D74%26cid%3D393867517321181%26rid%3D100000938073354%26cid2%3D0%26profile%3D100000938073354%26h %3DAfgqqM70GpkG7LcJ&amp;feedback_params=%7B%22actor%22%3A%22100000938073354%22%2C%22target_fbid%22%3A%22393867123987887%22%2C%22target_profile_id%22%3A%22100000938073354%22%2C %22type_id%22%3A%2222%22%2C%22assoc_obj_id%22%3A%22%22%2C%22source_app_id%22%3A%220%22%2C%22extra_story_params%22%3A%5B%5D%2C%22content_timestamp%22%3A%221336804069%22%2C %22check_hash%22%3A%22AQCF-FbqG1g6gOoP%22%2C%22source%22%3A%221%22%7D"></a><div class="commentContent UIImageBlock_Content UIImageBlock_SMALL_Content" data-ft="{&quot;type&quot;: 33,&quot;tn&quot;:&quot;K&quot;}"><a class="actorName" href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;type&quot;:35,&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/hovercard/user.php? id=100000938073354">Bonnie Felice Newman</a> <span data-jsid="text" class="commentBody">Provided the faces are male, I suppose.</span><span></span><div class="commentActions fsm fwn fcg"><a class="uiLinkSubtle" href="/bonnie.felice/posts/393867123987887?comment_id=76754027&amp;offset=0&amp;total_comments=1" data-ft="{&quot;tn&quot;:&quot;N&quot;}"><abbr title="Saturday, 12 May 2012 at 16:29" data-utime="1336804155" class="timestamp livetimestamp">3 hours ago</abbr></a> · <span class="comment_like_76754027 fsm fwn fcg" data-ft="{&quot;type&quot;:36,&quot;tn&quot;:&quot;&gt;&quot;}"><button class="stat_elem as_link cmnt_like_link" type="submit" name="like_comment_id[76754027]" value="76754027" title="Like this comment"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button></span></div></div></div></li></ul></li><li class="uiUfiAddComment clearfix uiUfiSmall ufiItem ufiItem uiListItem uiListVerticalItemBorder uiUfiAddCommentCollapsed" data-ft="{&quot;tn&quot;:&quot;[&quot;}"><div class="UIImageBlock clearfix mentionsAddComment"><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41628_1245243750_9374_q.jpg" alt=""><div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content"><div class="commentBox"><div class="uiMentionsInput textBoxContainer" id="uisj4x_147"><div class="highlighter"><div><span class="highlighterContent"></span></div></div><div class="uiTypeahead mentionsTypeahead" id="uisj4x_149"><div class="wrap"><input type="hidden" autocomplete="off" class="hiddenInput"><div class="innerWrap"><textarea class="enter_submit DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox mentionsTextarea textInput" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {JSCC.get(j5reBLCqEq0jyN8rnQ17).init(JSCC.get(j5reBLCqEq0jyN8rnQ18));;JSCC.get(j5reBLCqEq0jyN8rnQ18).init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get(j5reBLCqEq0jyN8rnQ 16).init({&quot;max&quot;:10}, null, JSCC.get(j5reBLCqEq0jyN8rnQ17));;;});" id="uisj4x_148" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-invalid="false" aria-owns="typeahead_list_uisj4x_149" role="textbox" onkeydown="Bootloader.loadComponents([&quot;control-textarea&quot;], function() { TextAreaControl.getInstance(this) }.bind(this)); ">Write a comment...</textarea></div></div></div><input type="hidden" autocomplete="off" class="mentionsHidden"></div></div><label class="mts commentBtn stat_elem hidden_elem optimistic_submit uiButton uiButtonConfirm" for="uisj4x_150"><input value="Comment" class="enter_submit_target" name="comment" type="submit" id="uisj4x_150"></label></div></div></li></ul></div><input type="hidden" name="link_data" value="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}"></form></div></div></div></div></li>Sunday, 20 May 12
  16. 16. <li class="uiUnifiedStory uiStreamStory genericStreamStory uiStreamBoulderHighlight aid_100000938073354 uiListItem uiListLight uiListVerticalItemBorder" data-ft="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}" id="stream_story_4fae38784e6a97a91051591"><div class="storyHighlightIndicatorWrapper"></div><div class="storyContent"><div class="UIImageBlock clearfix"><a class="actorPhoto UIImageBlock_Image UIImageBlock_MED_Image" href="http://www.facebook.com/bonnie.felice" tabindex="-1" aria-hidden="true" data- ft="{&quot;type&quot;:60,&quot;tn&quot;:&quot;u003C&quot;}" data-hovercard="/ajax/hovercard/hovercard.php?id=100000938073354"><img class="uiProfilePhoto profilePic uiProfilePhotoLarge img" src="http:// profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><div class="storyInnerContent UIImageBlock_Content UIImageBlock_MED_Content"><div class="uiInlineBlock mlm uiPopover highlightSelector uiStreamHide" data-ft="{&quot;type&quot;:55,&quot;tn&quot;:&quot;V&quot;}" id="uisj4x_119"><a class="highlightSelectorButton uiStreamContextButton uiPopoverTriggerElem" href="#" aria-haspopup="true" role="menu" rel="toggle" id="uisj4x_120">Options</a></div><div class="mainWrapper"><h6 class="uiStreamMessage uiStreamHeadline" data-ft="{&quot;tn&quot;:&quot;:&quot;}"><div class="actorDescription actorName" data-ft="{&quot;type&quot;:2,&quot;tn&quot;:&quot;:&quot;}"><a href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/ hovercard/user.php?id=100000938073354">Bonnie Felice Newman</a></div></h6><h6 class="uiStreamMessage" data-ft="{&quot;type&quot;:1,&quot;tn&quot;:&quot;K&quot;}"> <span class="messageBody" data- ft="{&quot;type&quot;:3}">Faces with beards &gt; faces without beards</span></h6><form rel="async" class="live_393867123987887_131325686911214 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{&quot;seq&quot;:76754027}" onsubmit="return Event.__inlineSubmit(this,event)" id="uisj4x_153"><input type="hidden" name="charset_test" value="€,´,€,´, 水,Д,Є"><input type="hidden" name="fb_dtsg" value="AQB5BhPE" autocomplete="off"><input type="hidden" autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot; 100000938073354&quot;,&quot;target_fbid&quot;:&quot;393867123987887&quot;,&quot;target_profile_id&quot;:&quot;100000938073354&quot;,&quot;type_id&quot;:&quot; 22&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot;0&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot; 1336804069&quot;,&quot;check_hash&quot;:&quot;AQCF-FbqG1g6gOoP&quot;,&quotot;source&quot;:&quot;1&quot;}"><span class="uiStreamFooter"><span class="UIActionLinks UIActionLinks_bottom" data- ft="{&quot;tn&quot;:&quot;=&quot;,&quot;type&quot;:20}"><button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;" data- ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button> · <label class="uiLinkButton comment_link" title="Leave a comment"><input data-ft="{&quot;type&quot;:24,&quot;tn&quot;:&quot;S&quot;}" type="button" value="Comment" onclick="return fc_click(this);"></label> · </span><span class="uiStreamSource" data- ft="{&quot;type&quot;:26,&quot;tn&quot;:&quot;N&quot;}"><a href="/bonnie.felice/posts/393867123987887"><abbr title="Saturday, 12 May 2012 at 16:27" data-utime="1336804069" class="timestamp livetimestamp">3 16bytes hours ago</abbr></a></span> · <a data-hover="tooltip" title="Shared with: Bonnies friends of friends" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator" href="#"><i class="lock img sp_66rfdh sx_eda74d"></i></a></span><div><ul class="uiList uiUfi focus_target fbUfi" data-ft="{&quot;type&quot;:30,&quot;tn&quot;:&quot;]&quot;}"><li class="ufiNub uiListItem uiListVerticalItemBorder"><i></i></ li><li class="hidden_elem uiUfiLike uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:31}"></li><li class="translateable_info hidden_elem uiListItem uiListVerticalItemBorder"><input type="hidden" autocomplete="off" name="translate_on_load" value=""></li><li class="uiUfiComments uiListItem uiListVerticalItemBorder" data-ft="{&quot;type&quot;:32}"><ul class="commentList"><li class="uiUfiComment comment_76754027 ufiItem ufiItem" data-ft="{&quot;tn&quot;:&quot;R&quot;}"><div class="UIImageBlock clearfix uiUfiActorBlock"><a class="actorPic UIImageBlock_Image UIImageBlock_SMALL_Image" href="http:// www.facebook.com/bonnie.felice" tabindex="-1" data-ft="{&quot;type&quot;:34,&quot;tn&quot;:&quot;T&quot;}" data-hovercard="/ajax/hovercard/user.php?id=100000938073354"><img class="uiProfilePhoto uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/573465_100000938073354_159540580_q.jpg" alt=""></a><a data-hover="tooltip" title="Hide as Spam" class="commentRemoverButton UIImageBlock_Ext uiCloseButton" href="#" role="button" rel="async-post" ajaxify="/ajax/ufi/one_click_remove? comment_id=76754027&amp;commenter_id=100000938073354&amp;profile_id=100000938073354&amp;post_fbid=393867517321181&amp;can_remove=0&amp;can_report=1&amp;can_edit=0&amp;is_spam=0&amp;r eport_link=%2Fajax%2Freport.php%3Fcontent_type%3D74%26cid%3D393867517321181%26rid%3D100000938073354%26cid2%3D0%26profile%3D100000938073354%26h %3DAfgqqM70GpkG7LcJ&amp;feedback_params=%7B%22actor%22%3A%22100000938073354%22%2C%22target_fbid%22%3A%22393867123987887%22%2C%22target_profile_id%22%3A%22100000938073354%22%2C %22type_id%22%3A%2222%22%2C%22assoc_obj_id%22%3A%22%22%2C%22source_app_id%22%3A%220%22%2C%22extra_story_params%22%3A%5B%5D%2C%22content_timestamp%22%3A%221336804069%22%2C %22check_hash%22%3A%22AQCF-FbqG1g6gOoP%22%2C%22source%22%3A%221%22%7D"></a><div class="commentContent UIImageBlock_Content UIImageBlock_SMALL_Content" data-ft="{&quot;type&quot;: 33,&quot;tn&quot;:&quot;K&quot;}"><a class="actorName" href="http://www.facebook.com/bonnie.felice" data-ft="{&quot;type&quot;:35,&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/hovercard/user.php? id=100000938073354">Bonnie Felice Newman</a> <span data-jsid="text" class="commentBody">Provided the faces are male, I suppose.</span><span></span><div class="commentActions fsm fwn fcg"><a class="uiLinkSubtle" href="/bonnie.felice/posts/393867123987887?comment_id=76754027&amp;offset=0&amp;total_comments=1" data-ft="{&quot;tn&quot;:&quot;N&quot;}"><abbr title="Saturday, 12 May 2012 at 16:29" data-utime="1336804155" class="timestamp livetimestamp">3 hours ago</abbr></a> · <span class="comment_like_76754027 fsm fwn fcg" data-ft="{&quot;type&quot;:36,&quot;tn&quot;:&quot;&gt;&quot;}"><button class="stat_elem as_link cmnt_like_link" type="submit" name="like_comment_id[76754027]" value="76754027" title="Like this comment"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button></span></div></div></div></li></ul></li><li class="uiUfiAddComment clearfix uiUfiSmall ufiItem ufiItem uiListItem uiListVerticalItemBorder uiUfiAddCommentCollapsed" data-ft="{&quot;tn&quot;:&quot;[&quot;}"><div class="UIImageBlock clearfix mentionsAddComment"><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41628_1245243750_9374_q.jpg" alt=""><div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content"><div class="commentBox"><div class="uiMentionsInput textBoxContainer" id="uisj4x_147"><div class="highlighter"><div><span class="highlighterContent"></span></div></div><div class="uiTypeahead mentionsTypeahead" id="uisj4x_149"><div class="wrap"><input type="hidden" autocomplete="off" class="hiddenInput"><div class="innerWrap"><textarea class="enter_submit DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox mentionsTextarea textInput" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {JSCC.get(j5reBLCqEq0jyN8rnQ17).init(JSCC.get(j5reBLCqEq0jyN8rnQ18));;JSCC.get(j5reBLCqEq0jyN8rnQ18).init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get(j5reBLCqEq0jyN8rnQ 16).init({&quot;max&quot;:10}, null, JSCC.get(j5reBLCqEq0jyN8rnQ17));;;});" id="uisj4x_148" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-invalid="false" aria-owns="typeahead_list_uisj4x_149" role="textbox" onkeydown="Bootloader.loadComponents([&quot;control-textarea&quot;], function() { TextAreaControl.getInstance(this) }.bind(this)); ">Write a comment...</textarea></div></div></div><input type="hidden" autocomplete="off" class="mentionsHidden"></div></div><label class="mts commentBtn stat_elem hidden_elem optimistic_submit uiButton uiButtonConfirm" for="uisj4x_150"><input value="Comment" class="enter_submit_target" name="comment" type="submit" id="uisj4x_150"></label></div></div></li></ul></div><input type="hidden" name="link_data" value="{&quot;qid&quot;:&quot; 5741588654933905232&quot;,&quot;mf_story_key&quot;:&quot;6185231577928856054&quot;}"></form></div></div></div></div></li>Sunday, 20 May 12
  17. 17. Not DRY • Transfer of Data + Markup for every requestSunday, 20 May 12
  18. 18. Not Efficient • Transfer of Data + Markup for every requestSunday, 20 May 12
  19. 19. Dumb ClientsSunday, 20 May 12
  20. 20. LagSunday, 20 May 12
  21. 21. Unoptimal UXSunday, 20 May 12
  22. 22. Ugly Clientside CodeSunday, 20 May 12
  23. 23. Upsides of a Thick ClientSunday, 20 May 12
  24. 24. Free StuffSunday, 20 May 12
  25. 25. Good Architecture for FreeSunday, 20 May 12
  26. 26. Decoupled Design for FreeSunday, 20 May 12
  27. 27. “Good Architecture Allows Future Features” - Yehuda KatzSunday, 20 May 12
  28. 28. API For FreeSunday, 20 May 12
  29. 29. Multiplatform for Free API MOBILE MOBILE WEB ??? WEBSunday, 20 May 12
  30. 30. Structure for FreeSunday, 20 May 12
  31. 31. Separation of Responsibilities for FreeSunday, 20 May 12
  32. 32. Modular Caching for FreeSunday, 20 May 12
  33. 33. More Static Assets for FreeSunday, 20 May 12
  34. 34. Simplicity for FreeSunday, 20 May 12
  35. 35. Power for FreeSunday, 20 May 12
  36. 36. Benefits of TemplatingSunday, 20 May 12
  37. 37. Why not just template with straight JS? • Get a smaller stack • Simpler • You enjoy typing • Need it to be a little bit fasterSunday, 20 May 12
  38. 38. Sunday, 20 May 12
  39. 39. Why not just use JS? Uglies: • String concatenation and array.push + join() is unwieldy. • Multi-line strings are a pain in JS • Double vs. single quotesSunday, 20 May 12
  40. 40. displaySessions: function(sessions, domSelector) { var li,html; if (sessions.length === 0) { $(domSelector).html(<li class="info">No sessions available</li>); return; } html = sessions.map(function(s) { li = []; li.push(<li class="catalogCourse"><a href="#sessionDetails" data-id="); li.push(s.guid); li.push("></div><div class="coverArt"><img alt="" height="50" width="50" src="); li.push(s.cover_art_url); li.push(" /></div><div class="details">); li.push(s.html_description); li.push(</div><div class="rating"></div><div class="title">); li.push(s.title); li.push(</div><div class="summary">); li.push(s.start_on_in_words); li.push( -- ); li.push(s.end_on_in_words); li.push(</div></a></li>); return li.join(); }).join(); $(domSelector).html(html); },Sunday, 20 May 12
  41. 41. {{#if sessions.length}} <li class="info">No sessions available</li> {{else}} {{each sessions}} {{with this}} <li class="catalogCourse"><a href="#sessionDetails" data-id="{{guid}}"> <div class="coverArt"> <img alt="" height="50" width="50" src="{{cover_art_url}}" /> </div> <div class="details"> {{s.html_description}} </div> <div class="rating"></div> <div class="title">{{title}}</div> <div class="summary"> {{start_on_in_words}} -- {{end_on_in_words}} </div> </a></li> {{/with}} {{/each}} {{/if}}Sunday, 20 May 12
  42. 42. Template Engine Benefits • Readable • Maintainable • UsableSunday, 20 May 12
  43. 43. Downsides of Thick ClientSunday, 20 May 12
  44. 44. ComplexitySunday, 20 May 12
  45. 45. •I don’t like things that are different • A build process is usually required •Performance varies per device • More state managementSunday, 20 May 12
  46. 46. Finding the Sweet SpotSunday, 20 May 12
  47. 47. The Sweet Spot Mostly Serverside rendering + JSON Only Render Serverside via Ajax with Layout with Client Rendering + Ajax clientside Everything else HTML templates rendered with JS 100% Serverside 100% ClientsideSunday, 20 May 12
  48. 48. Hybrid Model • Twitter/Facebook/Google all render HTML serverside for initial page load. • UX: “Loading…” vs ContentSunday, 20 May 12
  49. 49. Hybrid Model • Reduces the number of requests • Shares rendering load between client/serversideSunday, 20 May 12
  50. 50. The FutureSunday, 20 May 12
  51. 51. The Future • Rails: the next 5 years @wycats http://lanyrd.com/2012/railsconf/srhtg/ • Rails is just an API & that’s OK @maccman http://blog.alexmaccaw.com/rails-is-just-and-api-and-that-s-okSunday, 20 May 12
  52. 52. DHH, RailsConf 2011 @ 44:20 Source: http://www.youtube.com/watch?v=cGdCI2HhfAU&feature=player_profilepage#start=44:20Sunday, 20 May 12
  53. 53. Meteor is ComingSunday, 20 May 12
  54. 54. What To Use?Sunday, 20 May 12
  55. 55. Spoilt for Choice • JQuery • Hogan • HAML • DustJS • Mustache • Handlebars • Underscore • DoT • EJSSunday, 20 May 12
  56. 56. Spoilt for Choice • JQuery • Hogan • HAML • DustJS • Mustache • Handlebars • Underscore • DoT • EJSSunday, 20 May 12
  57. 57. Stop Building Big AppsSunday, 20 May 12
  58. 58. More Smaller ComponentsSunday, 20 May 12
  59. 59. Constant GreenfieldSunday, 20 May 12
  60. 60. Damage ControlSunday, 20 May 12
  61. 61. Isolate ComplexitySunday, 20 May 12
  62. 62. How to get startedSunday, 20 May 12
  63. 63. Don’t rewrite your app! • Rewriting is (almost) never a good idea.Sunday, 20 May 12
  64. 64. Incremental Enhancement. • Use client side templating for the most used parts of the app, where it makes the biggest difference.Sunday, 20 May 12
  65. 65. Incremental Enhancement. • Per User Role • Per DeviceSunday, 20 May 12
  66. 66. Build the UI first • Only add API features as required • Mock your serverSunday, 20 May 12
  67. 67. Ember Rails • Clientside Framework • Handlebars • Rails integrationSunday, 20 May 12
  68. 68. Thanks • @secoif • blog.timoxley.com • Come talk to me about Node & JS • Interested in new opportunitiesSunday, 20 May 12
  69. 69. campjs.comSunday, 20 May 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×