Killer App Design with Javascript and HTML 5

HTML5 and Complex Web Apps

Web 2.0 vs HTML5 apps

Web 2.0

• Dynamic content
• Database driven
• Social applications
• Stupid name
• “The Internet is more than lame dancing genies and hit counters!”

HTML5 – New Markup (separating functionality and presentation in the DOM with data-* attributes)

Amazing JavaScript APIs

Application Architecture

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

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.

WebSockets

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.

Device Access

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.

Web Workers

Web workers are a solution for multi-threaded JavaScript apps. Web Workers spawn background script in your web application. Don’t hold up the entire application/UI while waiting for some serious computation to occur.

Offline Storage

Store data in the user’s browser and retrieve it via simple JavaScript API, in all varieties and flavors, from SQL, NoSQL, etc.

Bringing a desktop experience to the Browser

Web app Kool-Aid: JavaScript application design patterns

This is for JavaScript applications that need to scale, not a small local app. MVC Frameworks should only be used for projects that need to be scalable or have a lot

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

Managing Complexity

There is no reason to  shoehorn code into the browser based on the environment that you like to code in (Visual Studio/Eclipse).

MVC/MVVM frameworks

Full-featured (include UI components)

• Ember
• Enyo
• SproutCore
• Closure

Just the tools

• Backbone (+ broilerplate) (most popular as of Mar 2012)
• Angular (trendiest as of Mar 2012)
• Sammy
• Spine
• JavaScript MVC
• Knockout

“I have JavaScript so How About… (insert your favorite here)”

• Google Web Tookit
• Pyjamas
• Cappucino
• Batman

“Just Write in JavaScript!”

Any of these frameworks add complexity to your app. Don’t just use it to use it. Make sure that you need it.

Testing

make sure it works. refresh the page!

JavaScript

jasmine

jsspec

BahaviorJS

UI Testing

Selenium

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)
• SASS
• Compass

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

JavaScript IDEs

• Aptana
• Cloud9
• WebStorm
• IxEdit

Slide URL

 

 

Related articles

• The JavaScript Renaissance (reverberate.org)
• The rise of JavaScript micro-frameworks (greatfinds.icrossing.com)
• Tutorial: How to Deploy Your HTML5 App on StackMob (Part 2) (stackmob.com)