{"id":8289,"date":"2012-12-31T14:00:26","date_gmt":"2012-12-31T22:00:26","guid":{"rendered":"http:\/\/www.perivision.net\/wordpress\/?p=8289"},"modified":"2013-03-06T09:38:01","modified_gmt":"2013-03-06T17:38:01","slug":"hyper-fast-html5-fastest-javascript-css-ever","status":"publish","type":"post","link":"https:\/\/www.perivision.net\/wordpress\/2012\/12\/hyper-fast-html5-fastest-javascript-css-ever\/","title":{"rendered":"Hyper Fast HTML5. Fastest Javascript CSS ever."},"content":{"rendered":"<p><a href=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/12\/famo.us-3D-html5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-8292\" title=\"famo.us 3D html5\" alt=\"\" src=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/12\/famo.us-3D-html5-300x193.jpg\" width=\"300\" height=\"193\" srcset=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/12\/famo.us-3D-html5-300x193.jpg 300w, https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/12\/famo.us-3D-html5.jpg 509w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>I cannot believe I did not write about this when I first saw it. <a href=\"http:\/\/us5.campaign-archive1.com\/?u=4656ba2b0a364690c8530bc1e&amp;id=675bbf010f\">Famo.us<\/a> is a firm that decided to see just how fast they could get an HTML5 to render.\u00a0 The test was to render 3D in using HTML only, no plugins. The way they got this page to run so fast is to NOT use the normal javascript and CSS libraries, but instead rewrite everything.\u00a0 From the ground up.\u00a0 This may seem extreme, but it does make sense.\u00a0 If you want to build the fastest car ever, you do not go out and get a 67 dodge dart and start modding. What is really impressive is high face count ( not 1mil faces like in gaming, but 100&#8217;s) 3D rendering on an iPad1.\u00a0 That is pretty impressive. So basically with this new code base, we can see pretty interesting interactive information displays and simple games using nothing but a web browser.\u00a0 For me, I would like to see some of this optimization extended to document rendering as well.<\/p>\n<p>Keep in mind this is a complete rewrite of libraries so that means you will have to rewrite your html5 page from the ground up.\u00a0 But if you need performance, it might be worth it. Right now its focused on 3D, but I think this can be useful for any non document display.<\/p>\n<p>Check out the video below.\u00a0 This is going to be a coding effort we will want to watch in 2013.<\/p>\n<p><span class=\"youtube\"><iframe loading=\"lazy\" title=\"YouTube video player\" class=\"youtube-player\" type=\"text\/html\" width=\"425\" height=\"344\" src=\"\/\/www.youtube.com\/embed\/fzBC20B5dsk?wmode=transparent&amp;fs=1&amp;hl=en&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;theme=dark\" frameborder=\"0\" allowfullscreen><\/iframe><\/span><\/p>\n<p>Also check out this snippet from the Sept newsletter.<\/p>\n<div>\n<div><strong>Roadmap<\/strong><\/div>\n<div>We will follow a similar rollout to that of Bootstrap. \u00a0When we launch we will make our GitHub project public and share the link to it with you. \u00a0We will also have a Google group where you can ask questions that Mark and I will respond directly. \u00a0We&#8217;ll also post updates via this newsletter, on a our blog (when it&#8217;s released) and our Twitter feed &#8211; @befamous. \u00a0We are spending a lot of time making sure that documentation is thorough and packed with examples. \u00a0In terms of timing, we hope to have the first full release some time later this year (depending on documentation, mostly).<\/div>\n<p><strong>Using famo.us<\/strong><br \/>\nDeveloping in famo.us is similar to Bootstrap. \u00a0In famo.us you start with an app layout and then mix and match any of the famo.us UI and UX components and widgets.<\/p>\n<p>In our &#8220;hello world&#8221; app, you&#8217;ll build a replica of the Twitter iPad app using the famo.us Cards App Layout (the same app layout used by Spotify, Twitter, Facebook and many other apps), and applying famo.us UI and UX components\u00a0and hooking those components into some example data. \u00a0Once you get the hang of famo.us, you can select alternative app layouts, and modify it them as much as you like. \u00a0In fact, you will eventually be able to create your own app layouts, components and themes, and share them with anyone or offer them in the famo.us marketplace as well. \u00a0Our goal is to enable developers to work with all of the popular app layouts found in native apps, plus we intend to create many more together with our community. \u00a0Each app layout will work on iOS and Android, both as a web app and inside a native app wrapper, and will have layouts that smoothly translate across phones, tablets and personal computers.<\/p>\n<\/div>\n<div class=\"SPOSTARBUST-Related-Posts\"><H3>Related Posts<\/H3><ul class=\"entry-meta\"><li class=\"SPOSTARBUST-Related-Post\"><a title=\"REAL 2015 &#8211; Where the Sensor meets the Maker\" href=\"https:\/\/www.perivision.net\/wordpress\/2015\/03\/real-2015-where-the-sensor-meets-the-maker\/\" rel=\"bookmark\">REAL 2015 &#8211; Where the Sensor meets the Maker<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"3D printed Food and Candy is great. But where I really see this is for cakes!\" href=\"https:\/\/www.perivision.net\/wordpress\/2014\/03\/3d-printed-food-and-candy-is-great-but-where-i-really-see-this-is-for-cakes\/\" rel=\"bookmark\">3D printed Food and Candy is great. But where I really see this is for cakes!<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"My First 3D print.  A stand for my Pebble\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/11\/my-first-3d-print-a-stand-for-my-pebble\/\" rel=\"bookmark\">My First 3D print.  A stand for my Pebble<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"Cool 3D printed Pebble SmartWatch stand.\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/08\/cool-3d-printed-pebble-smartwatch-stand\/\" rel=\"bookmark\">Cool 3D printed Pebble SmartWatch stand.<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"IKEA uses Augmented Reality.  It is highly effective\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/08\/ikea-uses-augmented-reality-it-is-highly-effective\/\" rel=\"bookmark\">IKEA uses Augmented Reality.  It is highly effective<\/a><\/li>\n<\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>I cannot believe I did not write about this when I first saw it. Famo.us is a firm that decided to see just how fast they could get an HTML5 to render.\u00a0 The test was to render 3D in using HTML only, no plugins. The way they got this page to run so fast is&hellip; <a class=\"read-more\" href=\"https:\/\/www.perivision.net\/wordpress\/2012\/12\/hyper-fast-html5-fastest-javascript-css-ever\/\">Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64,23,577,961,1291,1317,1074],"tags":[617,1935,392,1937,1936],"class_list":["post-8289","post","type-post","status-publish","format-standard","hentry","category-app-review","category-games","category-ipad","category-mobile","category-video-2","category-web3d-2","category-win-2","tag-3d","tag-famo-us","tag-html5","tag-html5-acceleration","tag-web-3d"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pjzQD-29H","_links":{"self":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/8289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/comments?post=8289"}],"version-history":[{"count":4,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/8289\/revisions"}],"predecessor-version":[{"id":8594,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/8289\/revisions\/8594"}],"wp:attachment":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/media?parent=8289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/categories?post=8289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/tags?post=8289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}