Stencil.js Tech Conference 2026

Stencil.js Tech Conference 2026 คืออะไร

Stencil.js เป็น compiler สำหรับสร้าง Web Components จาก Ionic team รองรับ TypeScript, JSX, reactive data-binding และ lazy loading ออก standard Web Components ที่ใช้ได้กับทุก framework (React, Vue, Angular, Vanilla JS) Tech Conferences เป็นงานสัมมนาเทคโนโลยีที่ developers มารวมตัวแลกเปลี่ยนความรู้ บทความนี้รวบรวมหัวข้อสำคัญที่ควรติดตามในปี 2026 เกี่ยวกับ Web Components และ Stencil.js พร้อมตัวอย่าง code และ trends ที่กำลังมา

Stencil.js Fundamentals

// stencil_basics.tsx — Stencil.js component example
import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true,
})
export class MyCounter {
  @Prop() initialCount: number = 0;
  @Prop() label: string = 'Counter';
  @State() count: number;
  @Event() countChanged: EventEmitter<number>;

  componentWillLoad() {
    this.count = this.initialCount;
  }

  private increment = () => {
    this.count++;
    this.countChanged.emit(this.count);
  };

  private decrement = () => {
    this.count--;
    this.countChanged.emit(this.count);
  };

  render() {
    return (
      <div class="counter">
        <h3>{this.label}</h3>
        <div class="controls">
          <button onClick={this.decrement}>-</button>
          <span class="value">{this.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    );
  }
}

// Usage in any HTML:
// <my-counter initial-count="10" label="Items"></my-counter>
// Works in React, Vue, Angular, plain HTML!

Conference Topics 2026

# conference_topics.py — Key topics for 2026
import json

class ConferenceTopics2026:
    TOPICS = {
        "declarative_shadow_dom": {
            "name": "Declarative Shadow DOM (DSD)",
            "description": "Server-side rendering สำหรับ Web Components — ไม่ต้อง JavaScript สำหรับ initial render",
            "impact": "SEO friendly, faster FCP, progressive enhancement",
            "status": "Chrome shipped, Safari shipped, Firefox in progress",
        },
        "css_parts_themes": {
            "name": "CSS Custom Properties & ::part() Theming",
            "description": "Theme Web Components จากภายนอกผ่าน CSS variables + ::part() selector",
            "impact": "Design system flexibility, brand customization ง่ายขึ้น",
        },
        "element_internals": {
            "name": "ElementInternals API",
            "description": "Custom elements เข้าร่วม form validation natively — ไม่ต้อง workaround",
            "impact": "Form-associated custom elements, native validation, accessibility",
        },
        "import_maps": {
            "name": "Import Maps & ESM CDN",
            "description": "โหลด Web Components จาก CDN โดยตรง — ไม่ต้อง bundler",
            "impact": "Micro-frontends ง่ายขึ้น, shared dependencies, tree shaking",
        },
        "stencil_v5": {
            "name": "Stencil v5 Features",
            "description": "Custom Elements Manifest, improved SSR, smaller runtime, Vite integration",
            "impact": "Build เร็วขึ้น, bundle เล็กลง, DX ดีขึ้น",
        },
        "ai_components": {
            "name": "AI-Powered Web Components",
            "description": "Web Components ที่ integrate AI (LLM, vision, speech) — on-device inference",
            "impact": "Smart UI components, personalization, accessibility automation",
        },
        "micro_frontends": {
            "name": "Micro-Frontends with Web Components",
            "description": "แต่ละทีม own Web Components → compose เป็น app — framework-agnostic",
            "impact": "Team autonomy, independent deployment, technology diversity",
        },
    }

