Simple components showing differences in each major frontend web framework.

Last update: Nov 27, 2022

Related tags

Overview

Web Frameworks

A collection of simple components in each of the leading frontend web frameworks. So far, covering React, Vue, Angular, Svelte and SolidJS. The components are inspired by the examples provided by Svelte in their playground.

The examples include the following basic use cases:

Hello World
Styling
Nesting Components
Basic Variables
Dependent Variables (updated when other values changes)
Conditional Rendering
List Looping

I'm a Next.js web developer open to exploring other libraries and frameworks to use for building web apps. I'll eventually be journalling my experience with exploring each framework in a blog.

jQuery plugin for showing a calendar yearview with blocks (github contributions style)

calendar-yearview-blocks jQuery plugin for showing a calendar yearview with blocks (github contributions style) Code adopted from https://github.com/b

Feb 28, 2021

A JavaScript library allows showing/hiding "dependent" field(s) if the value of the “dependee” field matches the right condition.

MF Conditional Fields A JavaScript library that show/hide form elements based on the value of one field or many. Advantages Lightweight & fast. Comes

Aug 11, 2022

DFi-App showing compound transactions on Blockchain.

dbank Welcome to your new dbank project and to the internet computer development community. By default, creating a new project adds this README and so

Sep 18, 2022

Small example showing how you can make game sprite animations using CSS with Javascript movement.

Hi there, I'm Björn Hjorth 👋 I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twit

Nov 9, 2022

It is a tours website for showing the information about all the tours of this company and making the clients able to book them.

NATOURS APP Table of Contents Deployed Website Built With Getting Started Description Documentation Screenshots Deployed Website : NOTE: Heroku is pla

Sep 24, 2022

Library for showing Gravatars or generating user avatars.

Avatar Avatar is a JavaScript library for showing Gravatars or generating user avatars. Examples There are several examples on the website. import Ava

Dec 22, 2022

Mixed Messages is a simple Node.js application, that will print a randomized fake fact to the terminal each time it is ran.

Mixed Messages - Fake Fact Generator Mixed Messages is a simple Node.js application, That will print a randomized fake fact to the terminal each time

Jan 10, 2022

This is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This was a continuous project, where in each milestone, new feature(s) was/were added to it.

Awesome Books This is an Awesome Books web page where a user can add or remove books from the site. It also displays a list of the books that are adde

Aug 1, 2022

Comments

Applying a more modern approach for Angular
Use SFC for simple components (inlineTemplate, inlineStyles)

Use Dynamic Component Rendering for render component based on condition (comments are left in the code to explain different approach with ngSwitch)

Use proper TypeScript initialization with default values

constructor() should not be the place to initialize data. Input is available in ngOnInit (and in the FIRST ngOnChanges). Initializing logic in constructor might lead to bugs caused by late Input resolve by Angular

Multiple approaches for Dependent Variables

ChangeDetectionStrategy.OnPush is used across all components. This strategy should be the default but it might break people's behavior from the early days so the Angular team sticks to the Default strategy being the default.
opened by nartc 1
Add Angular integration to Astro site in `/web`

Integrating Angular into Astro is more complex than the other JavaScript frameworks. This integration can serve as a simple example of adding a Hello World style of Angular component into an existing Astro site.

opened by StillScripts 0

Owner

Daniel Still

Web developer focused on building React web applications. Always learning and excited about the future of software.

GitHub

Compare 👥 and extract 🔬 differences between JSON values

json-changes Easily compare changes in JSON-like values. This can be especially useful when you want to compare an incoming payload with a counterpart

2 Aug 23, 2022

Leafjs is a lightweight frontend framework built using web components and browser ES Modules.

Leafjs A lightweight, fast web-components based frontend framework for the future. Introduction Leafjs is a lightweight frontend framework built using

29 Dec 23, 2022

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

14 Aug 10, 2022

This web application is a type of a scoreboard showing the names and current scores of the leading competitors in any field which is using API's to get and set data

Leaderboard-project This web application is a type of a scoreboard showing the names and current scores of the leading competitors in any field which

5 Feb 11, 2022

This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

12 Apr 11, 2022

Test each framework for it's performance cost

Framework Benchmarks Test each framework for it's performance, particularly common Lighthouse and CWV metrics as applications scale Important: This is

366 Jan 2, 2023

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

19 Aug 3, 2021