'yui theater'에 해당되는 글 1건

  1. 2008.07.28 [펌]OSCON 네째날 III - 웹 사이트 성능 향상 2

[펌]OSCON 네째날 III - 웹 사이트 성능 향상

ITWeb/스크랩 2008. 7. 28. 14:09
아래 내용도 참 들어 보고 싶은 내용 이내요..
한가지 추천 할만한 사이트가 있어서 추가 합니다.. ^^*
다들 아시겠지만.. 서도. ㅎㅎ
동영상 강좌 사이트 : http://developer.yahoo.com/yui/theater/
퍼포먼스 : http://developer.yahoo.com/performance/

Dav Glass — Rich Text Editing with YUI

Senior YUI engineer Dav Glass.

36 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Senior YUI engineer Dav Glass introduces you to the YUI Rich Text Editor in this October 2007 tech talk.

Nate Koechley — The YUI CSS Foundation

Senior YUI engineer Nate Koechley.

42 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Senior YUI engineer Nate Koechley guides you through the YUI CSS foundation in this October 2007 tech talk.

Julien Lecomte — "High Performance Ajax Applications"

Yahoo engineer Julien Lecomte.

49 minutes; source: YUIBlog (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Yahoo engineer and YUI contributor Julien Lecomte covers seven key areas of performance relating to modern web applications in this December 2007 tech talk.

Matt Mlinac — The YUI ImageLoader Utility

Yahoo! Engineer Matt Mlinac introduces you to the ImageLoader Utility.

9 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Yahoo! Engineer Matt Mlinac introduces you to the YUI ImageLoader Utility.

Todd Kloots — "The YUI Menu Control"

Todd Kloots, author of the YUI Menu Control.

25 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

The YUI Menu Control comprises three rich, powerful UI tools. In this 25 minute video, YUI Menu developer Todd Kloots orients you to the Menu Control's structure, design, and implementation.

Nicholas Zakas — Maintainable JavaScript

My Yahoo! engineer and Wrox author Nicholas Zakas dispenses pearls of wisdom about the creation of maintainable applications in the browser.

42 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Nicholas Zakas is an engineer on the team that brings you My Yahoo!, one of the most popular personalized portals on the web. In this talk, Zakas focuses on some fundamental concepts in the world of frontend engineering with an eye toward making code more maintainable.

Matt Sweeney — "Web 2.0: Getting It Right the Second Time"

Matt Sweeney speaking on frontend architecture at Yahoo!'s Open Hack Day.

34 minutes; source: Yahoo! Video

Matt Sweeney, author of YUI's Animation Utility, Dom Collection and TabView Control, spoke to hackers gathered for Yahoo!s first Open Hack Day September 29, 2006. In this talk, Matt argues for the strict separation of presentation, content and behavior, providing a historical perspective on the evolution of available tools for engineering stable, scalable, applications using semantic approaches.

Iain Lamb — "The New Hacker's Toolkit"

Oddpost cofounder Iain Lamb speaks at Yahoo!'s Open Hack Day.

28 minutes; source: Yahoo! Video

Iain Lamb, cofounder of the Oddpost webmail startup that was acquired by Yahoo! and eventually became the basis for the all-new Yahoo! Mail, speaks at Yahoo!'s Open Hack Day on the skills needed by hackers in the new network ecosystem of mashups and web services.

Eric Miraglia — "Applying Ajax: Speeding the Journey from Idea to Information"

40 minutes; source: Sys-Con WebCast

Eric Miraglia, YUI engineer and technical evangelist, addresses the RealWorld Ajax conference in San Jose in April 2006. Miraglia's talk focuses on applying Ajax techniques to power real-world interaction problems and looks at autocomplete as a pattern that illustrate's the power of XMLHttpRequest.

YUI-Related Podcasts

Douglas Crockford reviews the current state of the web in the age of asynchronous (but insecure) Ajax transactions.

Douglas Crockford — "The State of Ajax"

38 minutes; source: YUIBlog (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Yahoo! JavaScript Architect Douglas Crockford reprises his talk on "The State of Ajax", putting the popular technique through the critical lens of history and subjecting it to a review of how it stacks up against the current state-of-the-art in computer programming.

Douglas Crockford — "The JavaScript Programming Language"

Douglas Crockford provides a comprehensive introduction to the JavaScript Programming Language.

111 minutes; source: Yahoo! Video

Yahoo! JavaScript Architect Douglas Crockford provides a comprehensive introduction to the JavaScript Programming Language in this four-part video:

Douglas Crockford — "Advanced JavaScript"

67 minutes; source: Yahoo! Video

Yahoo! JavaScript Architect Douglas Crockford lectures on the nuances of the JavaScript programming language in this three-part video:

Douglas Crockford speaks on the nuances of the JavaScript language.

Douglas Crockford — "An Inconvenient API: The Theory of the DOM"

78 minutes; source: Yahoo! Video

Yahoo! JavaScript Architect Douglas Crockford discusses the nexus between JavaScript and the browser, exploring the history of the BOM and DOM APIs and their impact on frontend engineering today. This presentation is archived in three parts:

Douglas Crockford discusses the intersections of JavaScript and the browser.

Douglas Crockford — "Quality"

Douglas Crockford discusses the 40-year-old Software Crisis and what can be done to combat it.

48 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Yahoo! JavaScript Architect Douglas Crockford provided the anchoring keynote for Yahoo!'s annual internal web-development conference in March, 2007. The subject of the talk is "Quality" — the processes by which we engineer quality into our software and, of course, the processes by which we often fail to do so.

Douglas Crockford — "JavaScript: The Good Stuff"

40 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Douglas Crockford delivers the keynote at the 2007 Konfabulator Developer Day.

Yahoo! JavaScript Architect Douglas Crockford keynotes the 2007 Konfabulator Developer Day at Yahoo! on June 7, 2007. In this talk, he describes his own journey from skepticism about JavaScript to a deep appreciation for its power and elegance.

Browser Wars Episode II: Attack of the DOMs

42 minutes; source: Yahoo! Video (Flash) | download.yahoo.com (M4V)

This event brought together at Yahoo! Mike Shaver from Mozilla, Chris Wilson from Microsoft's IE team, CTO Håkon Lie from Opera, and moderator Douglas Crockford from Yahoo! to talk about the current state of the browser landscape. Recorded on February 28, 2007.

Gopal Venkatesan — "Writing Efficient JavaScript"

22 minutes; source: Yahoo! Video (Flash) | download.yahoo.com (M4V)

Gopal Venkatesan was the first frontend engineer hired by Yahoo! in India. In this talk, he explores some core characteristics of performant JavaScript. Recorded on March 8, 2007.

Dion Almaer — "Google, Back to Front"

Google's Dion Almaer.

56 minutes; source: YUIBlog (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Google developer evangelist and Ajaxian cofounder Dion Almaer discusses the Google App Engine and the Gears project in a tech talk at Yahoo in June 2008.

Steve Souders — High Performance Web Sites: 14 Rules for Faster Pages

Yahoo! Performance guru Steve Souders offers 14 rules for faster websites.

37 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Steve Souders is Yahoo's former chief peformance guru and the author of High Performance Web Sites. While at Yahoo, Steve led a team investigating the root causes of poor page performance and applying the lessons learned to Yahoo!'s high-traffic, media-rich properties. Steve now serves in a similar role at Google.

Bill Scott — Designing the Rich Web Experience: Principles and Patterns for Rich Interaction Design on the Web

Former Yahoo Ajax Evangelist Bill Scott

51 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Bill Scott served as a Yahoo Ajax Evangelist and engineering manager from 2005-7. In this talk, given at nearly a dozen conferences around the world, Bill taxonomizes the rich interaction patterns that characterize the evolving web — a must-see for web designers and frontend engineers. (Slides, in Apple Keynote format, can be downloaded here [253MB].)

Peter-Paul Koch (PPK) — Fronteers: Guild of Front-End Developers

PPK, author of quirksmode.ort

29 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

PPK is best-known as the author of the essential frontend engineering site quirksmode. In this talk, he discusses his more recent work — the formation of a professional guild for frontend engineers in Holland.

Joseph Smarr — High-performance JavaScript: Why Everything You've Been Taught Is Wrong

Joseph Smarr, Chief Platform Architect at Plaxo

51 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Joseph Smarr is the Chief Platform Architect at Plaxo, Inc., where he's led the engineering of Plaxo's address-book integration application. In this talk, Smarr explores the core lessons that he and his Plaxo team have learned in the development of their apps and the details of how they've leveraged maximum performance from the web browser.

Joe Hewitt — "Welcome to Firebug 1.0"

Joe Hewitt introduces Firebug to a developer audience at Yahoo!.

48 minutes; source: Yahoo! Video (Flash) | download.yahoo.com (MP4; recommended)

Joe Hewitt is a Mozilla developer who has written software dear to the heart of all web developers, including the original Mozilla DOM Inspector. Joe's newest Mozilla tool is Firebug, an integral logging and debugging extension for Firefox that sets a new standard for its category. Joe provided a power-user tour while announcing Firebug 1.0's release on January 25, 2007, at Yahoo!. Joe is a co-founder of Parakey, Inc.

Joe Hewitt — "An Introduction to iUI"

15 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Firefox co-founder and Firebug author Joe Hewitt discusses his newest project, iUI — a JS/CSS bundle empowering rapid development of web applications for iPhone that emulate the iPhone's native visual elements and transtions. Recorded in July 2007, a few weeks after the release of the iPhone, this talk also provides an excellent early overview of the state of iPhone web development and an orientation to standards support in the iPhone implementation of Safari.

Grady Booch — "The Promise, the Limits, the Beauty of Software"

Grady Booch, co-creator of UML and IBM Fellow

56 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Grady Booch is an IBM Fellow and one of the co-creators of UML. In this talk, he discusses the complex matrix of decisions and processes, both intentional and unintentional, that lead to the software designs and architectures upon which we increasingly rely in everyday life. This is a version of a talk originally given to the British Computer Society in honor of Alan Turing.

John Resig — "Advancing JavaScript with Libraries"

John Resig

57 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

John Resig of Mozilla Corp., author of the popular JQuery JavaScript library, describes the role of libraries in the world of frontend engineering, the problems they solve, and the things we can learn from how developers use and think about libraries in their projects.

Lars Knoll and George Staikos: "From KHTML to Webkit"

Lars Knoll and George Staikos of the KHTML development team speak at Yahoo! about KHTML and WebKit on December 8, 2006.

26 minutes; source: Yahoo! Video

Lars Knoll and George Staikos from the KHTML project visited Yahoo! to give a talk on the history of KHTML and Konqueror and the connection between those projects and Apple’s open-source WebKit (which was built upon KHTML and announced in January of 2003 as the foundation of Apple’s Safari browser). See the accompanying YUIBlog article for more details.

A Conversation with David Weinberger

David Weinberger, author of 'Everything Is Miscellaneous.

55 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

Author David Weinberger speaks with Yahoo!'s Bradley Horowitz about the nature of our evolving relationship to information — a relationship that is at the heart of the growing network of web-services-dependent applications on the web.

YUI Theater on del.icio.us:

bookmark on del.icio.us

be the first to bookmark this page!

YUI Theater Accessibility Series

  1. Victor Tsaran: An Introduction to Screen Readers (27 minutes): Flash | MPEG-4
  2. Karo Caran: An Introduction to Screen Magnification Software (16 minutes): Flash | MPEG-4
  3. Shawn Lawton Henry: Web Content Accessibility Guidelines Update (75 minutes): Flash | MPEG-4 | Transcript

Doug Geoffray — "From the Mouth of a Screenreader"

Doug Geoffray

47 minutes; source: Yahoo! Video (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

GW Micro founder Doug Geoffray discusses the evolution of screen readers on the desktop and the nature of the challenges we face as we start addressing similar issues in the context of rich internet applications.

Implementation Focus — LinkedIn

An interview with frontend engineers at LinkedIn disucssing their use of YUI.

10 minutes; source: YUIBlog (Flash) or download.yahoo.com (M4V, iPod/iPhone-compatible)

An interview with frontend engineers at LinkedIn disucssing their use of YUI.

Implementation Focus — "OurStory.com"

10 minutes; source: Yahoo! Video

OurStory.com co-founder Chris Lunt, Chief Architect Tim Correia, and Senior Engineer Jerome Poichet talk about their extensive use of YUI as well as a host of Yahoo! APIs provided by the Yahoo! Developer Network in creating their product.

Jon Chambers — "Screencast: Thinkature Co-founder on Developing with YUI"

Jon Chambers, co-founder of Thinkature, explores YUI integration in his product with YUI engineer Eric Miraglia.

6 minutes; source: YUI Blog (QuickTime) or Yahoo! Video (Flash)

Thinkature co-founder Jon Chambers discusses the Thinkature collaborative ideation interface and how he used YUI in creating it.

Paul Colton — "Screencast: YUI Support in the Aptana IDE"

Aptana founder Paul Colton demos YUI support in the Aptana editor.

7 minutes; source: YUI Blog (QuickTime) or Yahoo! Video (Flash)

Aptana founder Paul Colton provides an overview of the Aptana IDE and its built-in support for the YUI Library; more Aptana screencasts are available on Aptana TV.

Ross Harmes — "Screencast: YUI Bundle for TextMate"

9 minutes; source: YUI Blog (QuickTime) or Yahoo! Video (Flash)

Ross Harmes of Yahoo! Small Business demos his YUI bundle for the popular Mac OS X code editor TextMate. See the YUIBlog post on the screencast for full details.




ref. http://channy.creation.net/blog/538

OSCON에서는 단순히 오픈 소스만 다루는 것이 아니라 웹 서비스와 연관되어 있기 때문에 상대적으로 웹과 관련된 세션도 적지 않은 비중을 차지하고 있습니다.

오늘은 이 블로그 독자들의 비중이 높은 “Front-end” 개발자를 위한 세션 두개에 들어갔습니다. 하나는 CSS를 통한 자바스크립트 UI 성능 향상이고 또 하나는 자바스크립트를 이용한 웹 사이트 성능 향상에 대한 것입니다.

CSS for High Performance JavaScript UI
Gavin Doughtie는 구글에서 파카사웹을 만드는 사람이고 XDraw는 JS 기반 드로잉 서비스를 만들기도 했습니다. 자바스크립트로 도형을 그리거나 하는 것은 어렵고 복잡한 코딩에 속도도 느리기 때문에 이를 위해 CSS를 이용하는 것이 편리함을 강조했습니다.

CSS로 박스, 테이블, 텍스트, 이미지 등을 그리고 크기를 바꾸거나 할 때 CSS의 기초적인 float, positioning, negative margins, relative units, pseudo-selectors 등을 사용하면 편리하게 할 수 있음을 보여 주었습니다. 즉, body {
margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
으로 미리 정의해 놓고 position을 absolute로 한 후 좌표값을 계산하는 것이죠. 특히 도형을 그릴 때는 img { position: relative; width: 100%; height: 100%; } 처럼 img를 정의하고 계산하면 편리하다는 방법입니다.

자신만의 노하우를 담은 샘플 예제를 중심으로 발표를 진행했는데 곧 발표 자료를 홈페이지에 올린 답니다. 샘플을 계속해서 보여주어서 제대로 설명하기는 좀 힘들 군요.

이 친구 발표 중에 이런 이야기를 하더군요. 자기는 뭐든지 자유롭게 구현 가능한 Safari와 Webkit 엔진을 가장 좋아한다고 합니다. 특히, 요즘 웹 브라우저들로 할 수 있는 것이 많기 때문에 자신이 제시한 구현을 통해 좀 더 좋은 기능을 제공하려면 IE6를 포기하는 것도 고려해 볼만 하다는 거죠.

즉 IE7+, Firefox 3+, Safari 3+, Opera 9.5+ 등과 같이 높은 사양의 웹 브라우저만을 지원하는 것인데 만약 서비스가 매우 유용하다면 사용자들이 바꿀 것이라는 겁니다. (즉, IE6이 문제가 아니라 개발자 우리 자신에게 문제가 있는 것이라는 이야기입니다.)

Even Faster Web Sites
이 세션을 진행한 구글에 계신 Steve Souders 이름을 들어본 분이 많을 겁니다. 야후!에 웹 서비스 기술 책임자로 있을 때 14가지 웹 서비스 성능 최적화 기법이라는 것을 소개하고 High Performance Web Sites라는 책도 발간하셨던 유명한 분입니다. 특히, Firebug 기반의 Y!Slow라는 퍼포먼스 측정 도구를 만드신 분이기도 합니다.

그의 성능 향상의 결론은 바로 ‘프론트 엔드의 자바스크립트를 경량화’하라는 것입니다. 그의 이야기에 따르면 서버 기반 코드가 생성되는 것은 전체 웹 로딩 속도의 10%에 불과하고 80~90%는 프론트 엔드 코드의 렌더링에 따른 것이고 아무리 백엔드 코드 성능을 향상 시켜도 사용자 체감 속도는 별로 안높아진다는 겁니다.

이번 세션에서는 이전의 14가지 기법을 재탕하는 것은 아니구요. 새롭게 2탄으로 추가된 내용입니다.

기존의 1탄

새로운 2탄

2탄에 있는 10가지를 다 알려 주면 얼마나 좋겠습니까마는 이번 세션에서는 앞의 3가지만 해준다고 합니다. 2탄의 대부분은 자바스크립트에 관한 것인데 그 이유는 자바스크립트가 문제의 대부분이기 때문에 그렇다고 합니다. 그가 Y!Slow를 통해 여러 웹 사이트의 문제점을 보여주었는데 로딩 타임의 대부분이 자바스크립트 병목에서 오고 있었습니다. (Cuzillan의 결과 참조)

로딩 부담을 나눠라! Split the initial payload
첫번째 방법은 js파일의 로딩 부담을 나누라는 것입니다. js파일을 웹 페이지가 렌더링 되는 중간 중간 나눠서 로딩하고 이를 위해 doloto같은 도구를 이용하라고 조언 합니다.

중단 없이 스크립트를 읽어라! Load scripts without blocking
대개 js파일은 대개 직렬적으로 읽고스타일 시트가 로딩 되는 동안 다른 것이 block 되는 등 초기의 여러 조건에 따라 로딩 속도가 차이가 나게 되는데 이를 위해 block이 되는 조건을 잘 찾아서 적절한 방법을 사용하라고 조언 합니다.

이를 위해 대개 다음 6가지 방법을 제시했습니다. (상세한 방법론은 PT에 있는데 밖으로 유출하지 말라는 구글 회사 계약 내용 때문에 웬만하면 사진을 찍지말라고 했지만 제가 찍긴 했습니다. 필요하시면 저에게 메일로 알려주시길…)

  1. XHR Eval (must have same domain as page)
  2. XHR Injection (same domain)
  3. Script in iFrame (same domain)
  4. Script DOM Element (domains can differ)
  5. Script Defer (only supported in IE, domains can differ)
  6. document.write (not recommended, parallelization only works in IE)

그런데 위의 기능을 사용하는 데 있어서도, 웹 페이지에 따라 스크립트와 CSS 파일의 위치와 로딩 순서 등 몇 가지 조건이 있고 조건에 따라 다른 방법을 사용해야 한다고 합니다. 가급적 Cuzillan과 Y!Slow를 이용해서 자신의 웹 페이지에 있는 css, javascript 등의 로딩 순서를 한번 체크해 보고 가장 맞는 방법으로 최적화 하는 것이 좋겠습니다.

인라인 스크립트를 남발하지 말라! Don’t scatter inline scripts
Firefox에서는 스타일 시트가 스크립트의 병렬 다운로드를 막고, IE는 인라인 스크립트에서 스타일시트를 막습니다. 따라서 가급적 인라인 스크립트를 안쓰는 게 좋다는 이야기입니다. 방법은 인라인 스크립트를 스타일시트 위에서 먼저 실행하거나 또는 @import를 쓰지 말고 link로 css를 부르는 것이 좋습니다.

그 밖에 Mozilla 프로젝트가 Firebug 개발을 지원하기 시작했고, Firebug Light 버전과 HTTPWatch for Firefox이 출시된다는 점을 소개했습니다. 아마 이분 위의 10가지를 가지고 책하나 더 쓰실 예정인가 봅니다.

: