Go Gin HTML Template chevron_right Template Layouts and Partials

Template Layouts and Partials

calendar_today schedule 14 min read

Learning Objectives: By the end of this lesson, you will be able to:

  • Implement template inheritance and layout systems
  • Create reusable template components (partials)
  • Organize templates for maintainability and scalability
  • Build consistent UI layouts across multiple pages

1. Welcome and Introduction (5 minutes)

Icebreaker Activity

Have you ever wondered how large websites like Netflix, GitHub, or Amazon maintain consistent navigation, headers, and footers across thousands of pages? Imagine if every page had to duplicate the same HTML code for the header, navigation menu, and footer - it would be a maintenance nightmare!

The secret lies in template layouts and partials - powerful techniques that allow developers to create reusable template components and establish consistent design patterns across entire applications. Today, we’ll master these techniques to build maintainable, scalable web applications.

Lesson Overview

  • Duration: 2-3 hours
  • Prerequisites: Lessons 1-2 completed (Gin basics and template syntax)
  • Materials Needed: Go development environment, previous lesson code, text editor

2. Learning Objectives and Session Outline (5 minutes)

What We’ll Cover Today:

  1. Template Inheritance Fundamentals - Master layouts with {{define}} and {{template}}
  2. Partial Component Creation - Building reusable UI components
  3. Template Organization Strategies - Structuring templates for large applications
  4. Advanced Layout Patterns - Nested layouts and conditional components
  5. Performance Optimization - Efficient template loading and caching

Success Criteria:

By the end of this session, you should be able to create a multi-page website with consistent layouts, reusable components, and well-organized template files that follow professional development practices.

3. Foundation Knowledge (15-20 minutes)

Core Concepts

Template Inheritance and Layout Systems

Template inheritance allows you to define a base template (layout) that contains common elements like headers, navigation, and footers, then extend it with specific content for each page. This approach eliminates code duplication and ensures consistent design across your application.

Real-World Analogy: Think of template inheritance like a house blueprint. The base layout defines the foundation, walls, and roof (header, navigation, footer), while individual rooms (pages) have their own specific content and decoration, but all follow the same structural pattern.

Why This Matters: Template inheritance reduces maintenance burden, ensures design consistency, and makes it easy to implement site-wide changes. When you need to update the navigation menu, you only change it in one place.

Partial Templates and Component Architecture

Partial templates are small, focused template files that handle specific UI components like navigation menus, sidebars, forms, or cards. They promote reusability and make complex templates more manageable by breaking them into smaller, logical pieces.

Real-World Analogy: Partials are like LEGO blocks - small, specialized pieces that can be combined in different ways to build complex structures. A navigation partial can be used across multiple layouts, just like a LEGO wheel can be used in cars, trucks, or planes.

Why This Matters: Partials improve code organization, enable team collaboration (different developers can work on different components), and make testing and debugging easier by isolating functionality.

Template Organization and File Structure

As applications grow, organizing templates becomes crucial for maintainability. Professional applications use established patterns for naming, directory structure, and template relationships that make code easy to navigate and modify.

Key Terminology

  • Layout: A base template that defines the overall page structure
  • Block: A named section in a layout that can be overridden by child templates
  • Partial: A reusable template component that can be included in other templates
  • Template Name: The identifier used to reference templates in {{template}} actions
  • Template Definition: A named template block created with {{define}}
  • Template Inclusion: Adding one template into another using {{template}}

4. Detailed Explanation and Examples (25-30 minutes)

Template Inheritance Architecture

Go’s template inheritance system works through template definitions and inclusions. The key concepts are:

  1. Base Layout Definition: Create a master template with common elements and content blocks
  2. Content Block Definition: Define specific areas where child templates can inject content
  3. Child Template Extension: Create page-specific templates that define content for the blocks
  4. Template Assembly: Gin combines the layout and content templates during rendering

