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

by John D Wells

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@johndwells – GeeUp 2014 PARTIALS Stash

Slide 4

Slide 4 text

@johndwells – GeeUp 2014 PARTIALS Stash Sorry, Mark!

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@johndwells – GeeUp 2014 PARTIALS

Slide 8

Slide 8 text

@johndwells – GeeUp 2014 PARTIALS

Slide 9

Slide 9 text

@johndwells – GeeUp 2014 PARTIALS

Slide 10

Slide 10 text

@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}

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

@johndwells – GeeUp 2014 PARTIALS Partials Solve Problems

Slide 21

Slide 21 text

@johndwells – GeeUp 2014 PARTIALS

Slide 22

Slide 22 text

@johndwells – GeeUp 2014 PARTIALS Content Goes Here

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

@johndwells – GeeUp 2014 PARTIALS

Slide 25

Slide 25 text

@johndwells – GeeUp 2014 PARTIALS

Slide 26

Slide 26 text

@johndwells – GeeUp 2014 PARTIALS

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

! 5. {exp:channel:entries}! 6. …! 7. {/exp:channel:entries}! 8.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@johndwells – GeeUp 2014 PARTIALS Level Up

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@johndwells – GeeUp 2014 PARTIALS Setters & Getters

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

@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}

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@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}

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@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}

Slide 41

Slide 41 text

@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 :(

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@johndwells – GeeUp 2014 PARTIALS Use Cases

Slide 47

Slide 47 text

@johndwells – GeeUp 2014 PARTIALS

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@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}

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@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}

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

@johndwells – GeeUp 2014 PARTIALS Layout “hooks”

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@johndwells – GeeUp 2014 PARTIALS Default to 404?

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

@johndwells – GeeUp 2014 PARTIALS CE Cache

Slide 59

Slide 59 text

@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}

Slide 60

Slide 60 text

@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}

Slide 61

Slide 61 text

@johndwells – GeeUp 2014 PARTIALS Moving Pagination

Slide 62

Slide 62 text

@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}

Slide 63

Slide 63 text

@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}

Slide 64

Slide 64 text

@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}

Slide 65

Slide 65 text

@johndwells – GeeUp 2014 PARTIALS Thank you. Partials