Beautiful Java EE... #{ yes we can, with PrettyFaces }
My Life Story. ( At this time, the audience is encouraged to use PDAs, cell phones, and other portable electronic devices....
Lincoln Baxter, III  ( @lincolnthree ,  @ocpsoft ) <ul><li>Proud graduate of Penn. State University - 2006
Senior Software Engineer –  JBoss, by   Red Hat  – Seam Team
Expert Group Member (jcp.org) of JavaServer Faces and #{EL.next}
Open-source advocate (addict)
Founder of  http://ocpsoft.com/
Creator of  PrettyFaces  &  PrettyTime  utilities for Java EE & Java
http://seamframework.org
http://jboss.org   </li></ul>
<ul><li>PrettyFaces </li><ul><li>background
basics
navigation
SEO
examples </li></ul></ul>
PrettyFaces is...
URL-rewriting. wtf?
http://example.com / faces/ store .jsf http://example.com/ store
URL Parameterization. (p14n)
http://example.com/store/item/ Z34SD498
Page Actions. w0rd!
<action>  #{storeBean.loadItem}  </action>
Simplified Navigation. Woot.
“ store ” -> http://example.com /store
Non-invasive. Seriously...
<ul><li>PrettyFaces </li><ul><li>background
basics
navigation
SEO
examples </li></ul></ul>
The PrettyFaces Story. ...again?
Entrepreneurship.
Failure.
Java EE & JSF. <ul><li>Servlet
JSP
JSF 1.x
JSF 2.0
...? </li></ul><ul><li>Component-based web framework
Good separation between M & V of MVC
Had usability issues, pitfalls
Navigation was a pain...
No bookmarks? Not entirely true.
What about Pretty URLs / SEO? </li></ul>
It took a while. <ul><ul><ul><li>Tried a few other tools
Applied the 80/20 rule
Destroyed Thanksgiving 2008 </li></ul></ul></ul>
The Result: <ul>PrettyFaces </ul><ul><ul><ul><li>URLs were clean, search optimized
Faces-config.xml practically gone
Data loading easy & declarative </li></ul></ul></ul>“ Beautiful Java EE”
Life is good. :)
Why Pretty URLs? <ul><li>Build trust
Enhance user experience
Self-promote </li></ul>
<ul><li>PrettyFaces </li><ul><li>background
basics
navigation
SEO
examples </li></ul></ul>
The Basics.
<ul><li>PrettyFaces </li><ul><li>background
basics
navigation
SEO
examples </li></ul></ul><ul><ul><li>clean
parameterize
load </li></ul></ul>
Clean that URL.
Before: http://example.com/news.xhtml?p=my-new-post After:   http://example.com/news/my-new-post/ Build trust by reducing ...
http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp ...
Should have been: <ul>http://llbean.com/kids   </ul>
<url-mapping> <pattern value = ” / kids ” /> <view-id>   /faces/store/kidsDepartment.xhtml   </view-id>   </url-mapping>
A fictitious, malicious example: <ul>http://acme.com/store?xcat=34&langCode=EN_US&account=lincolnthree&autoLoginCd=S3fds94...
Clean that URL. Why do you think people are afraid of buying used cars?
Lack of trust.
Every website is a “car dealership.”
http://www.youtube.com/watch?v=dQw4w9WgXcQ   Trust Me?
Trust Me. http://www.linkedin.com/in/lincolnthree http://twitter.com/lincolnthree   http://ocpsoft.com/prettyfaces/
A clean, readable URL: <ul><li>Builds trust
Is self-promoting, benefits SEO
Reduces vulnerability </li></ul>
<ul><li>PrettyFaces </li><ul><li>background
basics
navigation
examples </li></ul></ul><ul><ul><li>clean
parameterize
load </li></ul></ul>
Parameterization. (p14n)
/  root  /  the  /  user <ul><li>Be consistent, always.
Be general, progress to specific.
Think hard about using a query string. </li></ul>
<ul><li>In the “request” scope; relevant.
Upcoming SlideShare
Loading in...5
×

Beautiful Java EE - PrettyFaces

13,433

Published on

