Addy Osmani

Last updated
Addy Osmani
BornMarch 1986
Nationality Irish
Alma mater Sheffield Hallam University, University of Warwick
OccupationSoftware Engineer
Known forHead of Google Chrome’s Web Developer Insights division
Notable work
 Google Lighthouse, Google PageSpeed Tools, Yeoman
Website addyosmani.com

Addy Osmani (born March 1986) is an Irish web performance expert, author and speaker who works for Google as an Engineering Manager. [1] He is currently leading developer tooling for Google Chrome, Google's web browser. [2] [3] [4]

Contents

Osmani has written books on Image Compression and JavaScript Design Patterns for O'Reilly [5] and Smashing Magazine, [6] released several open source projects and given over 110 talks around the world, including keynotes at Google I/O. [7] [8] [9] He has written articles for several magazines in the web development industry, including Net [10] and Smashing Magazine. [11]

Career

Before joining Google, Addy was at AOL (America Online), driving UI engineering on advertising systems and web developer tools. Prior to AOL, he worked at image and video search company Pixsta. His earliest contributions to open-source were to projects like jQuery. [12] [13] [14]

Addy joined Google in 2012, and is currently the head of Google Chrome's Web Developer Insights division, overseeing web development tools such as Google Lighthouse, Google PageSpeed Tools and the Chrome Headless browser. While at Google, he led a number of web performance initiatives to improve how quickly the web browser loads. Addy designed and implemented several of the company's open-source web developer tooling projects. At various times, [15] he has also worked on search initiatives, such as user-experience signals for ranking (Core Web Vitals, [16] page experience), [17] and various software development tools aimed at improving user-experience on the web. [18] [19] [20]

He has contributed to a large range of efforts to improve how well Google Chrome loads web pages, including native [21] [22] [23] [24] and automatic lazy-loading, [25] and recently celebrated 10 years of speed efforts in the Google Chrome browser. [26] Addy led Google's developer tooling efforts to support measuring signals that are part of search's page experience criteria. [27] [28] [29]

In 2019, Osmani announced that Chrome had collaborated with Google Fonts to give developers more control over how web typography loads, to improve performance. [30] [31] [32] [33]

Osmani has a history of working with websites to help improve their User experience, such as Pinterest, [34] Tinder, [35] Netflix [36] and eBay. [37]

Software

TodoMVC

Osmani created TodoMVC [38] in 2011, which went on to popularize Todo applications being a canonical learning example in computer science. [39] [40] [41] As of January 2021 the project has over 27,000 stars on GitHub. [42] [43]

Speedometer

TodoMVC went on to form the basis of the WebKit browser speed test Speedometer in 2013, [44] used by Google Chrome, Safari, Edge and Firefox. Addy consulted on Speedometer 1.0 and led the rewrite for Speedometer 2.0 in collaboration with WebKit and other Google Chrome engineers in 2018. [45]

Yeoman and scaffolding tools

Osmani was one of the Google engineers that created Yeoman (software) - a scaffolding tool for modern web applications written with Node.js. It offered web developers a Command-line interface for generating templates and configuration for websites and web applications. At the high of its popularity, Yeoman had over 9,400 [46] template generators for libraries like React.js and AngularJS.

He has been involved in creating a number of follow-up scaffolding tools for JavaScript developers over the years, including Google's Web Starter Kit [47] and Polymer Starter Kit. [48] In 2016, Osmani worked with webpack to add support for web performance budgets. [49] In 2017, Osmani worked [50] with the teams in React.js, Vue.js and AngularJS to add support for Progressive Web Apps to their respective Command-line interface tools.

Material Design Lite

In 2015, Osmani announced the Material Design Lite (MDL) CSS and JavaScript library. [51] [52] [53] [54] The library aimed to enable adding Material Design styling to websites in a framework-agnostic way. It was a compliment to the Polymer (library), also by Google, which offered a Material Design component system focused on web applications. At the height of its popularity, Material Design Lite had 31,700 GitHub stars. It was superseded by the Material Components for the Web (MDC) project. [55]

