Web component JS frameworks quick overview by their syntax and features
Website: https://component-party.dev
? Why ?
Many JS developers don’t have a good overview of every existing JS framework with their own syntax and features. How do we solve this ? Developers love having framework overview by examples. It’s a quick introduction before going deeper.
? Progression
Svelte
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
React
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Vue 3
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Angular
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
SolidJS
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Lit
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Ember
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Alpine
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
Qwik
- Reactivity
- Declare state
- Update state
- Computed state
- Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
- Lifecycle
- On mount
- On unmount
- Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Fetch data
- Router link
- Routing
? Contributing
This site is built with Astro. Site content is written in Markdown format located in content. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
For local development, pnpm is preferred as package manager:
pnpm i
pnpm run dev
This project requires Node.js to be v14.0.0 or higher, because we use new JavaScript features in our code, such as optional chaining.
Add a framework
- Fork the project and create a new branch
- Add the new framework SVG logo in
public/framework - Install the ESLint plugin associated to the framework
- In
src/frameworks.mjs, add a new entry with SVG link and ESLint configuration
?? Contributors
This project exists thanks to all the people who contribute. [Contribute].
⚖️ License
MIT. Made with ?
