Try   HackMD

#Session 3 選擇 Svelte 的三個理由

歡迎來到 JSDC 2021 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。

共筆協作，共享知識，打造開放社群。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Welcome to JSDC 2021 Collaborative Writing

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Collaborative Writing Workplace：https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.

Build a community with open collaboration.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

從這開始
可以直接打字做共筆囉

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

簡報連結

也可以參考 ModernWeb'21 的簡報

講者介紹

Kalan 愷開

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

What's Svelte

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 一門前端框架 (50K+
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    )
  • Rich Harris
  • 事先編譯
    • 減少 Runtime 體積
  • 400+ contributors
    • You're welcome :)

Agenda

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Too many frameworks!

  • 框架的出現代表開發者對現況的不滿
  • 人們對於最佳實踐的探索
    • 早期的 jQuery
      • HTML / CSS / JS 分開寫
    • React -> JSX
      • 元件化
      • CSS in JS
        • 更靈活

簡介 Svelte

現代前端框架的基本要素

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 每一個檔案都是單獨元件
  • Vue 3 的 ref()
    • 修改變數 -> 觸發更新
    • 不需要手動呼叫 DOM 的 API
  • 減少開發者的認知負擔

問題點

  • 需要在 runtime 做 diff 演算
    • 增加 bundle size
  • 需要時做一套響應機制
    • 犧牲一部分效能

選擇 Svelte 的三個理由

語法容易、容易上手

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 一個 HTML 程式碼
  • Svelte 特殊處理
  • 對變數的計算就有響應效果

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

twitter.com/AdamRackis/status/1438221959029039108

響應式語法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 開發者不需要手動加入變數依賴

樣板語法

  • For 迴圈
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • 不是回傳 HTML Code 回來
  • 線上 REPL 與互動式教學
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

Bundle size 體積小

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 涉及畫面更新會 Compile 出 invalidate

Showcase

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

關於 Bundle size

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

關注度持續提升

開發者與社群的反應可當作指標參考

  • 越受關注，越令人好奇

State of JS 2020

  • 滿意度第一名
  • 使用情形：第四名
    • (8% -> 15% 變化不大)
    • 有慢慢在成長

SO Survey 2021

最受喜愛的框架？

有用 Svelte 的公司

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

缺點

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 大部分的處理都在編譯時期
  • 相對其他框架資源較少
  • 使用率仍然偏低
    • 其實也不低了

final

加入 FB 社團「Svelte.js Taiwan」！

Last changed by 
 
JSDC.tw
0
1280

Read more

#Session 1 窮途末路的 SPA，堅持 CSR 到放棄

從這開始 可以直接打字做共筆囉 :point_down: KK 徐凱 Web 實驗室 早期用 CSR 寫 SPA 名詞解釋

Jun 29, 2023
#Session 4 JS在生成式、演算藝術與NFT的應用

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: https://hackmd.io/V_HFtUJDQ8un2QVb5ti8jA# Processing - p5.js p5.js three.js pixi.js

Sep 15, 2022
#Session 2 為什麼許多公司都願意導入 Next.js

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: Leo 邱柏鈞 Hahow B2B 前端工程師 Medium | Airwaves StarBugs

Jul 17, 2022
#Session 2 JavaScript 模組進化論 - 模組化的演進與實戰

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: Mujing JavaScript 概念三明治 Outline

Mar 5, 2022
Read more from JSDC.tw
Published on HackMD