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 <action> #{storeBean.loadItem} </action>

10. PrettyFaces is: Simplified Navigation “ viewStore ” -> http://example.com/store

12. basics

13. navigation

14. SEO

15. examples

16. The PrettyFaces Story Lincoln Baxter, III PrettyFaces/PrettyTime Founder of O cpSoft

17. The PrettyFaces Story Lincoln Baxter, III Founder of O 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

34. basics

35. navigation

36. SEO

37. examples

38. Rethinking Navigation The Basics Keep it simple...

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

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 <pretty-config> ... <url-mapping id=”viewProject”> <pattern> / project / #{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> </url-mapping> … </pretty-config> PrettyFaces

74. basics

75. navigation

76. SEO

77. examples clean

78. parameterize

79. validate

80. load

81. Validation P14n is a “Scope”

82. End-users have DIRECT ACCESS

83. Validate everything

84. Validation @FacesValidator(“ projectName ”) public class ProjectNameValidator { public void validate(...) } <url-mapping id=”viewProject”> <pattern value=”/project/#{currentProjectBean.project}”> <validate param="0" validatorIds=” projectName ... ” /> </pattern> <view-id>/faces/project/view.xhtml</view-id> </url-mapping> pretty-config.xml

85. Validation Yes – pretty:id or empty PrettyFaces Validation Send 404 Is onError handler defined? Handler returned Successfully? Inject values & continue or redirect to “pretty:id” Throw Exception

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 <pretty-config> ... <url-mapping id=”viewProject”> <pattern> /project/#{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> <action> #{currentProjectBean.load} </action> </url-mapping> … </pretty-config> PrettyFaces

101. Action Methods RESTORE_VIEW APPLY_REQUEST_VALUES PROCESS_VALIDATION … ANY_PHASE CurrentProjectBean + load() PrettyFaces Action Invocation <action>#{currentProjectBean.load}</action> 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

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...

117. basics

118. navigation

119. SEO

120. examples history

121. mappingId

122. de-coupling

123. GET

124. History: the old <h:commandLink action=”viewProject” /> <navigation-rule> <from-view-id> * </from-view-id> <navigation-case> <from-action> * </from-action> <from-outcome>viewProject</from-outcome> <to-view-id>/faces/project/view.xhtml</to-view-id> </navigation-case> </navigation-rule>

125. History: the new <h:link outcome=”/view”> <f:param name=”project” value=”prettyfaces”/> </h:link> <f:metadata> <f:viewParam name=”project” value=”...” /> </f:metadata>

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!!

131. basics

132. navigation

133. SEO

135. mappingId

136. de-coupling

137. GET

138. pretty:mappingId private String actionMethod() { if(user.isMember) { return “ pretty:viewProject ”; } return “ pretty:joinProject ”; } < p:link mappingId=” hospital ”> <f:param value=”delivery”/> < /p:link >

139. That Same Configuration The mapping ID <pretty-config> ... <url-mapping id=” viewProject ”> <pattern> /project/ #{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> <action> #{currentProjectBean.load} </action> </url-mapping> … </pretty-config> 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()

142. basics

143. navigation

144. SEO

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 Action Methods <h:link> <h:commandLink> faces-config.xml

152. But what about coupling? PrettyFaces /WebContent /faces /project view.xhtml Action Methods <p:link> <h:commandLink> 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”

156. basics

157. navigation

158. SEO

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” <action> 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 <action> 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

170. basics

171. navigation

172. SEO

174. mappingId

175. de-coupling

176. GET

177. Search Engine Optimization

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 <url-mapping id="viewItem"> <pattern> /shop/#{catBean.item} </pattern> <query-param name=” item ”> {itemBean.itemName} </query-param> <view-id>/faces/shop.jsf</view-id> <action> #{itemBean.load} </action> </url-mapping>

188. Why do we need Pretty URLs? Build Trust, Transparency

189. Enhance User Experience

190. Self-Promote, SEO

192. basics

193. navigation

194. SEO

196. basics

197. change

198. SEO is all you need False

