Making the Most of Existing Public
Web Development Frameworks
jQuery Mobile
The jQuery Suite
UI Overhaul
Look and Feel Transitions
Interactions
Touch, Mouse, Keyboard
Don’t Break The Web
AJAX Navigation
Cross Platform
10+ Billion Web Enabled
Graded Browser Support
A-grade
Full jQuery Mobile Support
BlackBerry 10, BlackBerry® 6+, iOS 3.2+, Android 2.1+, Windows Phone 7+
B-grade
Almost full support, no AJAX navigation
BlackBerry 5, Opera Mini 5.0 – 6.5, Nokia Symbian
C-grade
Non-enhanced HTML experience
BlackBerry 4.x, Windows Mobile
A browser that does not support media queries (with the exception of Internet Explorer 7+) will automatically be demoted to C grade.
Progressive Enhancement
You provide:
Clean, semantic HTML
HTML5 data- attributes for configuration
jQuery Mobile provides:
Automatic initialization
Appropriate functionality based on browser support Automatic enhancement of form elements
Customize Your Themes
7
Inspiration
Including jQuery Mobile
<head>
<title>Welcome!</title>
<meta name="viewport” content="width=device-width, initial-scale=1">
<link rel="stylesheet“ href="jquery.mobile.min.css"> <script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
</head>
Listen, Intercept, Handle w/ AJAX
1. User taps on a link
2. Link is intercepted
3. Loading indicator is shown
4. Original link is loaded via AJAX
5. New page is enhanced by jQuery Mobile
6. Loading indicator is hidden
Auto Enhanced UI
<body>
<div data-role="page">
<div data-role="header"></div> <div data-role="content"></div> <div data-role="footer"></div> </div>
</body>
Web to Native
13
BlackBerry
WebWorks
™
Resources
Books
Sencha Touch
HTML5 mobile framework
Sencha Touch
HTML5 mobile framework
Cross-browser normalization
Offline storage proxy
Rich animation, styles & themes
Touch Charts
Available in Sencha Touch
Built with HTML5 & CSS3
Cross browser compatible
Hardware accelerated
Optimized for performance
Sencha Touch 2.0
Performance improvements
Events Layout Scrolling
Theming
Easier to use
Sencha Touch 2.0
Touch event handling
Layouts
Improved layout system Faster tablet rendering
Themes
Automatic image-based themes
Scrolling
Dojo
Dojo Toolkit
Build sophisticated Web apps
http://dojotoolkit.org/
Supports multiple browsers Enables rapid development
Philosophy:
Push the limits (SVG, WebGL, HTML5) Define & adopt defacto standards
Developer productivity & tools Open, free & liberally licensed
Dojo Toolkit : Project Goals
Unified JavaScript toolkit
Superior web & mobile apps
Be awesome
Fast, powerful, efficient, modular, extensible
Business friendly
Zepto
A minimalist JavaScript library
Zepto.js
A minimalist JavaScript library
Looks and feels like jQuery
Designed to be more lightweight and faster http://zeptojs.com/
“If you use jQuery, you already know how to use Zepto”
<script src="zepto.min.js"></script> <script>
$('ul').append('<li>new item</li>') </script>
Zepto.js
Smaller and faster than jQuery
Zepto is only 8.4 Kb (jQuery is 100+ Kb)
Doesn’t have all jQuery capabilities – just the basics
Scalable
Uses mobile WebKit features as much as possible
Modernizr
Polyfills
Its not just a buzz word!
Code that fills in missing native browser features (e.g. HTML5 APIs) Also known as a “shim”
Flattens API landscape
Example libraries:
Modernizr.js Yepnope.js Webshims Lib
Modernizr
A JavaScript library for browser feature detection
HTML5
CSS3
http://modernizr.com/
Purpose
Write content for all browsers
Avoid lowest-common denominator
“Make websites that work exactly right no matter what browser or
Modernizr
Example:
Check for geolocation API support
Fall back to alternative code (polyfill) if geolocation is not available
Open source
https://github.com/Modernizr/Modernizr Modernizr.load({
test: Modernizr.geolocation, yep : 'geo.js',
nope: 'geo-polyfill.js' });
three.js
three.js
JavaScript 3D library
http://mrdoob.github.com/three.js/
Choose rendering surface: Canvas, WebGL or SVG
Create cameras, objects, lights, materials & more
Getting started
http://learningthreejs.com/
Drawing a rectangle
Using WebGL
var square = gl.createBuffer(); var square_vertices = [
1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ];
gl.bindBuffer(gl.ARRAY_BUFFER, square); gl.bufferData(gl.ARRAY_BUFFER, new
Drawing a rectangle
Using three.js
Designed to make 3D graphics development
easier
var rect = new THREE.Rectangle(); rect.set(0, 0, 100, 100);
Three.js
Open Source project
https://github.com/mrdoob/three.js
BlackBerry contributions
CreateJS
Enable rich interactive HTML5 content
createJS
Suite of modular JavaScript libraries & tools
Uses open web technologies (HTML5) Enables rich interactive content
Includes:
EasleJS TweenJS SoundJS PreloadJS ZoecreateJS
EasleJS
Simplifies using HTML5 canvas
JavaScript API familiar to Flash developers
SoundJS
Cross-browser JavaScript API
Makes working with HTML5 audio a breeze
PreloadJS
Manage & coordinate asset loading Images, sounds, JavaScript, data, etc.