J2EE is already the perfect solution for complex business/enterprise systems, and JSF2.x is the perfect chance to reach out to the consumer and small business market. JSF is easier to use than it's ever been before, but small businesses have different needs than larger companies and corporations. PrettyFaces is for all projects, small and large; this presentation explains why "pretty, bookmark-able URLs" are important for client-facing applications, addressing SEO optimization, and creating clean, consistent, intuitive client interactions on the web.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Great presentation. Thank you for sharing it even a while back. I started searching for PrettyFaces content as one colleague used it and was impressed. You can see one use case for it here http://blog.dreamix.eu/java/url-rewriting-prettyfaces-jsf-web-application . Hope it shows again a great case to use it:)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,433
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
119
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Thank everyone for attending Tell them who you are Tell them where you are from and some of your hobbies
  • Thank everyone for attending Tell them who you are Tell them where you are from and some of your hobbies
  • Transcript of "Beautiful Java EE - PrettyFaces"

    1. 1. Beautiful Java EE... #{ yes we can, with PrettyFaces }
    2. 2. My Life Story. ( At this time, the audience is encouraged to use PDAs, cell phones, and other portable electronic devices... )
    3. 3. Lincoln Baxter, III ( @lincolnthree , @ocpsoft ) <ul><li>Proud graduate of Penn. State University - 2006
    4. 4. Senior Software Engineer – JBoss, by Red Hat – Seam Team
    5. 5. Expert Group Member (jcp.org) of JavaServer Faces and #{EL.next}
    6. 6. Open-source advocate (addict)
    7. 7. Founder of http://ocpsoft.com/
    8. 8. Creator of PrettyFaces & PrettyTime utilities for Java EE & Java
    9. 9. http://seamframework.org
    10. 10. http://jboss.org </li></ul>
    11. 11. <ul><li>PrettyFaces </li><ul><li>background
    12. 12. basics
    13. 13. navigation
    14. 14. SEO
    15. 15. examples </li></ul></ul>
    16. 16. PrettyFaces is...
    17. 17. URL-rewriting. wtf?
    18. 18. http://example.com / faces/ store .jsf http://example.com/ store
    19. 19. URL Parameterization. (p14n)
    20. 20. http://example.com/store/item/ Z34SD498
    21. 21. Page Actions. w0rd!
    22. 22. <action> #{storeBean.loadItem} </action>
    23. 23. Simplified Navigation. Woot.
    24. 24. “ store ” -> http://example.com /store
    25. 25. Non-invasive. Seriously...
    26. 26. <ul><li>PrettyFaces </li><ul><li>background
    27. 27. basics
    28. 28. navigation
    29. 29. SEO
    30. 30. examples </li></ul></ul>
    31. 31. The PrettyFaces Story. ...again?
    32. 32. Entrepreneurship.
    33. 33. Failure.
    34. 34. Java EE & JSF. <ul><li>Servlet
    35. 35. JSP
    36. 36. JSF 1.x
    37. 37. JSF 2.0
    38. 38. ...? </li></ul><ul><li>Component-based web framework
    39. 39. Good separation between M & V of MVC
    40. 40. Had usability issues, pitfalls
    41. 41. Navigation was a pain...
    42. 42. No bookmarks? Not entirely true.
    43. 43. What about Pretty URLs / SEO? </li></ul>
    44. 44. It took a while. <ul><ul><ul><li>Tried a few other tools
    45. 45. Applied the 80/20 rule
    46. 46. Destroyed Thanksgiving 2008 </li></ul></ul></ul>
    47. 47. The Result: <ul>PrettyFaces </ul><ul><ul><ul><li>URLs were clean, search optimized
    48. 48. Faces-config.xml practically gone
    49. 49. Data loading easy & declarative </li></ul></ul></ul>“ Beautiful Java EE”
    50. 50. Life is good. :)
    51. 51. Why Pretty URLs? <ul><li>Build trust
    52. 52. Enhance user experience
    53. 53. Self-promote </li></ul>
    54. 54. <ul><li>PrettyFaces </li><ul><li>background
    55. 55. basics
    56. 56. navigation
    57. 57. SEO
    58. 58. examples </li></ul></ul>
    59. 59. The Basics.
    60. 60. <ul><li>PrettyFaces </li><ul><li>background
    61. 61. basics
    62. 62. navigation
    63. 63. SEO
    64. 64. examples </li></ul></ul><ul><ul><li>clean
    65. 65. parameterize
    66. 66. load </li></ul></ul>
    67. 67. Clean that URL.
    68. 68. Before: http://example.com/news.xhtml?p=my-new-post After: http://example.com/news/my-new-post/ Build trust by reducing clutter.
    69. 69. http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay? categoryId=28 & storeId=1 & catalogId=1 & langId=-1 & nav=hp-gndp Vulnerable! Cluttered! Real-life: wtf? wtf?
    70. 70. Should have been: <ul>http://llbean.com/kids </ul>
    71. 71. <url-mapping> <pattern value = ” / kids ” /> <view-id> /faces/store/kidsDepartment.xhtml </view-id> </url-mapping>
    72. 72. A fictitious, malicious example: <ul>http://acme.com/store?xcat=34&langCode=EN_US&account=lincolnthree&autoLoginCd=S3fds94Zd03&oneClickPurchase=true&item=veryExpensive&redirectAfter=www.google.com?q=Have+a+nice+day+sucker! </ul>
    73. 73. Clean that URL. Why do you think people are afraid of buying used cars?
    74. 74. Lack of trust.
    75. 75. Every website is a “car dealership.”
    76. 76. http://www.youtube.com/watch?v=dQw4w9WgXcQ Trust Me?
    77. 77. Trust Me. http://www.linkedin.com/in/lincolnthree http://twitter.com/lincolnthree http://ocpsoft.com/prettyfaces/
    78. 78. A clean, readable URL: <ul><li>Builds trust
    79. 79. Is self-promoting, benefits SEO
    80. 80. Reduces vulnerability </li></ul>
    81. 81. <ul><li>PrettyFaces </li><ul><li>background
    82. 82. basics
    83. 83. navigation
    84. 84. SEO
    85. 85. examples </li></ul></ul><ul><ul><li>clean
    86. 86. parameterize
    87. 87. load </li></ul></ul>
    88. 88. Parameterization. (p14n)
    89. 89. / root / the / user <ul><li>Be consistent, always.
    90. 90. Be general, progress to specific.
    91. 91. Think hard about using a query string. </li></ul>
    92. 92. <ul><li>In the “request” scope; relevant.
    93. 93. Where you are, what you're looking at.
    94. 94. User accessible!!! </li></ul><ul>Param / eteriza / tion is: </ul>
    95. 95. http://example.com/store http://example.com/store/item/12 http://example.com/store/item/12/reviews http://example.com/store/item/12/reviews/34 <ul>Bad :( </ul>http://example.com/store/12/reviews/23/item <ul>p / 14 / n examples: </ul><ul>Good :) </ul>
    96. 96. Problem solved. - PrettyFaces -
    97. 97. <url-mapping> <pattern value = ” / store/item/ #{ itemBean.number } ” /> <view-id> /faces/store/view.xhtml </view-id> </url-mapping> Inject directly.
    98. 98. <url-mapping> <pattern value = ” /store/item/ #{ number } ” /> <view-id> /faces/store/view.xhtml </view-id> </url-mapping> Add a request parameter. /faces/store/view.xhtml? number = X
    99. 99. <url-mapping> <pattern value = ” / store/item/ #{ number : itemBean.number } ” /> <view-id> /faces/store/view.xhtml </view-id> </url-mapping> Both.
    100. 100. <ul><li>PrettyFaces </li><ul><li>background
    101. 101. basics
    102. 102. navigation
    103. 103. SEO
    104. 104. examples </li></ul></ul><ul><ul><li>clean
    105. 105. parameterize
    106. 106. load </li></ul></ul>
    107. 107. Load your data. <ul><li>Always (On construction)
    108. 108. Lazily (On access)
    109. 109. Declaratively (On event, on request) </li></ul>
    110. 110. Load declaratively. <ul><li>Enables deterministic behavior.
    111. 111. JSF 1.x was not good at this.
    112. 112. JSF 2 helps some... </li></ul>
    113. 113. Nothing fancy. <url-mapping> <pattern> /store/item/#{itemBean.number} </pattern> <view-id> /faces/store/view.xhtml </view-id> <action> #{ itemBean.load } </action> </url-mapping>
    114. 114. Alternatives. More Configuration +3 +8 +1+n +4 Lines: = ~4 :) PrettyFaces = ~17! 2.0 view params Url Rewrite Filter 2.0 event listeners 1.x: requires seam or other pretty-config.xml
    115. 115. There... are... FOUR... lights ! <url-mapping> <pattern> /store/item/#{itemBean.number} </pattern> <view-id> /faces/store/view.xhtml </view-id> <action> #{ itemBean.load } </action> </url-mapping> lines.
    116. 116. The Basics. <ul><li>Clean that URL! - build trust, self promote.
    117. 117. Parameterize logically, in order – root the user
    118. 118. Load data declaratively
    119. 119. Validate everything </li></ul>
    120. 120. <ul><li>PrettyFaces </li><ul><li>background
    121. 121. basics
    122. 122. navigation
    123. 123. SEO
    124. 124. examples </li></ul></ul>
    125. 125. History, the old school, JSF 1.x.
    126. 126. < navigation-rule > < from-view-id > * </ from-view-id > < navigation-case > < from-action > * </ from-action > < from-outcome > viewStore </ from-outcome > < to-view-id > /faces/store/view.xhtml </ to-view-id > </ navigation-case > </ navigation-rule > < h:commandLink action = ”viewStore” value=”Go to store > <f:setPropertyActionListener target = ”#{itemBean.name}” value = ”prettyfaces” /> </h:commandLink>
    127. 127. The new JSF 2.0 way.
    128. 128. < h:link outcome = ”/faces/store/view” > < f:param name = ”item” value = ”prettyfaces” /> </ h:link > < f:metadata > < f:viewParam name = ”item” value = ”#{itemBean.number}” /> </ f:metadata > Renders: /faces/store/view.xhtml?item=prettyfaces
    129. 129. The pretty way.
    130. 130. That Same Configuration. <url-mapping id=” viewStore ”> <pattern value=” /store/item/ #{ item : itemBean.number } ” / > <view-id> /faces/project/view.xhtml </view-id> </url-mapping> The Mapping ID: < h:link action = ”pretty: viewStore ” > < f:param name= ”item” value = ”23” /> </ h:link > Renders: /store/item/23
    131. 131. P14N is a “Scope” private String createItem() { if(dao.createItem(newitem)) { itemBean.setItem( newitem.getId() ); return “ pretty:viewItem ”; } Utils.addError(“Something went wrong! Try again.”); return null; }
    132. 132. Or do “nothing.” <ul><li>Write a normal Java EE / JSF 2.0 application.
    133. 133. Add PrettyFaces outbound URL-rewriting.
    134. 134. Request-parameter mapping #{ name } is power . </li></ul>
    135. 135. That Same Configuration. <url-mapping id=” viewStore ”> <pattern value=” /store/item/ #{ item : itemBean.number } ” / > <view-id> /faces/project/view.xhtml </view-id> </url-mapping> < h:link action = ”/faces/store/view” > < f:param name = ” item ” value = ”23” /> </ h:link > Outbound URL-rewriting! Renders: /store/item/23
    136. 136. In summary. <ul><li>You do not need to use pretty-navigation.
    137. 137. But it's there if you want it ;)
    138. 138. PrettyFaces provides non-invasive URL-rewriting. </li></ul>PrettyFaces A diagram.
    139. 139. <ul><li>PrettyFaces </li><ul><li>background
    140. 140. basics
    141. 141. navigation
    142. 142. SEO
    143. 143. examples </li></ul></ul>
    144. 144. Search Engine Optimization. <ul>“ It barely fits.” </ul>
    145. 145. = Money... <ul>maybe. </ul>
    146. 146. Three fundamentals. <ul><li>Content - actually provide useful information
    147. 147. Credibility - get other sites to say they believe it
    148. 148. Context - make sure the links are relevant </li></ul>
    149. 149. Content. <ul>Choose link keywords carefully. Make sure they match the content. </ul>
    150. 150. Credibility. <ul>Get other people to link back to your site, or create those links yourself. </ul>
    151. 151. Context. <ul>Make sure your external links appear on pages relevant to your content... don't look stupid. </ul>
    152. 152. Keywords PUT KEYWORDS IN THE URL #1 Self-promoting Links
    153. 153. Poor: http://example.com/shop.jsf?catId=23& itemId=Z34FK94SE Better use of keywords, lacks cleanliness: http://example.com/shop .jsf?cat= books&item=how-to-start-a-web-store Perfect: http://example.com/shop/ books ?item= how-to-start-a-web-store Self-promoting Links
    154. 154. Example: <url-mapping id=&quot;viewItem&quot;> <pattern value=” /shop/#{ itemBean.category } ” /> <query-param name=” item ”> #{ itemBean.name } </query-param> <view-id> /faces/store.jsf </view-id> <action> #{ itemBean.load } </action> </url-mapping>
    155. 155. Why Pretty URLs? <ul><li>Build trust, transparency
    156. 156. Enhance user experience
    157. 157. Self-promote, enable SEO </li></ul>
    158. 158. SEO is all you need. <ul>False. </ul>
    159. 159. http://ocpsoft.com July 2008: 0 Nov 2009: 13,287 visits March 2010: 27,172 visits 66% from search Install Google Analytics.
    160. 160. <ul><li>PrettyFaces </li><ul><li>background
    161. 161. basics
    162. 162. navigation
    163. 163. SEO ? plan for change
    164. 164. examples </li></ul></ul>
    165. 165. Plan for Change. .jsf .jsp .php .do .cgi .asp /
    166. 166. Clean up your URLs. Technology changes... be agnostic. /
    167. 167. <ul><li>PrettyFaces </li><ul><li>background
    168. 168. basics
    169. 169. navigation
    170. 170. SEO
    171. 171. examples </li></ul></ul>
    172. 172. PrettyFaces in two minutes. <ul>“ A masterpiece.” ~non-fictional user. </ul>
    173. 173. Add PrettyFaces via Maven . < dependency > < groupId > com.ocpsoft </ groupId > < artifactId > ocpsoft-pretty-faces </ artifactId > < version > ${most-recent-version} </ version > </ dependency >
    174. 174. Map something. Create /WEB-INF/pretty-config.xml < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin Mappings --> < url-mapping id = &quot;home&quot; > < pattern value = &quot;/home&quot; /> < view-id > /faces/home.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;viewComment&quot; > < pattern value = &quot;/story/#{myBean.currentStoryId}/#{myBean.commentId}&quot; /> < view-id > /faces/story/comment.jsf </ view-id > </ url-mapping > </ pretty-config >
    175. 175. Make it work. Take action ;) < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin Mappings --> < url-mapping id = &quot;home&quot; > < pattern value = &quot;/home&quot; /> < view-id > /faces/home.jsf </ view-id > <action> #{ homeBean.loadUserLayout } </action> </ url-mapping > < url-mapping id = &quot;viewComment&quot; > < pattern value = &quot;/story/#{myBean.currentStoryId}/#{myBean.commentId}&quot; /> < view-id > /faces/story/comment.jsf </ view-id > </ url-mapping > </ pretty-config >
    176. 176. I almost forgot. Custom URL-rewriting! < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin RewriteRules --> < rewrite trailingSlash = &quot;append&quot; /> < rewrite toCase = &quot;lowercase&quot; /> < rewrite match = &quot;^/good_news/(w+)/$&quot; url = &quot;http://ocpsoft.com/$1/&quot; redirect = &quot;301&quot; outbound = &quot;false&quot; /> </ pretty-config >
    177. 177. Navigate. ../viewComment.jsf < % @ taglib prefix=&quot;pretty&quot; uri =&quot;http://ocpsoft.com/prettyfaces&quot; % > < pretty:link mappingId = &quot;comment&quot; > < f:param value = &quot;23&quot; /> < f:param value = &quot;5&quot; /> Go to Comment. (This is Link Text) </ pretty:link > <h :link outcome = &quot;pretty:comment&quot; > < f:param name = &quot;sid&quot; value = &quot;#{myBean.storyId}&quot; /> < f:param name = &quot;cid&quot; value = &quot;#{myBean.nextCommentId}&quot; /> View next comment. (This is Link Text) </h :link >
    178. 178. The Site-map. If this presentation were a website... < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces-xsd&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd&quot; > < url-mapping id = &quot;home&quot; > < pattern > /prettyfaces </ pattern > < view-id > /faces/home.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;levelOne&quot; > < pattern > /prettyfaces/#{presBean.levelOne} </ pattern > < view-id > /faces/present.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;levelTwo&quot; > < pattern > /prettyfaces/#{presBean.levelOne}/#{presBean.levelTwo} </ pattern > < view-id > /faces/present.jsf </ view-id > </ url-mapping > </ pretty-config >
    179. 179. <ul><li>PrettyFaces </li><ul><li>background
    180. 180. basics
    181. 181. navigation
    182. 182. SEO
    183. 183. examples </li></ul></ul>
    184. 184. Questions. <ul>I've been talking for nearly an hour; please, somebody say something. </ul>wtf?

    ×