I mean, you know the way, um that I hope you have a way to see if the way it's always give away.

All right?

Right, right.

Right.

Yeah, we got think.

Good.

Press press.

The first thing is the thing, right?

Okay.

We could go the full screen f for full screen.

There we go.

Yeah.

Oh, okay.

Right.

Ah.

So earlier this year, a few of us went on a fact finding mission to India to see how folks who used the Internet out there and one thing stood out to us, and that is that feature phones are back.

Yeah.

The future phone market doubled in 2018 in India and the sale of smartphones like, kind of flattened out.

And at the current rate, that is projected 400 million feature phones will be sold in India this year alone.

Yes, and the one on the right over the very foreign.

That is geo phone, which is the most popular brand.

And it costs just £15.

And I compared to all of the phones you all have here, everything about all of these phones is extremely shit.

It's 240 pixels wide.

It's single pixel density.

There is no touch screen, and the CPU is God awful.

But it's 15 quid and that allows people to be on the Internet that previously couldn't afford to be there.

Yes, and also the geo phone on the end There, this is a web based phone is running Chiyo s, which is a fork of the old Firefox os.

So this phone is kind of is running Firefox 42 for pretty much everything s o a little team of us got together consisting off summer Jake on Dhe Americo she she she's in America might market in America.

America is that way.

If you if you actually think it's quicker to go that way, Yeah, you Either way, if you just keep going forward, you find it.

Um, yeah, What?

We want to see if he could.

We build an interactive Web experience that would run on devices like this.

But, you know, with responsive design and progressive enhancement and enabling it to also scale up to something that looks great on a desktop.

Yes.

And that thing became frocks.

It is a game.

If you like mine sweeper, you will like rocks because it's the same.

Play it now on proxy dot AP.

So here's on desktop and, as you can tell, like we threw all the animations at it and, like, make it fancy.

But keep in mind this entire thing scaled down nicely and is playable on one of these 15 quid feature phones with the exact same code base.

Yes, we put a lot of effort into making it run really fast.

So we figured we'd go through some of the tricks and techniques that we use because none of it's really unique to this particular Web.

It's stuff that you can apply to any site till all right about before we dive in.

I think it's important that we address a question that we still often see on Twitter.

Yes.

Should I care about performance?

Should I care about performance?

Should I care about performance?

Yeah, yeah way.

Think I'll go to our call for this?

Is this one on Web fundamentals there by Jeremy.

Jeremy, where are you?

Where is he?

He's he's actually here.

Is he here?

He's supposed to be a guy said to me last night, Really?

Looking forward to your talk.

Jake, where are you, man?

It's just rude.

Fine.

Well, okay, Well, if you want to read Jeremy's article, whatever you can find it at this Billy Link.

It's like it points to all these Web performance studies carried out by a variety of companies such as Pinterest, who reduced their perceived wait times by 40% and saw an increase by 15% in sign ups or cooker.

Reduced Arlo time by under 15 seconds and start increasing conversions and session time.

BBC lots in addition time.

So if you ever since the painting to load or anything, he was space time by half, 12% boost in sales.

I don't take it from that over.

If it's abandoned 230 seconds, conditions apply right, although that's a large variety of sites like, we'd still see folks saying like me, this Yeah, it's all very interesting, but it doesn't apply to my site because, like my sight is somehow difference.

Yeah, they found, like, one aspect in the study that they feel like their own site doesn't match two, and therefore the entire evidence provided is invalid.

We don't buy that now.

I think everyone in this room right is a user of software.

We know how frustrating it is when something performed badly.

And low time is just such a big part of that.

The performance optimization So we're going to talk about in this talk are pretty simple.

That easy.

Literally two minutes on paper.

But when you've got a bill system wrapped around your project, as most of us do, just adding something like a tag to a page can become like a real pain.

So we're gonna take a look at that side of things as well.

So let's rewind to the first Alfa version off approx before we had done any of our performance work.

Yes.

This is totally the real Alfa version, not the version we just retrofitted for the sake of the shut up.

You're ruining the illusion.

I'm sorry.

So, aside from being a bit slow, it wasn't really all that different from your average everyday Java script of a nap.

Yeah, So action.

I was pretty basic, right?

You contend?

Little bit of meta data.

Jarvis, we file that took care of populating the page.

We've got style sheet there.

That star she is just for a web front.

The rest of our CSS was embedded in our job script by post.

Yes, the notable difference from most weapons, I think, is that we used pre act instead of react.

React is 33 day pre act is three cake React can do much more, but none of the things that I can do more we actually needed.

For us, it was really like a no brainer to be able to save 30 case straight out started.

Yes, absolutely.

The other differences we used roll up basically because we wanted to give it a try like we'd use roll up in before for, like, libraries and stuff.

But but not for full Web maps.

So you see, last year we build a Web called squash and to build smoosh, we used weapon.

And when I say we, I really mean our colleague Jason, who handled the weapons out of things and he's in America, basically had to make use off lots off undocumented and internal Web pack AP eyes just to achieve basic stuff, and he has years off my pack experiences really comfortable with it.

