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

Day11: Svelte 內建 element 與 SSR 淺談

Kalan
September 20, 2020
Programming
0
180

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
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
290
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
140
状態管理を楽にする道
kjj6198
1
310
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼（2）
kjj6198
0
170
Svelte 如何編譯程式碼（1）
kjj6198
0
150
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130

Other Decks in Programming

See All in Programming
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Arm移行タイムアタック
qnighy
0
330
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Amazon Qを使ってIaCを触ろう！
maruto
0
410
Jakarta EE meets AI
ivargrimstad
0
570
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
イベント駆動で成長して委員会
happymana
1
320
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k

Featured

See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
How to Ace a Technical Interview
jacobian
276
23k
Ruby is Unlike a Banana
tanoku
97
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
BBQ
matthewcrist
85
9.3k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k

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