Front-end framework

[Xenno]

This reminds me when I created apps as ActiveX's Active Form (.ocx) with D7 that can only run on IIS and IE, years ago. Wow, desktop app inside web browser! 

[gary]

Anything requiring installing software on client PCs is not simple. That's why the web browser has become the universal client-side application platform.

Yes, you are right. But if there exists any Lazarus tool that is easy both in development and in deployment then it must have been the standard web development tool. Within the current limitations --- not knowing HTML, JS, CSS --- we are looking for ways.

I discovered a program called "Webstudio". Currently, only it is relatively simple for front-end development, but advanced functions require payment, and it also needs some knowledge of html, js, and css.

[krolikbest]

Some time ago, I worked on a project that used pas2js. It's not as simple as drag&drop or clicking; you need to spend some time learning this technology. I usually while developing  something in this technology open a few pages with js tutorials and it helps me to understand how to write it in pas2js notation. here is my example of use pas2js: https://www.youtube.com/watch?v=eo62_1uqN1w. Or perhaps modern approach to use AI writing in pas2js (not tested by me).

Regards,
Martin

[VisualLab]

When I read or hear "framework" I get sick.

Especially when it's coupled with a statement like "I don't know HTML or CSS".  Why would you try to develop a web app if you don't know the absolute basics?

I specialize in backend development. My first completed project was a backend system I built myself, paired with a frontend generated by AI. So far, it's running smoothly, but I can't fine-tune the frontend precisely since it was AI-generated. That's why I'm eager to learn more about it now.

You're worrying unnecessarily "just in case". HTML and CSS are simple (especially HTML). For HTML basics, any HTML5 book you come across (from O'Reilly, for example) will suffice. For CSS, I would personally recommend Eric Meyer's book describing CSS3. It's very clearly written and includes many examples. It's not about reading it; you simply open it to the chapter that describes what you need. JavaScript can be a bit of a problem. Many people say it's difficult. But in reality, it's just a complete mess (a rubbish project, very sloppily executed) and therefore difficult to work with. Anyone who started with languages ​​like Pascal (or C++ or Java) complains about the primitive nature of JS^*). Unfortunately, there is nothing else on the web browser side. Nevertheless, it can be managed. Current web browsers have JS debuggers. When I was learning JS, there weren't such conveniences

^*) It's like living in a comfortable, modern house (with running water, sewage, and electricity) and suddenly having to move to a hut in the woods for an extended period.

[delphius]

You're worrying unnecessarily "just in case". HTML and CSS are simple (especially HTML).

I will express my opinion on how I see it.
A frontend developer is a completely different paradigm. I want to remain a classic backend Pascalist and not worry about what's happening in the browser. At most, I want to keep objects corresponding to frontend screens in memory on the server, as well as the state of all objects, and reduce the frontend's work to simple rendering. I want to be able to operate on objects in the same way as in lcl and set bindings. I want the virtual interface elements that I fully control on the backend to be displayed using an agnostic layer that allows me to replace the visuals while maintaining functionality

[kveroneau]

xProject will be free to use until their 1.0 release now, and when they did have demos available on their website, which seem to have disappeared now, it was the LCL running in the browser, and they also promise drag and drop as with LCL development.  I haven't tried it yet, but I am rather tempted.

https://green-hill.srl/

[valdir.marcos]

xProject will be free to use until their 1.0 release now, and when they did have demos available on their website, which seem to have disappeared now, it was the LCL running in the browser, and they also promise drag and drop as with LCL development.  I haven't tried it yet, but I am rather tempted.

https://green-hill.srl/

Very interesting.

[tkay]

There is Quartex Pascal https://quartexdeveloper.com/ , but it does come with a steeper price now, and there is a bit of a learning curve. Others have mentioned AI generation for front ends. I've been tempted to take this approach and hobble something together that mirrors / Phlex in ruby for UI component generation. Add some basic data binding and light weight java script and css.

[PierceNg]

For building HTML/CSS front-ends, one should start with the Bootstrap and Bulma packages and examples bundled with pas2js. If you are familiar with getElementByID, innerHTML and friends, you are 80% of the way there.

The bigger challenge with using pas2js for building browser apps is in using existing Javascript/TypeScript packages. For example, integrating OAuth2 / OpenID Connect with one of these:

- https://github.com/AzureAD/microsoft-authentication-library-for-js
- https://github.com/authts/oidc-client-ts

Another big challenge is in dealing with Javascript node_modules, with its bewildering plethora of tools and npm supply chain attacks.

[affonso]

I’d like to share something I’ve been working on that may be interesting to the Lazarus and pas2js community 👇

I’m building a mini framework called **BlaiseVue**, inspired by Vue.js, focused on frontend development using Pascal with pas2js.

The goal is to bring a modern frontend experience to the Lazarus ecosystem, with a simple, powerful, and productive architecture.

---

🚀 **Main features so far:**

* **Single File Components (.bv)** (template + logic + style in a single file)
* **Automatic reactivity**
* **Data binding**
* **Components with isolated state**
* Directives like `b-if`, `b-for`, `b-model`, `@click`, etc.
* Routing system
* Built-in CLI (`dev`, `build`, `transpile`, `serve`)
* **BVDevTools** (application debug mode)

---

🧠 **Advanced reactive system**

The framework already includes modern reactivity features:

* **Real computed properties (fully reactive)**
* **Watchers**
* **Granular updates (only updates what changed)**
* **Dependency tracking**
* **Lifecycle hooks (component lifecycle)**

---

🧩 **Ecosystem and extensibility**

The framework is designed to grow with support for third-party libraries:

* Integration with **Bootstrap (CSS)**
* Support for **icon libraries**
* **Theme system**
* Integration with **Chart.js** for charts
* Architecture based on **component units**, with test support
* Internal tools (tooldevs) to simplify development and debugging

The idea is to allow the ecosystem to evolve with plugins and reusable components.

---

📚 **Documentation and learning**

Another important aspect:

* The framework code will be **fully commented**
* A **course-style documentation (step-by-step)** will be created
* Detailed **technical documentation**
* Documentation focused on **understanding the framework architecture and contributing to it**

---

🤖 **Development with AI**

I’m using AI as support during development, since I’m not a professional programmer — which also shows that the project is being designed to be accessible and easy to understand.

---

🎯 **Goal**

Bring a Vue.js-like experience to the Pascal world, while keeping simplicity, control, and performance.

---

⚠️ The project is still under development, but it is already functional and evolving quickly.

🚀 I plan to release an initial version for testing soon.