prettyfaces: seo, dynamic, parameters, bookmarks, navigation for jsf / jsf2 (urlrewrite)
DESCRIPTION
PrettyFaces: SEO, Dynamic Parameters, Bookmarks, and Navigation for JSF / JSF2 - As presented at JSFSummit2009 in Orlando Florida. Why should we use PrettyFaces?TRANSCRIPT
- 1. PrettyFaces Client-facing JSF Lincoln Baxter, III
2. SiteMap
- PrettyFaces
- background
3. basics 4. navigation 5. SEO 6. examples 7. PrettyFaces is: Url Rewriting http://example.com/faces/store .jsf http://example.com/ store 8. PrettyFaces is: Url Parameterization http://example.com/store/item/ Z34SD498 9. PrettyFaces is: Declarative Data Loading #{storeBean.loadItem} 10. PrettyFaces is: Simplified Navigation viewStore -> http://example.com/store 11. SiteMap
- PrettyFaces
- background
12. basics 13. navigation 14. SEO 15. examples 16. The PrettyFaces Story Lincoln Baxter, III PrettyFaces/PrettyTime Founder ofO cpSoft 17. The PrettyFaces Story Lincoln Baxter, III Founder ofO cpSoft @lincolnthree http://ocpsoft.com http://scrumshark.com http://ocpsoft.com/prettyfaces http://ocpsoft.com/prettytime 18. The Problem
- JSF1.x
- Good separation between M & V of MVC
19. Had usability issues, pitfalls 20. Navigation was a pain... 21. No bookmarks? Not entirely true. 22. What about Pretty URLs / SEO? 23. The Result
- Took a while
- Tried a few other tools
24. Applied the 80/20 rule 25. Destroyed Thanksgiving 2008 26. The Result
- Came out with a Gem:PrettyFaces
- URLs were clean, search optimized
27. Faces-config practically gone 28. Data loading easy & declarative Easy, Bookmarkable JSF 29. :) Life is good 30. Why do we need Pretty URLs?
- Build Trust
31. Enhance User Experience 32. Self-Promote 33. SiteMap
- PrettyFaces
- background
34. basics 35. navigation 36. SEO 37. examples 38. Rethinking Navigation The Basics Keep it simple... 39. SiteMap
- PrettyFaces
- background
40. basics 41. navigation 42. SEO 43. examples
-
- clean
- 44. parameterize
45. validate 46. load 47. Keep URLs Clean Build trust by reducing clutter Before: http://example.com/news.xhtml?p=my-new-post After:http://example.com/news/my-new-post/ 48. Keep URLs Clean Real Life: Should have been: http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp http://llbean.com/kids http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay? categoryId=28 & storeId=1 & catalogId=1 & langId=-1 & nav=hp-gndp Vulnerable! 49. Keep URLs Clean Why don't more people buy used cars? 50. Keep URLs Clean They don't trust the last owner. They're afraid of getting a bad deal. 51. Keep URLs Clean
- Trust me?
52. Trust me. http:// www.linkedin.com/in/lincolnthree http://ocpsoft.com/prettyfaces http://sourceforge.net/projects/resteasy/ http://www.youtube.com/watch?v=ZOU8GIRUd_g 53. Keep URLs Clean
- Clean, readable URLs:
- Build trust
54. Are self-promoting, benefit SEO 55. Reduce vulnerability 56. Root the user 57. SiteMap
- PrettyFaces
- background
58. basics 59. navigation 60. SEO 61. examples
-
- clean
- 62. parameterize
63. validate 64. load 65. Parameterization (p14n) / root / the / user
-
- Be consistent... always
- 66. Be general, progress to specific
67. Keep the query string optional 68. Parameterization (p14n)
- P14N is:
- a Scope
69. where I am & what I'm looking at 70. user accessible 71. Parameterization (p14n) Examples:
- No!
http://scrumshark.com/project/PrettyFaces http://scrumshark.com/project/PrettyFaces /s7 http://scrumshark.com/project/PrettyFaces /iterations http://scrumshark.com/project/PrettyFaces /iterations/Sprint1 http://scrumshark.com/PrettyFaces/Sprint1/iterations/project 72. Problem solved ... / project / #{currentProjectBean.project} /faces/project/view.xhtml PrettyFaces 73. SiteMap
- PrettyFaces
- background
74. basics 75. navigation 76. SEO 77. examples
-
- clean
- 78. parameterize
79. validate 80. load 81. Validation
- P14n is a Scope
82. End-users haveDIRECT ACCESS 83. Validate everything 84. Validation @FacesValidator( projectName ) public class ProjectNameValidator { public void validate(...) } /faces/project/view.xhtml pretty-config.xml 85. Validation Yes pretty:id or empty PrettyFaces Validation Send 404 Is onError handlerdefined? Handler returned Successfully? Inject values & continue or redirect to pretty:idThrow Exception 86. SiteMap
- PrettyFaces
- background
87. basics 88. navigation 89. SEO 90. examples
-
- clean
- 91. parameterize
92. validate 93. load 94. Data Loading A few ways to do it:
-
- Always Load (On construction)
- 95. Lazy Loading (On access)
96. Declarative Loading (On event) 97. Data Loading
- Declarative Loading
- JSF1.x traditionally sticky with this
98. Enables deterministic behavior 99. JSF2 helps a lot
- More on that later
100. Nothing fancy ... /project/#{currentProjectBean.project} /faces/project/view.xhtml #{currentProjectBean.load} PrettyFaces 101. Action Methods RESTORE_VIEW APPLY_REQUEST_VALUES PROCESS_VALIDATION ANY_PHASE CurrentProjectBean +load() PrettyFaces Action Invocation#{currentProjectBean.load} Trigger Navigation Continue Lifecycle 102. 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 103. The Basics
- Keep URLs clean Build trust, self promote
104. Logical Parameter Order Root the User 105. Validate everything 106. Load data declaratively 107. SiteMap
- PrettyFaces
- background
108. basics 109. navigation 110. SEO 111. examples
-
- clean
- 112. parameterize
113. validate 114. load 115. Rethinking Navigation Rethinking Navigation so many channels, so little time... 116. SiteMap
- PrettyFaces
- background
117. basics 118. navigation 119. SEO 120. examples
-
- history
- 121. mappingId
122. de-coupling 123. GET 124. History: the old * * viewProject/faces/project/view.xhtml 125. History: the new 126. History: Navigation Cases
- Complex logic can be pulled into XML
127. Conditional evaluation and outcomes 128. Selectively pass page-params
- sounds like code?
129. How often do we need them? pretty:hospital The baby's coming! It might be a late night, Should we get some coffee? No... What if we don't remember This? Let's get a video Camera!NO! Should I pick up my mother?DRIVE!! 130. SiteMap
- PrettyFaces
- background
131. basics 132. navigation 133. SEO 134. examples
-
- history
- 135. mappingId
136. de-coupling 137. GET 138. pretty:mappingId private String actionMethod() { if(user.isMember) { return pretty:viewProject ; } return pretty:joinProject ; } < p:linkmappingId= hospital > < /p:link > 139. That Same Configuration The mapping ID ... /project/ #{currentProjectBean.project} /faces/project/view.xhtml #{currentProjectBean.load} PrettyFaces 140. P14N is a Scope P14N is a Scope private String createProject() { if(dao.createProject(project)) { currentProjectBean.setProject( scrumshark ); return pretty:viewProject; } FacesUtils.addError(Something went wrong! Try again.); return null; } project.getName() 141. SiteMap
- PrettyFaces
- background
142. basics 143. navigation 144. SEO 145. examples
-
- history
- 146. mappingId
147. de-coupling 148. GET 149. But what about coupling?
- PrettyFaces- Coupling pretty:ids to action methods
150. JSF2- Coupling view locations to action methods(what happens when you need to refactor?) Take your pick... 151. But what about coupling? JSF2 /WebContent /faces /project view.xhtml ActionMethods faces-config.xml 152. But what about coupling? PrettyFaces /WebContent /faces /project view.xhtml ActionMethods faces-config.xml pretty:viewProject 153. But what about coupling?
- PrettyFaces pretty:ids abstract resource locations, lowers maintenance cost.
154. You GET what you ask for 155. SiteMap
- PrettyFaces
- background
156. basics 157. navigation 158. SEO 159. examples
-
- history
- 160. mappingId
161. de-coupling 162. GET 163. You GET what you ask for GET /project/scrumshark Create Project Action #{bean.create} GET /newproject Invoke Navigation pretty:viewProject Load Project Data Render Response ? 164. You GET what you ask for Option to handle behavior up front, instead of behind a submit. GET /project/scrumshark Load Project Data ? 165. Can I still use JSF navigation?
- Yes PrettyFaces extends, does not interfere with, JSF navigation.
166. In summary
- PrettyFaces offers:
- Declarative navigation via GET
167. Encapsulation, de-coupling from view-location 168. Extension to existing JSF navigation 169. SiteMap
- PrettyFaces
- background
170. basics 171. navigation 172. SEO 173. examples
-
- history
- 174. mappingId
175. de-coupling 176. GET 177. Search Engine Optimization 178. SiteMap
- PrettyFaces
- background
179. basics 180. navigation 181. SEO 182. examples
-
- keywords
- 183. basics
184. change 185. Keywords
- PUT KEYWORDS IN THE URL
#1 Self-promoting Links 186. Keywords examples Poor: http://example.com/shop.jsf?catId=23&itemId=Z34FK94SE Partly there: 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 187. Keywords examples /shop/#{catBean.item} {itemBean.itemName} /faces/shop.jsf #{itemBean.load} 188. Why do we need Pretty URLs?
- Build Trust, Transparency
189. Enhance User Experience 190. Self-Promote, SEO 191. SiteMap
- PrettyFaces
- background
192. basics 193. navigation 194. SEO 195. examples
-
- keywords
- 196. basics
197. change 198. SEO is all you need False 199. Install Google Analytics http://ocpsoft.com July 2008: 0 Nov 2009: 13,287views 68% from search 200. Three Fundamentals
- Actually provide information
201. Get people to say they believe you 202. Get search engines to believe you both 203. That means...
- Content:
Choose your keywords, make sure they are appropriate for your content. 204. That means...
- Credibility:
Get other people to link back to your site, or create those links yourself. 205. That means...
- Context:
206. Make sure your external links appear on pages relevant to your content. 207. SiteMap
- PrettyFaces
- background
208. basics 209. navigation 210. SEO 211. examples
-
- keywords
- 212. basics
213. change 214. Plan for Change .jsf .jsp .php .do .cgi .asp 215. Clean up your URLs Technology changes... be agnostic. / 216. SiteMap
- PrettyFaces
- background
217. basics 218. navigation 219. SEO 220. examples
-
- keywords
- 221. basics
222. change 223. Examples what a view 224. Setup Add Pretty Filter in web.xml Pretty Filtercom.ocpsoft.pretty.PrettyFilterPretty Filter/*REQUESTFORWARD 225. Map your first pages Create /WEB-INF/pretty-config.xml /home /faces/home.jsf /faces/story/comment.jsf 226. Add some actions Take action ;) /home /faces/home.jsf #{homeBean.loadUserLayout} /faces/story/comment.jsf #{myBean.load} 227. Validate (2.0.x series only) /home /faces/home.jsf #{homeBean.loadUserLayout} /faces/story/comment.jsf#{myBean.load} 228. Navigate viewComment.xhtml Go to Comment. (This is Link Text) View next comment. (This is Link Text) 229. The SiteMap If this presentation were a website... /prettyfaces /faces/home.jsf /prettyfaces/#{presBean.levelOne} /faces/present.jsf /prettyfaces/#{presBean.levelOne}/#{presBean.levelTwo} /faces/present.jsf 230. Questions? Lincoln Baxter, III Founder ofO cpSoft @lincolnthree http://ocpsoft.com http://scrumshark.com http://ocpsoft.com/prettyfaces http://ocpsoft.com/prettytime