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.
- You can write Java-like code 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.
- Ajax is integrated Wicket contains Ajax, so you can easily create responsive applications.
- 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.
- Atom: Element with the smallest granularity
- molecule: A simple UI element that combines two or more atoms
- Organism: A collection of molecules that can be separated and function as a simple substance
- Templates: A skeleton made up of several organisms, molecules and atoms
- Pages: Template with actual content applied
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
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
Both patterns are simply expressed as follows.
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