Heroes Svelte
Tour of Heroes app written with Svelte
Overview:
Tour of Heroes is a project created to showcase an app written with Svelte. It follows a heroes and villains theme and aims to provide a comparative experience with the same app implemented in Angular, React, and Vue frameworks. The project allows users to list and edit heroes and villains. Cypress.io is used for end-to-end testing, and a JSON server is included as a backend.
Features:
- Start from the official quick-start and CLI
- Client side routing with three main routes: Heroes, Villains, and About
- Handles erroneous routes with a PageNotFound component
- Highlights the active route in the navigation menu
- Uses HTML5 mode for routing instead of hash routes
- API integration with a JSON server as the backend
- App served on one port that can access the API on another port using either proxy or CORS
- Uses common HTTP libraries for each framework
- Styling with Bulma, SASS, and Font Awesome
- Same CSS styling used in every app
- Editing capabilities for heroes and villains (add, update, delete)
- State/Store management using a store
- Web development server with fallback routing
- Generic components including modal, button tool, card, header bar, list header, and navigation bar
- Props in and emit events out
- Environment variable for API location
Summary:
Tour of Heroes is a project that showcases the implementation of the same app using different JavaScript frameworks. It allows users to compare the experience of building the app with Angular, React, Vue, and Svelte. The project includes features such as client-side routing, API integration, styling with Bulma, and editing capabilities for heroes and villains. Additionally, Cypress.io is used for end-to-end testing, and a JSON server serves as the backend. Overall, Tour of Heroes offers a comprehensive example of how different frameworks can be used to create the same app with unique approaches.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Bulma
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.