In 2018, Osmani created the Quicklink [56] JavaScript library for automatically prefetching links a user may need on a web page for subsequent navigations. The library used a number of heuristics to detect if the links were visible within the screen viewport and only prefetched links if the user was on a fast internet connection. The library went on to be used by sites such as Syfy.

Universal Module Definition

He has a history of contributions to JavaScript tooling, including co-creating the Universal Module Definition pattern, a variant of AMD.

[57] [58] [59]

Bibliography

Addy has authored a number of software engineering books during his career. These include,

He has been a contributing author to a number of Smashing Magazine books including "The Smashing Book, No. 4: New Perspectives on Web Design". From 2010 to 2020, Addy authored a number of primary features on web development for web.dev [63] and .net magazine. In 2020, he was interviewed for the book "14 Habits Of Highly Productive Developers". [64]

Recognition

In 2014, Osmani received the O’Reilly Web Platform Award [65] [66]

In 2020, Osmani's React.js Adaptive Hooks [67] project won an Open Source Award as part of the Most Exciting Use of Technology category. [67]

Related Research Articles

Google Web Toolkit

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. Other than a few native libraries, everything is Java source that can be built on any supported platform with the included GWT Ant build files. It is licensed under the Apache License 2.0.

Web development tools allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

V8 is an open-source JavaScript engine developed by The Chromium Project for Google Chrome and Chromium web browsers. The project’s creator is Lars Bak. The first version of the V8 engine was released at the same time as the first version of Chrome: 2 September 2008. It has also been used on the server side, for example in Couchbase, and Node.js.

Node.js JavaScript runtime environment

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.

A browser speed test is a computer benchmark that scores the performance of a web browser, by measuring the browser's efficiency in completing a predefined list of tasks. In general the testing software is available online, located on a website, where different algorithms are loaded and performed in the browser client. Typical test tasks are rendering and animation, DOM transformations, string operations, mathematical calculations, sorting algorithms, graphic performance tests and memory instructions. Browser speed tests have been used during browser wars to prove superiority of specific web browsers. The popular Acid3 test is no particular speed test but checks browser conformity to web standards.

Dart is a programming language designed for client development, such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Three.js

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.

PDF.js

PDF.js or pdf.js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas. The project is led by the Mozilla Foundation after Andreas Gal launched it in 2011.

Yeoman is an open source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

Asynchronous module definition

Asynchronous module definition (AMD) is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. Implementations of AMD provide the following benefits:

asm.js is a subset of JavaScript designed to allow computer software written in languages such as C to be run as web applications while maintaining performance characteristics considerably better than standard JavaScript, which is the typical language used for such applications.

Ember.js

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

A headless browser is a web browser without a graphical user interface.

PhantomJS

PhantomJS is a discontinued headless browser used for automating web page interaction. PhantomJS provides a JavaScript API enabling automated navigation, screenshots, user behavior and assertions making it a common tool used to run browser-based unit tests in a headless system like a continuous integration environment. PhantomJS is based on WebKit making it a similar browsing environment to Safari and Google Chrome. It is open-source software released under the BSD License.

WebAssembly Cross-platform assembly language and bytecode designed for execution in web browsers

WebAssembly is an open standard that defines a portable binary-code format for executable programs, and a corresponding textual assembly language, as well as interfaces for facilitating interactions between such programs and their host environment. The main goal of WebAssembly is to enable high-performance applications on web pages, but the format is designed to be executed and integrated in other environments as well, including standalone ones.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

Progressive web application web application built using common web technologies and intended to work on any standards-compliant browser and looking like a native application

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Angular (web framework) Open source web application framework

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Next.js Lightweight javascript framework to create for static and server‑rendered applications