199. Install Google Analytics http://ocpsoft.com July 2008: 0 Nov 2009: 13,287 views 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.

208. basics

209. navigation

210. SEO

212. basics

213. change

214. Plan for Change .jsf .jsp .php .do .cgi .asp

215. Clean up your URLs Technology changes... be agnostic. /

217. basics

218. navigation

219. SEO

221. basics

222. change

223. Examples what a “view”

224. Setup Add Pretty Filter in web.xml <filter> <filter-name>Pretty Filter</filter-name> <filter-class>com.ocpsoft.pretty.PrettyFilter</filter-class> </filter> <filter-mapping> <filter-name>Pretty Filter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>

225. Map your first pages Create /WEB-INF/pretty-config.xml <pretty-config xmlns="http://ocpsoft.com/prettyfaces-xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd" > <url-mapping id="home"> <pattern> /home </pattern> <view-id> /faces/home.jsf </view-id> </url-mapping> <url-mapping id="viewComment"> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}” /> <view-id>/faces/story/comment.jsf</view-id> </url-mapping> </pretty-config>

226. Add some actions Take action ;) <pretty-config xmlns="http://ocpsoft.com/prettyfaces-xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd" > <url-mapping id="home"> <pattern> /home </pattern> <view-id> /faces/home.jsf </view-id> <action> #{homeBean.loadUserLayout} </action> </url-mapping> <url-mapping id="viewComment"> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}” /> <view-id>/faces/story/comment.jsf</view-id> <action> #{myBean.load} </action> </url-mapping> </pretty-config>

227. Validate (2.0.x series only) <pretty-config xmlns="http://ocpsoft.com/prettyfaces-xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd" > <url-mapping id="home"> <pattern> /home </pattern> <view-id> /faces/home.jsf </view-id> <action> #{homeBean.loadUserLayout} </action> </url-mapping> <url-mapping id="viewComment"> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}”> <validate param=”0” validatorIds=”integerValidator” /> <validate param=”1” validatorIds=”integerValidator” /> </pattern> <view-id>/faces/story/comment.jsf</view-id> <action>#{myBean.load}</action> </url-mapping> </pretty-config>

228. Navigate viewComment.xhtml <%@ taglib prefix="pretty" uri="http://ocpsoft.com/prettyfaces" %> <pretty:link mappingId="comment"> <f:param value="23" /> <f:param value="5" /> Go to Comment. (This is Link Text) </pretty:link> <pretty:link mappingId="comment"> <f:param value="#{myBean.storyId}" /> <f:param value="#{myBean.nextCommentId}" /> View next comment. (This is Link Text) </pretty:link>

229. The SiteMap If this presentation were a website... <pretty-config xmlns="http://ocpsoft.com/prettyfaces-xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd" > <url-mapping id="home"> <pattern> /prettyfaces </pattern> <view-id> /faces/home.jsf </view-id> </url-mapping> <url-mapping id="levelOne"> <pattern> /prettyfaces/#{presBean.levelOne} </pattern> <view-id> /faces/present.jsf </view-id> </url-mapping> <url-mapping id="levelTwo"> <pattern> /prettyfaces/#{presBean.levelOne}/#{presBean.levelTwo} </pattern> <view-id> /faces/present.jsf </view-id> </url-mapping> </pretty-config>

230. Questions? Lincoln Baxter, III Founder of O cpSoft @lincolnthree http://ocpsoft.com http://scrumshark.com http://ocpsoft.com/prettyfaces http://ocpsoft.com/prettytime

PrettyFaces: SEO, Dynamic, Parameters, Bookmarks, Navigation for JSF / JSF2 (UrlRewrite)

More Related Content

What's hot (19)

Similar to PrettyFaces: SEO, Dynamic, Parameters, Bookmarks, Navigation for JSF / JSF2 (UrlRewrite) (20)

Recently uploaded (20)

PrettyFaces: SEO, Dynamic, Parameters, Bookmarks, Navigation for JSF / JSF2 (UrlRewrite)

Editor's Notes