Web browser hosted Smalltalk Virtual machine and framework.
# BrowserSm - A Smalltalk Web Browser for Squeak 6.0
**A full-featured, multi-runtime web browser implemented in Squeak Smalltalk with first-class Smalltalk support for web development.**
---
## Overview
BrowserSm is an ambitious project to create a modern web browser entirely in Squeak Smalltalk 6.0. Unlike traditional browsers that only support JavaScript, BrowserSm will support **multiple runtime environments**:
- **JavaScript** - Full compatibility with the existing web ecosystem
- **Smalltalk** - Native Smalltalk execution in web pages (unique!)
- **WebAssembly** - High-performance compiled code
- **Extensible** - Plugin architecture for additional languages
### Vision
**Enable Smalltalk as a first-class web programming language** while providing a fully functional browser for the Squeak environment.
---
## Key Features
### Current Plan (Phases 1-4)
✨ **Core Browser Features**
- HTML5 parsing and DOM implementation
- CSS3 styling and layout engine (Flexbox, Grid)
- Modern rendering pipeline
- HTTP/HTTPS networking with caching
- Tabbed browsing interface
- Developer tools
🔷 **Smalltalk Runtime** (Unique Feature!)
- Execute Smalltalk code in web pages via `<script type="text/smalltalk">`
- Full DOM manipulation from Smalltalk
- Smalltalk Web APIs (Fetch, Storage, Timers, etc.)
- Seamless JavaScript-Smalltalk interoperability
- Build web applications entirely in Smalltalk
⚡ **JavaScript Support**
- JavaScript engine integration (V8/QuickJS)
- Full Web API compatibility
- Modern ES6+ features
- Existing web content works
🛠️ **Developer Tools**
- Element inspector
- Multi-runtime debugger
- Network monitor
- Performance profiler
- Console for both JavaScript and Smalltalk
---
## Documentation
This project includes comprehensive planning documentation:
### 📘 [BROWSER_IMPLEMENTATION_PLAN.md](./BROWSER_IMPLEMENTATION_PLAN.md)
**Complete implementation plan** covering:
- Architecture overview and design principles
- Detailed Monticello package structure (14+ packages)
- Component specifications (Network, HTML, CSS, Layout, Rendering)
- 4-phase implementation roadmap (16-21 months)
- Testing strategy and performance targets
- Technical specifications and standards support
### 📗 [MULTI_RUNTIME_ARCHITECTURE.md](./MULTI_RUNTIME_ARCHITECTURE.md)
**Multi-runtime architecture** covering:
- Runtime coordination and management
- Smalltalk runtime design (BSStVM)
- Smalltalk Web APIs and syntax examples
- JavaScript-Smalltalk interoperability
- Mixed-runtime application patterns
- Performance considerations and optimization
---
## Quick Start
### For Developers Wanting to Build BrowserSm
**Prerequisites**:
- Squeak 6.0 or later
- Git
- Basic understanding of web standards (HTML, CSS, JavaScript)
- Familiarity with Squeak/Smalltalk development
**Getting Started**:
1. **Clone the repository**
```bash
git clone <repository-url>
cd browsersm
```
2. **Load into Squeak**
- Open Squeak 6.0
- File Browser → Load the initial packages
- Or use Monticello Browser to load from repository
3. **Follow the Implementation Plan**
- Start with Phase 1, Milestone 1.1 (Core Infrastructure)
- See BROWSER_IMPLEMENTATION_PLAN.md for detailed steps
### For Future Users
Once BrowserSm is built:
1. **Install via SAR**
```smalltalk
"Load BrowserSm.sar file"
BrowserSm install.
```
2. **Open the browser**
```smalltalk
BrowserSm open.
"or"
BrowserSm openOnUrl: 'https://squeak.org' asUrl.
```
3. **Write Smalltalk web apps**
```html
<script type="text/smalltalk">
document body
appendChild: (document createElement: 'h1')
textContent: 'Hello from Smalltalk!'.
</script>
```
---
## Architecture
### High-Level Architecture
```
┌─────────────────────────────────────────────────────────────┐
│ BrowserSm UI (Morphic) │
│ Tabs, Address Bar, DevTools, Navigation │
└────────────────────────┬────────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────────┐
│ Rendering Engine │
│ DOM Tree → Layout Tree → Paint → Display │
└────────────────────────┬────────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────────┐
│ Multi-Runtime Coordinator │
└─────┬──────────────┬─────────────┬──────────────┬──────────┘
│ │ │ │
┌───▼───┐ ┌────▼────┐ ┌───▼────┐ ┌────▼─────┐
│ JS │ │Smalltalk│ │ WASM │ │ Plugins │
│Runtime│ │ Runtime │ │ Runtime│ │ │
└───────┘ └─────────┘ └────────┘ └──────────┘
```
### Monticello Packages (14+ Core Packages)
- **BrowserSm-Core** - Base classes and configuration
- **BrowserSm-Network** - HTTP/HTTPS, caching, cookies
- **BrowserSm-HTML** - HTML parser and DOM
- **BrowserSm-CSS** - CSS parser and cascade
- **BrowserSm-Layout** - Layout engine (block, inline, flex, grid)
- **BrowserSm-Rendering** - Paint and display
- **BrowserSm-Events** - DOM event system
- **BrowserSm-UI** - Browser chrome (Morphic-based)
- **BrowserSm-Runtime-Core** - Multi-runtime management
- **BrowserSm-Runtime-JavaScript** - JavaScript integration
- **BrowserSm-Runtime-Smalltalk** - Smalltalk web runtime
- **BrowserSm-Runtime-WASM** - WebAssembly support
- **BrowserSm-WebAPIs-Smalltalk** - Web APIs for Smalltalk
- **BrowserSm-Security** - Security and sandboxing
Plus: BrowserSm-Tests, BrowserSm-Examples
---
## Implementation Roadmap
### Phase 1: Foundation & Basic Rendering (3-4 months)
Core infrastructure, networking, HTML/CSS parsing, layout engine, basic rendering
**Goal**: Render simple static HTML pages with CSS
### Phase 2: Enhanced Features (3-4 months)
Images, forms, advanced CSS (Flexbox), developer tools, performance optimization
**Goal**: Handle complex layouts and user interaction
### Phase 2B: Smalltalk Runtime (3-4 months) 🔷
Multi-runtime infrastructure, Smalltalk transpiler, Smalltalk Web APIs, JS-Smalltalk interop
**Goal**: Execute Smalltalk code in web pages
### Phase 3: JavaScript Support (4-5 months)
JavaScript engine integration, Web APIs, advanced DOM manipulation
**Goal**: Support JavaScript-heavy websites and web applications
### Phase 4: Advanced Features (Ongoing)
CSS Grid, WebSocket, SVG, video/audio, security hardening, standards compliance
**Goal**: Comprehensive web standards support
**Total Timeline**: 16-21 months to production-ready multi-runtime browser
---
## Example: Smalltalk Web Application
```html
<!DOCTYPE html>
<html>
<head>
<title>Todo List in Smalltalk</title>
<style>
.completed { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h1>My Todo List</h1>
<input id="newTodo" placeholder="Add a todo...">
<button id="addBtn">Add</button>
<ul id="todoList"></ul>
<script type="text/smalltalk">
Object subclass: #TodoApp
instanceVariableNames: 'todos list input'
classVariableNames: ''
category: 'Examples'.
TodoApp >> initialize
todos := OrderedCollection new.
list := document getElementById: 'todoList'.
input := document getElementById: 'newTodo'.
(document getElementById: 'addBtn')
on: 'click' do: [ :e | self addTodo ].
TodoApp >> addTodo
| text item |
text := input value.
text isEmpty ifFalse: [
todos add: text.
self render.
input value: ''.
].
TodoApp >> render
| html |
list innerHTML: ''.
todos do: [ :todo |
html := '<li>', todo, '</li>'.
list insertAdjacentHTML: 'beforeend' at: html.
].
"Start the app"
TodoApp new initialize.
</script>
</body>
</html>
```
---
## Technology Stack
### Core Technologies
- **Language**: Squeak Smalltalk 6.0
- **UI Framework**: Morphic (included in Squeak)
- **Networking**: WebClient (HTTP), SqueakSSL (HTTPS)
- **Packaging**: Monticello
- **Testing**: SUnit
### External Integration (Phase 3+)
- **JavaScript Engine**: V8 or QuickJS (via external process or FFI)
- **Optional**: FFI for native libraries
- **Optional**: OSProcess for runtime management
### Standards Compliance
- **HTML5** (progressive implementation)
- **CSS3** (progressive implementation)
- **DOM Level 2/3**
- **ES6+ JavaScript** (via external runtime)
- **Web APIs**: Fetch, Storage, Console, Timers, etc.
---
## Performance Targets
### Load Times
- Simple page (<100KB): **<2 seconds**
- Medium page (100KB-1MB): **<5 seconds**
- Complex page (1MB-5MB): **<10 seconds**
### Rendering
- Scrolling: **30+ FPS**
- Layout calculation: **<100ms** typical page
- Paint: **<50ms** per frame
### Memory
- Base browser: **<50MB**
- Per tab: **<100MB** typical page
- Cache: **Configurable** (default 100MB)
### Smalltalk Runtime
- Initialization: **<500ms**
- Execution: **2-5x slower** than native JavaScript (acceptable)
- DOM operations: **Near-JavaScript** performance
---
## Contributing
We welcome contributions! This is a community-driven project.
### How to Contribute
1. **Code Contributions**
- Follow the implementation plan
- Write tests for new features
- Follow Squeak coding standards
- Submit pull requests
2. **Documentation**
- Improve existing documentation
- Write tutorials and guides
- Create examples
3. **Testing**
- Test on real websites
- Report bugs
- Write test cases
4. **Design**
- UI/UX improvements
- Architecture suggestions
- Performance optimization ideas
### Getting Help
- **Documentation**: See BROWSER_IMPLEMENTATION_PLAN.md
- **Issues**: Use GitHub issues for bug reports and feature requests
- **Discussions**: Join Squeak mailing lists
- **Questions**: Ask on Squeak forums
---
## Comparison with Similar Projects
### Scamper
- **Similarity**: Both are Squeak-