The rising power of the mobile platform recently has shown how important is being able expose applications to portable devices. What can an strong enterprise back-end offer you in this space? In the mobile environment, developers are forced to leave usual habits and enter the rapidly changing ground. Is there any way how to use well-known enterprise UI technologies on mobiles? The mobile technologies are growing faster than one can simply follow. There are plenty of technologies around the mobile web and new frameworks appear so quickly. How to tame the latest cool frameworks and provide users with great experience? How to get a gear you need to go mobile?

1. The Gear
you need to go Mobile
with Java Enterprise
Lukáš Fryč

2. RISING
PLATFORM

3. “Predictions say mobile Internet usage
will soon overtake desktop one.”

4. “There are many platforms which
you need to make to inter-operate with.”

5. RISING
TECHNOLOGIES

6. “The technologies in mobile web is
focused around efforts known as HTML5.”

7. JavaScript
“These improvements is just not about one technology,
But they bears also improvement to CSS and JavaScript.”

8. “But it's quite hard to stay in touch with the development
in the space of these technologies.
That's what frameworks can improve – they make sure
higher-level features works on various platforms.”

9. THE AGE OF
FRAMEWORKS

10. “But there are many of such frameworks, and it's hard
to stay in touch with all of these just to know which is best
in given area.”

11. “But the only what we, Java developers, want to achieve
is making our users using mobile work with our application...”

12. “...and let these phones to connect to our strong enterprise
back-ends.”

13. “But how to not get
crazy with all the
informations
flowing around?”

14. “It's obvious that you would need some gear to do the job.”

15. “And that's exactly where AeroGear project focuses.”

17. 2 CASE
STUDIES

18. #1 MOBILE
FRIENDLY
“First case study is about making the current enterprise web
frameworks work on mobile devices.”

19. “As the base technology for the sample was chosen JSF.”

20. Powerful Technology
“JSF is very powerful technology, it offers several concepts
which makes easier to develop mobile-enabled solutions.”

21. Facelets VDL

22. Render Kits
• JSF allows to use device detection and
select Render Kit based on user device:
– Desktop
– Mobile

23. Cross-cutting concerns
• Delegates to custom solution when
specification falls short

24. Is it enough?

25. JSF wasn't created
with mobile web in mind

26. “That's where component libraries like RichFaces come in.”

27. RichFaces & Mobile
• Mature Component Library for JSF
– 60 components
• Mobile Friendly
– It has been made sure that each
component can be controlled by mobile
device users

28. RichFaces QuickStart
• http://bit.ly/rf-quickstart
– Device detection → optimized view
• http://bit.ly/rf-quickstart-mobile
– Mobile view for desktop browsers

29. RichFaces Showcase
• http://bit.ly/rf-showcase
– Device detection → optimized view
• http://bit.ly/rf-showcase-mobile
– Mobile view for desktop browsers

30. Mobile RichFaces
• Device detection
– Server-side
• Page transitions
– Nearly native feeling
• Back button support
– Including bookmarking

31. Mobile Improvements
• Slidfast framework
– Native-like Look
– CSS3 Page Transitions
• Single-page model

32. Resource Optimization
• CSS/JS compression
• Minimizes number of requests

33. #2 TARGETTING
MOBILES
“Second case study is integrating current mobile web and
enterprise back-end technologies in order to provide
nearly native feeling.”

34. Introducing
POH5 Architecture
(Plain Old HTML5)

35. “POH5 let's work
standard HTML5
applications on
mobile web, in
hybrid and even
desktop
applications.
But additionally
AeroGear focuses
on the enterprise
needs:”

36. “And then you can let this application communicate through AJAX
with REST service or via WebSocket to Messaging service.
This all can be plumbed together using CDI.”

38. HTML5 QuickStart Sample

39. RESTful Endpoints
• JAX-RS
• GET, POST, UPDATE, DELETE
• POJO
• JPA, Bean validation
• CDI

40. Client Side
• jQuery Mobile
• HTML5

41. Demo time
• http://bit.ly/ag-poh5
– Different views for mobile / desktop
• http://bit.ly/zZcg4X

42. 3 PROJECT
GOALS

43. #1 EDUCATION

44. Quick Starts
Articles
RSS / Twitter Channels
Webinars

45. #2 COMMUNITY

46. Knowledge Base
Forums
IRC
Social Coding - GitHub

47. #3 INNOVATION

48. Coding / Hacking
IRC Meetings
Discussions

49. Hybrid Web
Mobile Web
Light-weight MVC
Local Storage
Security
Offline Support

50. Where to reach us?
bit.ly/aerogear
bit.ly/ag-forums
bit.ly/richfaces
@AeroGears, @RichFaces, @LFryc
#aerogear / #richfaces – irc.freenode.net

51. Thank You!
EDUCATION
The Gear
COMMUNITY you need to go Mobile
INNOVATION
with Java Enterprise

52. Photographs used in presentation were
authored by various artists and published
under Creative Commons license
http://www.flickr.com/photos/velkr0/3472576304/
http://www.flickr.com/photos/txh62/478812294/
http://www.flickr.com/photos/txh62/478812294/
http://www.flickr.com/photos/twicepix/3332881889/
http://www.flickr.com/photos/seanhobson/4504828599/
http://www.flickr.com/photos/virtualsugar/6933601335/
http://strategy.wikimedia.org/wiki/Mobile/Forecasts