Velocity Conference 2015 (Amsterdam)
O'Reilly · 16 lessons · Free on YouTube
Genesis: Terraforming a New Home for Firefox Crash Reporter - JP Schneider & Daniel Maher
About this course
I'm really glad to be here maybe some of you have seen this tweet that Scott gel sent out back in May about making sure that you test your site for speed and as
someone who has just a modest wordpress site I just thought that'd be like a no-brainer right I have a real simple site I'm a really good guy in the sense i make sure i have a responsive theme I
even was kind of clever and I made a child theme so I could like strip away all the crazy stuff i am a UX designer so I like to jettison lots of things from my site and I made it really clean
it that this made no problem at all so I ran this test and sure enough i was at 5137 and i'm like it's a wordpress site how could I possibly be so bad so I went to help and rolled up my sleeves we
don't put up you know chrome dev tools and found out the WordPress is kind of stupid sorry but it does quite a few things with 301 redirects on small images so I'm like okay fine I I can fix
this so I went ahead and I changed a couple of things change the way i did thumbnails I actually ended up moving site hosts I found out that a big chunk was that and sure enough what I was able
to do is I got onto 2354 I was pretty excited by the fact that a lowly UX designer could roll up his sleeves and make such a difference and by the way just to make sure that Steve is happy I
have a why slow scored a Steve it's an a okay so the point though was that now i'm not trying to butter you guys up like I care about speed I kind of do but I mean my point was to say that I this
is a good experience for me to kind of figure this out but it raises a broader question what a speed actually mean because I'm a UX designer and not many people remember that back in the 90s we
were called UI designers and the difference from the eye to the X was that back in the 90s we were about the interface the actual screen the website but we wanted to have the broader
end-to-end experience so we became UX designers and I think speed has that same issue because of course it's absolutely critical that we do everything we can to make our pages
render quickly that's obviously table stakes for the web but the real question is how did I get to that page what was the experience of me wanting to get to that page and getting there well so
okay Scott you probably were just basically clicking on a link from a search page okay fine well hide you that page while you were probably on a Google page and pretty soon and starts looking
like well it's just Turtles all the way down you know it's like you just on one web page after another and that's fine but it's like are we always going to live within this little virtual world of
exclusively the web and in that world yes speed is probably the only critical issue but there has to be we have to move from I to X I mean how are people thinking about and getting to these
sites so yes there's a certain way of kind of seeing these pages all strung together but where are they doing it and the first answer is always all what you're on desktop or you're on mobile
and you're doing things like that well that's fine but that's what you're using my question was where are you using it and it's like you could be in your office but you could also be like in a
store and it raises this question that we've all probably seen before which is to say how do you go from a physical location to then get to some information something that's available on a website
now this has been tried before for a long time and people have realized the value of bringing the web into the physical world this is not a new idea at all but the only attempted really seen
so far has been these lovely things and we all know how well it works now to be fair they've worked well in Japan and China for very complicated social reasons but for the most of the world
they really haven't worked and they have very limited use have it has anybody seen this tumblr pictures of people scanning QR codes yeah this part I love this part I thought it was really great
it's it's a it shows that the willingness is there but we haven't quite found the right way to do it yet but let's just leave our little bubble of the web for a second and look at a
completely different part of technology which is we're seeing a lot of smart devices there's smart TVs but smart vending machines there's smart bus stops and people are playing around with
physical interaction but they're not using the web what what's going on could they all have their own native app for the simple reason that the web just can't do it I'm not saying this is a
duck a dumb idea it's like well it's that's the only choice they have is the only tool in the toolkit and that's fine right now but if we believe in Moore's law at all and we really believe
that these smart devices are going to keep coming well have kind like three right now then we'll kind of have maybe like seven next year and then maybe you'll have 30 the following year it's
like wait a second all right am I really going to be installing an app for every one of these things this just doesn't scale this doesn't make any sense now i'm not anti app I'm just anti thousands
of apps I don't want to manage that on my phone the super power of the web is the fact that it's just a click a tap a selection you can just kind of go from anywhere to anywhere instantly its
interaction on demand this seems kind of perfect for this problem so why aren't we worried about that why are we thinking about that because whenever we talk about the web all of us tend to
really focus on the Dom you know that magic white rectangle and it's gotten pretty awesome over the last couple of years and it's doing some pretty amazing things but we very rarely talk about
this place the URL bar it's really boring it's like yeah you want to go someplace type dub dub dub don't CNN com it's like we've taken the most amazing rendering engine on the planet and we've
strapped damn dos prompt on top of it so I could put us up with that I mean come on guys we can do better than that and so that's effectively what the physical web is trying to do it's trying to say
let's take the url url bar and bring it into the future so let me just give you an example of how it works to see so what I'm doing right now is holding a phone pulling down the today view on an
iPhone and as you can see it basically shows there's a parking meter and now i'm on the web the physical web is done i'm now on the web and i'm on a web page just using basic web socket commands and
now i can say up up and i hit pay that i'm done and so whenever I show this to people in San Francisco they almost go to tears because there we have a peut system in San Francisco and nobody can
ever bother to install the application and so it's really about that it's not a it's about making it lightweight it's about taking the super power of the web and making you use something within a
tap or two so that's what the physical web is trying to do and we're basically making it so you can walk up to any device that device is going to be broadcasting wirelessly
aURL over and over and over again we're using bluetooth low energy for now those other technologies we're thinking about and it's literally just kind of going post calm or parking meter calm once a
second just boom boom boom boom boom and then the phone just has a little scanner that when it wakes up picks it up and takes you to that page it's really kind of that simple and it's actually hard to
describe the people that it's just a web page because people think of web pages is like a new site or portal it's like no no it's a parking meter web page and it spits a web page for one particular
object not a range of things and it's kind of a twist people's ways of thinking about what a web page can be and it's really lightweight just walk up and use it of course there's no apps I'm
not an anti app I'm just saying as apps aren't convenient for this let's kind of use what the web is good for but here's the critical thing whenever I explain this what kind of go but Scott it's
going to be constantly buzzing and it's like no this is meant to be something that the user has to ask for they have to like pull it down and say show me what's around me we're very very much
trying to buck the trend that I beacon his head which I beacon tries to push things you know and buzz in your pocket we can't do that this is trying to be the the last kind of scanner you'll ever
need and if you can find everything imagine walking into a mall with 50 things your phone would like vibrate out of your pocket right if it is so we're trying to respect the user and only show
them things when they ask so let me just technol technically people often think this is more complicated than it is we just have a device up here that's just sending a URL the URL is picked up by
the phone and the phone just simply when the user picks it just takes to the cloud it's that's really it it's not much more complicated than that but I always get a bunch of questions
afterwards so I'll save you the trouble and I'll answer questions one and two right now ok questions one is is this a QR code well technically yes it's a QR code but it's kind of a really awesome
QR code I like to think we fixed most of the problems with that because with a QR code I have to walk up to this thing and like take the picture right now it's like it's really clear to everyone
around me which poster i'm going to write there's no no discretion involved i can have 50 things around me i can see them all and kind of pic the 1i want to the other advantage is that i can see
things from up to 50 m is away so it's a lot more flexible so the whole idea is that this is easy and light and simple for you to kind of see everything the other question I get is
but why not spam like you're right absolutely it's a it's a big issue but with at least with spam I'm sorry what we're trying to do is we actually have something called the physical web
service a proxy so what the client will do is it will gather all the URLs send them up to the proxy service and then can then get metadata cash information contact the websites on the user's
behalf so there's no fingerprinting we can protect the user so it's it's better for the user it's better from a data point of view and most importantly it's open source so that you don't have to
use our particular service so it's about providing a mechanism to provide protection to the user and we feel very strongly about that so we're based on top of bluetooth low energy right now
Google about four months ago announced this eddystone standard an open source bluetooth thing so many people think that bluetooth is ibeacon and bluetooth is the basic standard with an
advertising packet and gap services and what you put in the advertising packet is what defines your service so I beacon has there's Eddie stone has its own and we are one flavor of it where the URL
flavor and the key reason that we used URLs is because there's no centralized server you just go to your website there's no company in the middle you see a URL to your code calm and you go to
your co com there's no registration involved or anything like that so we're trying to create is two clouds basically a cloud of devices that are broadcasting URLs in a standard way and that a cloud
of devices that can then see it whether it's a phone a tablet a TV or goggles or whatever and those can even be proprietary it's kind of equivalent to weigh the way browsers are HTML on one
side and browses on the other and so we're trying to make it so anybody can write these things that's why all of our code is open source we're encouraging multiple companies to do this but I want
to reiterate really clearly here why we're how the physical web is involved because literally the physical web is just the discovery of the URL to the phone and once we're done the web is
done I mean say the physical web is done the rest of it is all the web so that parking meter example that you saw was just simply using web sockets and when people get upset about the fact like
a second Scott you've got your really gonna use web sockets to a device in front of you isn't that complicated you have heard of this thing called the Internet of Things right it's like it's
a whole idea is that this is getting really cheap and these are for devices that are available today right now the one in the lower left is basically from a chemical particle for 39 bucks you
have a little Arduino processor that can do all sort of fun stuff with 10,000 messages you can send to a web service this is getting really easy to do so the whole idea that the physical web is that
this device this vending machine can have its own connection to the Internet I can have my connection to the internet and we just basically say well where do we rendezvous how do we find each other
we don't have to be on the same subnet anymore to talk to each other so the big thing for me those as the web gets better we get better and so for example let me show you this this is the same
basic discovery mechanism we're pulling something down and finding it and this time though we're using a service worker so that this says oh there's you know eight people in front of you you want to
get in line and it installs the service worker you put the phone away and then five minutes later when it's your turn it just buzzes in your pocket this time it buzzes because you opted-in but now
the physical web hasn't changed at all it's just better because service worker now exists and this is what's so cool about it the web is getting really cool and the physical web is just making it
easy to find this stuff here's something that's a happy meal toy that we made it's a little 3d printed toy that we made we've got a little processor in there that all it is doing is we're
using a new JavaScript library that will be talking about next week at chrome dev summit which is using javascript bluetooth so now you go to the web page and the web page has a JavaScript
library that connects to write to the turtle so now you don't go through the cloud at all if you don't want to you can literally have a device that costs two bucks and you're interacting with it
and talking to it this is orders of magnitude cheaper and we think this is going to be really open up an awful lot more stuff step one is the physical web and then step two is this JavaScript
library so we think that the web is really building to a crescendo hear about enabling these things people forget though that the Delta between Netscape and gmail was ten years and
we're just getting started the physical web is just a github we announced a year ago we're the third most popular github and so things have gotten really strongly quickly
getting a lot of activity going on we're very excited by the fact that actually in the last two weeks both opera and firefox have announced that they are making their own scanners as well which
is like awesome news and that really drives a key point here first you can do this today if you want to you go to our github you can see all the stuff we're on the google play store and we're on
the iOS store you can download our apps and play with it right now we're also in Chrome for iOS so if you just have chrome and you're on your iPhone you can do it right now the other thing you is
that we are going to we're working really hard to get into Chrome for Android everybody asks me every day what are your ship we hope soon we're trying really hard to do that but the point is
it's not dependent upon us other companies are already doing it and that's what's really cool and the key thing I want to mention is that this is only going to be successful if we as a
web community want this to be successful this has to be the open web it can't be a Google product and that's why I'm on the chrome team I'm really proud to be on the chrome team because chrome really
sees this as an open web standard so the key thing I want to mention is that though I get us all the time we can't imprint upon what I beacon did now I begin is great it's I'm not trying to
diss ibeacon at all but everyone assumes that any time you use a beacon you must copy what they did and this idea that you are either going to be pushing coupons at people when they walk in the
door or you're going to track them as they go through the store that's a fine use case if you are a retailer if you want to do that please go ahead and use that more you know active background
scanning but the whole point of the physical web is to be a lot more different because what we've discovered is that initially we're going to work with like a vending machine or a bus
stop or a poster and they got smaller and smaller it was interesting about how we got smaller and smaller activities but then we started realizing that it wasn't just corporate activities as
personal ones so imagine that you're presenting some slides in a room full of people and your computers is broadcasting the URL to everybody in the room so they can follow along or a dog
collar can have something so if your dog gets lost people can find it or even if our sale sign that has your phone number on it if you want but it also can have pictures and history and so forth and
you just throw that in the back window of your car so this is really unlocking a whole broad range of light weight things that you would never have an app for because what we're
discovering is that there's this this way the web has gone because initially the web was very custom you buy your website make your own HTML static pages you would build it yourself and
eventually Along Came services that made it easier and easier to express yourself in the web so then there was you know bloggers it eventually Twitter and Facebook and whatever that took away all
the plumbing from you and we see that most likely this is the same thing will happen with a physical web so for example imagine that you get a square space account well then you just buy
their deluxe edition they just send you something that you plug into your in your retail store and now your store is available to anybody who walks in you didn't do anything you just got the
thing and plugged it in you didn't even program the beacon or imagine that you actually go to walgreens and you buy that for sale sign in a pack of six for fifteen dollars and you pull the little
plastic tab that goes live you're connected to it you answer a couple questions and now you've got something to throw in your cars so we expect that it'll start off by being a very
corporate thing that you used to do vending machines or malls or stadiums but a little quickly or time evolve into some is very consumer driven so the key part about the web is that it's got this
long tail of content which is the it's awesome that so many little things can add up to be such a big presence the amount of e-commerce that happens on the web is way bigger than Amazon and what
we're finding is that as we talk about vending machines and bus stops and suitcases and toasters and all sorts of little things just have a little bit more information we're really talking
about the bowl called the long tail of interaction and we think this is what the web was born to do everything could have a little bit of information and let's make it really easy to get to it
so kind of in conclusion what I want let you guys know is that the key part about the physical web is reducing friction the whole idea is the super power of the web is anything and have a virtual more
button let's figure out a way to do that user first no push notifications we really want to respect the user we don't want fingerprinting we want to make sure that it's really done when they want it
it's a whole new way of thinking about it the third thing is that it's open source the beacons are open source the scanning client is open source the physical web service or proxy services
open source you can do the whole thing and never use it Google system at all and we think that's awesome because we want this to be a rich environment anybody can play around with it and as
the web improves so does the physical web so as we're getting so many cool things that makes things really really fun so the end of the last thing and the one that was the hardest for me to
figure out honestly is I was so intrigued by having interactive vending machines that i forgot about interactive for sale signs and its really the tiny stuff is the mundane stuff but i think
is most powerful so i'm happy to be here I'm happy to talk to you guys afterwards I really want to stress though this is only going to succeed if we as a community wanted to succeed so please
let's talk afterwards and asked me a lot of hard questions thanks very much
THERE IS ALWAYS MORE