The inheritance system follows these principles:

  • Composition over inheritance: Templates are composed of multiple named definitions
  • Explicit block definition: Content areas must be explicitly defined and named
  • Flexible content injection: Child templates can define content for any named block
  • Multiple inheritance: Templates can include multiple other templates

Template Loading and Processing

When Gin loads templates using LoadHTMLGlob(), it processes all template files and builds a registry of named template definitions. Each {{define}} block creates a named template that can be referenced by other templates.

The loading process:

  1. Parse all template files in the specified directory
  2. Extract named template definitions using {{define "name"}}
  3. Build a template registry mapping names to template objects
  4. Enable cross-template references and inclusions

Partial Template Patterns

Effective partial template design follows several established patterns:

Atomic Components

Small, single-purpose partials that handle one specific UI element:

  • Button components with different styles
  • Form input fields with validation display
  • Alert messages with different severity levels
  • Loading spinners and progress indicators

Composite Components

Larger partials that combine multiple atomic components:

  • Navigation bars with menus and user profiles
  • Product cards with images, titles, and pricing
  • Article summaries with metadata and actions
  • Comment sections with forms and listings

Layout Components

Structural partials that define page sections:

  • Header sections with branding and navigation
  • Sidebar content with widgets and links
  • Footer sections with links and information
  • Main content wrappers with consistent styling

5. Live Coding Demonstration (20-25 minutes)

Example 1: Master Layout with Template Inheritance

Create the base layout templates/layouts/base.html:

