html, css, javascript 없이 single page application 개발 소개

1. VAADIN
JAVA로 SCRIPTLESS한 WEB 구현

2. 2

3. ▸ https://www.facebook.com/groups/vaadinkorea/

5. 소개
VAADIN이란
▸ 우리는 Java로 구현합니다.
▸ GWT구현과 같지 않습니다. 하지만 GWT처럼도 할수 있죠.
▸ Java to Javascript compiler로 개발하지 않아요.

6. 소개
돈내고 쓰나요?
▸ GPL버전과 상용버전의 차이
▸ charts, spreadsheet, Vaadin Touch…

7. 소개
SERVER-SIDE VAADIN APPLICATION ARCHITECTURE

8. 소개
▸ server-side framework을 이용해서 으로 구현하고
▸ client-side engine으로 실행
▸ 별도의 plugin이 없이 GWT의 도움으로 대부분의 브라우저에 작동함

9. 좀더 자세히 소개
COMPONENTS AND WIDGETSETS
▸ Button, Label, Text, TextField, RichTextField
▸ Charts, SpreadSheet
▸ Tree,Grid
▸ Layout(HorizontalLayout,VerticalLayout,FormLayout)
▸ http://demo.vaadin.com/sampler/

11. 좀더 자세히 소개
MOBILE
▸ Mobile, Pad, Desktop에서의 반응형 웹 구현

12. 사용툴
오늘 사용툴
▸ InteliJ IDEA 14
▸ Maven
▸ Java 1.8

13. 일단 실행해 봅시다.
POM.XML
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
<version>${vaadin.version}</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
<version>${vaadin.version}</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
<version>${vaadin.version}</version>
</dependency>
</dependencies>

14. 일단 실행해 봅시다.
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public class MyUIServlet extends VaadinServlet {
}
SERVLET JAVA CODE

15. 일단 실행해 봅시다.
@Theme("valo")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Click Me");
button.addClickListener(event -> layout.addComponent(new Label("Thank you for
clicking")));
layout.addComponent(button);
}
}
VAADIN JAVA CODE

16. ARCHITECTURE
DEVELOPMENT TOOLCHAIN AND PROCESS

17. ARCHITECTURE
▸ 일반 웹개발과 유사한 형태로 개발할수 있음
▸ Eclipse + Maven + Tomcat plugin
▸ InteliJ IDEA + Gradle + spring boot `Run AS`
▸ Pre Build된 theme와 compiled js로 별도의 maven,gradle
plugin없이 개발가능

18. ARCHITECTURE
VAADIN RUNTIME ARCHITECTURE

19. ARCHITECTURE
USER SESSION
▸ 모든 화면 구성요서는 USER SESSION에 연결된다. 서블릿이 종료되
도, 구성요소는 was 서버에 존재하게 된다. vaadin의 heartbeat체
크가 살아 있는한……
▸ 그래서 l4,l7 round robin X X X
▸ tomcat session clustering이 방법이라하지만, 구현이 복잡해짐,
▸ sticky session이 가장 쉬운 해결책

20. UI-VIEW-NAVIGATOR
UI
▸ Single Page Application

21. UI-VIEW-NAVIGATOR
VIEW,NAVIGATOR
▸ UI -> VIEW1, VIEW2, VIEW3
▸ Navigator로 view를 이동

22. UI-VIEW-NAVIGATOR
@Theme("valo")
public class MyUI extends UI {
private Navigator navigator;
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
final VerticalLayout main = new VerticalLayout();
final HorizontalLayout menu = new HorizontalLayout();
main.setMargin(true);
layout.addComponents(menu, main);
setContent(layout);
navigator = new Navigator(this, main);
navigator.addView("", new DefaultView());
navigator.addView("view1", new View1());
navigator.addView("view2", new View2());
Button view1Button = new Button("Goto View1");
view1Button.addClickListener(event -> navigator.navigateTo("view1"));
Button view2Button = new Button("Goto View2");
view2Button.addClickListener(event -> navigator.navigateTo("view2"));
menu.addComponents(view1Button, view2Button);
}
}

23. UI-VIEW-NAVIGATOR
LISTENERS AND EVENTS
Button view1Button = new Button("Goto View1");
view1Button.addClickListener(event -> navigator.navigateTo("view1"));
Button view2Button = new Button("Goto View2");
view2Button.addClickListener(event -> navigator.navigateTo("view2"));

24. SPRING
@BEAN @AUTOWIRED
▸ crud-with-vaadin

25. CODE REVIEW

26. 텍스트
참조 링크
▸ https://vaadin.com/book/-/page/preface.html
▸ http://spring.io/guides/gs/crud-with-vaadin/
▸ http://demo.vaadin.com/sampler/

27. VAADIN
FACEBOOK
HTTPS://
WWW.FACEBOOK.COM/
GROUPS/VAADINKOREA/