This year, my third presenting at @media in London (2006, 2007), Patrick offered me the morning plenary slot. I used the time to talk about a topic of great interest to me: Professional Frontend Engineering.

Over the last three or four years the role of Frontend Engineering has become more important, more respected, more challenging, and more in-demand than ever before, and so I wanted to put a stake in the ground clarifying what we do, how we do it, and why it’s so important to raise it to a professional level. I had four goals:

• Put a stake in the ground.
• Reiterate our values.
• Advocate the discipline.
• Nurture a healthy Web.

The goals were threaded throughout the four sections of the talk:

• Historical Perspective
• Our Beliefs & Principles
• Knowledge Areas & Best Practices
• Why It All Matters

The talk is embedded below (or download: keynote, pdf, quicktime).

I think this topic is critical to the advancement of the Internet. I’ll be writing more about this in these pages in the coming weeks and months, but for now enjoy the slides. And please share your thoughts and feedback in the comments.

| View | Upload your own

The talk embedded below (or download: keynote, pdf, quicktime) covers several well-known optimization practices then quickly moves to review more recent findings and advancements. It concludes with a survey of tools for optimization and links for more information.

Enjoy, and please leave a comment with any thoughts you have.

| View | Upload your own

Next week Tuesday I’ll be presenting an updated “High Performance Web Sites” talk at the inaugural Kings of Code conference in Amsterdam. From there I’m headed to the second half of London Web Week and will be giving a talk called “Professional Frontend Engineering” in the Friday plenary slot at the outstanding @media conference.

The Kings of Code conference is shaping up to be a great event. I’m excited to hear what fellow speakers John Resig, Peter-Paul Koch (PPK), Folke Lemaitre, Nate Abele, Mark Birbeck, and host Robert Gaal have to share with us.

The @media conference is equally impressive. It’s consistently been one of my very favorite events for the last few years. The speakers are insightful and generous, the attendees are smart and engaged, and Patrick and the rest of the organizers put on a warm, welcoming, and action-packed event with lots of time for networking, hallway conversations, and a wee bit of pub-based debauchery. Spread over two days it promises to saturate us all with inspiration and insight.

Please email me, leave a comment below, or shoot me a note of Twitter (follow me) if you’re going to be in the area and want to catch up. If you let me know in advance that our paths will cross I’ll be sure to bring you a little gift.

Now if somebody could please do something about the #$%#@$# exchange rate…

Tomorrow afternoon I’m presenting an internal Tech Talk to designers and engineers at the Yahoo! Taiwan office, hosted by my friend and colleague Aaron Wu. I love the chance to talk to designers and engineers in the same room, and so I’m very much looking forward to the opportunity.

On Saturday I’m offering the keynote at the Open Source Developers’ Conference here in Taipei. My talk is titled “An Insider’s Tour of the YUI Library.” I’ve been experimenting with video clips in my talks lately, and so even though I’m the only member of the YUI team on this trip, I’ll have the video and voices of many from the team with me on stage. I’ve done something similar once before, and it went well then so I’m hoping it goes well again.

Here is some local press coverage of the conference. It’s a trip to see my face surrounded by words I can’t read. If anybody can translate for me, please send me a note or leave a comment (click the images for higher-res copies).

The third event is an interview for that same publication scheduled by Yahoo!’s local “tech PR” team. I’m not used to giving in-person interviews, let alone via translator, so it should be a fun and unique (and flattering) experience. They sent over a few of the questions in advance to set expectations and I gotta say the questions are thought provoking and interesting. (Though I am a little worried about how to translate some of the more fuzzy terminology.)

The fun continues on Monday and Tuesday with my fourth and fifth even is as many days: I have the distinct privilege of address engineering and CS students from both National Taiwan University and the National Chiao Tung University. Each two hour session is part presentation, part on-stage interview with professors, and part question-and-answer. My message is that Frontend Engineering is a first-rate engineering discipline, that industry is hungry for more skills practitioners in the field, and that it’s quite likely the most interesting and stimulating role to play in web and internet development.

I’m exceptionally humbled to be able to speak at such esteemed institutions. I will do my best to live up to the honor. Taiwan: Thank you!

everything in this article is my paraphrasing of speakers’ presentations. not my own words.

(Video coming soon.)

1. We run web applications. We’re only focused on this narrow goal.
2. We handle the entire lifecycle of an app.
3. Apps are run on Google infrastructure.