    def show_topics(self):
        print("=== Conference Topics 2026 ===\n")
        for key, topic in self.TOPICS.items():
            print(f"[{topic['name']}]")
            print(f"  {topic['description']}")
            print(f"  Impact: {topic['impact']}")
            print()

topics = ConferenceTopics2026()
topics.show_topics()

Advanced Stencil Patterns

// advanced_patterns.tsx — Advanced Stencil.js patterns

// 1. Reactive Store (shared state across components)
import { createStore } from '@stencil/store';

interface AppState {
  user: { name: string; role: string } | null;
  theme: 'light' | 'dark';
  notifications: number;
}

const { state, onChange } = createStore<AppState>({
  user: null,
  theme: 'light',
  notifications: 0,
});

onChange('theme', (value) => {
  document.documentElement.setAttribute('data-theme', value);
});

export { state };

// 2. Component with Store
import { Component, h } from '@stencil/core';
import { state } from './store';

@Component({ tag: 'app-header', shadow: true })
export class AppHeader {
  render() {
    return (
      <header>
        <h1>{state.user?.name || 'Guest'}</h1>
        <span class="badge">{state.notifications}</span>
        <button onClick={() => state.theme = state.theme === 'light' ? 'dark' : 'light'}>
          Toggle Theme
        </button>
      </header>
    );
  }
}

// 3. Lazy-loaded component with intersection observer
@Component({ tag: 'lazy-image', shadow: true })
export class LazyImage {
  @Prop() src: string;
  @Prop() alt: string;
  @State() loaded: boolean = false;
  private el: HTMLElement;
  private observer: IntersectionObserver;

  componentDidLoad() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loaded = true;
        this.observer.disconnect();
      }
    });
    this.observer.observe(this.el);
  }

  disconnectedCallback() {
    this.observer?.disconnect();
  }

  render() {
    return (
      <div ref={(el) => this.el = el}>
        {this.loaded
          ? <img src={this.src} alt={this.alt} />
          : <div class="placeholder">Loading...</div>
        }
      </div>
    );
  }
}

console.log("Advanced Stencil patterns loaded");

Testing & Performance

# testing_perf.py — Testing and performance for Stencil
import json
import random

class StencilTestingPerf:
    TESTING = """
// spec/my-counter.spec.tsx — Unit test
import { newSpecPage } from '@stencil/core/testing';
import { MyCounter } from '../my-counter';

describe('my-counter', () => {
  it('renders with default values', async () => {
    const page = await newSpecPage({
      components: [MyCounter],
      html: '',
    });
    
    expect(page.root.shadowRoot.querySelector('.value').textContent).toBe('0');
  });

  it('renders with initial count', async () => {
    const page = await newSpecPage({
      components: [MyCounter],
      html: '',
    });
    
    expect(page.root.shadowRoot.querySelector('.value').textContent).toBe('5');
  });

  it('increments on button click', async () => {
    const page = await newSpecPage({
      components: [MyCounter],
      html: '',
    });
    
    const buttons = page.root.shadowRoot.querySelectorAll('button');
    buttons[1].click(); // increment button
    await page.waitForChanges();
    
    expect(page.root.shadowRoot.querySelector('.value').textContent).toBe('1');
  });

  it('emits countChanged event', async () => {
    const page = await newSpecPage({
      components: [MyCounter],
      html: '',
    });
    
    const spy = jest.fn();
    page.root.addEventListener('countChanged', spy);
    
    page.root.shadowRoot.querySelectorAll('button')[1].click();
    await page.waitForChanges();
    
    expect(spy).toHaveBeenCalledWith(expect.objectContaining({ detail: 1 }));
  });
});
"""

    def show_testing(self):
        print("=== Unit Testing ===")
        print(self.TESTING[:500])

    def bundle_analysis(self):
        print(f"\n=== Bundle Size Analysis ===")
        components = [
            {"name": "my-counter", "size": random.uniform(1, 3)},
            {"name": "data-table", "size": random.uniform(5, 10)},
            {"name": "nav-drawer", "size": random.uniform(3, 6)},
            {"name": "modal-dialog", "size": random.uniform(2, 5)},
            {"name": "form-input", "size": random.uniform(1, 3)},
        ]
        total = sum(c["size"] for c in components)
        for c in components:
            print(f"  {c['name']:<16} {c['size']:.1f} KB (gzipped)")
        print(f"  {'TOTAL':<16} {total:.1f} KB")
        print(f"\n  Stencil runtime: ~3 KB (lazy-load loader)")
        print(f"  Comparison: React ~40 KB, Vue ~30 KB, Stencil ~3 KB")

test = StencilTestingPerf()
test.show_testing()
test.bundle_analysis()

Conference Preparation Guide

# conference_prep.py — How to prepare for tech conferences
import json

