going mobile with richfaces

65
Going Mobile with RichFaces Lukáš Fryč

Upload: lukas-fryc

Post on 17-Jan-2015

4.962 views

Category:

Technology


1 download

DESCRIPTION

The rise of portable devices last year shows how important is making applications compatible with mobiles. When it comes to web applications, JSF offers the same strong background for mobile development as it does for desktop applications: an extensible framework with a widely-accepted development model, allowing reuse of JSF programming skills and technologies on the mobile platform. RichFaces 4.1 goes behind concepts brought by JSF and provides developer with framework which makes your applications ready for mobile devices and offers you as rich component suite as for desktop environments. Lukas is going to show you how the RichFaces Showcase was turned into an application for portable devices, how a light-weight javascript framework was designed for making RichFaces applications mobile ready, the principles of an one-page application design and what are the necessary optimizations for making RichFaces applications run on mobile devices properly.

TRANSCRIPT

Page 1: Going mobile with RichFaces

Going Mobile with RichFacesLukáš Fryč

Page 2: Going mobile with RichFaces

Who am I?

• Lukáš Fryč• JBoss Software Engineer• RichFaces Core Developer

• @lfryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog

Page 3: Going mobile with RichFaces

Agenda

• Mobile Era• HTML5• Mobile with JSF• Mobile with RichFaces• The Future

Page 4: Going mobile with RichFaces

Why Mobile?

Page 5: Going mobile with RichFaces

The Rising Platform

Page 6: Going mobile with RichFaces
Page 7: Going mobile with RichFaces

Why Mobile Web?

Page 8: Going mobile with RichFaces
Page 9: Going mobile with RichFaces

One Common Denominator: Web Browser

Page 10: Going mobile with RichFaces

One Common Denominator: Web Browser

Page 11: Going mobile with RichFaces

Why Mobile Web Rocks?

• Multi-platform• Cost• Time-to-Market• Online Identity• Continuous Evolution

Page 12: Going mobile with RichFaces

Appeal to your users...

Page 13: Going mobile with RichFaces

Appeal to your users, or Die!

Page 14: Going mobile with RichFaces
Page 15: Going mobile with RichFaces

The Birth of HTML5

Page 16: Going mobile with RichFaces

What is HTML5?

• HTML5• CSS3• JavaScript

Page 17: Going mobile with RichFaces

HTML5 is a Game-Changer

• Fast• Secure• Responsive design• Interactive• Cross-Device• Stunningly beautiful

Page 18: Going mobile with RichFaces
Page 19: Going mobile with RichFaces

Enterprise Ready?• Performance• Security• Connectivity• Device Access• Off-line Storage

Page 20: Going mobile with RichFaces

User Experience on Steroids!

Page 21: Going mobile with RichFaces

It's going to be HUGE!

Page 22: Going mobile with RichFaces

But evolving slowly...

Page 23: Going mobile with RichFaces

HTML5 Features

Page 24: Going mobile with RichFaces

Features are Coming

• Slow Adoption● Standardization

• Fast Development● Browser Vendors

Page 25: Going mobile with RichFaces

Cross-Platform Development

Page 26: Going mobile with RichFaces

Let's go WebKit Only!

Page 27: Going mobile with RichFaces

But: Web != WebKit• Opera• Firefox• Internet Explorer

Page 28: Going mobile with RichFaces

Just WebKit, please...• Symbian 1, 2, 3, S40• iOS 2, 3, 4, 5• Android 1, 2, 3, 4

• http://bit.ly/webkit-comparison

Page 29: Going mobile with RichFaces

The Age of Frameworks

Page 30: Going mobile with RichFaces

Leveraging Mobile Web Frameworks

• Off-load Messy Job Frameworks→● Device Interoperability● Debugging Hell

Page 31: Going mobile with RichFaces

Why Mobile JSF?

Page 32: Going mobile with RichFaces

Why mobile JSF?• Encapsulation of logic• Standard component-oriented programming

model• Reusing the knowledge you have

Page 33: Going mobile with RichFaces

Why not use mobile frameworks with JSF?

• jQuery Mobile● Not component oriented● Prescribed programming model● jQuery AJAX● No support for HTML5's @data- in JSF

Page 34: Going mobile with RichFaces

How Mobile JSF?

Page 35: Going mobile with RichFaces

UI Components

• Optimized for Mobile● Usability

– Touch interface● Responsive design● Rich Client-Side API

Page 36: Going mobile with RichFaces

Single-page model

• Facelets• Behaviors

● AJAX Page Transitions– <f:ajax />

● Avoiding communication– <rich:componentControl />

Page 37: Going mobile with RichFaces

Navigation & Context

• Support for history and bookmarking• Interactive Controls• CSS Transitions

