Alpine js Declare and React with Simplitcy
summary
Alpine.js is a 4–6 KB reactive library that lets HTML carry state and behavior using attributes like x-data, x-model and x-transition. Demo builds include a live markdown editor that uses the marked library with a 250 ms debounce on keyup, a self-driving progress bar that increments +5 every 200 ms in init then clears its interval at 100, and an Unsplash image search injected into an <img>. Works without a build step and slots into legacy jQuery apps.
AI-written summary · about
chapters (13)
- 0:00Start
- 6:51What Is a Alpine Component
- 13:49Visualizations
- 17:16If Template
- 19:03Alpine Developer Tools
- 22:50Build a Markdown Editor
- 26:07Live Preview
- 29:02Multiple Selects
- 33:39Bind to Attributes of Controls
- 38:43Progress Bar
- 40:51Life Cycle
- 43:46Dev Tools
- 47:02Form Interactions
related talks
32mSay No To Complexity With AlpineJS
41mYou Really Don't Need All That JavaScript I Promise
57mReact to ScalaJS
19mSolidJS: Reactivity Unchained
24mSvelte: the last framework we need?
41mLow-budget JavaScript: composable frontends that are fun and friendly
30mReact: Rethinking best practices
24mComputer, build me an app