Isomorphicspring Isomorphic - spring web seminar 2015

React, Client를 넘어 Server-Side에서 활용하기

(Isomorphic)
KSUG 2015 Seminar

Modern Java web application with Spring

정성용

Whoami
$ SK planet (2012~)

$ bungubbang57@gmail.com

$ facebook.com/sungyong.jung
and
2014 04 05

Isomorphic
동형 : 同形(같은 모양)
같은 모양 같은 형태를 공유
ServerSide와 ClientSide가 같은 코드를 사용해서 개발
Javascript template Library으로

Viewtemplate 및 Client를 개발

Q1 >

nodejs에서 개발하면 isomorphic 한것인가?
같은 Language가 아니라 같은 Code를 공유해야 함
(개인적인 Isomorphic 범위에 대한 생각)
No!
Server Rendering 와 Browser Rendering 간의
Code 및 Skill set이 다르다면 isomorphic하다가 할수 없다

Spring에서 View를 표현하는 방법
대다수의 View
View template jQuery
HTML 구성 및 Data-Binding 등

대부분의 View를 View template을 이용해 개발 후,

이벤트만 jQuery로 관리

Spring에서 View를 표현하는 방법
Javascript Library 위주
View template
AngularJS
HTML틀만 View Template으로 구성하고

서버와의 API통신을 통해 대부분의 View구성 및 Data-Biding, Event를

Javascript Library를 사용해서 구성하는 방법
ReactJS
jQuery Mobile

어떤 방식을 더 선호 하시나요?
Javascript Library 위주View Template 위주
VS

어떤 방식을 더 선호 하시나요?
Javascript Library 위주View Template 위주
VS
• 기능 및 특징에 따른 다양한

Library들이 존재

• 다양한 Data-Binding 지원

• View Components의 재활용

• Components간 다양한 이벤트

적용가능

• 독립적인 개발 및 테스트 용이

• 최근 가장 Trendy한 기술이기 
때문에 릴리즈가 활발
• 서버에서 연산 작용

- 속도의 효율성

• 검색엔진에 해당 내용을

노출할수 있다.

- SEO 최적화

• 민감한 API를 노출 하지

않아도 된다.

- 보안

• 서버에서 연산 작용

- 속도의 효율성

• 검색엔진에 해당 내용을

노출할수 있다.

- SEO 최적화

• 민감한 API를 노출 하지

않아도 된다.

- 보안

Isomorphic 장점
• 기능 및 특징에 따른 다양한

Library들이 존재

• 다양한 Data-Binding 지원

• View Components의 재활용

• Components간 다양한 이벤트

적용가능

• 독립적인 개발 및 테스트 용이

• 최근 가장 Trendy한 기술이기 
때문에 릴리즈가 활발
+

Q2 >

둘다 장점을 적절히 섞어 사용할 수 있었지 않냐?
하나의 View Library만 학습하면 된다.
같은 View 를 그릴때 Server와 Client에서의 코드 재활용이 가능 하다.
초기화면에서 필요한 내용들은 Thymeleaf를 사용하고 Browser에서 React로 그리면 된다!?

Q3 >

Spring ViewTemplate도 충분히 Data-Binding 및
View재활용을 할 수있지 않나?
최초로 페이지를 그릴때
View Template과 JS View Lib는 기능상의 큰 차이점은 찾기
힘들다.
이후 이벤트에 의해서 페이지를 그려질때
Isomorphic한 개발 만이 Server에서 ViewTemplate을 그릴때 썼
던 코드 그대로, Client에서 재활용할 수 있다. ReactJS나
Angular를 사용했다면 Component 재활용 및 Event 역시 손쉽게
다시 적용 할 수 있다.

Spring에서 ScriptTemplate 사용하기

Requirements
Java 8 +
Java8부터 Nashorn(Javscript Engine: JSR 223)이 도입되면서

Script template 기술이 가능해 졌음
SpringFramework 4.2+ or Spring boot 1.3+
ScriptTemplateConfig지원

Spring + MustacheJS
Server Template 사용

Spring + MustacheJS
https://github.com/bungubbang/spring-mustache-isomorphic-example
@Bean

public ScriptTemplateConfigurer mustacheConfigurer() {

ScriptTemplateConfigurer configurer = new ScriptTemplateConfigurer();

configurer.setEngineName("nashorn");

configurer.setScripts(

"/META-INF/resources/webjars/mustache/2.1.2/mustache.js",

"/static/js/render.js");

configurer.setRenderFunction("render");

return configurer;

}

@Controller

public class MustacheViewController {

@RequestMapping(value = "/", method = RequestMethod.GET)

public String index(Model model) {

model.addAttribute("title", "KSUG 2015 Web Seminar");

model.addAttribute("subject", "Spring Isomorphic example");

return "index";

}

}
Spring + MustacheJS

<html>

<body>

<h1>KSUG 2015 Web Seminar</h1>

<h2>Spring Isomorphic example</h2>

</body>

</html>
<html>

<body>

<h1>{{title}}</h1>

<h2>{{subject}}</h2>

</body>

</html>
Spring + MustacheJS

Spring + Handlebars
Client 전용 View Library 사용

Spring + Handlebars
https://github.com/bungubbang/spring-handlebars-isomorphic-example
@Bean

public ScriptTemplateConfigurer handlebarsConfigurer() {




“/static/js/polyfill.js”,

"/META-INF/resources/webjars/handlebars/4.0.2/handlebars.js",

"/static/js/render.js");

