iOS App 개발 with React Native + ClojureScriptCheolhee Han
ClojureScript 와 React Native 를 이용하여, 사물인터넷 기기와 App의 프로토타입 개발한 결과를 시연합니다.
React Native 를 채택까지의 과정을 전개합니다.
왜 Clojure로 개발하는가? 대한 이야기.
소스 저장소
https://github.com/cheolhee/ReactNativeDuckie
UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전
내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치
https://github.com/kimxogus/react-tutorial
iOS App 개발 with React Native + ClojureScriptCheolhee Han
ClojureScript 와 React Native 를 이용하여, 사물인터넷 기기와 App의 프로토타입 개발한 결과를 시연합니다.
React Native 를 채택까지의 과정을 전개합니다.
왜 Clojure로 개발하는가? 대한 이야기.
소스 저장소
https://github.com/cheolhee/ReactNativeDuckie
UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전
내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치
https://github.com/kimxogus/react-tutorial
Spring integration을 통해_살펴본_메시징_세계Wangeun Lee
[스프링캠프 2015] Spring Integration을 통해 살펴본 메시징 세계 발표자료 입니다.
예제 소스 저장소는 프리젠테이션 안에 링크 걸어놨습니다.
감사합니다.
-------------------------------------------------------------------
우리는 늘 누군가와 소통(Communication)을 합니다. 소통을 통하여 누군가에게 일을 시키기도 하고 내가 일을 받기도 합니다. 애플리케이션도 마찬가지로 이기종간의 애플리케이션끼리 데이터로 소통을 하며 할 일을 서로 분산 처리할 상황이 발생하기도 합니다.
이런 분산 처리 이전에는 소통이 전제되어야 합니다. 애플리케이션 간 소통에 대한 고민은 선구자들에 의해 Enterprise Integration Patterns로 탄생되었으며 Spring에서도 그 패턴화의 추상화 일원으로 Spring Integration을 탄생시켰습니다.
이 강연에서는 Spring Integration을 통해 애플리케이션 간에 어떻게 쉽고 편하게(?) 소통을 할 수 있게 되었는지 살펴보며 예제와 사례를 통해 Spring Integration 입문에 도움을 주고자 합니다.
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
Isomorphicspring Isomorphic - spring web seminar 2015
1. React, Client를 넘어 Server-Side에서 활용하기
(Isomorphic)
KSUG 2015 Seminar
Modern Java web application with Spring
정성용
2. Whoami
$ SK planet (2012~)
$ bungubbang57@gmail.com
$ facebook.com/sungyong.jung
and
2014 04 05
3. Isomorphic
동형 : 同形(같은 모양)
같은 모양 같은 형태를 공유
ServerSide와 ClientSide가 같은 코드를 사용해서 개발
Javascript template Library으로
Viewtemplate 및 Client를 개발
4. Q1 >
nodejs에서 개발하면 isomorphic 한것인가?
같은 Language가 아니라 같은 Code를 공유해야 함
(개인적인 Isomorphic 범위에 대한 생각)
No!
Server Rendering 와 Browser Rendering 간의
Code 및 Skill set이 다르다면 isomorphic하다가 할수 없다
5. Spring에서 View를 표현하는 방법
대다수의 View
View template jQuery
HTML 구성 및 Data-Binding 등
대부분의 View를 View template을 이용해 개발 후,
이벤트만 jQuery로 관리
6. Spring에서 View를 표현하는 방법
Javascript Library 위주
View template
AngularJS
HTML틀만 View Template으로 구성하고
서버와의 API통신을 통해 대부분의 View구성 및 Data-Biding, Event를
Javascript Library를 사용해서 구성하는 방법
ReactJS
jQuery Mobile
7. 어떤 방식을 더 선호 하시나요?
Javascript Library 위주View Template 위주
VS
8. 어떤 방식을 더 선호 하시나요?
Javascript Library 위주View Template 위주
VS
• 기능 및 특징에 따른 다양한
Library들이 존재
• 다양한 Data-Binding 지원
• View Components의 재활용
• Components간 다양한 이벤트
적용가능
• 독립적인 개발 및 테스트 용이
• 최근 가장 Trendy한 기술이기
때문에 릴리즈가 활발
• 서버에서 연산 작용
- 속도의 효율성
• 검색엔진에 해당 내용을
노출할수 있다.
- SEO 최적화
• 민감한 API를 노출 하지
않아도 된다.
- 보안
9. • 서버에서 연산 작용
- 속도의 효율성
• 검색엔진에 해당 내용을
노출할수 있다.
- SEO 최적화
• 민감한 API를 노출 하지
않아도 된다.
- 보안
Isomorphic 장점
• 기능 및 특징에 따른 다양한
Library들이 존재
• 다양한 Data-Binding 지원
• View Components의 재활용
• Components간 다양한 이벤트
적용가능
• 독립적인 개발 및 테스트 용이
• 최근 가장 Trendy한 기술이기
때문에 릴리즈가 활발
+
10. Q2 >
둘다 장점을 적절히 섞어 사용할 수 있었지 않냐?
하나의 View Library만 학습하면 된다.
같은 View 를 그릴때 Server와 Client에서의 코드 재활용이 가능 하다.
초기화면에서 필요한 내용들은 Thymeleaf를 사용하고 Browser에서 React로 그리면 된다!?
11. Q3 >
Spring ViewTemplate도 충분히 Data-Binding 및
View재활용을 할 수있지 않나?
최초로 페이지를 그릴때
View Template과 JS View Lib는 기능상의 큰 차이점은 찾기
힘들다.
이후 이벤트에 의해서 페이지를 그려질때
Isomorphic한 개발 만이 Server에서 ViewTemplate을 그릴때 썼
던 코드 그대로, Client에서 재활용할 수 있다. ReactJS나
Angular를 사용했다면 Component 재활용 및 Event 역시 손쉽게
다시 적용 할 수 있다.
17. Spring에서 ScriptTemplate 사용하기
https://github.com/bungubbang/spring-mustache-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];
}
}
return Mustache.render(template, data);
}
Spring + MustacheJS
20. Spring에서 ScriptTemplate 사용하기
Spring + Handlebars
https://github.com/bungubbang/spring-handlebars-isomorphic-example
@Bean
public ScriptTemplateConfigurer handlebarsConfigurer() {
ScriptTemplateConfigurer configurer = new ScriptTemplateConfigurer();
configurer.setEngineName("nashorn");
configurer.setScripts(
“/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;
}
21. Spring에서 ScriptTemplate 사용하기
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 이용 가능
23. Spring에서 ScriptTemplate 사용하기
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한지 확인후 사용해야 함
24. Spring에서 ScriptTemplate 사용하기
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);
}
26. Spring + React(with ejs) Example
https://github.com/bungubbang/spring-react-isomorphic-example
27. Spring에서 ScriptTemplate 사용하기
Spring + React
https://github.com/bungubbang/spring-react-isomorphic-example
@Bean
public ScriptTemplateConfigurer reactConfigurer() {
ScriptTemplateConfigurer configurer = new ScriptTemplateConfigurer();
configurer.setEngineName("nashorn");
configurer.setScripts(
"/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;
}
28. Spring에서 ScriptTemplate 사용하기
Spring + React
<%= React.renderToString
<MusicApp />
<MusicSearch />
<MusicList />
<MusicItem />
<MusicMore />
%>
index.ejs
• Server rendering
• React Dom으로 구성된 View를 내려줌
<MusicSearch />
<MusicList />
<MusicItem />
<MusicMore />
29. Spring에서 ScriptTemplate 사용하기
Spring + React
React.render
<MusicApp />
<MusicSearch />
<MusicList />
<MusicItem />
<MusicMore />
init.js
• Client rendering
• 한번 더 Render를 호출하지만 React 특성상 DOM을 다시 그리지 않고,
기존에 적용 되지 않았던 이벤트만 추가하게 됨 (Virtual DOM)
검색 이벤트
상세페이지 이동 이벤트
리스트 추가 이벤트
31. 결론
• Isomorphic은 Spring에 국한된 기술이 아니다.
• Meteor, Vaddin 등 Isomorphic한 Framework 이 등장되어지고 있다.
• NodeJs, Django, RoR 등의 기존 Famework의 Isomorphic 지원이 개발되
었거나, 개발되어지고 있는 중이다.
• Isomorphic을 통해서 Spring ViewTemplate들이 발빠르게 지원
하지 못했던 기능들을 다양한 Javascript Library을 통해서
View를 구성해 볼 수 있는 기회가 열렸다.
• Viewtemplate의 삼국지 -> 춘추 전국시대의 도래
• 트렌드를 이끄는 다양한 Javascript Library가 계속해서 등장
함에 따라 앞으로 Isomorphic기술은 더욱 유용성이 높아 질 것
이다.