Journal of the Korea Institute of Information and Communication Engineering (한국정보통신학회논문지)

The Korea Institute of Information and Commucation Engineering (한국정보통신학회)
권호 표지
DOI QR코드

DOI QR Code

Design of Adaptive Web and Lazy Loading Components for Web Application Development

웹 애플리케이션 개발을 위한 반응형 웹과 Lazy Loading 컴포넌트 설계

  • Park, Hyeonbeom (Department of Computer Engineering, Graduate School of Information & Communications, Hanbat National University) ;
  • Kim, Chajong (Department of Computer Engineering, Hanbat National University)
  • Received : 2019.03.08
  • Accepted : 2019.04.26
  • Published : 2019.05.31
Download PDF
⟨ Previous Next ⟩

Abstract

In this paper, we designed the editing function size and position adjustment, hiding and displaying, style editing, edit by device type etc. for each device type so that contents can be dynamically converted according to resolution or screen size according to various devices. and to be able to respond to various devices by storing device information in a component created through editing function. To improve the viewer of the web application and to improve the processing speed of the server, a component using the lazy loading technique was designed. in this paper, responsive web functionality and improve server throunghput results show that the response function of the Web function and the improvement of the processing speed of the server are improved by the monitoring tool, and the processing speed is improved in most browsers.

본 논문은 컴포넌트 기반의 반응형 웹 애플리케이션 개발을 위하여 다양한 디바이스에 맞추어 해상도나 화면 크기에 따라 콘텐츠가 동적으로 변환될 수 있도록 디바이스 유형별 편집 기능 크기 및 위치 조정, 숨김 및 표시, 스타일 편집, 디바이스 유형별 편집 등을 설계하였고, 생성된 디바이스 정보를 컴포넌트에 저장하는 것을 제안하였다. 또한 웹 애플리케이션의 뷰 개선과 동시에 서버의 처리 속도 향상을 위하여 lazy loading 기법을 적용한 컴포넌트를 설계하였다. 본 논문에서 제안한 반응형 웹 기능과 서버의 처리 속도 개선 여부를 모니터링 툴을 통해 실험한 결과 웹 기능이 다양한 디바이스에 반응하였고 대부분의 브라우저에서 처리속도가 향상됨을 확인하였다.

Keywords

HOJBC0_2019_v23n5_516_f0001.png 이미지

Fig. 1 960 Grid System

HOJBC0_2019_v23n5_516_f0002.png 이미지

Fig. 2 calculating coordinates

HOJBC0_2019_v23n5_516_f0003.png 이미지

Fig. 3 Section model

HOJBC0_2019_v23n5_516_f0004.png 이미지

Fig. 4 device imputation

HOJBC0_2019_v23n5_516_f0005.png 이미지

Fig. 5 Browser Support

HOJBC0_2019_v23n5_516_f0006.png 이미지

Fig. 6 DEVICE

Table. 1 component attribute

HOJBC0_2019_v23n5_516_t0001.png 이미지

Table. 2 Test Results

HOJBC0_2019_v23n5_516_t0002.png 이미지

References

  1. J. G. Kang, Y. H. Yu, Y. H. Choi, J. G. Kim, H. B. Park, "A Study on Code Assist Method of HTML5 Components," Korea information processing society AReportonthe, Busan, 1032-1034, Nov. 2014.
  2. J. H. Park, G. Y. Kang, Y. H. Choi, J. G. Kim, H. B. Park, "A Study on Responsive Layouts Design Methods of WYSIWYG HTML5 Editor," Korea information processing society AReportonthe, Busan, pp. 1039-1041, Nov.2014.
  3. S. J. Yeo, C. I. Lee, Y. H. Choi, J. G. Kim, H. B. Park, "A Design of WYSIWYG HTML5 Editor," Korea information processing society AReportonthe, Busan, pp.1035-1038, Nov. 2014.
  4. International Telecommunications Union [Internet]. Available: http://www.itu.int
  5. eMarketer [Internet]. Available: http://www.emarketer.com
  6. Korea Telecommunications Association [Internet]. Available: http://www.tta.or.kr
  7. Responsive web design WIKIPEDIA [Internet]. Available: http://en.wikipedia.org/wiki/Responsive_web_design
  8. JavaScript Development Tools [Internet]. Available: www.eclipse.org/webtools/jsdt/
  9. Vaddempudi Srinidhi, "Classification of User Behaviour in Mobile Internet," Asia-pacific Journal of Convergent Research Interchange, HSST, ISSN : 2508-9080, vol.2, no.2, Jun(2016), pp. 9-18, http://dx.doi.org/10.21742/APJCRI.2016.06.02