Name: JavaScript: Off the Grid - Sophia Shoemaker - JSConf US 2019
Uploaded: 2020-03-28T17:32:38.000Z
Duration: 23 min 3 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Sophia Shoemaker KATIE: Hello. Welcome back to the SitePen

To-infinitive

track. We have Sophia Shoemaker. And you don't want to live in San Francisco with her because

her grandfather was born right before the 1906 earthquake and she was in the 1989 earthquake.

So, earthquakes follow her family around. If you live in San Francisco, you might want

to move. Or maybe get her to move. Anyways. I am super excited about Sophia's talk because

she's going to be telling us a story about the real world where some of like the hot

topics, progressive web apps, what everybody is talking about, where the rubber hits and

the road and these really cool technologies that we geek out about can actually bring

a positive impact to communities that we want to serve. So, I think this is gonna be a really

meaningful and awesome talk and I hope you're excited for it. So, let's give it up for Sophia.

[ Applause ] SOPHIA: Come on, computer. Okay. I think we're

good. There we go. Okay. Okay. Hi, everybody. I'm Sophia Shoemaker. I work as a freelance

developer of shoes. Just kidding. [ Laughter ]

I'm actually a web developer, a freelance web developer. But I really did make she's

shoes. They're little baby shoes that I made. One of the companies that I work for is called

Fullstack.IO. We write tons of tech books. We have a book about Angular, a couple books

about React. We have a Vue book. The latest book that we're hoping to publish in the next

couple of months is called JavaScript Algorithms and Data Structures. If you would like a beta

version of the book, you can come find me after my talk. Yeah. Okay. So, before I get

started with like the technical side of my talk, I want to give a little bit of background.

So, for various political, social and economic reasons, there are large numbers of orphanages

in many regions of Africa. For example, in Uganda there were 2500 orphanages in 1992.

In 2013, there's 50,000. So, governments have begun to crack down on these orphanages because

in a lot of cases they're not actually helping these children. And in a lot of cases there's

abuse happening so they shut down and suspended or banned international adoptions. And for

the past couple of years I have been working on a project for a nonprofit organization

called Kaeme. They are working with orphanages and the government in Ghana to get these children

out of these orphanages and back with their families. In a lot of cases these children

often have family members alive. Sometimes their parents are still alive. So, they try

to get them back with people that can take care of them or get them adopted. And the

application that I built allows them to collect data and generate reports based on the data.

So, I actually inherited this project from a group of grad students at Santa Clara University.

The first version of the application was built with PHP. Anybody do PHP out here?

[ Applause ] Which is great. PHP is great. But it needed

a little bit of reworking to get it in a better shape so I re architected it to use Laravel.

The Laravel framework. Which was fine. It totally worked great. But the team  as the

team started to use it more and more, it was getting pretty frustrating for them because

their Internet connection in Ghana is limited. So, every page load required a round trip

to the server which when your Internet is slow is not a great experience. So, in addition

to speeding up the application, Kaeme also wanted the ability to use the application

offline so that when they went out to the orphanages where there was no Internet, they

wanted to be able to enter the data into the application directly rather than filling out

a paper form and taking the paper form back to the office where there was an Internet

connection and there's the chance of data not getting transferred properly or missing

data. So, in re architecting this a second time, I opted to leave the database structure

alone because the database structure was fine. So, it's  I used a MySQL database and left

that alone and focused on the backend code and the frontend code. So, for the backend,

I opted to use AWS Lambda. And I used Lambda for two reasons. One, I am not a DevOps expert.

And Lambda makes it really, really easy to write server side code without having to maintain

a server. And since I was the only person working on this application, not using my

headspace to maintain a server was really valuable. And then the other reason was switching

from an EC2 instance that was running PHP to AWS Lambda significantly reduced the costs

on AWS. So, right now Kaeme is essentially paying for the database because Lambda is

so cheap. And then finally, I used React for the frontend because I am a React fan girl.

And I also needed a single page application. Like I mentioned earlier, making a round trip

to the server every time a page needed to get loaded was getting frustrating. And so,

making a single page application was a really great way to reduce the amount of data and

pages that were getting loaded or the amount of times that I needed to make  get stuff

from the server. So, okay. So, what is a progressive web app? I'm sure a lot of you are familiar

with this term. But I just to want run through a couple of like features of a progressive

web app because this is relevant to what I built for Kaeme. And this isn't a comprehensive

list of features. But these are the ones that are relevant to the application. So, obviously

it's progressive. But what does that really mean? It means it works for every user, regardless

of browser choice. Whether somebody's on a mobile phone that has a really slow connection

or an awesome Macbook Pro. It works on all different types of devices. Oops. It's responsive.

Which means it fits any form factor, desktop, mobile, tablet. It's connectivity independent.

Which means it is enhanced with service workers which I'll get to in a minute to work offline

around low quality networks. And then it's safe. It's HTTPS to ensure content is served

securely. So, one of the things you can do to improve your web application is to use

a tool called Lighthouse. It's from Google. And if you're not familiar with this tool,

it allows you to do an audit on your web application to see where you can improve in performance,

accessibility, progressive web apps, all those features that I just talked about. And it

can give you some great insight into where you can improve your application. So, I tried

to run Lighthouse on the PHP version of my application and the audit didn't even finish

running. It stalled out. I don't know if my PHP application was just really unprogressive

or I don't know what. Or maybe Lighthouse isn't meant to run on PHP apps. It just didn't

work. I don't know if you can see, but the text says, as page load time increases from

1 second to 7 seconds, the probability of a mobile site visitor bouncing increases 113%.

So, yeah. it just was not great. But, so, I ran it again

on the new version and this is just a, you know, a screenshot of all the information

you can get from Lighthouse. It's a pretty extensive report. It's a great way to just

get a gut check of what  how you can improve your application. Here's just another screenshot

of performance. Just some various things that you can do to improve your application. And

then here's another  this section is specifically about progressive web app features that you

can improve on. Okay. So, service workers. So, in order to make any application accessible

offline, you have to make use of service workers. Service workers are JavaScript files that

allow you to cache other resources such as other JavaScript files, CSS, images. Then

they can then be available offline. Service workers only run over HTTPS and make use of

promises. So, let's take a look at how service worker works. So, there are three stages in

the life cycle of a service worker. The registration phase, the installation phase and the activation

phase. To register, a service worker will need to add code like this. The honor block

detects whether or not service workers are supported before trying to register it. Then

the register function registers a service worker which is just a JavaScript file in

our application. And then we have a then and a catch to handle what happens when the promise

is either resolved or rejected. So, this is what our service worker file actually looked

like. It handles the install event and caches the context. We add the install event and

call the wait until method on the event. This holds the service worker in the installing

phase until everything is ready  is good to go. Inside the wait until  sorry. Inside

the wait until the cache is dot open method is called and that creates a new cache called

Subtitles ListPlay Video

JavaScript: Off the Grid - Sophia Shoemaker - JSConf US 2019

relevant

properly

improve

scale