jquery-pjax - pushState + ajax = pjax

https://github.com/defunkt/jquery-pjax

HTML5의 history.pushState 함수를 사용한 웹 페이지 로딩 기술이며, jQuery 플러그인 형태로 되어 있습니다.

기존 AJAX는 동적으로 페이지를 생성하기 때문에 구글 크롤러가 데이터를 가져갈 수가 없었습니다. 그래서 Hashbang(#!)을 이용하여 다양한 꼼수들을 사용해왔습니다.

pjax는 다른 HTML 파일의 내용을 지정한 div안에 표시하는 기능입니다. 웹 브라우저의 URL은 가져온 HTML 파일 이름으로 표시되고, 뒤로가기 기능도 정상 동작합니다(HTML5를 지원하지 않는 브라우저는 그냥 전체 페이지를 로딩하므로 호환성 문제는 없습니다).

웹 브라우저의 URL이 바뀌었지만 history.pushState 함수로 히스토리를 조작했기 때문에 전체 페이지 로딩을 하지 않은 상태입니다. 즉 HTML 부분 로딩이 되는 것이죠.

http://pjax.heroku.com 예제 사이트를 보면 링크를 클릭할 때마다 시간이 바뀝니다. 이것은 전체 페이지가 매번 로딩되고 있다는걸 뜻합니다. pjax를 체크하면 링크를 클릭해도 시간이 바뀌지 않습니다. 아래 내용만 바뀌죠. 전체 페이지를 로딩하지 않고 내용만 가져왔기 때문에 시간이 바뀌지 않은 것입니다. 웹 브라우저의 URL은 가져온 HTML 파일을 표시하고 있습니다. 뒤로가기 기능도 잘 동작하지요.

AJAX로 웹사이트를 만들 때 구글 크롤러 문제 때문에 골머리를 썪었는데, 이걸로 한번에 해결되었습니다.


emscripten - An LLVM-to-JavaScript Compiler

https://github.com/kripken/emscripten

emscripten은 LLVM 중간언어를 JavaScript로 변환해주는 컴파일러입니다. 현재 C/C++을 지원합니다. 이렇게 되면서 C/C++ 프로그램을 웹에서 간단하게 돌릴 수 있게 되었습니다. Cocos2d-x도 예전에 emscripten용으로 포팅되어 웹에서 돌리는게 가능했습니다.

그냥 C/C++로된 소스를 바로 변환할 수는 없고, 플랫폼 의존적인 부분은 emscripten으로 수정해주어야 합니다.


asm.js - A low-level, extraordinarily optimizable subset of JavaScript

https://github.com/dherman/asm.js

emscripten로 변환된 JavaScript 코드를 더 빨리 실행하는 JavaScript Subset입니다(용도는 다르지만 TypeSript 같은건 Superset). asm.js는 사람이 코딩하는게 아니라 컴파일이 생성해내는 코드입니다.

emscripten으로 변환된 JavaScript는 정적타입 언어를 변환한 것이기 때문에 이걸 웹브라우저에서 그대로 돌리면 성능이 안나옵니다. 그래서 파이어폭스는 이런류의 코드("use asm")를 더 빨리 실행하기 위해 asm.js와 JavaScript 엔진 OdinMonkey를 개발했습니다.

기존 JavaScript 엔진은 JavaScript 코드를 실행할 때 JIT(Just-In-Time) 컴파일만 했지만, asm.js용으로 생성된 JavaScript는 AOT(Ahead-Of-Time, 실행 전) 컴파일을 하기 때문에 실행 속도가 빨라집니다.

지금은 asm.js가 파이어폭스에 최적화되어 있기 때문에 크롬에서는 파이어폭스보다 느립니다.

현재 언리얼과 유니티 엔진이 emscripten과 asm.js를 이용하여 웹 브라우저에서 실행되고 있습니다.


kue - Kue is a priority job queue backed by redis, built for node.js

https://github.com/LearnBoost/kue

Redis를 이용한 Node.js용 작업 큐입니다. 시간이 오래 걸리는 작업을 작업 큐에 넣고, 다른일을 처리할 수 있습니다.

cluster 모듈을 사용하면 병렬 처리도 할 수 있습니다. Node.js로 작업하다보면 한 번씩 작업 큐의 필요성을 느끼게 되는데, kue가 꽤 쓸만하더군요.


Respond - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

https://github.com/scottjehl/Respond

인터넷 익스플로러 6, 7, 8에서 CSS 미디어 쿼리를 사용할 수 있도록 해주는 라이브러리입니다.

IE 때문에 영원히 고통받는 웹 개발...

구버전 IE를 지원해야 한다면 Respond.js를 사용해보세요.


이상 끝.


저작권 안내

이 웹사이트에 게시된 모든 글의 무단 복제 및 도용을 금지합니다.
  • 블로그, 게시판 등에 퍼가는 것을 금지합니다.
  • 비공개 포스트에 퍼가는 것을 금지합니다.
  • 글 내용, 그림을 발췌 및 요약하는 것을 금지합니다.
  • 링크 및 SNS 공유는 허용합니다.

Published

03 August 2014