Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day11: Svelte 內建 element 與 SSR 淺談

Kalan
September 20, 2020
Programming
0
160

Day11: Svelte 內建 element 與 SSR 淺談

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：談 svelte 的內建 element 與 SSR 教學

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev

Kalan

September 20, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
730
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
230
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
110
状態管理を楽にする道
kjj6198
1
270
Day25. 如何解析 HTML 語法
kjj6198
0
100
Day24. Svelte 如何編譯程式碼（2）
kjj6198
0
140
Svelte 如何編譯程式碼（1）
kjj6198
0
120
Day22. Svelte 經驗談
kjj6198
0
110
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
100

Other Decks in Programming

See All in Programming
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
脱・初心者！脱・マネコン！AWS CDKを使ってみませんか！？
har1101
0
300
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
What We Can Learn From OSS
inouehi
0
400
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Site Reliability Engineering for GMO
pyama86
6
940
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Git: the NoSQL Database
bkeepers
PRO
422
63k
A Tale of Four Properties
chriscoyier
150
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Docker and Python
trallard
33
2.7k
A better future with KSS
kneath
231
16k
GitHub's CSS Performance
jonrohan
1023
450k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Side Projects
sachag
451
41k
Embracing the Ebb and Flow
colly
79
4.1k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day11 - svelte 內建 element 與 SSR 簡介

  2. 第 12 屆 IT 鐵⼈賽 svelte 內建 element 類型 <svelte:self

    /> 遞迴使⽤元件 <svelte:window /> 可對 window 物件做操作 <svelte:body /> 與 <svelte:window/> 類似，可操作 body <svelte:head /> 可操作 head <svelte:component /> 可以動態引入 Svelte 元件 <svelte:options /> 可針對元件分別指定編譯器選項

  3. 第 12 屆 IT 鐵⼈賽 <svelte:self /> 遞迴使⽤元件 本範例取⾃官⽅ API

    ⽂件

  4. 第 12 屆 IT 鐵⼈賽 <svelte:window>

  5. 第 12 屆 IT 鐵⼈賽 好處：把⿇煩事交給 Svelte Svelte 會在正確的時間點處理事件監聽器 不⽤煩惱

    SSR 的問題 不需要另外寫監聽器修改變數

  6. 第 12 屆 IT 鐵⼈賽 <svelte:head> 處理 <head>

  7. 第 12 屆 IT 鐵⼈賽 使⽤ <svelte:head> 的好處 根據元件、⾴⾯不同分別管理 <head

    /> 內容 當元件銷毀時，svelte 也會刪除、修改對應內容 ⽀援 SSR，⽅便實作 SEO

  8. 第 12 屆 IT 鐵⼈賽 淺談 Svelte 當中的 SSR