Paul Kinlan: Building web apps of the future. Tomorrow, today and yesterday

Paul Kinlan (@paul_kinlan) was speaking at Full Frontal about the technologies that can be used to deliver web apps, these are my notes from his talk.

"I don't use apps o the web, I just use it for news and wikipedia." - some guy on the train. Then he went onto twitter, gmail, his bank...

People are still building web apps for yesterday: client - server.

Building apps for the web today is hard and broken. The APIs were designed at different times and behave in different ways. JS was not built for web apps. We can do amazing stuff none the less.

• Web lab
• Jam with chrome

What do I want from an app?

1. Availability
2. Interoperability
3. Experience

Availability

Took top 50 apps on Android and iOS, download app, go offline.

1. Apps that always work.
2. Apps that need a connection
3. Content is cached
4. Some just don't work

Most web apps don't have any form of offline state - browser error page. There are a few exceptions but they were probably designed for mobile or tablet.

Native apps win hands down.

Web devs add offline to online apps. App devs add online to offline apps. Offline first.

Web developers need to think differently when building apps.

• Cleint side templating
• Avoid HTML5 history, prefer onhashchange
• Put webfonts into appcache
• NETWORK: * for using anlytics
• Need to support both indexDB and WebSQL - use a library: idb.filesystem.js

Interoperability

No app is an island.

Register protocol handler to handle schemes - both well known and new scemes: navigator.registerProtocolHandler Does not work well offline.

Register content handler to handle mime types: navigator.registerContentHandler Does not work well offline.

Experience

Do what the user expects.

Keep consistent with what people expect from a UI.

Interacting with files

• Download <a href="file.ext" download="friendly.name">...
• Create object URL window.URL.createObjectURL(b);
• Accessing files <input type="file [webkitDirectory"/>e.srcElement.files;
• Drag and drop. target.ondrop
• Sandboxed file system window.requestFileSystem() (can be used to cache files) - filer.js is a good abstraction layer.

Interacting with devices

• Video input
• Audio input
• CSS filters
• CSS shaders
• Web RTC

Node in the browser

Browserify can run Node in the browser. This can give us much more power to build apps - there is a large library that will work with a number of technologies such as sockets.