{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}} - My Website</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* Header Styles */
        header { background: #2c3e50; color: white; padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: bold; }
        nav ul { list-style: none; display: flex; gap: 2rem; }
        nav a { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.3s; }
        nav a:hover { background: rgba(255,255,255,0.1); }
        
        /* Main Content */
        main { min-height: calc(100vh - 140px); padding: 2rem 0; }
        .content-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; }
        .main-content { background: white; }
        .sidebar { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; }
        
        /* Footer */
        footer { background: #34495e; color: white; text-align: center; padding: 1rem 0; margin-top: 2rem; }
        
        /* Utility Classes */
        .btn { display: inline-block; padding: 0.5rem 1rem; background: #3498db; color: white; text-decoration: none; border-radius: 4px; transition: background 0.3s; }
        .btn:hover { background: #2980b9; }
        .alert { padding: 1rem; margin: 1rem 0; border-radius: 4px; }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
    
    {{if eq .page "home"}}{{template "home-css" .}}{{end}}
    {{if eq .page "blog"}}{{template "blog-css" .}}{{end}}
</head>
<body>
    {{/* Include header partial */}}
    {{template "header" .}}
    
    <main>
        <div class="container">
            {{/* Flash messages */}}
            {{template "flash-messages" .}}
            
            <div class="content-wrapper">
                <div class="main-content">
                    {{if eq .page "home"}}
                        {{template "home-content" .}}
                    {{else if eq .page "blog"}}
                        {{template "blog-content" .}}
                    {{end}}
                </div>
                
                <aside class="sidebar">
                    {{if eq .page "blog"}}{{template "blog-sidebar" .}}{{end}}
                </aside>
            </div>
        </div>
    </main>
    
    {{/* Include footer partial */}}
    {{template "footer" .}}
    
</body>
</html>
{{end}}

Create header partial templates/partials/header.html:

{{define "header"}}
<header>
    <div class="container">
        <div class="header-content">
            <div class="logo">My Website</div>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/contact">Contact</a></li>
                    {{if .user}}
                        <li><a href="/profile">Profile</a></li>
                        <li><a href="/logout">Logout</a></li>
                    {{else}}
                        <li><a href="/login">Login</a></li>
                        <li><a href="/register">Register</a></li>
                    {{end}}
                </ul>
            </nav>
        </div>
    </div>
</header>
{{end}}

Explanation:

  • {{define "base"}} creates the master layout template
  • Separate, uniquely named content templates avoid redefining a shared {{block "content" .}} when multiple pages are parsed together. {{block}} is useful when each page has its own cloned template set.
  • {{template "header" .}} includes the header partial
  • The layout provides consistent structure while allowing content customization

Add templates/partials/shared.html for the remaining names used by the layout and blog page (replace these minimal versions as you build the UI):

{{define "footer"}}<footer><div class="container">My Website</div></footer>{{end}}
{{define "flash-messages"}}{{if .flash}}<p role="status">{{.flash}}</p>{{end}}{{end}}
{{define "pagination"}}{{if .}}<nav aria-label="Pages">Page {{.}}</nav>{{end}}{{end}}
{{define "recent-comments"}}{{range .}}<p>{{.}}</p>{{end}}{{end}}
{{define "newsletter-signup"}}<p>Newsletter signup coming soon</p>{{end}}

Example 2: Page-Specific Templates Using Layout

Create templates/pages/home.html:

{{define "home-content"}}
<div class="hero-section">
    <h1>Welcome to {{.siteName}}</h1>
    <p class="lead">Discover amazing content and connect with our community.</p>
    <a href="/blog" class="btn">Read Our Blog</a>
</div>

<section class="features">
    <h2>Why Choose Us?</h2>
    <div class="feature-grid">
        {{range .features}}
            {{template "feature-card" .}}
        {{end}}
    </div>
</section>

<section class="recent-posts">
    <h2>Recent Blog Posts</h2>
    {{if .recentPosts}}
        <div class="posts-grid">
            {{range .recentPosts}}
                {{template "post-card" .}}
            {{end}}
        </div>
        <div class="text-center">
            <a href="/blog" class="btn">View All Posts</a>
        </div>
    {{else}}
        <p>No recent posts available.</p>
    {{end}}
</section>
{{end}}

{{define "home-css"}}
<style>
    .hero-section { text-align: center; padding: 3rem 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin: -2rem -20px 2rem; border-radius: 8px; }
    .lead { font-size: 1.2rem; margin: 1rem 0 2rem; }
    .feature-grid, .posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
    .text-center { text-align: center; margin: 2rem 0; }
</style>
{{end}}

Create templates/pages/blog.html:

{{define "blog-content"}}
<div class="blog-header">
    <h1>Blog Posts</h1>
    <p>Insights, tutorials, and updates from our team.</p>
</div>

{{if .posts}}
    <div class="blog-posts">
        {{range .posts}}
            <article class="blog-post">
                <h2><a href="/blog/{{.ID}}">{{.Title}}</a></h2>
                <div class="post-meta">
                    By {{.Author.Name}} on {{.PublishDate.Format "January 2, 2006"}}
                    {{if .Tags}}
                        {{range .Tags}}
                            <span class="tag">{{.}}</span>
                        {{end}}
                    {{end}}
                </div>
                <p>{{.Excerpt}}</p>
                <a href="/blog/{{.ID}}" class="read-more">Read More →</a>
            </article>
        {{end}}
    </div>
    
    {{/* Pagination partial */}}
    {{template "pagination" .pagination}}
{{else}}
    <div class="empty-state">
        <h2>No Posts Yet</h2>
        <p>Check back later for new content!</p>
    </div>
{{end}}
{{end}}

{{define "blog-sidebar"}}
<div class="widget">
    <h3>Categories</h3>
    <ul class="category-list">
        {{range .categories}}
            <li><a href="/blog/category/{{.Slug}}">{{.Name}} ({{.PostCount}})</a></li>
        {{end}}
    </ul>
</div>

<div class="widget">
    <h3>Recent Comments</h3>
    {{template "recent-comments" .recentComments}}
</div>

<div class="widget">
    <h3>Newsletter</h3>
    {{template "newsletter-signup" .}}
</div>
{{end}}

{{define "blog-css"}}
<style>
    .blog-header { text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #eee; }
    .blog-post { background: white; padding: 1.5rem; margin-bottom: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    .blog-post h2 a { color: #2c3e50; text-decoration: none; }
    .blog-post h2 a:hover { color: #3498db; }
    .post-meta { color: #666; font-size: 0.9rem; margin: 0.5rem 0 1rem; }
    .tag { background: #e1ecf4; color: #39739d; padding: 2px 6px; border-radius: 3px; font-size: 0.8rem; margin-left: 0.5rem; }
    .read-more { color: #3498db; text-decoration: none; font-weight: bold; }
    .widget { background: white; padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .category-list { list-style: none; }
    .category-list a { color: #666; text-decoration: none; display: block; padding: 0.25rem 0; }
    .category-list a:hover { color: #3498db; }
</style>
{{end}}

Example 3: Reusable Partial Components

Create templates/partials/feature-card.html:

{{define "feature-card"}}
<div class="feature-card">
    <div class="feature-icon">
        {{if .Icon}}
            <i class="{{.Icon}}"></i>
        {{else}}
            🌟
        {{end}}
    </div>
    <h3>{{.Title}}</h3>
    <p>{{.Description}}</p>
    {{if .Link}}
        <a href="{{.Link.URL}}" class="feature-link">{{.Link.Text}}</a>
    {{end}}
</div>
{{end}}

Create templates/partials/post-card.html:

{{define "post-card"}}
<article class="post-card">
    {{if .FeaturedImage}}
        <div class="post-image">
            <img src="{{.FeaturedImage}}" alt="{{.Title}}" loading="lazy">
        </div>
    {{end}}
    <div class="post-content">
        <h3><a href="/blog/{{.ID}}">{{.Title}}</a></h3>
        <div class="post-meta">
            <span class="author">By {{.Author.Name}}</span>
            <span class="date">{{.PublishDate.Format "Jan 2, 2006"}}</span>
            {{if .ReadTime}}
                <span class="read-time">{{.ReadTime}} min read</span>
            {{end}}
        </div>
        <p class="post-excerpt">{{.Excerpt}}</p>
        <div class="post-tags">
            {{range .Tags}}
                <span class="tag">{{.}}</span>
            {{end}}
        </div>
    </div>
</article>
{{end}}

Create comprehensive Go handler:

package main

import (
    "net/http"
    "time"
    
    "github.com/gin-gonic/gin"
)

// Feature represents homepage features
type Feature struct {
    Title       string `json:"title"`
    Description string `json:"description"`
    Icon        string `json:"icon"`
    Link        *Link  `json:"link,omitempty"`
}

type Link struct {
    URL  string `json:"url"`
    Text string `json:"text"`
}

// BlogPost represents blog post data
type BlogPost struct {
    ID             int       `json:"id"`
    Title          string    `json:"title"`
    Content        string    `json:"content"`
    Excerpt        string    `json:"excerpt"`
    Author         Author    `json:"author"`
    PublishDate    time.Time `json:"publish_date"`
    Tags           []string  `json:"tags"`
    FeaturedImage  string    `json:"featured_image"`
    ReadTime       int       `json:"read_time"`
}

type Author struct {
    Name   string `json:"name"`
    Email  string `json:"email"`
    Avatar string `json:"avatar"`
}

func main() {
    r := gin.Default()
    
    // filepath.Glob("templates/**/*") matches files exactly one directory deep.
    // Shared definition names must be unique across these files.
    r.LoadHTMLGlob("templates/**/*")
    
    // Routes
    r.GET("/", homeHandler)
    r.GET("/blog", blogHandler)
    // Add /blog/:id only after implementing a blogPostHandler.
    
    r.Run(":8080")
}

func homeHandler(c *gin.Context) {
    features := []Feature{
        {
            Title:       "Fast Performance",
            Description: "Built with Go for lightning-fast response times",
            Icon:        "fas fa-bolt",
            Link:        &Link{URL: "/performance", Text: "Learn More"},
        },
        {
            Title:       "Easy to Use",
            Description: "Intuitive interface designed for everyone",
            Icon:        "fas fa-heart",
        },
        {
            Title:       "Secure",
            Description: "Enterprise-grade security built in",
            Icon:        "fas fa-shield-alt",
        },
    }
    
    recentPosts := []BlogPost{
        {
            ID:            1,
            Title:         "Getting Started with Go Templates",
            Excerpt:       "Learn the basics of Go's powerful template system",
            Author:        Author{Name: "Jane Developer"},
            PublishDate:   time.Now().AddDate(0, 0, -2),
            Tags:          []string{"go", "templates", "tutorial"},
            FeaturedImage: "/images/go-templates.jpg",
            ReadTime:      5,
        },
        {
            ID:          2,
            Title:       "Advanced Gin Techniques",
            Excerpt:     "Explore advanced patterns for Gin web applications",
            Author:      Author{Name: "John Coder"},
            PublishDate: time.Now().AddDate(0, 0, -5),
            Tags:        []string{"gin", "advanced", "web"},
            ReadTime:    8,
        },
    }
    
    c.HTML(http.StatusOK, "base", gin.H{
        "page":        "home",
        "title":       "Home",
        "siteName":    "My Awesome Website",
        "features":    features,
        "recentPosts": recentPosts,
    })
}

func blogHandler(c *gin.Context) {
    posts := []BlogPost{
        {
            ID:          1,
            Title:       "Getting Started with Go Templates",
            Content:     "Full content here...",
            Excerpt:     "Learn the basics of Go's powerful template system and how to use them effectively.",
            Author:      Author{Name: "Jane Developer"},
            PublishDate: time.Now().AddDate(0, 0, -2),
            Tags:        []string{"go", "templates", "tutorial"},
        },
        {
            ID:          2,
            Title:       "Advanced Gin Techniques",
            Content:     "Full content here...",
            Excerpt:     "Explore advanced patterns and techniques for building robust web applications with Gin.",
            Author:      Author{Name: "John Coder"},
            PublishDate: time.Now().AddDate(0, 0, -5),
            Tags:        []string{"gin", "advanced", "web"},
        },
    }
    
    categories := []Category{
        {Name: "Go Language", Slug: "go", PostCount: 15},
        {Name: "Web Development", Slug: "web", PostCount: 23},
        {Name: "Tutorials", Slug: "tutorials", PostCount: 31},
    }
    
    c.HTML(http.StatusOK, "base", gin.H{
        "page":       "blog",
        "title":      "Blog",
        "posts":      posts,
        "categories": categories,
    })
}

type Category struct {
    Name      string `json:"name"`
    Slug      string `json:"slug"`
    PostCount int    `json:"post_count"`
}

6. Hands-On Practice (30-40 minutes)

Exercise 1: Create a Master Layout (10 minutes)

Objective: Build a base layout with header, footer, and content blocks

Instructions:

  1. Create a layouts directory and build a master layout template
  2. Include navigation, main content area, and footer
  3. Add CSS styling for a professional appearance
  4. Test the layout with a simple page template

Starter Code:

{{define "master"}}
<!DOCTYPE html>
<html>
<head>
    <title>{{.title}}</title>
    <!-- Add your CSS here -->
</head>
<body>
    <!-- TODO: Add header with navigation -->
    
    <main>
        {{block "content" .}}
            <h1>Default Content</h1>
        {{end}}
    </main>
    
    <!-- TODO: Add footer -->
</body>
</html>
{{end}}

Solution:

{{define "master"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}} - Company Site</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        header { background: #333; color: white; padding: 1rem; }
        nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
        nav a { color: white; text-decoration: none; }
        main { min-height: 70vh; padding: 2rem; }
        footer { background: #666; color: white; text-align: center; padding: 1rem; }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        {{block "content" .}}
            <h1>Welcome to Our Website</h1>
            <p>This is the default content.</p>
        {{end}}
    </main>
    
    <footer>
        <p>&copy; 2024 Company Name. All rights reserved.</p>
    </footer>
</body>
</html>
{{end}}

Exercise 2: Build Reusable Partials (15 minutes)

Objective: Create partial templates for common UI components

Requirements:

  • Product card partial for e-commerce display
  • Breadcrumb navigation partial
  • Alert message partial with different types
  • User profile widget partial

Hints:

  • Use semantic HTML structure for accessibility
  • Include conditional logic for optional elements
  • Make partials flexible with different data inputs

Exercise 3: Complex Layout System (15 minutes)

Objective: Build a multi-layout system for different page types

Challenge: Create different layouts for:

  • Marketing pages (full-width hero, features)
  • Blog pages (sidebar, content area)
  • Dashboard pages (navigation, main content, widgets)
  • Error pages (centered content, minimal navigation)

Extension Ideas:

  • Add responsive design considerations
  • Implement theme switching capability
  • Create print-specific layouts

7. Common Pitfalls and Troubleshooting (10 minutes)

Frequent Mistakes

  1. Problem: Template not found errors when using partials Cause: Incorrect template names or paths in {{template}} calls Solution: Ensure template names match exactly with {{define}} declarations and check file paths

  2. Problem: Content not appearing in layout blocks Cause: Forgetting to call {{template "layout" .}} in child templates Solution: Always include the layout template call and ensure proper block definitions

  3. Problem: CSS and JavaScript conflicts between layouts Cause: Multiple layouts defining conflicting styles or scripts Solution: Use namespaced CSS classes and conditional asset loading

Debugging Tips

  • Use descriptive template names that clearly indicate their purpose
  • Test templates in isolation before integrating into complex layouts
  • Use browser developer tools to inspect generated HTML structure
  • Implement template debugging helpers to show which templates are being used

8. Best Practices and Professional Tips (5 minutes)

Industry Standards

  • Naming Conventions: Use descriptive names like user-profile-card instead of generic names like card
  • Directory Structure: Organize templates by type (layouts/, partials/, pages/) or feature (user/, blog/, admin/)
  • Documentation: Comment complex template logic and document partial APIs
  • Performance: Minimize template nesting depth and avoid excessive partial includes

Next Steps in Your Learning Journey

  • Learn about custom template functions for specialized formatting and logic
  • Explore template compilation and caching strategies for production
  • Study component-based architectures and design systems
  • Practice building accessible and responsive template components

9. Summary and Review (5 minutes)

Key Takeaways

  1. Template Inheritance: Master layouts provide consistent structure while allowing flexible content customization
  2. Partial Components: Reusable template pieces improve maintainability and enable modular design
  3. Organization Strategies: Proper file structure and naming conventions make large template systems manageable

Quick Review Questions

  1. What’s the difference between {{template}} and {{block}} in Go templates?
  2. How do you pass data from a layout to a partial template?
  3. What are the benefits of using template inheritance over copying HTML code?

For Instructors

Teaching Tips

  • Emphasize the importance of planning template architecture before coding
  • Show examples of how poor template organization leads to maintenance problems
  • Demonstrate refactoring techniques for converting duplicated HTML into reusable partials
  • Use visual diagrams to explain template inheritance relationships

Assessment Ideas

  • Template architecture design exercise with requirements analysis
  • Refactoring project converting a multi-page site to use layouts and partials
  • Code review focusing on reusability and maintainability
  • Performance analysis of different template organization strategies

Adaptation Notes

  • For beginners: Focus on simple layout inheritance before introducing complex partial systems
  • For advanced students: Discuss template compilation optimization and advanced composition patterns
  • Online delivery: Use collaborative tools for template design exercises and peer reviews