Making the Most of Existing Public Web Development Frameworks WEB04

Size: px

Start display at page:

Download "Making the Most of Existing Public Web Development Frameworks WEB04"

Lydia Thompson
10 years ago
Views:

1 Making the Most of Existing Public Web Development Frameworks WEB04

2 jquery Mobile Write less, do more 2

3 The jquery Suite UI Overhaul Look and Feel Transitions Interactions Touch, Mouse, Keyboard Don t Break The Web AJAX Navigation Cross Platform 3

4 10+ Billion Web Enabled Devices on the Internet Title Source: ITU, Mark Lipacis, Morgan Stanley Research Chart Source: Stats Counter, Global Stats April 2012

5 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 , 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. 5

1+, Windows Phone 7+ B-grade Almost full support, no AJAX navigation BlackBerry 5, Opera Mini 5.0 6.

6 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 Automatic AJAX navigation and page transitions (A-grade browsers) 6

initialization Appropriate functionality based on browser support Automatic

7 Customize Your Themes 7

8 Inspiration 8

9 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> 9

initial-scale=1"> <link rel="stylesheet href="jquery.mobile.min.

10 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 7. Page is animated in to view 10

11 Auto Enhanced UI 11

12 Anatomy of a Page <body> <div data-role="page"> <div data-role="header"></div> <div data-role="content"></div> <div data-role="footer"></div> </div> </body> 12

13 Web to Native BlackBerry WebWorks (Formerly PhoneGap) 13

14 Resources 14

15 Books 15

16 Get Involved github.com/jquery/jquery-mobile

17 Sencha Touch HTML5 mobile framework 17

18 Sencha Touch HTML5 mobile framework Cross-browser normalization Offline storage proxy Rich animation, styles & themes Pre-built UI components Touch & orientation events Accessibility

19 Touch Charts Available in Sencha Touch Built with HTML5 & CSS3 Cross browser compatible Hardware accelerated Optimized for performance Natural feeling gestures

20 Sencha Touch 2.0 Performance improvements Events Layout Scrolling Theming Easier to use Simplified component configs New documentation center and format

21 Sencha Touch 2.0 Touch event handling Layouts Improved layout system Faster tablet rendering Themes Automatic image-based themes Scrolling Platform-specific implementations

22 Dojo Instantly better web apps 22

23 Dojo Toolkit Build sophisticated Web apps Supports multiple browsers Enables rapid development Philosophy: Push the limits (SVG, WebGL, HTML5) Define & adopt defacto standards Developer productivity & tools Open, free & liberally licensed

efficient, modular, extensible Business friendly Grids,

24 Dojo Toolkit : Project Goals Unified JavaScript toolkit Superior web & mobile apps Be awesome Fast, powerful, efficient, modular, extensible Business friendly Grids, charts, forms & data Rich UI widgets Calendars, 3D carousel, etc

25 Zepto A minimalist JavaScript library 25

26 Zepto.js A minimalist JavaScript library Looks and feels like jquery Designed to be more lightweight and faster 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>

27 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 Easily replaceable with larger libraries if your app grows

28 Modernizr Front-end development done right 28

29 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

30 Modernizr A JavaScript library for browser feature detection HTML5 CSS3 Purpose Write content for all browsers Avoid lowest-common denominator Goal is fewer runtime errors Make websites that work exactly right no matter what browser or device your visitors use

31 Modernizr Example: Check for geolocation API support Fall back to alternative code (polyfill) if geolocation is not available Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); Open source

32 three.js JavaScript 3D library 32

33 three.js JavaScript 3D library Choose rendering surface: Canvas, WebGL or SVG Create cameras, objects, lights, materials & more Getting started

34 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 Float32Array(square_vertices), gl.static_draw); square.itemsize = 3; square.numitems = 4;

35 Drawing a rectangle Using three.js var rect = new THREE.Rectangle(); rect.set(0, 0, 100, 100); Designed to make 3D graphics development easier

36 Three.js Open Source project BlackBerry contributions Making three.js better for BlackBerry developers

37 CreateJS Enable rich interactive HTML5 content 37

38 createjs Suite of modular JavaScript libraries & tools Uses open web technologies (HTML5) Enables rich interactive content Includes: EasleJS TweenJS SoundJS PreloadJS Zoe 38

API Makes working with HTML5 audio a breeze PreloadJS Manage &

39 createjs 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.

40 createjs Example

41 THANK YOU WEB04

<Insert Picture Here>

<Insert Picture Here> Oracle Application Express: Mobile User Interfaces Marc Sewtz Senior Software Development Manager Oracle Application Express Oracle USA Inc. 520 Madison Avenue,