EasyWebApp / Webcell
Licence: other
Web Components engine based on JSX & TypeScript
Stars: ✭ 139
Programming Languages
typescript
32286 projects
ecmascript
72 projects
Projects that are alternatives of or similar to Webcell
Ioing
Implement the solutions of performance improvement and componentization for your SPA (single page application) products with this Progressive Web App Development Engine.
Stars: ✭ 224 (+61.15%)
Mutual labels: mvvm, spa
webviewhs
🌐 A Haskell binding to the webview library created by Serge Zaitsev.
Stars: ✭ 109 (-21.58%)
Mutual labels: spa, webapp
Cloudtunes
Web-based music player for the cloud ☁️ 🎶 Play music from YouTube, Dropbox, etc.
Stars: ✭ 2,449 (+1661.87%)
Mutual labels: webapp, spa
Piral
Framework for next generation web apps using microfrontends. 🚀
Stars: ✭ 711 (+411.51%)
Mutual labels: webapp, spa
Knockout Spa
A mini but full-fledged SPA framework and boilerplate to build SPAs fast and scalable
Stars: ✭ 145 (+4.32%)
Mutual labels: mvvm, spa
englishextra.github.io
English Grammar for Russian-Speakers, a PWA website + SPA
Stars: ✭ 19 (-86.33%)
Mutual labels: spa, webapp
Butterfly Server
The Everything is Real-Time C# Backend for Single Page Applications
Stars: ✭ 247 (+77.7%)
Mutual labels: webapp, spa
Androiduix
Make a high-performance mobile web app / SPA with Android UI
Stars: ✭ 501 (+260.43%)
Mutual labels: webapp, spa
Spa
A webapp framework for routing control and view transitions
Stars: ✭ 331 (+138.13%)
Mutual labels: webapp, spa
Rust Webapp Starter
Rust single page webapp written in actix-web with vuejs.
Stars: ✭ 151 (+8.63%)
Mutual labels: webapp, spa
cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (-80.58%)
Mutual labels: web-component, webapp
Vuefront
VueFront Core. Turn your old-fashioned CMS website in to a SPA & PWA in 5 minutes
Stars: ✭ 316 (+127.34%)
Mutual labels: webapp, spa
Rust Webapp Starter
Rust single page webapp written in actix-web with vuejs.
Stars: ✭ 56 (-59.71%)
Mutual labels: webapp, spa
Snippod Starter Demo App
A full stack 'Hacker News' style demo web application built with React + Redux (Front) and django REST Framework (Server).
Stars: ✭ 128 (-7.91%)
Mutual labels: webapp, spa
Spasm
Write single page applications in D that compile to webassembly
Stars: ✭ 129 (-7.19%)
Mutual labels: spa
Webapp.rs
A web application completely written in Rust. 🌍
Stars: ✭ 1,888 (+1258.27%)
Mutual labels: webapp
Topcorn
A minimalistic movie listing app to browse IMDB's top 250 movies, built to demonstrate MVVM with latest hot-trending Android development tools.
Stars: ✭ 131 (-5.76%)
Mutual labels: mvvm
Cocktailapp
Cocktails Android App with Clean Architecture, MVVM , Retrofit, Coroutines, Navigation Components , Room, Dagger Hilt, Cache Strategy and Coroutines Flow
Stars: ✭ 128 (-7.91%)
Mutual labels: mvvm
WebCell
Web Components engine based on JSX & TypeScript
Usage
Demo & GitHub template: https://web-cell.dev/scaffold/
Project bootstrap
Command
npm init -y
npm install web-cell
npm install parcel-bundler -D
package.json
{
"scripts": {
"start": "parcel source/index.html --open",
"build": "parcel build source/index.html --public-url"
}
}
source/index.html
<script
crossorigin
src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries"
></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<script src="source/SubTag.tsx"></script>
<script src="source/TestTag.tsx"></script>
<sub-tag></sub-tag>
<test-tag></test-tag>
Simple component
source/SubTag.tsx
import { createCell, component, mixin } from 'web-cell';
export function InlineTag({ defaultSlot }: any) {
return <span>{defaultSlot}</span>;
}
@component({
tagName: 'sub-tag',
renderTarget: 'children'
})
export class SubTag extends mixin() {
render() {
return <InlineTag>test</InlineTag>;
}
}
Advanced component
source/TestTag.tsx
import {
createCell,
component,
mixin,
attribute,
watch,
on,
Fragment
} from 'web-cell';
import { SubTag } from './SubTag';
interface Props {
title?: string;
}
interface State {
status: string;
}
@component({
tagName: 'test-tag',
style: {
'.title': {
color: 'lightblue'
},
'.title.active': {
color: 'lightpink'
}
}
})
export class TestTag extends mixin<Props, State>() {
@attribute
@watch
title = 'Test';
state = { status: '' };
onClick = () => (this.title = 'Example');
@on('click', ':host h1')
onDelegate() {
this.setState({ status: 'active' });
}
render({ title }: Props, { status }: State) {
return (
<>
<h1 title={title} className={`title ${status}`}>
{title}
<img alt={title} onClick={this.onClick} />
<SubTag />
</h1>
</>
);
}
}
Basic knowledge
- Web components
- Custom elements
- Shadow DOM
- Element Internals
- CSS variables
- ECMAScript 6+
- TypeScript 4+
Life Cycle hooks
Scaffolds
Ecosystem
We recommend these libraries to use with WebCell:
-
State management: MobX (also powered by TypeScript & Decorator)
-
Router: Cell Router
-
UI components
- BootCell (based on BootStrap v4)
- Material Cell (based on Material Design)
- GitHub Web Widget
-
HTTP request: KoAJAX (based on Koa-like middlewares)
-
Utility: Web utility (Methods & Types)
-
Event stream: Iterable Observer (Observable proposal)
-
MarkDown integration: MarkCell (MDX implement)
Roadmap
Go to contribute!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].