class ConferencePrep:
    CONFERENCES = {
        "js_conf": {"name": "JSConf", "location": "Various (Global)", "focus": "JavaScript ecosystem"},
        "web_summit": {"name": "Web Summit", "location": "Lisbon", "focus": "Web technologies + startups"},
        "ionic_conf": {"name": "Ionic Conf", "location": "Online", "focus": "Ionic + Stencil + Capacitor"},
        "react_conf": {"name": "React Conf", "location": "Various", "focus": "React + Web Components interop"},
        "google_io": {"name": "Google I/O", "location": "Mountain View", "focus": "Web platform + Chrome"},
        "css_day": {"name": "CSS Day", "location": "Amsterdam", "focus": "CSS + Web Components styling"},
    }

    TALK_IDEAS = [
        "Building a Design System with Stencil.js — From Components to Culture",
        "Declarative Shadow DOM: SSR for Web Components Finally Works",
        "Micro-Frontends in Production: Lessons from 2 Years of Web Components",
        "AI-Powered Accessibility: Smart Web Components That Adapt",
        "From React to Web Components: Migration Strategy That Actually Works",
        "Performance Budget: Keeping Web Components Under 5KB Each",
    ]

    def show_conferences(self):
        print("=== Relevant Conferences ===\n")
        for key, conf in self.CONFERENCES.items():
            print(f"  [{conf['name']}] {conf['location']} — {conf['focus']}")

    def show_talks(self):
        print(f"\n=== Talk Ideas ===")
        for talk in self.TALK_IDEAS:
            print(f"  • {talk}")

    def prep_checklist(self):
        print(f"\n=== Preparation Checklist ===")
        items = [
            "อ่าน Web Components specs ล่าสุด (HTML, DOM, CSS)",
            "ทำ demo project ด้วย Stencil v5 + latest features",
            "ศึกษา Declarative Shadow DOM + SSR patterns",
            "เตรียม lightning talk (5 นาที) + full talk (30 นาที)",
            "Network: เตรียม elevator pitch สำหรับ projects ของตัวเอง",
            "เตรียมคำถามสำหรับ speakers — show genuine interest",
        ]
        for item in items:
            print(f"  □ {item}")

prep = ConferencePrep()
prep.show_conferences()
prep.show_talks()
prep.prep_checklist()

FAQ - คำถามที่พบบ่อย

Q: Stencil.js ยังน่าใช้ในปี 2026 ไหม?

A: ใช่ — Stencil ยังเป็น top choice สำหรับ Web Components: Ionic team maintain อย่างต่อเนื่อง, ใช้ใน Ionic Framework (millions of apps) ข้อดี: TypeScript, lazy loading, small runtime (~3KB), output standard Web Components ข้อเสีย: community เล็กกว่า React/Vue, learning curve สำหรับ decorators ทางเลือก: Lit (Google), vanilla Web Components, FAST (Microsoft)

Q: Web Components จะแทน React/Vue ไหม?

A: ไม่น่าจะแทนทั้งหมด แต่จะเสริมกัน: Web Components: ดีสำหรับ design systems, shared UI, micro-frontends React/Vue: ดีสำหรับ app-level state management, ecosystem, DX Trend 2026: ใช้ Web Components สำหรับ "leaf" components + React/Vue สำหรับ app shell Interop ดีขึ้นเรื่อยๆ — React 19+ รองรับ custom elements ดีมาก

Q: Stencil กับ Lit อันไหนดี?

A: Stencil: compiler-based, TypeScript + JSX, lazy loading built-in, Ionic ecosystem Lit: library-based (~5KB), tagged template literals, Google-backed, simpler Stencil ดีกว่า: large component libraries, need lazy loading, Ionic users Lit ดีกว่า: simpler components, smaller bundle, faster build, Google ecosystem ทั้งคู่ output standard Web Components — เลือกตาม preference

Q: เริ่มเรียน Stencil.js อย่างไร?

A: Step 1: เข้าใจ Web Components basics (Custom Elements, Shadow DOM) Step 2: npm init stencil → เลือก component starter Step 3: สร้าง 3-5 components พื้นฐาน (button, card, modal) Step 4: เรียนรู้ testing (@stencil/core/testing) Step 5: publish เป็น npm package → ใช้ใน React/Vue project Resources: stenciljs.com/docs, Ionic Academy, YouTube tutorials