Backbone.Detour

Use the Backbone.js router to save application state.

Transcript

1. Backbone.Detour An alternate way to route your Backbone.js Sunday, March 17, 13
2. Backbone.Router Backbone.Router expects routes to be hierarchies like: #Path/To/Something Sunday, March 17, 13
3. Backbone.Router Or #users/2/posts (showing the posts belonging to user id 2) Sunday, March 17, 13
4. Backbone.Router This makes sense for single page apps. But if you are trying to track application state it can be a nightmare. Sunday, March 17, 13
5. Backbone.Router Lets pretend you are trying to keep track of state and make bookmarkable 3 properties: • Page • Sort • Filters Sunday, March 17, 13
6. Backbone.Router Using Backbone.Router, you would need to define your routes like: routes: "" : "defaultFunction" "page/:page" : "pageFunction" "filters/:filter" : "filtersFunction" "sort/:sort" : "sortFunction" "filters/:filter/page/:page" : "filtersPageFunction" "filters/:filter/sort/:sort" : "filtersSortFunction" "filters/:filter/sort/:sort/page/:page" : "allFunction" "sort/:sort/page/:page" : "sortPageFunction" Sunday, March 17, 13
7. Backbone.Router This is because it treats routes like URLs, not parameters. So you would need to list every possible path. routes: "" : "defaultFunction" "page/:page" : "pageFunction" "filters/:filter" : "filtersFunction" "sort/:sort" : "sortFunction" "filters/:filter/page/:page" : "filtersPageFunction" "filters/:filter/sort/:sort" : "filtersSortFunction" "filters/:filter/sort/:sort/page/:page" : "allFunction" "sort/:sort/page/:page" : "sortPageFunction" Sunday, March 17, 13
8. Backbone.Router Thats 8 routes to track only 3 params. For 4 params you would need to define 15 routes. routes: "" : "defaultFunction" "page/:page" : "pageFunction" "filters/:filter" : "filtersFunction" "sort/:sort" : "sortFunction" "filters/:filter/page/:page" : "filtersPageFunction" "filters/:filter/sort/:sort" : "filtersSortFunction" "filters/:filter/sort/:sort/page/:page" : "allFunction" "sort/:sort/page/:page" : "sortPageFunction" Sunday, March 17, 13
9. That is painful. Sunday, March 17, 13
10. But Backbone.Detour takes the pain away Sunday, March 17, 13
11. Backbone.Detour In Backbone.Detour you do not define routes. Instead you define what params or route options you are expecting in the routeOptions method. Sunday, March 17, 13
12. Backbone.Detour To track the same 3 params you would just define these route options: routeOptions: -> @optional 'page' @optional 'filters' @optional 'sort' Sunday, March 17, 13
13. Backbone.Detour Now any route options you defined will be passed to handleRoute whenever a route is triggered. handleRoute: (args) -> page = args.page filters = args.filters sort = args.sort Sunday, March 17, 13
14. Backbone.Detour The normal method of updating the route in Backbone.js is to call: router.navigate(newPath) Sunday, March 17, 13
15. Backbone.Detour But this would clear the entire path, forcing you to pass all the params you are tracking back to navigate when you just want to change one. Sunday, March 17, 13
16. Backbone.Detour changePage: (newPage) -> @currentPage = newPage newPath = "page/#{@currentPage}" newPath += "/sort/#{@currentSort}" newPath += "/filters/#{@currentFilters}" @navigate(newPath) Sunday, March 17, 13
17. Backbone.Detour With Backbone.Detour you just call updateRoute and only pass what you want to change: router.updateRoute(page: 2) Sunday, March 17, 13
18. So how do you clear a param? Just pass it to updateRoute as false: router.updateRoute(sort: "name", page: false) Sunday, March 17, 13
19. Can a parameter default to a value if not set? I need a page though! Sunday, March 17, 13
20. Yes routeOptions: -> @optional 'page', default: 1 Sunday, March 17, 13
21. Yes routeOptions: -> @optional 'page', default: 1 Now when you call: router.updateRoute(sort: "name", page: false) It triggers like this: handleRoute: (args) -> console.log(args.sort) # "name" console.log(args.page) # "1" Sunday, March 17, 13
22. Route changes are never silent in Backbone.Detour Sunday, March 17, 13
23. In Backbone.js there are 2 approaches to handling routing: A.The view changes itself, then informs the router to update the route silently B. The view tells the router to trigger, upon that, the router tells the view to re-render Sunday, March 17, 13
24. I strongly prefer the 2nd method and thats the opinion used for Backbone.Detour. Sunday, March 17, 13
25. This ensures that there is one place to put the logic to handle routes. Sunday, March 17, 13
26. Because there are 2 ways that a user ends up at a certain state in your application: A.The user loads /my-app and then does something to change the route to /my-app#my/route B. The user loads /my-app#my/route directly Sunday, March 17, 13
27. When all route changes are triggers, it keeps the same flow for both scenarios: 1. A route change is triggered (either via page load or user interaction - it doesn't matter) 2. In response the router then tells the views to update accordingly Sunday, March 17, 13
28. Otherwise the flow diverges: 1. A route change is triggered (via page load) 2. In response the router then tells the views to update accordingly 1. A user interaction causes a view to change itself 2. The view then updates the route silently Sunday, March 17, 13
29. This usually ends up with duplicated logic. Sunday, March 17, 13
30. Its also harder to test because you must manually ensure that refreshing the page at a certain state gives the same results as navigating to that state. Sunday, March 17, 13
31. With the approach used by Backbone.Detour you get that for free. Sunday, March 17, 13
32. I also put in a lot of conveniences, including support for: • Default Values (Which we already covered) • Parameter Groups (Setting one clears the others) • Required Params (If not set, no params are passed) • Tokens (aka flags, params without values) • Arrays (they can be appended to, uniqued, and more) Sunday, March 17, 13
33. For more info: github.com/jisaacks/Backbone.Detour @jisaacks I made this for Emcien Want to work on cool stuff like this? Emcien is hiring. Sunday, March 17, 13