Loading repository data…
Loading repository data…
JJhonata / repository
Projeto educacional comparando TypeScript, Dart e Kotlin para desenvolvimento web. Implementa uma Lista de Tarefas funcional em três linguagens para demonstrar diferenças, ferramentas e processos de compilação.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A multi-language To-Do List application implemented in TypeScript, Dart, and Kotlin/JS to compare language features, compilation, and web development approaches.
✅ Add, complete, and delete tasks
✅ Task counter (pending & total)
✅ Data persistence with localStorage
✅ Responsive design
✅ Zero-dependency implementations
.
├── typescript/ # TypeScript version
│ ├── src/app.ts
│ ├── dist/
│ ├── tsconfig.json
│ └── package.json
├── dart/ # Dart version
│ ├── lib/main.dart
│ ├── web/
│ └── pubspec.yaml
├── kotlin/ # Kotlin/JS version
│ ├── src/MainApp.kt
│ ├── web/
│ └── build.gradle.kts
├── index.html
├── style.css
└── QUICK_START.md
cd typescript
npm install
npm run build
Ou para modo watch (auto-compilação):
npm run watch
Abrir index.html no navegador e verificar que o arquivo compilado está em typescript/dist/app.js.
Arquivos Important:
src/app.ts - Código-fontedist/app.js - JavaScript compiladotsconfig.json - Configuração do compiladorInstalar Dart SDK (https://dart.dev/get-dart)
Verificar instalação:
dart --version
Opção A: Usando dart2js (linha de comando)
cd dart
dart pub get
dart compile js lib/main.dart -o web/app.dart.js
Opção B: Usando Webdev (desenvolvimento)
cd dart
dart pub get
webdev serve
Abrir dart/web/index.html no navegador (depois de compilado).
Arquivos Importantes:
lib/main.dart - Código-fonteweb/app.dart.js - JavaScript compilado (gerado)pubspec.yaml - Dependências e configuraçõesInstalar Kotlin (https://kotlinlang.org/docs/get-started.html)
Ou usar IntelliJ IDEA Community (já vem com Kotlin)
Verificar instalação:
kotlinc -version
Opção A: Usando Gradle
cd kotlin
gradle build
Opção B: Usando IntelliJ IDEA
build/js/packages/Abrir kotlin/web/index.html no navegador com o arquivo JavaScript compilado.
Arquivos Importantes:
src/MainApp.kt - Código-fontebuild/js/packages/ - JavaScript compilado (gerado)build.gradle.kts - Configuração Gradle| Aspecto | TypeScript | Dart | Kotlin/JS |
|---|---|---|---|
| Sintaxe | Muito similar a JavaScript, familiar | Mais formal, OOP | Similar a Java/Kotlin |
| Sistema de Tipos | Tipos explícitos (bem integrado ao JS) | Tipos completos com null safety | Tipos fortes |
| Compilação | Rápida (transpilação) | Média (compilação) | Lenta (primeira build) |
| Tamanho Final | ~6 KB (minificado) | ~20 KB (minificado) | ~15 KB (minificado) |
| Curva de Aprendizado | Baixa (familiaridade com JS) | Média (nova sintaxe) | Média-Alta (mais formal) |
| Ecossistema npm | Excelente (acesso a tudo) | Limitado (pub packages) | Limitado para web |
| Hot Reload | Não (precisa recompilar) | Sim (webdev) | Não |
| Debug | Excelente (source maps) | Muito bom | Bom |
cd typescript && npm run clean
cd ../dart && rm -rf .dart_tool build web/app.dart.js*
cd ../kotlin && gradle clean
# TypeScript
cd typescript && npm install && npm run build
# Dart
cd dart && dart pub get && dart compile js lib/main.dart -o web/app.dart.js
# Kotlin
cd kotlin && gradle build
This project is open source. Feel free to use, modify, and learn from it.
Created as a comparison exercise for multi-language web development.
Want to contribute? Pull requests are welcome! 🎉
Adicionar Tarefa
Marcar como Concluída
Remover Tarefa
Persistência
Interface Responsiva
Todos têm desempenho equivalente no navegador (~60 FPS)
interface Task {
id: number;
description: string;
completed: boolean;
}
class TodoApp {
private tasks: Task[] = [];
// Tipos explícitos em tempo de desenvolvimento
// Removidos na compilação para JavaScript
}
class Task {
final int id;
final String description;
bool completed;
// Null safety por padrão
// Compilação gera JavaScript otimizado
}
data class Task(
val id: Int,
val description: String,
var completed: Boolean = false
)
// Data classes geram getters/setters automaticamente
// Interop com DOM via imports dinâmicos
Todas as três implementações oferecem a mesma funcionalidade com diferentes abordagens:
Cada linguagem tem seu lugar na ecossfera web moderna!
Desenvolvido como parte da Unidade 3 - Programação Web II
Disciplina: Programação Web II
Professor(a): Jéssica de Paulo Rodrigues
Data: Março de 2026