Page 38: Going mobile with RichFaces

Resource Optimizations

• Request Aggregation• Minification• Gzip Compression

Page 39: Going mobile with RichFaces

Performance Optimizations

• CSS first• JavaScript at the end

• (JSF doesn't play nice here)

Page 40: Going mobile with RichFaces

Too many concerns...

Page 41: Going mobile with RichFaces

Frameworks save our but!

Page 42: Going mobile with RichFaces

RichFaces Slidfast.js

Page 43: Going mobile with RichFaces

Introducing Slidfast

• Light-weight JS library● 7 kilobytes

• Single-page● JSF AJAX● Facelets ui:include

• CSS transitions● GPU Accelerated

• Back-button support

Page 44: Going mobile with RichFaces

Demo: JSF + Slidfast

Page 45: Going mobile with RichFaces

What we have seen?

• Single-page programming model• GPU Accelerated CSS transitions• Bookmarking and Navigation

● location.hash• Running on OpenShift

Page 46: Going mobile with RichFaces

Demo: RichFaces + Slidfast

http://bit.ly/rf-ks

Page 47: Going mobile with RichFaces

What we have seen?

• Mobile Optimized Components• Push• <slidfast:page />

• <slidfast:pageChanger />

Page 48: Going mobile with RichFaces

Demo: RichFaces Showcase

showcase.richfaces.org

Page 49: Going mobile with RichFaces

Behind the Scene

Page 50: Going mobile with RichFaces

Resource Optimization

• web.xml switch• One compressed package (CSS/JS)• Development friendly

● Project stage• Cloud ready

● Resource Mapping● CDN

Page 51: Going mobile with RichFaces

Push Technology

• WebSockets / Comet● Atmosphere

• JMS Integration• CDI Integration

Page 52: Going mobile with RichFaces

3 Paths

Page 53: Going mobile with RichFaces

3 Paths

• Mobile Compatible

• Degrade Gracefully

• Mobile Optimized

Page 54: Going mobile with RichFaces

3 Paths with RichFaces

• Mobile Compatible● Today

• Degrade Gracefully

• Mobile Optimized

Page 55: Going mobile with RichFaces

3 Paths with RichFaces

• Mobile Compatible● Today

• Degrade Gracefully● Near Future

• Mobile Optimized

Bootstrap

Page 56: Going mobile with RichFaces

3 Paths with RichFaces

• Mobile Compatible● Today

• Degrade Gracefully● Near Future

• Mobile Optimized● On the table

Page 57: Going mobile with RichFaces

The RichFaces Community

Page 58: Going mobile with RichFaces

Developing in Sandbox

• Community contributed components● http://bit.ly/rf-sandbox

• Slidfast mobile navigation• jQuery UI• Twitter Bootstrap Components

● http://bit.ly/rf-bootstrap

Bootstrap

Page 59: Going mobile with RichFaces

Developing in Sandbox – Ctn'd

• Component Development Kit● Easy-to-Wrap Widgets

– http://bit.ly/brian-on-cdk● Fast Turnaround

– http://bit.ly/fast-cdk

Page 60: Going mobile with RichFaces

The Future

Page 61: Going mobile with RichFaces

Mobile Specific Render-Kits

• Components nicely degrades to mobile versions● e.g. WYSIWYG editor → <textarea />

Page 62: Going mobile with RichFaces

Taking Advantage of more APIs

• Off-line Storage● caching

• Security• Connectivity

● Offline/Online• Navigation

● pushState• Performance Optimizations

Page 63: Going mobile with RichFaces

Appeal to your users!

Page 64: Going mobile with RichFaces

Thank you• @lfryc +Lukas Fryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog

Page 65: Going mobile with RichFaces

• Photographs and graphs used in presentation have been authored by various authors, published under Creative Commons license. There are links for original works:

• http://gs.statcounter.com/

• http://strategy.wikimedia.org/wiki/Mobile/Forecasts

• http://www.flickr.com/photos/txh62/478812294/

• http://www.flickr.com/photos/59937401@N07/5857835480/

• http://www.flickr.com/photos/twicepix/3332881889/

• http://www.flickr.com/photos/mollystevens/5179946914/

• http://www.flickr.com/photos/mikecogh/5677982965/

• http://www.flickr.com/photos/breatheindigital/4689159475/

• http://www.flickr.com/photos/wilhei/109403306/

• http://www.flickr.com/photos/8431398@N04/2680944871/

• http://www.flickr.com/photos/halfbisqued/2353845688/

• http://www.flickr.com/photos/gemsling/416891927/

• http://www.flickr.com/photos/nirak/644335254/

• http://www.flickr.com/photos/countylemonade/5940227329/

• http://www.flickr.com/photos/tomergabel/3348629201/

Credits