Getting Started

Getting Started with BrowserSm

This guide will help you get BrowserSm up and running in your development environment.

Prerequisites

For Development (Squeak Desktop)

  • Squeak 6.0 or later — Download from squeak.org
  • Git — For cloning the repository
  • Basic Smalltalk knowledge — Familiarity with Squeak development tools

For Web Deployment (BSvm)

  • Modern web browser with JavaScript enabled
  • Web server for serving the BSvm runtime (for local development)

Installation Methods

This is the primary development environment for BrowserSm.

1. Clone the Repository

1
2
git clone https://github.com/pauljbernard/browsersm.git
cd browsersm

2. Start Squeak

Launch Squeak 6.0 and open a fresh image.

3. Load BrowserSm Packages

Open a Workspace and execute:

1
2
3
4
5
6
7
8
9
10
"Load BrowserSm core packages"
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-Core.st'.
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-DOM.st'.
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-HTML.st'.
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-CSS.st'.
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-Script.st'.

"Load additional packages as needed"
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-WebAPIs.st'.
FileStream fileIn: 'path/to/browsersm/src/BrowserSm-AdvancedCSS.st'.

4. Launch BrowserSm

1
2
3
"Create and open a browser window"
browser := BSBrowser new.
browser open.

Method 2: Automated Loading Script

For convenience, use the provided loader script:

1
2
"Load and execute the BrowserSm loader"
(FileStream readOnlyFileNamed: 'path/to/browsersm/load-browsersm.st') fileIn.

Method 3: Web Demo (No Installation)

Try BrowserSm immediately in your web browser:

Launch Web Demo →

First Steps

1. Basic Navigation

Once BrowserSm is loaded, you can:

1
2
3
4
5
6
7
8
"Navigate to a webpage"
browser navigateTo: 'https://example.com'.

"Navigate to local content"
browser navigateTo: 'file:///path/to/local.html'.

"Load HTML content directly"
browser loadHTML: '<html><body><h1>Hello, BrowserSm!</h1></body></html>'.

2. Inspect the Browser Components

BrowserSm follows Smalltalk principles — everything is inspectable:

1
2
3
4
5
6
7
8
9
10
11
"Inspect the browser object"
browser inspect.

"Examine the DOM tree"
browser currentPage document inspect.

"Look at the CSS engine"
browser cssProcessor inspect.

"Debug the HTML parser"
browser htmlParser inspect.

3. Run Test Pages

Load the included test pages to verify functionality:

1
2
3
4
5
6
7
8
"Load HTML5 test suite"
browser navigateTo: 'file://', FileDirectory default pathName, '/browsersm/examples/html5-tests.html'.

"Load CSS layout tests"
browser navigateTo: 'file://', FileDirectory default pathName, '/browsersm/examples/css-layout-tests.html'.

"Test Smalltalk scripting"
browser navigateTo: 'file://', FileDirectory default pathName, '/browsersm/examples/smalltalk-script-demo.html'.

Configuration

Browser Settings

Configure BrowserSm behavior:

1
2
3
4
5
6
7
8
9
10
11
12
13
"Configure browser settings"
BSConfiguration default
    userAgent: 'BrowserSm/0.9 (Squeak; Smalltalk)';
    enableJavaScript: false;  "We use Smalltalk scripts instead"
    enableCookies: true;
    enableLocalStorage: true.

"Set rendering options"
BSConfiguration default
    enableAdvancedCSS: true;
    enableFlexbox: true;
    enableGrid: false;  "Not yet implemented"
    maxImageSize: 1024@768.

Developer Tools

Enable developer tools for debugging:

1
2
3
4
5
6
7
8
9
10
11
"Enable developer tools"
browser enableDeveloperTools.

"Open DOM inspector"
browser openDOMInspector.

"Open CSS debugger"
browser openCSSDebugger.

"Open Smalltalk script debugger"
browser openScriptDebugger.

Security Settings

Configure script execution security:

1
2
3
4
5
6
"Configure Smalltalk script sandbox"
BSScriptRuntime default
    setTimeout: 5000;  "5 second timeout"
    enableFileAccess: false;
    enableNetworkAccess: false;
    addWhitelistedClass: #MyCustomClass.

Troubleshooting

Common Issues

“Class not found” errors

Make sure all required packages are loaded in the correct order:

  1. BrowserSm-Core.st (required)
  2. BrowserSm-DOM.st (required)
  3. BrowserSm-HTML.st (required)
  4. BrowserSm-CSS.st (required)
  5. BrowserSm-Script.st (required)
  6. Optional packages as needed

Memory usage concerns

BrowserSm can be memory-intensive. For large pages:

1
2
3
4
5
"Enable garbage collection optimization"
BSConfiguration default enableAgggressiveGC: true.

"Limit cached resources"
BSConfiguration default maxCachedResources: 100.

Rendering performance

For better performance:

1
2
3
4
5
"Enable rendering optimizations"
BSConfiguration default
    enableIncrementalLayout: true;
    enableDisplayListCaching: true;
    renderingThreadPriority: Processor userSchedulingPriority.

Getting Help

Next Steps

Now that BrowserSm is installed:

  1. Read the Architecture Guide — Understand how BrowserSm works
  2. Try the Examples — Work through sample code and tutorials
  3. Explore the Constitution — Learn the principles governing development
  4. Join Development — Contribute to the project

Ready to explore the web with pure Smalltalk? Let’s dive deeper into the architecture and capabilities of BrowserSm.