The near future of real web applications


Published on

There is a lot of noise being made about HTML5 as the new web technology to use and markets for apps as the best way to sell products and distribute applications to our end users. In reality there is not much new about it - all we are doing is treating the web as a distribution and sharing platform and browsers as the software to run our applications on. In this talk Christian Heilmann of Mozilla shows how in the near future application installation and in-app payments can happen on the most distributed market there is - the internet and through your browser. You will see how the technologies we build web sites in got an upgrade to allow us to build light-weight and focused applications that allow our end users to reach their goals faster and in a more re-usable fashion than with traditional ecommerce. Browsers and hardware are becoming more powerful each day, it is time to use that power in a sensible manner.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The near future of real web applications

  1. 1. Presentation: The web and browsers as the platform - exciting opportunities in new web technologyThe web and browsers as the platformExciting opportunities in new web technologyToday I want to show some new technologies and ideas you can use to make your ecommerce offerings more interesting and takeadvantage of the great new features modern hardware offers us.Misquoting
  2. 2. A lot of people quote Darwin as "survival of the fittest". The more interesting quote, however is: "It is not the strongest of the speciesthat survive, nor the most intelligent, but the ones most responsive to change." - today I will talk about some of those changes in webtechnology you might not be aware of.Forget the web - it is all about apps
  3. 3. In recent times the web has not made many headlines. Instead people seem to be spending their time and money on apps for theirsmartphones and tablets.Smartphones for everybody? Photo by Beatrice MurchThe big issue I have with this argument is that not everybody has a smart phone. And not everybody wants one. There is a lot to besaid for the web as it is.Checking in on app stores
  4. 4. Apple App StoreWith every cool device comes a cool app store where you can buy or get free apps with a single click directly to your device. You canalso get music, videos and games and many other things.Going to one place is amazing
  5. 5. Photo by "momentcaptured1"This is what shopping malls are about. You find everything in one place and you spend only a fraction of the time you need to geteverything you want.App stores as innovation?
  6. 6. in 1996If you think about it, this is nothing new. In the past we had sites like, and later on for free, and a few others to download programs from.After the Zombie attack
  7. 7. Photo by David FulmerIf you look at those web sites now, they do look a bit like a shopping mall after a Zombie attack. Things are outdated, all over the shopand frankly nobody dares to go there any longer. A lot of the bespoke software we had in the past was for tasks we now use the webfor.Go find that app!
  8. 8. Android MarketTo a degree, this is already happening on some App stores. It becomes harder and harder to find good applications. A lot of them areshoddily put together and dont use the device you use them on to its full extend. Getting your app found is the new SEO and there isalready a booming market for fake reviews.Using existing infrastructure
  9. 9. Folding at homeFolding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. Byusing peoples computers it is now the biggest supercomputer on earth.We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can.Outside can be messy, but fun
  10. 10. Photo on the daily squeeI think it is ridiculous to limit ourselves to target app stores and closed systems. Remember Myspace? Remember when everyone toldyou a Facebook app is all you ever need?Outside is huge!
  11. 11. World Connection Density map by ChrisHarrisonThe web is huge. You can reach people world-wide, 24-7 and they can find your product and solve their problems with it.Native vs. web - Playmobil vs. Lego
  12. 12. Photos by "kruemel2010" and "Buck"The whole native vs web debate always reminds me of Playmobil vs. Lego. As a kid this was a big thing. Some kids had cool cars fromPlaymobil that would survive a fall and ships that really swam. My Lego cars lost parts and the ships always took in water. However,when I wanted to turn my ship into a plane, I could do that whilst the Playmobil kids had to pester their parents to get a plane. I guessthis was partly what made me a developer, not a buyer.What about syncing?
  13. 13. My different Android devicesI own four Android devices. I played Angry Birds and Cut the Rope on all of them. Guess what? I always needed to start from scratch.Not fun. On the web it is much easier to sync things. Years of version controlling helped us with that.Financial Times - web > native
  14. 14. FT web app - more successful than iPhoneappThe FT lately showed that doing a web app can be more successful than a native iPad app.Making flexible rigid is easy…
  15. 15. phonegap.comNothing for example stops you from building something with HTML5 and JS and then use a tool like phonegap to turn it into an iPhoneand Android app. The other way around is harder.The now!
  16. 16. HTML5 LogoInstead of being scared and leaving the web for closed environments it makes sense to use the web and especially its strengths andnew features.Some "new" tech on the web Flexible layouts with Mediaqueries Native animation with CSS Dynamic painting with Canvas / SVG
  17. 17. 3D interfaces with WebGL Local and offline storage File APIs VideoA big annoyance to me is that not many web products really use the technology we have - there are awesome things possible inmodern browsers. You can use those when and if they are available.Mediaqueries for flexibility The new Boston Globe pageUsing open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user.The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices.Madmanimation a CSS3 animation
  18. 18. CSS3 allows you to do animations without Flash. Madmanimation is a demo for the animatable CSS animation tool. It show how youcan turn a list of small images with a description of the scenes into a very complex CSS3 animation. This is progressive enhancementlike it should be done.Evolution of the web Canvas/SVG
  19. 19. Using Canvas and SVG you can do amazing interactive things. To celebrate the birthday of Chrome, Google released this wonderfultimeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard.WebGL SkinThis is an impressive demo of simulating skin in WebGL - check the different discolourations and hair using WebGL
  20. 20. is a great example how you can use new technology in a seamless way. The 2D product images turn into 3D modelswithout needing any videos. The user can directly interact with them.Local Storage Cookies are bad for you Local Storage and Session Storage Simple key/value store 5MB of data across browsersLocal Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the usersmachine without having to go through the pains of cookies.</P< footer>
  21. 21. Offline Store parts of the page offline Really good for apps (store state) Simple manifest implementationOffline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldnt be the end of the world.File APIs Client side file conversion Packing before uploading Drag and drop from the desktopFile APIs Client side file conversion Packing before uploading Drag and drop from the desktop …The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert filesbefore uploading them and allowing people to get their offline documents easier into an online system than with old-school file uploadforms.Motivational poster using File APIs
  22. 22. This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to differentsocial sharing sites.HTML5 video Native browser controls Style-able Rich APIVideo is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes itvery easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make videomore accessible for example to keyboard users.Syncing HTML5 video
  23. 23. This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data-attributes on the HTML I can maintain the syncing without any JS knowledge. There is also a simple library available to do this calledPopcorn.This Shell
  24. 24. This shell is a clever use of a free video effect script. The video gets exploded into several squares and your task is to put it together asa puzzle whilst the song is playing. If you succeed, you can download the song for free, if not, you can still watch the video.The future? Photo by Thomas DuchnickiThe future for open web applications is to build platforms that are as exciting as the native ones. For this, we are working on some verycool things.Using the web to break the lock Web intents Boot to Gecko Open web apps Web API Browser ID Fullscreen / Notifications / Context Menus
  25. 25. Some things are not available to web applications on hardware like phones and tablets. That is not fair and we are working hard onmaking this possible.Breaking the browser mould Firefox with native toolbarsIn order to keep the open web the alternative of choice for app development we need to free the browser as the platform to allow us toaccess hardware and do the same cool things we can do with native apps. There are a few things brewing there and we would love toget your feedback. One of them is allowing the site to change the browser toolbars.Web APIs Defining access for web services to: o Dialer, SMS
  26. 26. o Address Book o Clock, Calculator o Camera o Gallery o Settings o Games o MapsWeb APIs are something Mozilla and a few others are working on - a standard to allow JavaScript access to things that we need tohave if we want to have a standards based mobile web.An open framework of appsAnother thing we are working on is a framework for apps that would allow you to tell people about your app from your web site, havefull-screen applications that could be launched in the browser and from the desktop or on mobiles, and a synced experience acrossthese devices.Lets play!
  27. 27. Photo by Mike McCuneChris Heilmann@codepo8http://wait-till-i.comSlides: to go and play with some of the things you saw today.
  28. 28. Written by Chris Heilmann (@codepo8) based on DZSlides by Paul Rouget (@paulrouget) and Antony Ricaud (@rik24d)