HTML5 and Complex Web Apps
Web 2.0 vs HTML5 apps
- Dynamic content
- Database driven
- Social applications
- Stupid name
- “The Internet is more than lame dancing genies and hit counters!”
- Interactive content
- Cool logo
- “You can have a desktop experience in your browser”
- Not trying to replicate a desktop software experience.
HTML5 – New Markup (separating functionality and presentation in the DOM with data-* attributes)
Lots of tools available that will allow for a more robust application development process.
- Moving state to the client
- Wep app Kool-Aid: MVC/MVVM, pub/sub and the module pattern
- Your application as an API
Don’t do it alone
Toolkits, precompilers, boilerplates, and more
For the enterprise-y among you
Testing, IDEs and other developer tools
Separating Presentation and functionality in the DOM
The current method is using CSS selectors. It works until an element (class) needs to be changed in the markup.
Bi-directional communication between the server and client (over a single TCP socet). A push technology for the browser. The standard example for this is a chat application, but anything that might initiate a UI from the server-side would be a good example of this. Much better than polling with multiple nested AJAX callbacks.
With web sockets, you assign a node on the client and on the server. Recommended for usage over AJAX in these specific examples.
File system, orientation, geolocation and even battery life access available from mobile devices. Examples are really straightforward. You can start dropping some of these things into your apps immediately.
Bringing a desktop experience to the Browser
MVC/MVVM – Model-View-Controller and related MVVM patterns are used to separate logic and presentation for more reusable code.
Old school MVC in web apps sends the request to the web server which is processed by the controller and the entire page is sent back.
When you put MVC in the client it gets a little more complex because the server is constantly interacting with the browser because the routing logic is handled in the browser.
Module Pattern – best practice in general. Allows for flexible, reusable, decoupled code — essential when building large-scale applications with a team of developers.
Pub/Sub (the Observer pattern) – To avoid dependencies between modules in your application, have them communicate through even subscriptions instead of direct calls. (There are pre-existing toolkits that aren’t very big) Everything is based on an event. (like an AJAX onSuccess call) very straightforward to the point of being obvious, but it’s so simple that sometimes it’s overlooked. Once you’ve encapsulated your application in modules, this becomes important.
Leverage some existing code to get you started, then handle/subscribe/publish
There is no reason to shoehorn code into the browser based on the environment that you like to code in (Visual Studio/Eclipse).
Full-featured (include UI components)
Just the tools
- Backbone (+ broilerplate) (most popular as of Mar 2012)
- Angular (trendiest as of Mar 2012)
- Google Web Tookit
Any of these frameworks add complexity to your app. Don’t just use it to use it. Make sure that you need it.
make sure it works. refresh the page!
Markup and CSS
CSS utilities and pre-compilers
CSS kind of sucks. Pre-compilers bring common programming concepts like functions and variables to the langage.
- LESS (Jonathon’s pick)
Frameworks and toolkits
Because HTML5 and CSS3 aren’t full supported, there are a number of farmeworks/boilerplates/etc available to bridge the gap.
- HTML5 Boilerplate
- Lungo JS
- 320 and up
- Twitter bootstrap
- Tutorial: How to Deploy Your HTML5 App on StackMob (Part 2) (stackmob.com)