beanui

Angry BeanUI

A framework for developing WEB UI through Javabean

Whether the following scenarios will appear in your work:

• I am a Java developer and not proficient in web technology, but today I was arranged to develop a simple page;
• A two-month Java backend service (mainly backend) project, because no one in the team is proficient in front-end, it took one month to make pages;
• I built a library management system two years ago, last year I built a procurement management system, and this year I built a user management system;
• I am a Java developer and I am really not interested in participating in web development;

What web UI frameworks are currently popular?

What I mentioned above is the confusion I often encounter. In the current trend of separation of front and back ends, Java has almost given up its investment in Web UI frameworks. Even as Java developers, we rarely use Java UI frameworks such as Struts and JSF to develop, and JSP is rarely written. But in a Javaer daily life, even if one hundred people are unwilling to do so, they will still encounter the demand for UI, but when opening a search engine, they are full of new technologies emerging one after another. Perhaps it is difficult for even those who are in it to explain what is the popular web framework at present.

Front and back end separation

Speaking of front-end separation, this is also a scenario I often think about. If we simply divide the UI-equipped systems we develop into two categories:

• External systems (such as portals, blogs, etc.)
• Internal system (such as management system, etc.)

Then the external system is often responsible for professional UI staff or even UI teams, while the internal system is not necessarily the case. At this time, the task of front-end development falls on the back-end engineers.

In this case, the separation of the front and back ends becomes less beautiful, which means:

• Learn various front-end frameworks (Jquery, ReactJS, VUE, Angular)
• Learn front-end testing methods (unit, mock)
• Learn front-end compilation and packaging
• In fact, there are still many theories and concepts to understand
• The total amount of knowledge on the front end is definitely no less than the backend, and even exceeds the difficulty of learning on the backend.

Finally, after you made up your knowledge, you spent a lot of effort to create the front-end page, and you may still be criticized.

Javaer's ideal internal UI development process

• No need to know all kinds of knowledge about the front-end
• After developing the backend code (such as Restful service), you only need simple configuration to render the page

Our internal system often does not require brilliant effects, complex animations, or highly customized structures. It may be just an entrance to back-end services, or manage some configurations, or manage some simple data objects (such as users, orders, products, etc.), or present some common two-dimensional reports. Their most operations are simply CRUDs on data objects. Therefore, I thought about whether I could reversely generate front-end code through Java. Before that, frameworks such as GWT have done this, but the code is too invasive.

About the features of BeanUI

• Pure configuration, fully adopt Java annotations for UI description
• Non-invasive code UI description will not affect the backend Restful service project
• Rapid development
• Have a certain level of UI customization capabilities

Dependencies

1. Need to install npm: install nodejs 10.0.0 or npm 6.2.0;
2. Need to install apache maven;

Install BeanUI

1. git clone https://github.com/magic-bunny/beanui
2. cd beanui
3. mvn install

Install and run BeanUI example

1. Copy beanui/vue directory to any directory %your_vue_path%
2. cd %your_vue_path% and npm install
3. Add configuration node <workPath>%your_vue_path%</workPath> in the beanui-maven-plugin plugin in pom.xml
4. cd beanui/demo and mvn install
5. java -jar demo-1.0.jar
6. Open the browser and enter http://localhost:8080

Running BeanUI exam in DEV mode

1. Modify the running mode of the pom.xml file to dev <mode>dev</mode>
2. cd beanui/demo
3. mvn install

Program entry

Start building a BeanUI project and need to build a router.yml

Note: router.yml is not required. If not configured, the framework will scan all annotated classes containing @Component and convert them. At this time, path attribute needs to be configured. If not configured, it is /

If you need a simplest BeanUI project, see single-demo

Single page router instance

 path : /test
component : demo.view.layout.card.CardComponent

With left-hand menu router

 name : root
children :
  - title : home
    icon : star
    component : demo.view.layout.card.CardComponent

With login page and menu router

 path : /login
component : demo.view.LoginComponent
children :
  - title : home
    icon : star
    component : demo.view.layout.card.CardComponent 

Javabean annotation instructions

If you need to understand how each control is written in Javabean, please click

Note: Since the Element UI is used (Ele.me), you can almost completely refer to the component description of the Element UI.

BeanUI Maven plugin description

To understand the usage of the Maven plug-in, please click

If you need to know how to use the enhancement library, please click

License

BeanUI is licensed under the MIT license. See LICENSE for further details.