configurer.setRenderFunction(“render");

configurer.setSharedEngine(false);

return configurer;

}

Polyfill
(https://en.wikipedia.org/wiki/Polyfill)
오래된 브라우져에 최신 기능(HTML5등)을 작동 가능하도록 만드는 기술
예) html5shiv.js, json2.js, es5-shim
Javascript in Java(Nashorn) vs Javscript in browser
Browser의 특성을 사용한 Javascript Library 코드가 Nashorn에서 에러가

발생하지 않도록 설정한 파일
1. Nashorn 에는 window 객체가 없다.

• console.log, document, location 등의 function을 지원 하지 않음

2. Nashorn에서는 Java Object를 이용 할 수 있다.

• Java Type 및 Class 이용 가능

polyfill.js
(https://en.wikipedia.org/wiki/Polyfill)
Mustache
var window = {};

ReactJS
var global = this;

var console = {};

console.debug = print;

console.warn = print;

console.log = print;

SharedEngine
Nashorn은 Thread Safe하지 않게 설계되어있다.

ScriptTemplate에서는 View 및 Engine을 재활용(Cache)하여 사용한다.
false로 설정하게 되면 내부적으로 ThreadLocal을 사용해서 engine을 공유하지 않고,

request마다 새롭게 만들게 script engine을 생성하게 된다.
HandleBars, React등은 Thread Safe하지 않기때문에 (전역변수 사용)

false로 설정해야 한다.
https://blogs.oracle.com/nashorn/entry/nashorn_multi_threading_and_mt
Javascript Template Library가 Tread Safe한지 확인후 사용해야 함

Spring + Handlebars
https://github.com/bungubbang/spring-handlebars-isomorphic-example
function render(template, model) {

// Create a real Javascript Object from the model Map

var data = {};

for (var k in model) {

// Convert Java Iterable and List to real Javascript arrays

if (model[k] instanceof Java.type("java.lang.Iterable")) {

data[k] = Java.from(model[k]);

} else { // String, Float, Date , etc..

data[k] = model[k];

}

}

var compiledTemplate = Handlebars.compile(template);

return compiledTemplate(data);

}

Spring + React(with ejs) Example
https://github.com/bungubbang/spring-react-isomorphic-example

Spring + React
https://github.com/bungubbang/spring-react-isomorphic-example
@Bean

public ScriptTemplateConfigurer reactConfigurer() {




"/static/js/polyfill.js",

"/static/lib/ejs.min.js",

"/META-INF/resources/webjars/react/0.13.3/react.js",

“/static/js/render.js",

“/static/output/music.js”, // 이하 ReactJS component files

“/static/output/music-list.js”,

“/static/output/music-search.js”,

“/static/output/music-more.js");

configurer.setRenderFunction(“render");

configurer.setSharedEngine(false);

return configurer;

}

Spring + React
<%= React.renderToString

<MusicApp />

<MusicSearch />

<MusicList />

<MusicItem />

<MusicMore />

%>
index.ejs
• Server rendering

• React Dom으로 구성된 View를 내려줌
<MusicSearch />
<MusicList />

<MusicItem />
<MusicMore />

Spring + React
React.render

<MusicApp />

<MusicSearch />

<MusicList />

<MusicItem />

<MusicMore />

init.js
• Client rendering

• 한번 더 Render를 호출하지만 React 특성상 DOM을 다시 그리지 않고, 
기존에 적용 되지 않았던 이벤트만 추가하게 됨 (Virtual DOM)
검색 이벤트
상세페이지 이동 이벤트
리스트 추가 이벤트

ScriptTemplate 아쉬운점

"/static/js/polyfill.js",

"/static/lib/ejs.min.js",

"/META-INF/resources/webjars/react/0.13.3/react.js",

“/static/js/render.js",

“/static/output/site-list.js”,

"/static/output/site.js");
1. folder import기능이 없다.

- Ordering 문제때문이지 않을까?  
하지만 숫자를 붙여서라도 import가 되면 좋겠다.

2. path별 설정기능이 없다.

- 특정 주소별로 사용하는 js파일까지 일단 전부 import해야 한다. 
JS가 많아 질수록 초기 로드 속도가 느려질 뿐만 아니라,  
관리를 함에 있어 어려움이 발생.

setScript(…)

결론
• Isomorphic은 Spring에 국한된 기술이 아니다.

• Meteor, Vaddin 등 Isomorphic한 Framework 이 등장되어지고 있다.

• NodeJs, Django, RoR 등의 기존 Famework의 Isomorphic 지원이 개발되
었거나, 개발되어지고 있는 중이다.

• Isomorphic을 통해서 Spring ViewTemplate들이 발빠르게 지원
하지 못했던 기능들을 다양한 Javascript Library을 통해서
View를 구성해 볼 수 있는 기회가 열렸다.

• Viewtemplate의 삼국지 -> 춘추 전국시대의 도래

• 트렌드를 이끄는 다양한 Javascript Library가 계속해서 등장
함에 따라 앞으로 Isomorphic기술은 더욱 유용성이 높아 질 것
이다.

Isomorphicspring Isomorphic - spring web seminar 2015

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Isomorphicspring Isomorphic - spring web seminar 2015

Similar to Isomorphicspring Isomorphic - spring web seminar 2015 (20)

Isomorphicspring Isomorphic - spring web seminar 2015