As the structural analysis of more and more data leads to deeper insights, how can analytics platforms harness the power of automation? Can autonomous, intelligent agents drive more understanding about the anatomic processes behind the statistics?
After we understand how important Web Performance is and we've applied basic techniques, what's next? In this session we will cover extreme techniques that will blown your mind about Web Performance. New compression algorithms? new image formats? Client Hints? 14.6Kb? Let's hack Web Performance.
After quickly reviewing new metrics such as Speed Index and the RAIL goals, we will get deeply into advanced hacks to increase perception and performance on the web and PWAs.
We will cover the updated checklist of techniques to improve experience and perception and recent additions and hacks, such as: the usage of HTTP/2, how to replace PNGs and JPEGs, HTTP Client Hints, better compression encoding algorithms available, browser's prefetching and lazy loading new abilities and how advanced techniques on top of Service Workers can help improving conversion and reduce user's frustration.
We'll cover some extreme new ideas, such as serving ATF content in 14Kb, using magician tricks or how to use new APIs to make decisions on the fly.
We will finally talk about how we usually underestimate the Web on mobile devices, including the relationship between Responsive Web Design and Web Performance and why new controversial subsets of the Web have appeared and what we can learn from them -Google's AMP (Accelerated Mobile Pages) and Facebook's Instant Articles-.
With just a little knowledge you can create really performant 2D WebGL animations with PIXI.js and TWEEN.js. In this talk I’ll show you how to create a simple requestAnimationFrame engine that will allow you to achieve smooth 60fps frame rates that won’t kill your battery.
Developing software that exhibits flexibility of choice to the end user is considered best-practice: we’ll make it configurable, and let the user decide. Right? Wrong.
In an era where Experiences are coveted more highly than Products, and users are overloaded with choice and burnt-out from decision fatigue, the worst possible coding choice that you can make is to gift the user with options.
In this example-packed presentation, we show how limiting choice and reducing features can add value to your next app.
Serverless is an exciting new way for developers to set up their back end. Less management, more code, what can go wrong with that? In this talk, I'll explain what serverless is, where it does, and does not, make sense, and then talk about the open source OpenWhisk project and how developers can use it to kick their server to the curb!
Learn how to speed your React views up by only rendering what the user wants to see. This technique (commonly referred to as "windowing") is easy to integrate into existing views and can provide huge performance gains.
Have you ever wished for more feedback from colleagues to help you get better at your job? When’s the last time you offered helpful feedback to someone else? Imagine an entire company fluent in the daily practice of giving and receiving constructive feedback. Would your experience improve? What does a team lose when feedback doesn’t flow?
Feedback conversations can be difficult. But giving and receiving feedback pushes us to the edge of our growth potential, where the biggest payoffs occur. Join this session to grow your career by learning how to get real.
This talk is intended for a broad audience within the tech community. Topics covered include:
By covering this content, my hope is to inspire tech industry players to take steps towards creating (or enhancing) a culture of feedback within their organization and on their teams. In addition, attendees will gain insight into their strengths and limitations around giving feedback and receiving it. Finally, attendees will learn ways to trust themselves and others more when engaging in difficult conversations.
Would you hire an opera singer to build your website? A pianist to build your mobile app? After this talk, you might not think it’s a crazy idea.
As I transitioned from professional opera singer to web developer, I was blown away by the many parallels between music and code. During this talk, you’ll learn about these parallels by examining the similarities in syntax, structure, and learning process. We’ll compare “Mary Had a Little Lamb” to a “Hello, World” app, and we’ll see how Bach might have coded a React Todo app.
Through these examples, we’ll see how musical training strengthens pattern recognition, problem solving and collaboration, helping us become better software engineers.
Warning: parts of this talk may be sung. Yes, you may bring your own instruments.
Software development with a team is difficult. In Fred Brooks’ seminal The Mythical Man-Month, he asserts that “adding manpower to a late software project makes it later”. There may not be a single silver bullet to address this, but maybe we can make incremental improvements?
I’ll share some tips and tricks you can apply to make software development more efficient, flexible, and fun for you, your team, and your company. As a bonus, I’ll also give you the lazyweb version of academia’s analysis of this problem (going back as far as the 1960s!).
It’s 2017 and the Service Worker is here! As the backbone of Progressive Web Applications, Service Workers are poised to be the most important technology to happen to the web ecosystem since AJAX. This talk gives a pragmatic look at Service Workers, why they are important, and how you can use them today to build some really cool applications.
Contributing to open-source is a great way to grow your skills, but digging into the internals of your favorite JS libraries can be daunting. Using popular repos as examples, we'll go through some tips and tricks to dissecting the organs of an open-source project. When we're done, we'll all be certified JS Pathologists.
Clearly, no one likes slow loading webpages, but what aspects of page loading contribute to human end-user perception of “speed”? “SpeedPerception” is an open-source experimental framework and a study that we developed to understand what “slow” and “fast” mean to the human end-user.
Traditional web performance metrics defined in W3C standards focus on timing each process along the content delivery pipeline, such as Time to First Byte (TTFB) and Page Load Time. We wanted to tackle the web performance measurement challenge by looking at it from a different angle: one which puts user experience into focus. Since people primarily consume the web visually, we focused on the visual perception of the webpage loading process. SpeedPerception is a systematic study of how human end-users perceive the webpage loading process: the above-the-fold rendering in particular: objectively measuring the subjective notion of “feels fast”.
Studies have shown that instead of only focusing on page load time, if we shift the focus to address perceived performance directly, we can make our web applications feel even faster even if we have to download the same number of bytes. What metrics do we need to measure to objectively test if a site load feels fast? We’re looking into the impact of blanks screens, long DOMContentLoaded events, pop ups, passive versus active wait times, jitter, and other factors have on perceived performance, and how to measure the improvements in these features. We looked at browser metrics like time to first byte, render start, visual completion, etc., to construct a fusion model that can give the most insight into subjective judgments of “Speed Perception”.
LEO is a highly extensible static site generator based on Webpack. It uses a unified GraphQL data pipeline to enable any universal frontend technology to generate traditional and modern (App Shell) static sites.
React’s seemingly “magical” features make developing sophisticated web UIs easy by doing so much heavy lifting for us. Unfortunately, without knowing how certain parts of the “magic” work, we run into confusing React warnings/errors.
Why can’t we have “if blocks” in our JSX code? Why do we need to wrap multiple sibling components in a container component? Why do we need to include a “key” attribute on components that are in an array?
In this session geared towards those familiar with React, let’s answer these questions by digging deeper into JSX syntax, virtual DOM diffing and other “magical” features. Not only will we be able to prevent errors with a clearer understanding of the “magic,” but we can potentially boost rendering performance as well.
The number of approaches for asynchronous operations in Redux is dizzying. Thunks, Promises, Sagas, Observables, etc. all handle async in radically different ways. This talk will go over the state of async in Redux, explaining the tradeoffs with each approach.
React is awesome but even good frameworks don’t prevent you from writing bad code. This talk will focus on some key principles for writing reusable UI components that will make them fun to use and keep your co-workers from going crazy.
React components are also very portable, allowing them to be used in various frameworks and build systems. The second half of this talk will focus on how to package and distribute reusable UI components so they can be used in a variety of project setups.
Universal (a.k.a. isomorphic) architecture is an evolution of how we build apps for the web. It offers performance benefits for your users and SEO benefits for your business. ReactJS and the virtual dom make it possible to write code once that will run on the server and the browser. Using React, Redux and webpack, we will learn how to build an app that can be server rendered by Node.JS and also function as a Single Page Application in the browser. We will discuss some of the challenges with building universal apps including synchronizing data between the server and browser and knowing when to write environment specific code.