Next.js is an open-source React front-end development web framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies. Next.js is one of several recommended "toolchains" available when starting a new React app, all of which provide a layer of abstraction to aid in common tasks. Traditional React apps render all their content in the client-side browser, Next.js is used to extend this functionality to include applications rendered on the server side. The copyright and trademarks for Next.js are owned by Vercel. On July 27, 2020 Next.js version 9.5 was announced, adding new capabilities including incremental static regeneration, rewrites, and redirect support.

References

  1. ↑ "I am Addy Osmani, ask me anything". July 11, 2018.
  2. ↑ Zetlin, Minda (November 11, 2019). "Does Your Website Load Slowly? Google Chrome May Start Punishing You With a Label Warning Users About the Wait". Inc.com.
  3. ↑ Keizer, Gregg (November 12, 2019). "Google ponders shaming slow websites inside Chrome". Computerworld.
  4. ↑ "Chrome experimenting with 'back/forward cache' that speeds up web browsing". February 28, 2019.
  5. 1 2 "Amazon.com: Customer reviews: Learning JavaScript Design Patterns: A JavaScript and jQuery Developer's Guide". www.amazon.com.
  6. 1 2 "Meet Image Optimization, A New Smashing Book By Addy Osmani". Smashing Magazine. April 28, 2021.
  7. ↑ "Production Progressive Web Apps With JavaScript Frameworks (Google I/O '17)" – via www.youtube.com.
  8. ↑ "Discussion of I'm Addy Osmani, Ask Me Anything!". DEV Community.
  9. ↑ "Addy Osmani :: The Cost of JavaScript :: #PerfMatters Conference 2019" – via www.youtube.com.
  10. ↑ "Articles by: Addy Osmani | Creative Bloq". www.creativebloq.com.
  11. ↑ "Author Addy Osmani". Smashing Magazine. April 29, 2021.
  12. ↑ McNeal, Ryan. "New Chrome Badge System Will Identify And Warn Users About Slow Websites". Forbes.
  13. ↑ Cimpanu, Catalin. "Chrome and Firefox are borrowing from each other's performance features". ZDNet.
  14. ↑ "Facebook devs devise Hermes to push cross-platform JavaScript to godlike speeds". www.theregister.com.
  15. ↑ "Speed is now a landing page factor for Google Search and Ads | Web". Google Developers.
  16. ↑ "Web Vitals". web.dev.
  17. ↑ "Evaluating page experience for a better web".
  18. ↑ "Want better JavaScript performance? Google's tips for stopping the programming language from slowing Chrome". TechRepublic.
  19. ↑ Henshaw, Jon (August 8, 2019). "Chrome web browser now supports native lazy-loading". Marketing & Technology News.
  20. ↑ "Master Developers: Addy Osmani". Code Envato Tuts+.
  21. ↑ "Native image lazy-loading for the web". web.dev.
  22. ↑ "New Chrome Lazy Loading Feature Coming Soon". Search Engine Journal. April 8, 2019.
  23. ↑ "Addy Osmani on JavaScript, Debugging and Testing". InfoQ.
  24. ↑ "Google Chrome's Native Lazy Loading iFrames May Not Be So Great For Advertising". AdMonsters. May 16, 2019.
  25. ↑ "Automatically lazy-loading offscreen images & iframes for Lite mode users".
  26. ↑ "10 years of Speed in Chrome".
  27. ↑ Shankland, Stephen. "Chrome could get way faster at loading some websites in 2020 with a feature called bfcache". CNET.
  28. ↑ "Google Chrome Set to Make Navigation to Previously Visited Pages Faster". NDTV Gadgets 360.
  29. ↑ "[Update: Coming to Chrome 86] Going back and forward in Google Chrome will get a lot faster with bfcache". July 24, 2020.
  30. ↑ Leatherman, Zach. "Google Fonts is Adding font-display 🎉—zachleat.com". Zach Leatherman.
  31. ↑ "Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O '19)" – via www.youtube.com.
  32. ↑ Sev, Chris. "Google Fonts Now Supports font-display!". Scotch.
  33. ↑ Osmani, Addy. "We shipped font-display to Google Fonts!". addyosmani.com.
  34. ↑ Osmani, Addy (December 1, 2017). "A Pinterest Progressive Web App Performance Case Study". Medium.
  35. ↑ Osmani, Addy (December 24, 2017). "A Tinder Progressive Web App Performance Case Study". Medium.
  36. ↑ Osmani, Addy (November 8, 2018). "A Netflix Web Performance Case Study". Medium.
  37. ↑ "Shopping for speed on eBay.com". web.dev.
  38. ↑ "TodoMVC". todomvc.com.
  39. ↑ "Introduction - React Tutorial".
  40. ↑ "LiveView TodoMVC - Part 1: templates and events". DEV Community.
  41. ↑ "analogy - Web applications have "the todo list." What analogous program is there for systems programming?". Software Engineering Stack Exchange.
  42. ↑ "tastejs/todomvc". May 29, 2021 – via GitHub.
  43. ↑ "reduxjs/redux". GitHub.
  44. ↑ "Speedometer: Benchmark for Web App Responsiveness". June 2, 2014.
  45. ↑ Osmani, Addy; Bynens, Mathias (January 15, 2018). "Speedometer 2.0: A Benchmark for Modern Web App Responsiveness".
  46. ↑ "Generators | Yeoman". yeoman.io.
  47. ↑ "Google's New Web Starter Kit Is A Boilerplate For Multi-Screen Web Development".
  48. ↑ "Introducing New Tools for Polymer Development - SitePoint". www.sitepoint.com.
  49. ↑ Osmani, Addy (December 15, 2016). "Webpack Performance Budgets". Medium.
  50. ↑ "Production Progressive Web Apps with JavaScript Frameworks". CSS-Tricks. May 27, 2017.
  51. ↑ Osmani, Addy (July 6, 2015). "Introducing Material Design Lite". Medium.
  52. ↑ Maxwell, Tom (July 6, 2015). "Google releases Material Design Lite, a web framework for making Material Design-style websites".
  53. ↑ "Google Releases MDL To Help You Give Your Website That Material Design Feel". July 13, 2015.
  54. ↑ Swanner, Nate (July 6, 2015). "Google unveils Material Design Lite to help websites look more like Android apps". TNW | Google.
  55. ↑ "google/material-design-lite". May 30, 2021 – via GitHub.
  56. ↑ "Quicklink". getquick.link.
  57. ↑ "Google Releases Native Lazyload Plugin for WordPress". September 6, 2019.
  58. ↑ "Google Chrome 75 to support lazy loading by default". HEXUS.
  59. ↑ Events, White October. "Render - A new front-end conference from the organizers of jQuery UK". Render - A new front-end conference from the organizers of jQuery UK.
  60. ↑ "Review: Learning JavaScript Design Patterns". www.raymondcamden.com.
  61. ↑ Osmani, Addy (July 8, 2012). "Learning JavaScript Design Patterns: A JavaScript and jQuery Developer's Guide". "O'Reilly Media, Inc." – via Google Books.
  62. ↑ "Amazon.com: Customer reviews: Developing Backbone.js Applications: Building Better JavaScript Applications". www.amazon.com.
  63. ↑ "Addy Osmani". web.dev.
  64. ↑ Rocha, Zeno. "14 Habits of Highly Productive Developers". 14habits.com.
  65. ↑ "O'Reilly Web Platform Award Winners Announced: O'Reilly Fluent Conference, March 11 - 13, 2014, San Francisco, CA". conferences.oreilly.com.
  66. ↑ "Seek 10.0 (Digtial)". Issuu.
  67. 1 2 "React Open Source Awards - GitNation". osawards.com.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.