“It’s hard, but it’s worth it for us.”

“For the first time you can use the same infra we use…Auth, GOS, BigTable”

The Stack

1. Scalable serving infra
2. python runtime
3. SDK
4. Web based admin console
5. DataStore

Demo: App from scratch in 8 minutes.

More details

1. Scalable Serving Infrastructure: fault tolerant (redundant). Fluid: don’t need to schedule needs up front… more servers come online dynamically.
2. Python Runtime and Libraries. All tools are generic, so new languages can be dropped in later. Python used in same python available otherwise. Goal: you can use any language eventually. We don’t want to limit you.
3. SDK: Environment to develop apps locally. Avail for Linux, Mac, Windows today. (But can probably work anywhere.)
4. Admin Console: web-based admin console. (Looks like google finance meets google analytics.) Tools for request logs. Data explorer. Usage/quote numbers. App-version balancing. Can hook up domain (don’t need to run at *.appspot.com).
5. Scalable Datastore. Schemaless object store. Not a clustered sql thing. Instead based on BigTable. (Whitepapers online.) Horizontally scalable. Reacts to hotspots. BigTable instead of SQL is a big change, and may take some time to get used to. But we think you’ll come to like it. Schemaless means you can add a new datatype or entity whenever – no need to update your schema.

Now we’re looking at a Datastore Model Class.

GQL Query example

SELECT *
FROM Story
WHERE title = 'App Engine Launch'
AND author = :current_user
AND rating >= 10
ORDER BY rating, created DESC

Other Notes

Mail Sending API

no setup needed.

Make HTTP Requests

Authenticate with Google Accounts

Frameworks

The whole Django framework.

Guido van Rossum: Creator of Python and member of Google App Engine team

My passion is making life easier for developers. With python i’ve done that for decades. Now i’ve joined GAE team. Excited by potential. (and that python was first picked)

First time that GOogle has let third-party people run software on their infra. That’s fundamentally a big deal.

8:13 PM “We’re offing 100% of the python lang.”

8:14 PM – we don’t offer threads, but you won’t been it because of our scalable arch.

GAE uses a quota system so nobody monopolizes the infra.

me: if it’s so scalable, why do they need the quotes?

What’s Next?

• large upload/download support
• purchase additional capacity
• other language support
• offline processing.

You can save up to $300 on registration when you register online (or via 800-280-6218) and use my special promo code SPKOE. Plus, using that code is worth a couple drinks on me after the sessions!

Here are longer descriptions of the two sessions. I’m still creating both of them, so please feel free to leave a comment below with feedback or requests for stuff you’d like to hear about.

Professional Frontend Engineering

“In 2001, most web developers simply pushed pixels. The Web was pieced together by print designers and back-end engineers – almost no one was deeply focused on the front-end. Today, in 2008, as front-end engineers we author complex and efficient software and bend reluctant browsers to our will. And we are broadly recognized and respected as a first-order engineering specialization.

In this talk, I will define the characteristics and important practices of our discipline. I’ll discuss the key challenges we still face. And I’ll offer 13 tactical tips from the front lines that you can put into practice today.”

Enhancing Web Sites with the Yahoo! User Interface (YUI) Library

“YUI is chock full of more than 40 utilities, widgets and tools that make web development and browser-wrangling less painful for small personal sites and heavy-duty industry-leading applications alike. This all-new talk covers what’s new in 2008 (lots), what’s coming next (some very cool stuff), and some practical tips from the trenches. If you’re a seasoned YUI pro, you’ll learn about hidden features and optimization tips. If you’ve never heard of YUI, you’ll learn how to get started. And if you use a different library, you’ll learn about YUI’s library-agnostic tools for things like compression, profiling and unit testing. It’s gonna be fun.”

Meet Up?

