prettyfaces: seo, dynamic, parameters, bookmarks, navigation for jsf / jsf2 (urlrewrite)

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

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

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:

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

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

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

112. parameterize

113. validate 114. load 115. Rethinking Navigation Rethinking Navigation so many channels, so little time... 116. SiteMap

PrettyFaces

background

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

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

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

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

history

174. mappingId

175. de-coupling 176. GET 177. Search Engine Optimization 178. SiteMap

PrettyFaces

background

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

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

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

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