1n. JavaScript Framework: Svelte, Preact, SolidJS, Alpine.js, Lit
Outsider,
Angular, React, Vue.js가 3대 프론트엔드 프레임워크로 자리 잡고 가장 많이 관심을 받는 중에 React가 가장 많은 인기를 누리고 있지만 그 이후에도 새로운 자바스크립트 프레임워크는 계속 등장하고 있습니다.
이후에 등장해서 지금도 어느 정도 사용자층이 있는 Svelte, Preact, SolidJS, Alpine.js, Lit가 어떻게 만들어지고 어떤 문제를 해결하려고 했는지를 살펴봅니다.
레퍼런스:
- Svelte
- State of JS 2024 - Front-End Frameworks (opens in a new tab)
- Rich Harris의 LinkedIn (opens in a new tab)
- Rich Harris의 GitHub (opens in a new tab)
- Rich Harris의 Twitter (opens in a new tab)
- Rich Harris의 Medium (opens in a new tab)
- Ractive.js 홈페이지 (opens in a new tab)
- Ractive.js 2013년 홈페이지 (opens in a new tab)
- Ractive.js GitHub (opens in a new tab)
- The Guardian (opens in a new tab)
- The Guardian Engineering blog (opens in a new tab)
- Introducing Ractive.js: next-generation DOM manipulation (opens in a new tab)
- Ractive.js의 Contributors (opens in a new tab)
- ECMAScript 2015 Language Specification (opens in a new tab)
- Source-to-source compiler (opens in a new tab)
- Babel: Not Born to Die (opens in a new tab)
- webpack (opens in a new tab)
- browserify (opens in a new tab)
- rollup.js (opens in a new tab)
- rollup.js의 첫 커밋 (opens in a new tab)
- Wiz Khalifa - Roll Up (opens in a new tab)
- BrooklynJS (opens in a new tab)
- Jed Schmidt (opens in a new tab)
- Svelte의 첫 커밋 (opens in a new tab)
- Svelte의 Twitter 계정 (opens in a new tab)
- Svelte의 2016년 홈페이지 (opens in a new tab)
- Svelte 1.0.0 커밋 (opens in a new tab)
- Svelte is heavily inspired by Ractive but they're separate projects (opens in a new tab)
- Svelte 홈페이지의 2017년 소개 (opens in a new tab)
- Frameworks without the framework: why didn't we think of this sooner? (opens in a new tab)
- Conduitry (opens in a new tab)
- Changelog: A UI framework without the framework (opens in a new tab)
- The New York Times: The Follower Factory (opens in a new tab)
- The zen of Just Writing CSS (opens in a new tab)
- Svelte v2 is out! (opens in a new tab)
- mustache (opens in a new tab)
- handlebars (opens in a new tab)
- Babel (opens in a new tab)
- Svelte 3: Rethinking reactivity (opens in a new tab)
- You Gotta Love Frontend Code Camp 2019 (opens in a new tab)
- Rich Harris - Rethinking reactivity (opens in a new tab)
- Evan You의 Tweet (opens in a new tab)
- Svelte 5 is alive (opens in a new tab)
- Dan Abramov: Beyond React 16 | JSConf Iceland (opens in a new tab)
- State of JS 2019 - Front-End Frameworks (opens in a new tab)
- Announcing SvelteKit 1.0 (opens in a new tab)
- Sapper: Towards the ideal web app framework (opens in a new tab)
- Svelte <3 TypeScript (opens in a new tab)
- Rich Harris의 Tweet (opens in a new tab)
- Announcing Svelte 4 (opens in a new tab)
- JSDoc (opens in a new tab)
- Yuichiro Yamashita의 답변 (opens in a new tab)
- Rich Harris가 Hacker News에 올린 글 (opens in a new tab)
- Guillermo Rauch (opens in a new tab)
- Vercel welcomes Rich Harris, creator of Svelte (opens in a new tab)
- Rich Harris가 Vecel에 합류한 Tweet (opens in a new tab)
- Svelte Origins: A JavaScript Documentary (opens in a new tab)
- Preact
- Preact 홈페이지 (opens in a new tab)
- Jason Miller의 LinkedIn (opens in a new tab)
- Jason Miller의 Twitter (opens in a new tab)
- Jason Miller의 GitHub (opens in a new tab)
- Jason Miller의 홈페이지 (opens in a new tab)
- zimbra (opens in a new tab)
- Synacor (opens in a new tab)
- S07E13 Modern Web Podcast - The Need for JS Speed | Using Preact - Interview with Jason Miller (opens in a new tab)
- WTF is JSX (opens in a new tab)
- Jason Miller의 Codepen (opens in a new tab)
- Codepen (opens in a new tab)
- jsfiddle (opens in a new tab)
- Preact AMA on Sideway (opens in a new tab)
- Preact 첫 커밋 (opens in a new tab)
- Mithril (opens in a new tab)
- Preact 2.0.0 (opens in a new tab)
- Jason Miller가 Hacker News에 올린 Preact 홍보 글 (opens in a new tab)
- Hacker News에 올라온 Preact (opens in a new tab)
- 2016년 첫 Preact 홈페이지 (opens in a new tab)
- New Preact website (with a live-coding REPL) (opens in a new tab)
- Using Preact Instead Of React (opens in a new tab)
- Sho Task Show 347: Jason Miller and PreactJS (opens in a new tab)
- Code Golf (opens in a new tab)
- State of JS 2024 - Front-End Frameworks (opens in a new tab)
- Introducing Signals (opens in a new tab)
- SolidJS
- SolidJS (opens in a new tab)
- Ryan Carniato의 GitHub (opens in a new tab)
- Ryan Carniato의 Twitter (opens in a new tab)
- Ryan Carniato의 Medium (opens in a new tab)
- Ryan Carniato의 Dev.to (opens in a new tab)
- SolidJS 첫 커밋 (opens in a new tab)
- mdn web docs: Web Components (opens in a new tab)
- CoffeeScript (opens in a new tab)
- B.Y.O.F. — Part 1: Writing a JS Framework in 2018 (opens in a new tab)
- B.Y.O.F. — Part 2: Web Components as Containers (opens in a new tab)
- B.Y.O.F. — Part 3: Change Management in JavaScript Frameworks (opens in a new tab)
- B.Y.O.F. — Part 4: Rendering the DOM (opens in a new tab)
- B.Y.O.F. — Part 5: JS Frameworks in 2019 (opens in a new tab)
- Component Register (opens in a new tab)
- React: Higher-Order Components (opens in a new tab)
- Adam Haile의 S.js (opens in a new tab)
- Adam Haile의 Surplus.js (opens in a new tab)
- Solid — The Best JavaScript UI Library You’ve Never Heard Of (opens in a new tab)
- js-framework-benchmark (opens in a new tab)
- SolidJS Official Release: The long road to 1.0 (opens in a new tab)
- State of JS 2024 - Front-End Frameworks (opens in a new tab)
- marko (opens in a new tab)
- marko 저장소에 Ryan Carniato 커밋 (opens in a new tab)
- OpenJS Foundation (opens in a new tab)
- netlify (opens in a new tab)
- When Netlify asks you to full-time OSS, you say yes! (opens in a new tab)
- SolidStart 1.0: The Shape of Frameworks to Come (opens in a new tab)
- Sentry (opens in a new tab)
- I'm Joining Sentry (opens in a new tab)
- Alpine.js
- Alpine.js (opens in a new tab)
- Caleb Porzio의 LinkedIn (opens in a new tab)
- Caleb Porzio의 GitHub (opens in a new tab)
- Caleb Porzio의 Twitter (opens in a new tab)
- Caleb Porzio의 홈페이지 (opens in a new tab)
- I just crossed $1 million on GitHub Sponsors. 💰🎉 (opens in a new tab)
- alpine Linux (opens in a new tab)
- Tighten (opens in a new tab)
- Matt Stauffer (opens in a new tab)
- Laravel Up & Running (opens in a new tab)
- On Leaving My Day Job (opens in a new tab)
- elixir (opens in a new tab)
- Phoenix Framework (opens in a new tab)
- Phoenix LiveView (opens in a new tab)
- ElixirConf 2018 - Keynote - Chris McCord (opens in a new tab)
- Hotwire (opens in a new tab)
- Blazor (opens in a new tab)
- htmx (opens in a new tab)
- From Terrible Employee to Open Source Entrepreneur: Caleb Porzio's Playbook | Caleb Porzio, Creator of Livewire & Alpine.js (opens in a new tab)
- livewire 홈페이지 (opens in a new tab)
- livewire 2020년 홈페이지 (opens in a new tab)
- Hotwire: Turbo (opens in a new tab)
- Hotwire: Stimulus (opens in a new tab)
- Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js (opens in a new tab)
- Alpine.js 첫 커밋 (opens in a new tab)
- Minimal JS로 이름 변경한 커밋 (opens in a new tab)
- Project X로 이름 변경한 커밋 (opens in a new tab)
- Alpine.js 1.0.0 (opens in a new tab)
- Alpine.js로 이름 변경한 커밋 (opens in a new tab)
- tailwindcss (opens in a new tab)
- Alpine.js 2.0.0 (opens in a new tab)
- Say No To Complexity With AlpineJS - Caleb Porzio (opens in a new tab)
- Thymeleaf (opens in a new tab)
- Jinja (opens in a new tab)
- EJS (opens in a new tab)
- pug (opens in a new tab)
- No Plans to Merge (opens in a new tab)
- GitHub Sponsors (opens in a new tab)
- I Just Hit $100k/yr On GitHub Sponsors! 🎉❤️ (How I Did It) (opens in a new tab)
- Lit
- Justin Fagnani의 LinkedIn (opens in a new tab)
- Justin Fagnani의 GitHub (opens in a new tab)
- Justin Fagnani의 Twitter (opens in a new tab)
- Justin Fagnani의 홈페이지 (opens in a new tab)
- Polymer Library (opens in a new tab)
- Polymer 2013년 릴리스 (opens in a new tab)
- Polymer pre-alpha (opens in a new tab)
- Polymer 0.5.0 (opens in a new tab)
- Material Design m1 (opens in a new tab)
- Google I/O 2014 - Android "L" - New Material Design - Project Volta - Overview (opens in a new tab)
- Polymer 2014년 홈페이지 (opens in a new tab)
- Polymer 1.0 (opens in a new tab)
- Polymer 2015년 홈페이지 (opens in a new tab)
- About the Polymer Project: #UseThePlatform (opens in a new tab)
- W3C: HTML Templates (opens in a new tab)
- Custom Elements: HTML Living Standard (opens in a new tab)
- W3C: Shadow DOM (opens in a new tab)
- Polymer: Wikipedia (opens in a new tab)
- W3C: HTML Imports (opens in a new tab)
- Polymer 2.0.0 (opens in a new tab)
- JS Party #284: This is going to be Lit 🔥 (opens in a new tab)
- Lit의 첫 커밋 (opens in a new tab)
- 초기 Lit 설명 (opens in a new tab)
- Polymer Summit 2017 (opens in a new tab)
- Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017) (opens in a new tab)
- 2017년 lit-html 저장소 (opens in a new tab)
- mdn web docs: Tagged templates literals (opens in a new tab)
- Lightning-fast templates & Web Components: lit-html & LitElement (opens in a new tab)
- Polymer 3.0 (opens in a new tab)
- Announcing Lit 2 stable release (opens in a new tab)
- Goodnight Polymer Project (opens in a new tab)
- Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! (opens in a new tab)
- State of JS 2024 - Front-End Frameworks (opens in a new tab)
배경음악
Music from #Uppbeat https://uppbeat.io/t/zoo/clarity (opens in a new tab)
License code: DEG8IR0VQV5JZPP9