HTML5, scrolling, web socket

App과  web in App(webview와 같은) 간의 데이터 전송을 WebSocket을 활용했나보네요.

LinkedIn for iPad: The Native/Web Messaging Bridge and WebSockets LinkedIn Engineering

웹에서 앱으로 send하는 과정에서 활용하는 것처럼 보이네요.

큰 속도 차이는 없지만 그래도 약간 빠르고,아무래도 비동기의 효과를 볼 수 있다고 이야기하는 것 같습니다..

--------

마지막 부분 위주로 살펴봐보세요.

(뒤 부분만 발췌해봤어요)

	Original	webmsg://	WebSocket
Fastest	41ms	51ms	44ms
Slowest	130ms	154ms	68ms
Average	54.65ms	61.46ms	48.09ms

(정말 별 차이 없어 보이는디...)

• On average, WebSocket is faster, but practically negligibly so. However, it is far more consistent than either of the URL scheme implementations which had widely varied timings. That, coupled with the asynchronous behavior, make WebSockets a win for many solutions.

Conclusion

Our use of WebSockets is still evolving and we are still working hard to resolve the transition issues and enable bi-directional communication so that we only need to use webmsg:// when proxies are enabled. We are also working toward making our WebSocket Server implementation open-sourced so that others can build upon the work we've begun.

-----Original Message-----
From: "TechSensing"<ba00084@nhn.com> 
To: "TechSensing"<BA00084@nhn.com>; 
Cc: 
Sent: 2012-05-23 (수) 15:25:45
Subject: Tech Sensing - 2012년 5월 4주

Tech Sensing - 2012년 5월 4주

개발자놀이터 DevCafe / 기술혁신포탈 TechBee

5월 2일에 출시된 LinkedIn의 새로운 iPad앱의 95%가 HTML5로 구현되었다고 합니다. HTML5로 하이브리드 앱을 구현한 과정을 상세히 설명한 LinkedIn의 블로그 포스트를 소개합니다.

Google의 wearable display device 특허 확보 소식도 함께 첨부합니다.

 

HTML5

LinkedIn의 새로운 iPad앱에 HTML5가 어떻게 적용됐는가

5월 초에 공개된 LinkedIn의 새로운 iPad앱은 95%가 HTML5로 구현된 하이브리드(hybrid) 앱입니다. HTML5 이외에도 자바스크립트 라이브러리인 backbone.js, underscore.js 등이 사용되었습니다. 이번 iPad 앱의 구현내용을 상세히 설명한 LinkedIn의 블로그 포스트들을 소개합니다.

 

   1. Network latency 개선을 위해 HTML5 Local storage 사용

   2. 무한 scrolling을 부드럽게 처리하기 위한 HTML5 tips

• Unloading images: 현재 스크린에서 멀리 떨어진 이미지(swiped sufficiently off screen)는 작은 크기로 대체
• Hiding Pages: CSS의 visibility 속성을 hidden으로 변경
• Removing Pages: page를 삭제하면서 스크롤 위치 유지를 위해 빈 페이지(stub)로 대체
  
  
• Avoid scaling and box-shadow
• HTML img 태그에 width/height 명시
• CSS box shadow 금지
• Minimizing DOM nodes: Removing Pages에서 생성한 stub 노드들을 1개의 더미(dummy) 노드로 교체
  
  

   3. 앱 내 네이티브 부분과 웹 부분 사이의 메시징 레이어(messaging layer) 처리: WebSocket을 사용해 속도개선

• LinkedIn For iPad: using local storage for snappy mobile apps LinkedIn Engineering
• LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 LinkedIn Engineering
• LinkedIn for iPad: The Native/Web Messaging Bridge and WebSockets LinkedIn Engineering
• You’ll never believe how LinkedIn built its new iPad app (exclusive) VentureBeat

 

특허

Google, Project Glass 관련 특허 획득

Google이 ‘wearable display device’ 관련 특허 3가지를 확보했습니다. 지난 4월에 공개된 Google의 Project Glass의 안경과 유사한 모양이며, 렌즈가 있는 버전과 없는 버전 모두 포함합니다.

• Google patents Project Glass wearable display CNET news
• 구글, 안경형 디스플레이 3개 특허확보 ZDNet Korea