Modern web apps are rich, interactive applications. This webcast will cover new techniques for building modern web apps and how to utilize the latest HTML5 APIs to create a new class of web apps that will delight and amaze your users. In this interactive event, Ido Green, the author of Web Workers, will cover the following:
* Defining the modern web app
* Designing a modern web app
* HTML5 Power tools/APIs
* Tips & best practices
4. ● Performance! #Perfmatters
● Flaky connections (e.g. cafes, car)
● Airplane, road trip, deserted island
● Consolidates the concept of permanent application.
* We will use: Lawnchair for our demo.
Offline - Why?
5. ● Storing assets: AppCache
● Storing data: localStorage, IndexedDB, File API.
● Offline first:
○ Pretend that there's no internet connection
○ Implement a sync layer that works only when
online.
Offline - How?
navigator.onLine & window.(ononline|onoffline)
6. Offline - Appcache
<html manifest="myapp.manifest">
CACHE MANIFEST
#version 1.2.3
#JS
js/main.js
#CSS
css/bootstrap.min.css
#Images
img/left-back.png
● You can use it TODAY:
○ http://caniuse.com/#feat=offline-apps
● Will also be used when the user
is online.
● Allows you to define fallback
pages.
● (!) Don't cache the manifest!
● http://www.html5rocks.com/en/tutorials/app
10. A Page? An App?
● It's not pages anymore
● Design from the content out
● Your web app as a collection of (web) components
● Less is more:
Any addition has the potential to ruin our MVP
11. Design A List Again?
● Don't reinvent the wheel
○ http://html5rock.com
○ http://pttrns.com
○ http://mobile-patterns.com
● Don't let "web" nor "Enterprise"
be an excuse
12. Design - Phones? Tablets?
● Start with the UX
○ Balsamiq, Creately,
MockFlow
○ Aim for common
device breakpoints
(4:3, 16:9)
13. Philosophy: Adaptive Apps
● Adaptive apps
○ Custom views and templates for each form factor
○ Shared the model
● Use responsive design within the form factor
● progressive enhancement
So your app is useful on
any platform.
15. MV* For The Win
● Fundamental pattern for separating
concerns
● Model handles data and server
persistence layer
● View handles user input and
rendering
● Used to be on the server --> Now
moving to the thicker client.
16. AngularJS - Client Side Framework
Angular.js - Let you extend HTML
vocabulary for your application.
● Data binding
● Extensible HTML
● Dependency Injection / Testable
More options: addyosmani.github.com/todomvc/
17. Mobile World - RESTful World
Photos
● GET http://ex.com/_ah/api/picturesque/v1/photos
● POST http://ex.com/_ah/api/picturesque/v1/photo
● PATCH http://ex.com/_ah/api/picturesque/v1/photo/id
Users
● POST http://ex.com/_ah/api/picturesque/v1/users/join
And more...
20. Device APIs WG: www.w3.org/2009/dap/
● Geolocation API (Psst... support in DevTools)
● Device Orientation API (accelerometer in your DevTools)
● WebGL ( GPU )
● HTML5 Filesystem API
● Network connectivity
● Battery API
● Gamepad API
● WebRTC
● Web Audio API ( core audio )
"Device APIs"
22. Modern Apps and The Server Conundrum
Have to deal with a server
○ Offload Computation
○ Sharing and Collaboration
○ Logs
But who wants to run a server?
○ Spikey traffic - Scaling challenges
○ Client Server communication
○ Serialization
○ OAuth Dance
31. Using Data Model for Insert
Python
@endpoints.api(name='picturesque', version='v1',
description='Photos API for Picturesque App')
class PicturesqueApi(remote.Service):
@Photo.method(path='photo', name='photo.insert')
def PhotoInsert(self, photo):
# do some validation
photo.put()
return photo
36. "Smart" Client
● Network calls are expensive
● "Client" photo library
○ Lawnchair allows us to store photos' metadata
offline
○ filer.js to store the photos
○ Application Cache
● Do not Repeat Yourself
○ Applies to code and to API calls
○ Only retrieve photos that have been updated
since the last API call
38. What Is New?
○ Edit local projects
○ Check Devices: User agents, screen sizes, touch events etc'
○ Map source for: coffeescript, sass, dart etc'.
○ Test on your mobile device from DevTools.
○ More?
■ GDL "The Breakpoint" episodes
■ Improving Your 2013 Productivity With The Chrome DevTools
39. The Screen Are Smaller
● Debug
○ Remote debugging hack with jsconsole.com
○ Chrome for Android remote debug with DevTools.
● Testing
○ Qunit to test models
○ Selenium and its mobile option Remote Web Driver
● How To
○ http://mobile-html.appspot.com/
41. Key Take Aways
● Build powerful applications with Google Cloud Endpoints
● HTML5 APIs are ready and getting better fast.
● AngularJS - be more productive
● Leverage Modern Browser Features:
○ Offline
○ Web RTC
○ New CSS3 artifacts
○ Web workers