Front end framework introduction?

Design
1

I read the doc and thought the pages for a doctype are rendered with things like document_page.py and Jinja templates. But after checking some codes and testing, I found the pages are built by some front end framework. Could somebody shed light on it because there is no doc for it?

2

Hi there,

I wouldn’t call it a full framework, but there are a few APIs available for different kinds of pages. There’s also the Page doctype, which lets you render anything you want. It’s fairly unabstracted, though, involving direct dom manipulation for the most part.

Is there anything in particular you are trying to do?

3

Thank you.

  1. So it’s not some MVC framework like vue but some scripts wrapping jquery and controls?
  2. Can you elaberate a little more, e.g. where’re the scripts and controls? what’re the files’ high level roles?
    I want to check if improvements like gui form & workflow builder are doable.
4

If you are building new front-end, checkout Frappe UI: GitHub - frappe/frappe-ui: A set of components and utilities for rapid UI development

2 Likes
5

Thanks, is Frappe UI currently used by frappe and erpnext?

1 Like
6

I found Frappe UI is not used by frappe and erpnext, is there any plan to replace it with the current used front-end?

1 Like
7

Improvements are definitely possible, as Frappe gives you fairly absolute control. Routing and rendering went through a major overhaul in v14, making the system much more modular and extensible.

At the lowest level, requests are delegated by path_resolver.py to the appropriate page renderer. There are several different page renders built-in, and you can also create your own in an app. The renders that come built in can be split into two categories:

  • template_page.py, which generates the SPA “Desk” interface; and
  • several others, including static_page.py, webform_page.py, document_page.py, etc., which are either static or server-side generated pages used in the portal.

These different page renderers are largely autonomous as far as front-end work goes. In principle, you could have one page renderer building a react app, one page renderer serving static html, and one page renderer feeding a perl or php interface if you wanted (though god knows why you’d want to do that last one).

The most familiar renderer, template_page.py, loads Vue.js by default, though relatively little at this point is built using Vue. Most pages — workspaces, list views, form views, etc. — are relatively unabstracted and built manually via direct DOM manipulation. Several of these pages have apis (see the docs for details), but it’s mostly application-level stuff.

2 Likes
8

A doctype page template is setup with page.js and page.html. Some code in page.js, depending on the view mode (kanban, gantt, calander etc) specific code is called to populate the html contents of a page. Have a look at frappe/frappe/public/js/frappe/views/kanban

1 Like
9

I would suggest looking into shoelace.style. It is pretty comprehensive and is has accessability built in. It is also open source. It has been purchased by Font Awesome who are re-branding it to Web Awesome, the commitment to open source remains, although they will offer paid products around it.