I’m looking forward to meeting designers and developers from all around Chicagoland. Please drop me a comment or email if you’re gonna be at the show — or even just in the area — and want to catch up for a drink or dinner. (I’m also planning on being in Madison, Wisconsin — my hometown — the weekend before the conference. So give me a shout if you’re in that neck of the woods.

The Details

• Official Web Design World Chicago site
• Web Design World on Upcoming

See you there!

The book was published about six months ago, but in writing the my last blog post (on the 20 new rules just released) I noticed that I didn’t have an easily-accessible copy of my contribution. So, please forgive me for pasting it here for future reference.

Foreword

You’re lucky to be holding this book. More importantly, your web site’s users are lucky. Implement even a few of the 14 techniques Steve shares in this groundbreaking book and your site will be faster immediately. Your users will thank you.

Here is why it matters. As a frontend engineer, you hold a tremendous amount of power and responsibility. You’re the users’ last line of defense. The decisions you make directly shape their experience. I believe our number one job is to take care of them and to give them what they want—quickly. This book is a toolbox to create happy users (and bosses, too). Best of all, once you put these techniques in place—in most cases, a one-time tweak—you’ll be reaping the rewards far into the future.

This book will change your approach to performance optimization. When Steve began researching performance for our Platform Engineering group at Yahoo!, I believed performance was mainly a backend issue. But he showed that frontend issues account for 80% of total time. I thought frontend performance was about optimizing images and keeping CSS and JavaScript external, but the 176 pages and 14 rules you’re holding in your hand right now are proof that it’s much more.

I’ve applied his findings to several sites. Watching already-fast sites render nearly twice as quickly is tremendous. His methodology is sound, his data valid and extensive, and his findings compelling and impactful.

The discipline of frontend engineering is still young, but the book in your hands is an important step in the maturation of our craft. Together we’ll raise expectations about the Web by creating better and faster (and therefore more enjoyable) interfaces and experiences.

Cheers to faster surfing!

–Nate Koechley

Senior Frontend Engineer
Yahoo! User Interface (YUI) Team,
Platform Engineering, Yahoo! Inc.

San Francisco, August, 2007

Stoyan (who authors the phpied.com blog) is part of an established tradition of Yahoo! sharing performance research publicly and widely. Stoyan’s teammate Tenni Theurer concluded the official blog post announcing these data and findings by saying, “We share our findings so that others can join us in accelerating the user experience on the web.”

I agree. That’s why I was honored to help disperse their 14 Rules for Faster Web Sites in my presentation at the @Media conference in London last year.

And that’s why it was a special honor to write the foreward to Steve Souders’ High Performance Web Sites book for O’Reilly last year. (Steve used to head up the Performance team at Yahoo!.) In the foreward I tried to express why performance matters to professional frontend engineers:

Here is why it matters. As a frontend engineer, you hold a tremendous amount of power and responsibility. You’re the users’ last line of defense. The decisions you make directly shape their experience. I believe our number one job is to take care of them and to give them what they want—quickly. This book is a toolbox to create happy users (and bosses, too). Best of all, once you put these techniques in place—in most cases, a one-time tweak—you’ll be reaping the rewards far into the future.

Read more about Yahoo!’s Latest Performance Breakthroughs on the Yahoo! Developer Network site.

The YUI Library is an open-source, a la carte JavaScript library for building richly interactive Web apps using techniques such as DOM scripting, DHTML, and AJAX. This library, free for the world to use, is the exact same code that is used globally and at massive scale on scores of Yahoo! sites. In this session, Yahoo!’s Nate Koechley will talk (and answer questions) about the design and technical philosophies behind YUI. You’ll learn what the library can do for you, where it’s heading, why and how Yahoo! decided to open-source it, and how you can use it to provide an outstanding user experience for your visitors.

OSDC.TW 2008 時間

在經過最後確認之後，我們已經正式公佈 OSDC.TW 2008 的時間跟地點：

時間：2008/4/12-13
地點：中國文化大學推廣教育部博愛校區 – 大新館

But it took the master, Khoi Vinh, to express why. He doesn’t have all the answers yet, but he states the problem space more clearly than I’ve heard elsewhere. And that’s half the battle.

Here is his presentation posted on Slideshare. If you’re involved in web design or web development, do yourself a favor and click through it. It’s called "Control".

| View | Upload your own

He is, of course, a great storyteller, so while I’ll post a few quotes here you’re much better off reading his slides directly.

If narrative is the guiding principle of traditional design, then control is its most important tool. But the guiding principle of interactive media is not narrative — it’s behavior. Designing for behavior means transferring some measure of control from author to user.

What are we designing? Digital media is as different from print as a speech is different from a conversation. They’re both exchanges of information between people. But one is a controlled environment and the other is uncontrolled. In fact, what we’re talking about here is the difference between documents and conversations. Digital media looks like writing, but it’s actually conversation. This push and pull is essential to media evolution. Documents and conversations are not mutually exclusive. They are inherently dependent upon one another.