Going mobile with RichFaces

transcript

Going Mobile with RichFacesLukáš Fryč

Who am I?

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

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

Agenda

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

Why Mobile?

The Rising Platform

Why Mobile Web?

One Common Denominator: Web Browser

Why Mobile Web Rocks?

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

Appeal to your users...

Appeal to your users, or Die!

The Birth of HTML5

What is HTML5?

• HTML5• CSS3• JavaScript

HTML5 is a Game-Changer

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

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

User Experience on Steroids!

It's going to be HUGE!

But evolving slowly...

HTML5 Features

Features are Coming

• Slow Adoption● Standardization

• Fast Development● Browser Vendors

Cross-Platform Development

Let's go WebKit Only!

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

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

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

The Age of Frameworks

Leveraging Mobile Web Frameworks

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

Why Mobile JSF?

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

model• Reusing the knowledge you have

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

How Mobile JSF?

UI Components

• Optimized for Mobile● Usability

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

Single-page model

• Facelets• Behaviors

● AJAX Page Transitions– <f:ajax />

● Avoiding communication– <rich:componentControl />

Navigation & Context

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

Resource Optimizations

• Request Aggregation• Minification• Gzip Compression

Performance Optimizations

• CSS first• JavaScript at the end

• (JSF doesn't play nice here)

Too many concerns...

Frameworks save our but!

RichFaces Slidfast.js

Introducing Slidfast

• Light-weight JS library● 7 kilobytes

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

• CSS transitions● GPU Accelerated

• Back-button support

Demo: JSF + Slidfast

What we have seen?

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

● location.hash• Running on OpenShift

Demo: RichFaces + Slidfast

http://bit.ly/rf-ks

What we have seen?

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

• <slidfast:pageChanger />

Demo: RichFaces Showcase

showcase.richfaces.org

Behind the Scene

Resource Optimization

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

● Project stage• Cloud ready

● Resource Mapping● CDN

Push Technology

• WebSockets / Comet● Atmosphere

• JMS Integration• CDI Integration

3 Paths

• Mobile Compatible

• Degrade Gracefully

• Mobile Optimized

3 Paths with RichFaces

• Mobile Compatible● Today

• Degrade Gracefully

• Degrade Gracefully● Near Future

Bootstrap

• Degrade Gracefully● Near Future

• Mobile Optimized● On the table

The RichFaces Community

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

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

The Future

Mobile Specific Render-Kits

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

Taking Advantage of more APIs

• Off-line Storage● caching

• Security• Connectivity

● Offline/Online• Navigation

● pushState• Performance Optimizations

Appeal to your users!

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

• 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