Placeholder Image

Subtitles section Play video

  • everybody.

  • I'm Taylor.

  • Thanks so much.

  • Shooting introduction, Paul.

  • And today we're going to talk about JavaScript performance in extreme environments through the lens of our production Web app for refugee aid groups.

  • Um, so start off with some background on the aid movement.

  • Look at those extreme environments.

  • Setting performance goals is always a great place to start when diving into this stuff and outlining a strategy and then look at the tools and techniques we use to improve performance in our own app.

  • Um, this is my first ever tech talk, both as an attendee and the speaker, so really on.

  • I just want to emphasize like I'm nothing special.

  • Um, I'm just like an average rubbed off.

  • I needed to do this to make our stuff work in the field.

  • But the takeaway from that is that you can do this to you don't have to be an expert.

  • It's not using some really advanced a p I or anything.

  • So hopefully on Monday you can go in, take a look at some performance in your own abs.

  • Um, maybe do some improvements.

  • Who knows?

  • Um cool.

  • So the refugee movement is one of the largest grassroots you know, volunteer driven things in the world.

  • It has had tens of thousands of volunteers working with hundreds of grassroots aid groups welcome millions of newcomers to Europe.

  • It's kind of this interesting network of distributed autonomous groups that each do their own part independently, which means they can respond really quickly to changing conditions or new needs that governments or larger multinational NGOs tent.

  • But there's lots of communication overhead and lots of inefficiencies around these administrative processes.

  • So it's a diverse movement.

  • It's led by women.

  • You can see our board.

  • There on the left is Stephanie, who's ah, admin at Movement on the Ground will be talking about some of their work on the island of Lesbos later.

  • The middle is our own director.

  • Saara say hi if you see around the conference and on the right is Regina, who has started an aid group that takes donated laptops and equipment, loads educational content on them and sends them to informal schools in camps.

  • So I think it's really cool to see women at the forefront of this movement.

  • Um, and this is something that's not going to be solved within our lifetimes.

  • There's 70 million displaced people in the world today, 20 million of them are refugees in another country.

  • Um, and due to climate change, we're looking at up to one billion displaced people in the world by 2050.

  • So this is something that we need to pay attention to.

  • Now we need to build the infrastructure.

  • For now on, I'm really grateful to indigenous people all over the world and our youth like Greta, who are fighting, you know, to reduce the impact of climate change.

  • Um, so little overview of our tech.

  • We have three main areas of our platform.

  • There's kind of discovery and networking.

  • There's the supply chain eso tools around, getting things from A to B.

  • And there's the knowledge sharing section toe help, you know, share knowledge, things like that.

  • So our goal is to increase collaboration, save time and help groups make smarter, better decisions, really by just surfacing more information in a centralized place and an easy to consume and structured way.

  • But the important thing is that our tech empowers groups, which means if they can't use it, if it doesn't work, where their ad, then what are we doing?

  • Right.

  • Um, so yeah, we're free as in freedom and beer.

  • Best of both worlds, right?

  • We're using the GPL, and we're a non profit.

  • So it's free frayed groups, and this is gonna be important when we talk about testing strategies and stuff.

  • Um, I'm the only full time Dev on our team.

  • We have a great team of remote volunteers s o.

  • We need to approach kind of performance testing through the lens of a scrappy, you know, volunteer driven nonprofit.

  • Not through, like a $1,000,000 lab or something that you can just have a bunch of boxes like Automate all of this away.

  • Coop, Just a couple of slides here about our tech.

  • That's the profile.

  • This is the aid marketplace, the inventory manager.

  • Or you can see what's available and what people need.

  • And then we have the shipment.

  • Coordinator helps you keep track of decisions that you make where things are going and this is great, cause it it shows you.

  • Hey, the town next door is sending a shipment.

  • I could just throw some stuff on there on bacon, include it rather than sending another one myself.

  • Cool.

  • So the impact in the real world we coordinated a shipment of 180,000 bars of soap from Glasgow to carrying city in Scotland's.

  • It went to central warehouses in Athens and Thessaloniki, and they distributed it to dozens of aid groups all over Greece, including the islands and, most importantly, the end result.

  • We get this to the people who need it most, so that was kind of the intrasection.

  • I'm glad I'm doing well in time on dhe.

  • Now we're going to take a look at some of the extreme environments that are users operated.

  • Okay, maybe not that extreme.

  • Um, so this is Moriah.

  • It's the largest refugee camp in Europe.

  • It's on the remote Greek island of Lesbos, right next to the Turkish border.

  • It's a former prison designed to hold 2000 inmates on dhe.

  • That's the kind of prison section right there.

  • There are currently 10,000 newcomers living in the Moria refugee camp, and you can see the massive overflow area and kind of an informal camp in the foreground there that's called the olive grove.

  • So this is the kind of quarter outside Moria surrounded by barbed wire on dhe.

  • This is what you see every day as an aid worker.

  • You're going into camp.

  • You're doing all sorts of things to help people out 10 to 12 hours a day.

  • It's like an all day thing.

  • You don't get a lot of time to rest.

  • Relax.

  • You don't get a lot of time to go back to the office and jump on the WiFi or charge your phone up.

  • Azi conceive.

  • There's not really any power infrastructure there.

  • The cell signal.

  • It's spotty on DE.

  • So we have to take all of this into account when we're trying to figure out how to make our app work for for the aid workers.

  • So we don't operate here.

  • But there is a little bit of interesting.

  • Like other extreme environments.

  • You have search and rescue ships at sea who are on the ocean for months at a time.

  • Um, and you have human rights like observers were on borders.

  • This is a photo of the Hungarian Serbian border, which has 500 kilometers of razor wire on.

  • So the human rights observers are gonna be out in remote parts of the country, remote villages on kind of monitoring for things like border pushback, stuff like that and last but not least, my favorite place, which is warehouses.

  • So this is really cool.

  • That warehouse was actually the old 2003 Olympic basketball stadium in Greece, like just a ton of fun to walk around and explore, um, and aid groups Really like they just popped up overnight.

  • They asked the government, Hey, can we have some space?

  • And they have to work with what they're given.

  • So it's not something where they can design a connected infrastructure, set up the wife.

  • I threw the whole thing.

  • You know, it's like, here's a shed in my backyard.

  • Here's a converted basketball stadium, you know, make it work.

  • Um, so the storage space there is in the ring and kind of that concessions area, Um, you know, outside of the main stadium.

  • And that's what it looks like inside there s o.

  • They have cell service.

  • Um, don't have WiFi.

  • They do have power.

  • But again, people are dealing with inventory in stuff all day, every day.

  • Um, so let's actually take a look at what we mean when we're talking about performance high speed situations.

  • This is Amsterdam.

  • This is the office in San Francisco.

  • Low speed might be my own office in Serbia, you know, gets the job done.

  • Sometimes the video calls are a bit flaky, but it's okay.

  • Um, no speed there.

  • Lots of situations we talked about, some of them, like at sea, on the borders.

  • And then we have this fun one I like to call, maybe speed.

  • So this is really warehouses.

  • This is camps.

  • You might have some cell signal.

  • You might have some intermittent WiFi.

  • There will be dead zones, and that produces a lot of problems.

  • It's not just online offline online.

  • It's ping pong.

  • You back and forth.

  • So you have random Leighton see spikes.

  • Race conditions are a huge issue.

  • Um, and the from a u ie standpoint, you have to deal with this back and forth between the different states.

  • You don't want to just be showing up the pop up your online You're offline.

  • Your online very rapid succession.

  • Um, so when we're talking about speed, we're really talking about Layton C bandwidth and throughput.

  • That's an example of a warehouse.

  • So that's the office with the WiFi there.

  • This is about the size of a football field, a CZ.

  • You can see that WiFi is not gonna extend throughout the whole place.

  • It's kind of like a giant fared a cage.

  • Um, and then this is a fun one.

  • So to get WiFi in the olive grove, which is that overflow area outside of Moria, this is the town of mentality.

  • It's the largest town in the islands.

  • They send they have a satellite dish or something that sends it to a water tower.

  • Another satellite dish there bounces it off to the camp.

  • That's about four kilometers right there just beaming that awful water tower.

  • It goes into a satellite dish on the, um, the the office there, and then they have a series of WiFi repeaters around the camp, so clearly dealing with super highlight and see their interment connectivity, um, you know, storm or something like can just knock out that infrastructure.

  • Um, there's the office right there, and that's an example of a telephone pole with one of the WiFi routers, the repeaters on it.

  • So something else we need to consider, um, is data and power.

  • So you have, like, a metered WiFi mobile data or you just don't have data.

  • Um, same thing.

  • The power you plugged into the wall.

  • You're on the go or your devices Debt.

  • Um and these are all resource is that our users have in our contacts there.

  • Very limited.

  • You're out and about using your phone using our Apple Day long.

  • We can't kill that battery, right?

  • You know, you have a certain amount of time, and then your phone's dead, and then you're back to pit, build a pen and paper way.

  • Same thing with data.

  • Uh, you know, it's it's nice when you have an unlimited plan.

  • Most aid workers that I know they might buy one or two gigabytes at a time s so they're constantly having, like, running out of data, having to wait a day, go back to the cell phone store, plug some more data, and on def your stuff just stops working when they run out of data again, back to feel dependent.

  • Paper way.

  • It's a bug.

  • It's my problem, you know, it's it's they're not gonna make it their problem on.

  • And then we have hardware.

  • So lots of old donated equipment.

  • I'm gonna speed up a little bit to make sure I stay on time.

  • Um, but this is an example of what?

  • My friend's computer.

  • It just doesn't have a battery, right?

  • Like she just leaves it plugged into the wall.

  • If there's a gentle breeze that knocks the cable out, then she immediately, you know, loses all our state of what she's been working on.

  • It's my friend's phone, different friends he can't use about half his screen.

  • So I think that's maybe a different tech talk like how to make your app work with a busted phone.

  • But that's the type of equipment that we're dealing with here.

  • Um, this is all more relevant than you might think, right?

  • So a slow connection is a slow connection.

  • Warehouses have dead zones, offices have dead zones.

  • There's some poor guy in the basement, you know, trying to just get the printer to work.

  • And he has to run up and down the stairs every time he wants to print something that connects the WiFi.

  • Um, if you don't have a connection, you don't have a connection.

  • It doesn't matter if you're in the middle of a refugee camper.

  • If you're on a six hour plane to come talk, you know, at Js conflated pest.

  • Ah, dead battery is a dead battery, regardless of how fancy your phone is and old hardware exists in many real world businesses, hospitals are a great example.

  • Where do the budget or regulations?

  • They're running sometimes Internet Explorer in 2019 right?

  • So let's take a look at some performance goals on.

  • You.

  • Want to start here really important when you have these conversations with your managers?

  • You know everyone.

  • The marketing department, the dead Bob's people.

  • They want their stuff included in that page load.

  • And so you need to be realistic and set those goals which will then help you prioritize what's necessary.

  • What can you cut?

  • What can you delay?

  • Um, so in our case, we're looking at a mid range android device on we're going to say a bad three G connection, 400 kilobytes, a second bandwidth and 400 milliseconds.

  • Leighton.

  • See, we want a minute size data and power usage, and we're gonna focus for speed on two key indicators.

  • There's time to first paint and time to interactive.

  • So we want on an initial load, Um, less than two seconds to first paint and subsequent loads.

  • Less than one second on dhe for interactivity.

  • We want less than five seconds on an initial load and less than two seconds after that.

  • And remember that Leighton see, here is the killer.

  • So that's gonna take up, you know, easily.

  • 20 to 40% just pinging the server for a round trip.

  • We have product goals.

  • Hopefully, we're building stuff to do useful things, whether that's relax and have fun or, you know, make something that people want to use.

  • Um, in our case, we try to support modern browsers on desktop and mobile.

  • We're not supporting Internet Explorer.

  • Um, and, uh, we need it toe work off line.

  • So it's okay.

  • We can cut some content on functionality like our maps.

  • Paige, we need thio Get tiles from a server if you're offline.

  • We're just going to say, you know, don't use the maps.

  • Wait until you connect.

  • But there's lots of other stuff that that doesn't need to work.

  • Um, I think that right.

  • Okay.

  • Eso business goals.

  • No ultimatums.

  • I think that performance is something you should take an incremental approach to, You know, make one performance.

  • Change it a time.

  • Something is better than nothing.

  • Building offline support one step at a time, starting with the most used or most impactful work flows.

  • Um, in our case, we need reasonable testing overhead.

  • Like I said, it's a volunteer team, so we have to kind of keep that in mind.

  • We're not gonna have, you know, your budget for extra devices or lab.

  • Um, and we need toe balance.

  • You know, the sort of performance testing with new future development.

  • Adding on there, Um and I think that one of the best things you can do is if you're talking to your users, talk to them about performance, right?

  • It's ah, you know, you have your product and application bugs and stuff like that.

  • But tell them, Listen, if it takes too long to load and that makes you frustrated, that's about like, talk to me.

  • Tell me about that.

  • I want to know what device using what the connection was like Go to speed test dot net and send me a copy of the results so that I can have realistic benchmarks.

  • You know, when we're doing our internal testing, I think that we have lots of great conversations with users.

  • We should definitely extend that to performance.

  • So gonna dive in here on dhe look at our strategy to make these improvements.

  • Look at the tools that were using and, uh, look at the techniques and results that we had in our production application.