A story about Apache Wicket and atomic design

Nice to meet you. It will be first post. This is @ tesaito-gxp from GxP.

This article is the 18th day of Growth Experts Advent Calendar 2020 .

It was said that the theme of the Advent calendar was looking back on this year's learning , but in the three years since I was assigned, I can finally tell others about Apache Wicket . I think I'll write it down as if I've learned it.

I haven't touched on it much these days, but I used it for crunching in the first half of the year, so I'll write about it.

About Apache Wicket

Apache Wicket (hereafter, Wicket) is a Java web application framework, especially a framework specialized for the user interface.

Basically, I think that frameworks are created with "how to realize without writing source code", but the idea of ​​Wicket is exactly the opposite, "everything is Java. It becomes a framework that "I want to realize with." Of course, there are some configuration files (web.xml), but Wicket only describes the HTML and Java source code as the page template.

When creating a web application, writing an xml file, creating a JSP, preparing a Servlet, creating a configuration file for the framework, a property file, etc., the development work needs to go through various steps. .. However, when developing with Wicket, once you have prepared HTML, all you have to do is write Java. You can just write it as a class definition, not a method that is called according to GET or POST.

Of course, there are advantages and disadvantages.

The major features of Wicket are as follows.

  1. You can write Java-like code
  2. As I mentioned earlier, Wicket allows you to create web applications using Java. When it comes to "Java-like", object-oriented programming can be used to make parts by inheritance or encapsulation. Wicket makes good use of these to make it possible to standardize the screen layout by inheritance and classify common parts.
  3. Ajax is integrated
  4. Wicket contains Ajax, so you can easily create responsive applications.
  5. Providing a Model that realizes the combination of back-end and front-end data Wicket uses the concept of Model to easily exchange data between the screen and the back-end.

About atomic design

Mr. Okuyama wrote about atomic design on Advent Calendar Day 11 .

Atomic design is a design method that defines hierarchy and granularity using a chemistry metaphor based on the idea that UI is a combination of nested small components.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906419/e575fd68-d1a9-09dd-5870-8c365bef1487.png) Quote: https://uxdaystokyo.com/articles/glossary/atomic-design/

Reference source: Atomic Design Chapter2

What I've been doing since I learned about this atomic design was wrong. .. .. I was made aware of it.

Let's get back to Wicket.

Sample code

When designing a screen with Wicket, I would like to write two very simple patterns on how to realize it. To implement this time, I will write a simple one that just displays a sentence "I put the Label with Wicket" on the browser.

Pattern 1: Inherit class

SamplePage1.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <!--From here on down I will write in the inherited class-->
    <wicket:extend />
</body>
</html>

SamplePage1.java


import org.apache.wicket.markup.html.WebPage;

public abstract class SamplePage1 extends WebPage {
}

SamplePage1Impl.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <wicket:child>
        <div wicket:id="sampleLabel" />
    </wicket:child>
</body>
</html>

SamplePage1Impl.java


import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.Model;

public class SamplePage1Impl extends SamplePage1 {

    public java:SamplePage1Impl() {
        super();
        Label sampleLabel = new Label("sampleLabel", Model.of("I put a Label on Wicket"));
        this.add(sampleLabel);
    }
}

With this kind of feeling, while having elements such as headers (written in the body) that do not change on any page in the parent class, we will implement the function by adding the necessary elements in the inherited child class. .. Since various functions are additionally implemented in the child class, it can be implemented with polymorphism in mind.

Actual page image.png

Pattern 2: Use Panel

SamplePage2.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div>↓ From here on down, write in the Panel class ↓</div>
    <wicket:panel wicket:id="samplePanel" />
</body>
</html>

SamplePage2.java


import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.panel.Panel;

public class SamplePage2 extends WebPage {

    public SamplePage2() {
        super();
        Panel samplePanel = new SamplePanel("samplePanel");
        this.add(samplePanel);
    }
}

SamplePanel.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div>
        <span  wicket:id="sampleLabel"  />
    </div>
</body>
</html>

SamplePanel.java


import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;

public class SamplePanel extends Panel {

    public SamplePanel(String componentId) {
        super(componentId);
        Label sampleLabel = new Label("sampleLabel", Model.of("I put a Label on Wicket Sample2"));
        this.add(sampleLabel);
    }
}

This writing style is similar to atomic design. I implemented a new class called Panel, which corresponds to the template in atomic design. Reusable programming can be done by placing various elements on the Panel.

(Since only one Label is placed this time, the process of molecules and organisms is skipped.)

Actual page image.png

Both patterns are simply expressed as follows. image.png I can't say which implementation is better because there are project guidelines, but in my head I was thinking about pattern 2, but sometimes the completed form was pattern 1. did. I think I was able to put together the ideas around here.

Takeshi

I've probably learned about atomic design a little over a year ago, but I've always used Wicket to create screens. Originally, it was the maintenance of the existing system, so I used to refer to the past writing method ... but I used a mixture of the above two patterns. "You can write something that can be reused in either pattern 1 or pattern 2. It doesn't matter which one!" I thought that way. As a result, there is no such thing as what happened, but now I just regret that I was programming without thinking too much.

Since I learned about atomic design, I often write in pattern 2, which makes it easier for me to have guidelines for code reviews, and I don't get lost even if there are additional changes. I think that if the policy was decided at the project or individual level, it would be easier to do.

Ah, I want to hit myself in the past.

Recommended Posts

A story about Apache Wicket and atomic design
[Swift] A note about function and closure
A story about Java 11 support for Web services
A story about the JDK in the Java 11 era
A story that separates business logic and model
A story about making a Builder that inherits the Builder
A story about trying to operate JAVA File
A note about the Rails and Vue process
A story about a new engineer reading a passion programmer
Apache and tomcat
A story about young people's design skills improving at a 15-minute study session every morning
[PHP] A story about outputting PDF with TCPDF + FPDI
Design and implement a breakout game with a clean architecture
A story about trying to get along with Mockito
A story about trying hard to decompile JAR files
A story about reducing memory consumption to 1/100 with find_in_batches
A story about introducing Evolutions into the Play Framework
A story about developing ROS called rosjava with java
A story about starting a Java-related book club for newcomers
A memorandum about table data types and commands (Rails)
A story about making catkin_make of rosjava compatible offline
A story about using Lifecycle Observer and Rx Lifecycle for life cycle monitoring such as Presenter