On Friday 12th November I attended the Full Frontal Conference. I wrote up my notes for some of the guys at work, and I thought it might be useful to post it here too!
Let me know of any errors or omissions and I’ll fix them – I have copied them straight from my notes so there might be a few errata!
Full Frontal Javascript Conference Notes
How HTML5 will change the Framework Landscape
Alex Russell (Google)
Alex talked about how quickly we should be able to introduce new HTML5, CSS3 and Javascript stuff to websites and web apps, and the answer was: do it now! Browsers will have to catch up with the pace of development, and the more people develop apps that take advantage of advanced techniques, the sooner non-conforming browsers will have to get on board (a bit like what we’ve done with the Dashboard).
JS libraries have helped with this convergence, smoothing over the cross-browser issues in e.g. AJAX, but we need to be careful that they don’t become bloated. Big companies will pay to develop their own library, which can be super-slimmed-down, but for the rest of us we need to be careful.
There can be a reliance on JS libraries to replace HTML semantics, and since JS blocks rendering as it processes it can slow down pages. HTML should be the platform we build on, not JS!
Mobile browsing is an interesting case, as people tend to change their phone every 12 months, so get an updated browser, which is a lot sooner than their computer.
He also talked about the Chrome Web Store (https://chrome.google.com/webstore/comingsoon) which will allow people to sell Apps online, which will use Chrome’s advanced features. This will hopefully encourage other browsers to introduce features to their sites so Web Apps sold through the Chrome Web Store can be accessed in e.g. Firefox.
Lastly, he mentioned the Chrome Frame plugin for IE which is simply a meta tag in the head which will use the Google Chrome Frame plugin, if installed, and if not will ask users if they want to install it. The plugin allows IE to use Chromes rendering and Javascript engine to show webpages. Definitely something for us to think about using.
About the Peer-to-Peer web
Jan Lehnardt (CouchDB)
This talk was about the mobile web and how it differs from desktop computing. It is different enough to need a rethink of the architecture of the web. Mobiles don’t always have connectivity, and when they do, it can be variable in speed. But there were more laptops sold in the first 6 months of 2010 than desktops, and more smartphones.
The obvious differences in mobile web (form factor, touch navigation, connectivity and battery life) are being addressed, by mobile optimised sites, but the User Experience for the mobile web is being approached in the same direction as for desktop. The web is currently centralised, in services like Facebook, Twitter etc, but on the mobile web the local content is king.
Ideally we want the web on the device, which updates when we have connectivity (in the same way that you can write an email when you’re not connected to the net, press ‘send’ and the email client will send it when it next connects to the net.
He introduced CouchDB, an Open Source, portable system for distributing and syncing data. It uses the same method as Lotus Notes Sync (and, I think, Dropbox) where you can update stuff locally and when you are connected it will write it to a remote server. It will sync both data and apps.
Batshit crazy stuff you’ll be able to do in browsers
Paul Rouget (Mozilla)
New HTML5 tools such as Web Sockets, File API and WebGL are giving Javascript a new lease of life.
Web Sockets is a persistent connection between browser and server, which is bidirectional and also allows you to push stuff to the browser from the server. Unfortunately the wifi at the venue wasn’t good enough for Paul to show us his Web Sockets demo, but apparently it was great!
The File API is an interface that allows you to read local files. Paul’s demo was a drag and drop file uploader, where you could drag and image onto a web browser, crop it, colourise it, add other images on top of it, manipulate it, all client-side. It’s a powerful tool to allow you to do a lot before even communicating with the server.
But the graphics stuff was the most impressive. JavaScript can use HTML5’s new capabilities to use the power of the GPU for graphics rendering. So now, superfast Javascript, video and audio tags, the canvas element and SVG can use hardware acceleration to do some crazy stuff.
Paul demoed a face recognition and morphing browser tool, and then an amazing 3D canvas demo, flying around a landscape that was playing HTML video, where the landscape moves according to HTML audio, and that rendered in real time at an amazing framerate.
This graphics capability is definitely something we will be able to plug in to in the future, with something like the dashboard rendering faster.
Bringing the Same Origin Policy to its knees
Dan Webb (Twitter)
Dan spoke about the issues in building a client side API: whereas Twitter’s REST API is well-established, the client side API is much harder. An API needs to communicate wuith a service, authenticate a user, and then send/receive data. The issue with client side APIs is the Same Origin Policy – you cannot do an AJAX call to a different domain. In fact, you can’t do an AJAX call to a subdomain of your own domain, or to your domain with an https:// protocol.
The issue is usually got round with by having a proxy PHP file, which does a cURL request based on the variables you send through. But this is not ideal. All new browsers (IE8+, FF3.5+, Safari 4+, Chrome) have a protocol called Cross-Origin Resource Sharing (http://bit.ly/ffcors). But this might alienate up 60% of your users who use old IE.
You can use iframes, but if your iframe is on a different domain you still have a cross domain problem. However, you can use window.postMessage() in JS to post messages to an iframe (with some IE6/7 workarounds…). There is a library called easyXDM which wraps up this capability to allow you to speak between two windows.
Twitter is using tech like this to allow users to connect cross-domain, and is using OAuth2 as its authentication method, where everything is sent over https to keep it secure. Luckily, the client doesn’t need to have https to make this work, it’s getting the auth token that is sent back by Twitter to your iframe window that is done over https, and you can get that information easily from that.
Building a Game Engine for the Web
Paul Bakaus (Zynga)
Zynga have been working on building a 2.5D game engine (isometric 3D, like SimCity or Civ) using Javascript. The results are amazing. The new JS engines in Chrome, FF and Safari render environments at very high speeds.
One of the issues is that game dev and web dev are two different things. Getting the right tech ius important, and they’re using jQuery, because it is very even druiven, has lots of mouse/touch helpers.
He spoke about whether you concentrate on cross browser compatibility or make a platform specific product (as we have with the Dashboard). He suggests picking future technologies – if you’re developing something that might not be released for 6 months or a year, use the tech that will be current then!
They rejected using the canvas element to render everything, as it is slower, needs to be redrawn each cycle and, despite not using the DOM to place elements, does use the DOM to load images.
So their engine simply uses HTML. One trick they have is to use canvas to read an image file, check which pixels are transparent and build an image map, so only the pixels that are opaque are clickable. Very clever.
The demo was a Final Fantasy style adventure game, where you can walk around a map, enter houses and interact with items in the houses. The tiles for the ground and walls are just images, but they use CSS transforms to put images and videos on the walls, so you can play HTML5 videos on the walls of the houses.
IE doesn’t do CSS transforms, but does have a transform filter, which can rotate, scale and matrix HTML elements. TransformIE is a JS library that does this automatically. There are both 2D and 3D transforms, and although they are just using 2D transforms they are written as 3D transforms with a zero z movement, because 3D transforms are hardware accelerated whereas 2D transforms are not.
The engine uses Javascript on the front end and the backend – the server runs node.js – which means that much of the code can be reused. He estimated about 40% of the code was reused on the front and back end. This saves time and resource. Node.js looks interesting – it is event driven instead of process driven, and gives greater flexibility for their needs.
The characters that walk around the screen use CSS animations, using sprites and moving the background each frame. The main problem is that CSS animations move smoothly, which means the background image just scrolls. This can be overcome with a new easing technique called ‘steps’, so the animation jumps to each keyframe that you specify.
The game engine looked amazing, was very smooth and quick to render, and I look forward to seeing some of the product offerings they have next year.
The Future of Mobile Now
Brian LeRoux (PhoneGap)
Brian works for PhoneGap, which is a technology for creating apps for mobiles, smartphones and consoles. Symbian is still the biggest mobile OS, with Android growing a lot over the past year and iOS staying about the same. Windows 7 Mobile will be introduced soon.
With PhoneGap, the web is the platform for building apps. It’s supposed to fill the gap between OSs. Most mobile browsers are Webkit, but Opera is also popular. Firefox Mobile is expected soon, and Windows Phone 7 will have some sort of browser on it too.
PhoneGap supports iOS, Blackberry, Android, WebOS, Symbian and Windows Mobile.
There is a W3C Device API being developed, some of which overlaps with PhoneGap’s implementations. Amongst other things, there are standards for: Contacts, Calendar, Media Capture, System Info, Device and Gallery (supported by PG); Permissioning, Messaging, Policy Framework (not supported by PG); App Launching, Tasks and Communications Logs (maybe supported).
As mobile web becomes more supported, it makes sense to have a centralised way of accessing e.g. your phone’s Contacts, and PhoneGap and the W3C are helping to drive this.
Phone Gap allows you to create apps as web apps and port them to mobile (unlike Titanium, which converts them to native code). There are lots of (sometimes conflicting) standards, but these constraints can be good to make sure you make decent apps. But in making an app you can’t do better than researching your users first!
Pixel Pounding
Seb Lee-Delisle
Seb’s presentation was jaw-dropping. He talked about easy particle physics, showed a few examples of simple movement using canvas, and showed some examples of firework-type effects, smoke effects and some basic 3D rendering.
He moved on to talk about Unity 3D, a 3D rendering program that allows you to build using Javascript. It comes with a set of pre-existing textures, objects and effects, and is very simple for building up realistic 3D worlds and interacting with them.