Partials - A DRY template pattern. Now a part of EE core.

Slides for my presentation about the "partials" template development pattern, presented at the 2014 GeeUp conference in Leiden, Netherlands: http://geeuphq.com

July 1 2014 Update: Amended slide 38 to indicate EE 2.9 changes, no longer are you able to explicitly set layout:contents in your parent template.

Transcript

1. @johndwells – GeeUp 2014
   PARTIALS
   A DRY template pattern.
   Now a part of EE core.
   Partials
   

   View Slide

2. @johndwells – GeeUp 2014
   PARTIALS
   Goals
   • What are “partials”
   • In action with EE 2.8’s {layout=} tag
   • Common use cases & tricks
   

   View Slide

3. @johndwells – GeeUp 2014
   PARTIALS
   Stash
   

   View Slide

4. @johndwells – GeeUp 2014
   PARTIALS
   Stash
   Sorry, Mark!
   

   View Slide

5. @johndwells – GeeUp 2014
   PARTIALS
   Patterns
   …a general reusable solution to a
   commonly occurring problem
   within a given context…
   http://en.wikipedia.org/wiki/Software_design_pattern
   

   View Slide

6. @johndwells – GeeUp 2014
   PARTIALS
   Content
   Sandwich
   http://xkcd.com/149
   

   View Slide

7. @johndwells – GeeUp 2014
   PARTIALS
   

   View Slide

8. @johndwells – GeeUp 2014
   PARTIALS
   

   View Slide

9. @johndwells – GeeUp 2014
   PARTIALS
   

   View Slide

10. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

11. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

12. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

13. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

14. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

15. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

16. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

17. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

18. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {embed=“embeds/_html_head” title=“Blog”}!
    3. !
    4. {embed=“embeds/_nav” active=“blog”}!
    5. … !
    6. {snippet_sidebar}!
    7. {snippet_footer}!
    8. !
    9. {snippet_html_foot}
    

    View Slide

19. @johndwells – GeeUp 2014
    PARTIALS
    Downsides
    • Code repetition - every calling template must “know”
    overall structure of final output
    • Risk of single DOM elements spanning multiple embeds
    • Difficult to pass content through to embeds (e.g. )
    • Performance hits through multiple embeds & snippets
    

    View Slide

20. @johndwells – GeeUp 2014
    PARTIALS
    Partials Solve
    Problems
    

    View Slide

21. @johndwells – GeeUp 2014
    PARTIALS
    

    View Slide

22. @johndwells – GeeUp 2014
    PARTIALS
    Content Goes Here
    

    View Slide

23. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. !
    3. … !
    4. !
    5. !
    6. … !
    7. CONTENT GOES HERE!
    8. … !
    9. !
    10.

    View Slide

24. @johndwells – GeeUp 2014
    PARTIALS
    

    View Slide

25. @johndwells – GeeUp 2014
    PARTIALS
    

    View Slide

26. @johndwells – GeeUp 2014
    PARTIALS
    HERE>
    

    View Slide

27. @johndwells – GeeUp 2014
    PARTIALS
    !
    {layout=“_layouts/index”}!
    !
    !
    !
    !
    !
    

    View Slide

28. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. !
    5. {exp:channel:entries}!
    6. …!
    7. {/exp:channel:entries}!
    8.
    

    View Slide

29. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. !
    3. … !
    4. !
    5. !
    6. … !
    7. {layout:contents}!
    8. … !
    9. !
    10.

    View Slide

30. @johndwells – GeeUp 2014
    PARTIALS
    Level Up
    

    View Slide

31. @johndwells – GeeUp 2014
    PARTIALS
    Terms
    • “Layout” is the EE template which contains your
    wrapping/container markup.
    • “Parent” is the calling EE template that uses the
    {layout=} tag
    • “Layout Variables” are the partials that we pass from
    our Parent template to our Layout template.
    

    View Slide

32. @johndwells – GeeUp 2014
    PARTIALS
    Rules
    • {layout=} must be the first tag in your parent template,
    before any other tags
    • There may be only one {layout=} tag present in any one
    parent template.
    • {layout:contents} is reserved as the default variable
    containing the default output of your parent template.
    

    View Slide

33. @johndwells – GeeUp 2014
    PARTIALS
    Setters
    & Getters
    

    View Slide

34. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index” title=“Blog”}!
    3. !
    4. !
    5. !
    6. !
    7. !
    8.
    

    View Slide

35. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index” title=“Blog”}!
    3. !
    4. {layout:set name=“title” value=“Blog”}!
    5. !
    6. !
    7. !
    8.
    

    View Slide

36. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index” title=“Blog”}!
    3. !
    4. {layout:set name=“title” value=“Blog”}!
    5. !
    6. {layout:set name=“title”}!
    7. Blog!
    8. {/layout:set}
    

    View Slide

37. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. Automatically set to {layout:contents}
    

    View Slide

38. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. {layout:set name=“contents”}!
    5. Not possible as of EE 2.9 :(!
    6. {/layout:set}
    

    View Slide

39. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index” title=“Foo”}!
    3. !
    4. {layout:set name=“title” value=“Bar”}
    

    View Slide

40. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. {layout:set name=“title” value=“Bar”}!
    5. !
    6. {layout:set name=“title”}!
    7. Baz!
    8. {/layout:set}
    

    View Slide

41. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. {layout:set name=“contents”}!
    5. FTW!!
    6. {/layout:set}!
    7. !
    8. I lose :(
    

    View Slide

42. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. !
    3. {layout:contents}
    

    View Slide

43. @johndwells – GeeUp 2014
    PARTIALS
    Low’s Order?
    Parse Order
    

    View Slide

44. @johndwells – GeeUp 2014
    PARTIALS
    1. Determine template to process based on request URI
    2. Get template from database, check template access permissions, and increment the hit counter
    3. If it exists, get template from file
    4. If template type is static, return template and end parsing
    5. Parse (as a group, so order is irrelevant): {freelancer_version}, Snippets, MSM variables, and {last_segment}
    6. Parse segment variables
    7. Parse embed variables
    8. Parse layout variables
    9. Parse date formatting string constants
    10.Parse {template_edit_date}
    11.Parse {current_time}
    12.If present, get cached template, then skip to the advanced conditionals parsing stage
    13.Parse PHP on Input
    14.Parse simple conditionals: segment, embed, layout, global variables
    15.Assign and parse preload_replace variables
    16.Parse module and plugin tags
    17.Parse PHP on Output
    18.Write template to cache file
    19.Parse advanced conditionals
    20.Process template layouts
    21.Process embedded templates
    22.Process redirect variable
    23.Parse user-defined global variables
    24.Parse some standard global variables (separately, in order given):
    25.Add CSRF tokens to forms and parse {csrf_token}
    26.Parse remaining standard global variables (separately, in order given):
    27.Parse alternative syntax forms of the member variables above
    28.Parse path variables
    …
    Parse segment variables
    Parse embed variables
    Parse layout variables
    Parse date formatting string constants
    …
    …
    Parse advanced conditionals
    Process template layouts
    Process embedded templates
    Process redirect variable
    …
    Early
    Late
    

    View Slide

45. @johndwells – GeeUp 2014
    PARTIALS
    Performance
    https://github.com/andrewfairlie/stash-layouts
    

    View Slide

46. @johndwells – GeeUp 2014
    PARTIALS
    Use Cases
    

    View Slide

47. @johndwells – GeeUp 2014
    PARTIALS
    
    

    View Slide

48. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/entry.html--}!
    2. {exp:channel:entries}!
    3. {embed=“embeds/_head” title=“{title}”}!
    4. …!
    5. {/exp:channel:entries}
    1. {!--_embeds/head.html--}!
    2. !
    3. {if embed:title}{embed:title} |{/if} {site_name}!
    4.
    

    View Slide

49. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_embeds/head.html--}!
    2. {exp:channel:entries limit=“1” disable=“…”}!
    3. {if no_results}!
    4. {site_name}!
    5. {/if}!
    6. {title} | {site_name}!
    7. {exp:channel:entries}
    

    View Slide

50. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_embeds/head.html--}!
    2. {exp:seo_lite use_last_segment=“yes”}
    

    View Slide

51. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/entry.html--}!
    2. {layout=“_layouts/index”}!
    3. !
    4. {exp:channel:entries limit=“1”}!
    5. {layout:set name=“seo_title” value=“{title}”}!
    6. !
    7. …!
    8. {/exp:channel:entries}
    

    View Slide

52. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. {layout:seo_title}
    

    View Slide

53. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. !
    3. {if layout:seo_title}{layout:seo_title} |{/if} {site_name}!
    4.
    

    View Slide

54. @johndwells – GeeUp 2014
    PARTIALS
    Layout
    “hooks”
    

    View Slide

55. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--_layouts/index.html--}!
    2. !
    3. !
    4. {layout:head_start}!
    5. …!
    6. {layout:head_end}!
    7. !
    8.
    

    View Slide

56. @johndwells – GeeUp 2014
    PARTIALS
    Default
    to 404?
    

    View Slide

57. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--layouts/index.html--}!
    2. … !
    3. !
    4. … !
    5. !
    6. {if layout:contents}!
    7. {layout:contents}!
    8. {if:else}!
    9. Some witty 404 message here!
    10. {/if}!
    11. !
    12. … !
    13. !
    14.

    View Slide

58. @johndwells – GeeUp 2014
    PARTIALS
    CE Cache
    

    View Slide

59. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“layouts/index” title=“Foo”}!
    !
    4. {exp:ce_cache:it}!
    5. …!
    6. {/exp:ce_cache:it}
    

    View Slide

60. @johndwells – GeeUp 2014
    PARTIALS
    1. {!--blog/index.html--}!
    2. {layout=“layouts/index” title=“Foo”}!
    3. !
    4. {layout:set name=“sidebar”}!
    5. {exp:ce_cache:it}!
    6. …!
    7. {/exp:ce_cache:it}!
    8. {/layout:set}
    

    View Slide

61. @johndwells – GeeUp 2014
    PARTIALS
    Moving
    Pagination
    

    View Slide

62. @johndwells – GeeUp 2014
    PARTIALS
    1. {exp:channel:entries paginate=“bottom”}!
    2. {paginate}!
    3. Page {current_page} of {total_pages} pages!
    4. {pagination_links}!
    5. {/paginate}!
    6. {/exp:channel:entries}
    

    View Slide

63. @johndwells – GeeUp 2014
    PARTIALS
    1. {exp:channel:entries paginate=“bottom”}!
    2. {paginate}!
    3. {layout:set name="pagination"}!
    4. Page {current_page} of {total_pages} pages!
    5. {pagination_links}!
    6. {/layout:set}!
    7. {/paginate}!
    8. {/exp:channel:entries}
    1. {layout:pagination}
    

    View Slide

64. @johndwells – GeeUp 2014
    PARTIALS
    1. {exp:channel:entries paginate=“bottom”}!
    2. {paginate}!
    3. {previous_page}!
    4. {layout:set name=“prev_page” value=“{pagination_url}”}!
    5. {/previous_page}!
    6. {/paginate}!
    7. {/exp:channel:entries}
    1. {if layout:prev_page}!
    2. Prev!
    3. {if:else}!
    4. Prev!
    5. {/if}
    

    View Slide

65. @johndwells – GeeUp 2014
    PARTIALS
    Thank you.
    Partials
    

    View Slide