The two of us, on the other hand, don't yes.

So as a result, like We didn't understand the Project Bill system if something went wrong that was not in trivial, which most of it was non trivial.

Well, can't help us until Jason woke up on the other side of the world and talking to some other teams internally and excellent.

We hear similar stories.

There's like one or two people who are considered the Web pack whispers on the team.

It's their sole job to, like, maintained the build system, and nobody else actually really dares to touch it.

And maybe this sounds familiar to some of the people here in the room.

Yes, s O When I use where pack.

I don't feel like I'm using JavaScript.

I feel like I'm switching like pulling levers, switching switches.

And I got massive conflict objects like herding lots of plug ins around of varying quality that often don't really play well together.

Yeah, and so we tried roll up and we found lots of plug ins off varying quality that don't really play well together.

But the big difference is mere mortals can write their own plug ins.

Rollup has its simple, well documented plugin system, so it's easy to get involved in the innards of the build.

If you know enough JavaScript to wrangle of weapon convict, you know more than enough to write a roll a plug in and we knew we were going to do unusual stuff.

It was clear to us it on these super low and feature phones.

It's gonna be hard to have everything on the main threat.

So we wanted to make workers it coop part off our architecture straight from the start.

Yes, and there's, you know, the problems that we now have multiple threads.

And the problem is that there's often share dependencies between the Smallville plant experts.

So that's all that we use comlink and that facilitated communication between workers.

The mainframe.

It's a library that you wrote.

But that means that lively needs to appear on all of the workers and on the main Fred now Web pack can't share chunks between workers and the main threat so use would end up downloading it well at least twice, once for every worker plus one.

And this what happened for each additional shared dependency and roll up kind of handles us for free out of the box because it leaves the choice off format up to you?

Yeah, he wasn't just job script needed hand alive because, you know, we need to add HTML as well.

And there is a weapon a plug in for you to create html for your project.

But here is the code for that plug in, and it's massive.

And again it relies on loads off internal and undocumented parts off weapon.

Yeah, this was looking is so big.

It has its own plugging ecosystem as well, and it's kind of the way it works.

It doesn't really want you touching the HTML itself.

Instead, it wants you to learn the configuration options and the all of that, and learned all of their quirks as well.

Like it turns out that your skills in HTML, which I imagine many of us already have a completely useless when you're using this building.

So we try to find a cripple unplugging for role of and couldn't find one to make this comparison fair.

So we decided to write our own.

So roll a plug ins are just functions that return objects.

And that object has a name.

Ki just so that you're plugging can have a name and rope can generate nice messages and debug messages.

And the rest of his object are just call backs for the various stages off the built.

And these are all very well documented.

Yes.

So the one we're gonna use for this one, we're gonna use the generate bundle hook Mrs called just before it writes everything to disk.

You get the options.

That roller was called with the on.

You also get this bundle object which looks like this.

This tells you everything about the build, you know?

So So it's for the JavaScript.

For example, You get the initial pass, the source file, you get the output file name, which has been hashed for long for future cashing, but also loads of other data, like dependencies and which exports it has.

And even for non jobs.

Got files you do get.

It's upset off this kind of information.

Did I go too fast for you?

Might not give you time to open a bottle.

Sorry.

Is that the fizzy water world is still war.

I feel very strongly about this stuff, which is still all right.

Okay, I'm gonna I'm gonna get one ready as well, right?

Um, yes.

So this is the whole bill Come big tells us everything about what's going on inside roll ups, little world that we can use this to create our HTML.

So what we're gonna do is we're gonna load in E.

J s templates and compile it.

And now you know, we're just using a Jesse's an example.

Well, it's it's the one we use, but you can use any template in language you want.

Like Roller doesn't care.

All he cares about is it.

It wants to know about this HTML and it wants to know where to write it, too.

S we're gonna use roll ups, admit file method.

There, you tell it's an asset.

Give it a file name.

You give it the source of the HTML.

And now roll up will write that file along with everything else.

Eso Here's our templates.

We've got a placeholder here for the job of script file name which we don't know ahead of time because, as it had roll up will add hash to the final name.

So we need to pass in that final final name into our template ing engine after hashing and we can get this, as I said from the bundle object since it tells us both the input path and the output path.

So we create little helper here called Get Jess, which we just go so the bundle and finds the corresponding file?

Yes.

So now all we need to do is add that new plugging into our old con fig, and that's it.

We're done.

Now you know everything you need to know to write a roll up looking.

And I realized that you know, that it's a pretty quick introduction.

Just throw it you.

But again, compare it to the weapon version.

And I'd argue that what rewrote is simply just a little bit simpler.

And the good thing is that everyone on our team, I think, felt like they were comfortable with touching that piece of code in adjusting the plugin.

If it needed any kind of changing and even better, we're writing code to do what we want rather than wrangling conflict.

So if we wanted our html to be a slightly different shape, we could just go into the temple it and change it not to add a new tag, rearrange things, it's just HTML, but what do we actually need to change to make things faster.