Myths and facts

A Fresnel program is a normal native program: an .exe on Windows, an executable on Linux, an application bundle on macOS. It opens normal windows and draws in them. There is no browser, no browser engine and no JavaScript inside.

Running in the browser is an extra possibility: you can compile the same code to WebAssembly. You only do that if you want your program in a web page.

You compile Fresnel programs with the normal Free Pascal compiler, fpc, like any other Free Pascal program. For a desktop program, pas2js plays no role at all.

Only for the browser version there is a small extra piece: a web page with a loader that starts the WebAssembly program and gives it a place to draw. That loader is a small pas2js program, and the Fresnel repository contains it: you compile it once and reuse it. Your own program, the Fresnel program itself, is always compiled with fpc.

Fresnel can draw in several ways. Which one is used, depends on the platform:

• Linux: GTK3 is used to create the windows and to draw. No Skia is needed.
• Windows, macOS and Android: Skia (a fast drawing library by Google) is used for drawing. A ready-to-use Skia library is included with the Fresnel sources, so there is nothing to find or build.
• Browser: the browser’s canvas is used for drawing.
• Inside an LCL application: the LCL draws.

Fresnel is designed so that drawing backends can be exchanged. Your code does not know or care which one is used.

You use the normal Lazarus IDE. Install the Fresnel design-time package, and you get a Fresnel page on the component palette, a Fresnel Application project type, Fresnel forms in the form designer, and CSS editors.

You can also use no IDE at all: any text editor, and fpc or lazbuild on the command line. Everything in Fresnel can be created in code.

Where does this idea come from? One of the demo programs is called IDE: it is a small code editor, built with Fresnel to show what Fresnel can do. It is an example program, not a tool you need.

Working together with the LCL was one of the goals of Fresnel from the very first day. You can:

• show Fresnel forms next to LCL forms in the same application;
• put Fresnel controls on an LCL form, with the TFresnelLCLControl control;
• move an existing LCL application to Fresnel one form at a time, instead of all at once.

In fact, the Lazarus form designer itself uses this: it is an LCL program that shows your Fresnel forms. See Fresnel and the LCL.

Fresnel is a separate project, made by the Free Pascal and Lazarus teams, with its own git repository. It is not included when you install Lazarus, and the core of Fresnel does not use the LCL at all.

Fresnel is organized in Lazarus packages (.lpk files), so the easiest way to compile it is with Lazarus or with lazbuild, Lazarus’s command-line build tool. On Linux, the GTK3 backend also reuses the GTK3 header translations that come with the Lazarus sources. And the Lazarus IDE is the most comfortable way to work with Fresnel, because of the form designer. And the LCL is not going away: Fresnel is an additional choice, not a replacement you are forced to use.

Many controls have the same name as in the LCL (TButton, TEdit, TComboBox, TTreeView, …), and many properties do too (Caption, Enabled, Items, OnClick, …). That makes Fresnel easy to learn. But the controls are not identical, and existing LCL code will not compile unchanged:

• There are no Left, Top, Width, Height, Align, Anchors, Color or Font properties: you use CSS.
• Mouse and click event handlers receive an event object (TAbstractEvent), not a Sender.
• The text of a TEdit is in its Value property, like in HTML.
• The units have different names, such as Fresnel.Controls and Fresnel.Edit.

Fresnel also has elements that the LCL does not have, such as TDiv, TSpan and TBody, which are the building blocks of a layout. See Fresnel and the LCL.

There is no HTML in Fresnel, no JavaScript, and no browser engine. You do not write pages: you write Pascal classes, set properties, and handle events, exactly as in a Lazarus program.

Fresnel borrows two ideas from the web, because they work well:

1. CSS, to describe the look and the layout;
2. a tree of elements, so CSS rules can say things like “all buttons in the toolbar”.

To make CSS rules easy to write, the elements have CSS type names that web developers know, such as div, span, label, button and input. But TDiv is a Pascal class, created with TDiv.Create, not an HTML tag.