Waching daily Nov 24 2018

Sara is

not only

Got some of the most amazing hair color that we've seen here, but she also has really crazily

Geeky named dogs who are continuing that that theme although the mix of the dog names

I find really curious because they're based on two totally different activities being a nerd or following hurling

so that's kind of awesome, too, but

We're talking about view. It is good to point out that she knows an awful lot about it and is actually a core contributor

So she knows her stuff and she's here to teach you about it, please welcome Sara Dresner

Yeah, actually

If you don't know, my dog's names one of them's named pseudo and she's very inappropriately named because she doesn't listen to anything I say

I think I don't have a root access or something

Okay, so today we're gonna talk about something that I really really like it's a combination of two things

I really like actually serverless functions and view jeaious

So how many of you can predict the future are there any Bitcoin millionaires in the house or early Apple investors?

Maybe you wouldn't be here if you were

Alright, I'm not either so I don't know how to predict the future when you launch an app for the rest of us

What does that look like? Well after you're done jumping around in formalwear all over a skyline and you're super excited

then you immediately have to scale your servers and I

Think that we'd all like to feel like we probably look like this when we're doing that

We're likely tackers with like a dark hoodie on and I were so good at programming that our fingers are literally on fire

But we probably look more like this that dough puddi is like our sisters hand-me-down

Rain jacket and we can't find the Q key and even if we do, we're not sure if we can exit them

So what about the situation where we don't exactly fail but we don't really succeed either

We just don't get as many signups out of the gate as we really wanted to and in that

Situation we can scale down but what if things kick up again down the road and then we're paying for all this server capacity

That we're not actually using John Travolta's shows up in our wallet, which is really awkward to explain to VP's

you know, so that brings us to

Serverless serverless is an actually interesting thing with a really click Beatty title. I mean, it's true anytime you talk about several

It's the first thing anyone is ever gonna tell you is like well, you're actually still using servers. That's true

We are still actually using servers

So why are we calling it that well?

The idea of server list is that you spend less time setting up and maintaining a server

You're not spending as much time babysitting a server

So basically all of the things that your working on for infrastructure are obstructed away from you

so the promise of serverless is really

focusing on

functions that state when this request comes in run this code and for that reason a lot of people call it fast or

functions as a service

My name is Sarah Dresner as mentioned before. I'm Sarah IDO on Twitter. I work for Microsoft then

And I'm also a via Cordy member

I work for CSS tricks as a staff writer there and I'm here today to talk to you about serverless functions and view

so some of the benefits include that you're only paying for what you use which is usually a lot less and here's a really

special thing about server lists

Basically, they priced it way too low right out of the gate and then everyone had to compete at this like really low cost

So everyone's competing and not making money

Which means that that's really good for a consumer like me because I'm not paying for it

Basically, it's just been really inappropriately priced. So you're paying a lot less to do stuff

So even if you want to check things out and try things out you can do so without a lot of risk

You spend less time babysitting a server. We talked about that a little bit before and it's the same idea as functional programming

We're really boiling things down into smaller

Reusable functions and I really like that premise and another premise

I really like is the principle of least power which in programming basically means that you use the least

Powerful programming principle in order to get things done and that kind of simplicity

Can help you reuse things and it can help keep things simple and it can help reduce failures. So

we mentioned before that server lists can mean functions as a service and there's a lot of as a

Service kind of things out there. So I made this SVG animation so you can kind of compare some of them

So let's take a look

So here is infrastructure service

You can see you're managing everything above that water line platform as a service a little bit less and functions as a service

You're just maintaining that application. That's pretty powerful. You're not dealing with any of the infrastructure

So now when we usually deploy sir our side software

We start with a host instance then we deploy the application within the host in a server list paradigm

We remove both and replace it with a vendor fast platform that we're not actually managing ourselves

so we'll deploy these flunk'd functions within this platform and this allows us to

Instead focus on the logic which are written as individual functions

So unlike that earlier host and application model

The function isn't continuously running when an event is triggered

Then the function is executed by the vendor inside of a container. So you might be familiar with this sticker, right?

But there is no cloud. It's just someone else's computer. Well, there's no server list

It's just someone else's fully managed execution environment that I only pay a fraction of cent for whenever my function is run

Got it. Great

So does this mean we should serverless all the things sounds great. Um, no

Not really

Serverless is really good for a few use cases. Some of which we're gonna cover today, but it's not good for a long-running stuff

Nothing with a persistent connection like WebSocket. So a real-time social updating stream

so chatting or if you're you know doing a game where people can are continuously talking to each other or any kind of like

Stock ticker or something like that where you're maintaining that connection all the time. That's not really a good case for service

So every this is really good for functions that you want to execute directly off of a server

So what is it good for we're gonna talk about some of these today. We're gonna clean data on a chrome job

Take data and music to create data visualizations

We can crop images uploaded by the user and create a user profile

We can also do things like create a server list API very very easily which we're gonna do today as well

So I'm as I mentioned before I work for Microsoft

So some of that examples that I'm gonna show today use Azure

but you can totally make use of all of these things in any kind of

Service as well and I'll even show you the line of code that you would change

all of these examples are open sourced and available on my github so you can also just grab them play with them really quickly and

throw them away or what have you so

Okay, so setting up a function is pretty trivial

Go get a free account and then we go into the portal and we have a number of options that mostly get

Populated for us. So one of the things that I want to point out here is this this is my first time using keynote

I promise I don't do transitions like that all the time, but I really liked it

So this is this is the consumption plan. That's the one that you want to use

the other option is app service plan consumption plan is the one that's going to scale along with your needs the app service plan you're

Gonna have to do things a little bit more manually

So right away, they'll setup us up with a test, which I kind of

Simplified and modified to include tacos. I apologize. The text is a little bit small here

But the request body I'm passing in a name per am that says delicious tacos tacos are very important for everybody to know about

Here we've got this context res and in that body. We're passing in the reck body name

So we're passing in that parameter there and you can see that context log very similar to a console log

and so if we run this

We can see that we're passing this in and down here. We have this output on the corner here

Hello delicious tacos and you can also see that yoyoyoyoyo is printed into the context log

So there wasn't that much stuff to get things going you can see how you pass in parameters

You can see how that the function is executed and you can see how we'd manage that output and even log

so

That brings us to view stripe and server list. So the first thing we're gonna go over three examples today

The first one is setting up an e-commerce site and we're gonna set up an e-commerce site all the way through payment

Completion in just a few minutes. So this is really super exciting. So let's put the knowledge to good use

Here's a sample view shop that I made and basically you can order things. You can't really because it's a sample

Oh, but this whole you know application is on the github

and so you can go over here enter your payment details and this credit card number and

I should have sped this up because it's taking too long

And we go in and we write our you know, fake data pay with the credit card and then we have the success

So since I don't have time to go through the entire application

I'm giving you a bird's eye view of what that set up looks like

I'm using a thing next which is if you're familiar with react we have next and react

Next is kind of like the view equivalent

It's got server-side rendering routing and you're always using dot view components for each piece of it

Even if you're creating a page

If you want to create a full page that has routing you put it in the pages directory as a view component

There you go. So you also have components view X is kind of like Redux if you're used to react

I don't work with angular too much

So I'm not going to give the comparison there

And then there's also this layout so you can have multiple layouts where you're arranging components as well

So you can see how we're gonna communicate with stripe

But we're also going to use that server list function

And the reason why it has like a little green thing is that we have one

Dependency that's also stripe inside of that server list function

So right now we're just going to focus on the lowest hanging fruit, which is stripe

So if you haven't set up stripe, it's very easy

you set it up with just a couple clicks convert and

Confirm your email and then you go into the API tag and you can see that it already gives you a test key token to

Work with so you can test things out

so when you visit stripe documentation

it's going to expect that you're gonna use something like

Express and it's going to ask that you need something like an email a token and the amount for your sample charge, but

We're already executing on the server. So we don't have to use something like Express, right?

We're already on the server. This dog is so stoked so we don't need to use Express first

we're going to just kick things off and we're gonna replace obviously those X's with your

Stripe key token so that module dot exports that's that line of code that we use in Azure that would change for other services

So here we have what we need

We're going to get the body the stripe

email the stripe token in the stripe amount and we're going to post those and I'm going to use

Axios for all of these examples that's kind of a common thing that people use in these kind of applications

So then we're gonna finish you'll note that I log a lot

that's so that if anything goes wrong, I know exactly where and when it's going wrong in the application and

now when we execute our function

Now when we execute our function

You can see

It's running and we have we have in that kind of params area where we had tacos

Before we have the email the token in the amount

It's been completed and you can see that everything's going through and if we go and check in the stripe dashboard

You can see it is actually communicating with stripe and that testing token is working and we have some customers coming through

So we've success

Awesome, one other thing that we're not going to cover here today because we don't have time but I wrote a whole post about it

If you want to know is how to host all of that stuff on github and add in the dependencies and everything

It's not that many steps. But if you want to go into more detail there, that's the post to check out

OK we've got one side done. Let's connect things up with our server list function and our app

Now we're going to go look at our app here. And the thing that we're going to check out is

This cart dot view that we're going to create and we're also going to talk about that view X store because the view X store

Is really where we're keeping the shop and all the items and everything

So we have to actually make sure that people can access that and put things in the cart. So

Here's our cart are all of our products are in a big

manifest object in the view X store and

We're also storing what's in the cart as well as the cart total so you can see here as I add items this view Explorer

Updates if you're not familiar with these these the view dev tools again, if you're used to react react has a similar thing

So you can actually see the components and what's being held but you can also see what's happening in view X as well

So here's the shape of what we're going to be building out on the cart diffuse

So first if there are items in the cart, will add our checkout component

Then if the carts empty

we'll give them the ability to go back to the main page and add items and

Finally if there's success we're going to allow people to know that it's being processed and we're gonna add a success component

So let's look at that first code block again

If we have items in our cart, we're going to show a cart that reminds people of what they've already purchased

So we just have some thumbnails of like what they've been putting in the cart and how much everything is

So here's what that will look like. We've got the cart with the thumbnails and you know, just reminding people what they have in there

And now that we're showing what's in the cart, we've got to build the actual checkout form

And here's what we'll eventually have we have this thing. That's kind of embedded in the page

So if you wanted something

Super simple to integrate into your site

This thing the view striped check out is just a button that you put on your site and it creates a straight modal

Totally easy like the simplest simplest implementation

You're literally just sticking a component on there and adding it to your dependencies, but you'll notice that we didn't do that, right?

It's actually skinned and it looks like that form looks like our site

so this is legit but like let's say you don't want people to know that they're

Necessarily using stripe or you want to also integrate?

Paypal, or you you know kind of want to make it look kind of seamless then you use a thing called stripe elements

This is something that stripe offers

so we can embed it into the page and

Style it like the rest of the page and then people don't see that you're actually using stripe under the hood and what I suggest

You use for this I tried out a few different components of you striped elements. Plus is the best one out there

So we would NPM install or yarn add view stripe elements plus

So now we've got that Cart dot view page and we're also going to add a checkout dot view component onto that page

So we're going to go to that view stripe elements plus page and it gives us a few defaults

This is what the default thing looks like. It's going to expect that

You're going to add in your stripe testing key and on that button

you see that @ click pay that pay method is really important and we're gonna dive into the pay method because that's where all the

Magic happens when we make the Axios call and connect it to the server list function

So here's that default stripe elements in the script

So if you're not familiar with view we have single file components

Which means we have template script and style all in the same component. So these are all part of the same component

I'm just showing you a small view of that

So we're adding in those imports for the stripe and then we also have a few stripe options

I've you know, kind of showed where you look at the details for that and then you can see in the methods that pay method

So what we'll need is to have a submitted a complete a status and a response

So we need to track all of these things as we're moving through the application

so we're gonna actually hold that all in data for the component and the props we're gonna need from that cart page are the

total and the success so whether or not

We really need to find out how much we have in that cart and also whether or not it's been successful or not

So here's that pay method after we've worked with it again. We're using Axios here. So what that paint?

You know that clicking that button kicks off the pay method. We have a create token promise and we've changed the submitted to true

we're gonna use Axios to post to our function URL and send the email the total and

The customer name and if you're wondering where I got that

URL for the function remember when we were in the portal in the dashboard before and we saw that

Function there's this little thing on the side that says get function URL. That's where you post to when you're using Axios

So now you can communicate with that stripe or with that serverless function whenever you need to

So after that's complete, we'll change the status to success clear the cart with a mutation in view X and log any errors

So just to review that pay method once more because it's really important

We're going to use Axios to post the function to the function URL

Track whether or not we've submitted the form or not with this dot submitted

It sends the email token and total to the serverless function if it's successful it commits to the view X store

Mutation clears the cart and emits to the parent cart component that the payment was successful and if it's it errors

It changes the status of failure logs the error response for help with debugging

So if you're not familiar with loaders and why they're important

I did make this loader that goes on anytime that there's a communication with the server because I don't know where they are

I don't know how what the latency is like

I'm not sure how long that thing is going to take and if you want to know more about

Perceived wait time these kind of loaders can really help with perceived wait time

So what people think they're waiting through Eli Fitch, which I think he's in the audience somewhere. He's pretending he's not here

He has a great talk about perceived performance that everyone in the world should check out

It's called perceived perceived performance. The only kind of performance that matters. You should definitely check out his talk. So that's why we have this

Loader which will make much more sense after you check out his talk to

so in the case of failure, I

Feel really bad for this cat

Well, let them know that something didn't quite work

Right, we're gonna clear out anything that happens in that pay method but not the cart and in the case of success. Good job, Lennon

we're going to show a

Successful animation wait for a little bit and then reset that cart so that they can continue shopping if they need more

Materials so you can see that little success gives you like a little

Dopamine rush that something worked good to tell your customers that something's working for them. So here's where we are now

The success is actually a component of its own

Still attached to that page and it looks like this I made a code pen demo for you if you just want to check out

That one piece of code

And we'll create a set timeout and restart the cart with the function on a parent which is emitted from here

So remember this view how I told you we were going to go through all of these steps. Here's what we did

So we created our cart imported our check out component that also tracks the successful payment

If the cart was empty we let them fill it up by going back to the home page if the payment was

Successful, we showed a success component restarted the cart on a set timeout and cleared out what we have

All right

You did it party

That was not that much time to set up an entire ecommerce site and all of the payment methods and everything

In a real life application you'd also have to do things like testing and stuff. But all of this stuff is

available on github in an open source repo both the function and

The shop so you can use both of them immediately and play with them and set up a whole ecommerce site for your needs

Cool. Ok. Now, let's do something really quick. That's really awesome

And it will be a lot less steps than you think it will you'll need we're gonna create an API for a view app

So here's our application

I made an app where I could explore cocktails because I was like, I have all these ingredients. I'm not sure what to make

I need to find something that you know can work for all the means that I randomly have in my house before people come over

so here's a search and a random functionality so you can just get the

ingredients from your house and put it to use to make any cocktail, but then I was thinking about it and I was like

You know, not everybody drinks. So to be more inclusive

maybe I'll make like an ice-cream finder and you know, everybody likes ice cream and then I was like well

Some people are lactose

Intolerant and maybe like people have things with sugar and maybe that's not that inclusive so I could do a puppy finder

But you know, some people like cats really weird people know

Some people like cats and some people like are actually scared of dogs, so that's not that inclusive either

So maybe we can make a things

We like finder but that's got really, um, I couldn't figure out a way to build that without having like the craziest UX ever

So we're gonna use a cocktail finder right now for today because that's what I like

But you can imagine it's whatever thing you like in the entire world. All types of liking things are welcome

Okay, so we're gonna make our service function. You already know how to do these this you guys are such badasses

You're like this is old hat. I learned how to do that five minutes ago. Okay, so then we go into the portal

Here we go into the before we were looking at the function. Now we go into the integrate tab

so in the integrate tab

We have all of the allowed HTTP methods and I'm just gonna select get that's all I'm gonna allow to have

here then I'm also going to make sure that my

Authoritarian level and someday. I'm going to learn how to pronounce that is anonymous

So in integrate we gave the route template a name we gave the authorization level of anonymous

we allowed the HTTP methods of get only and

Then and then with dummy data I show you and with just those three clicks that we did

We have a fully functioning serverless API so I can go in there immediately and say my name toilet taco face

hello taco face, and it returns so that's

Kind of amazing. We're gonna do some more really cool things with this. So we're gonna hook it up with cosmos DB

That's another kind of a sure thing again. You don't have to use cosmos DB

You don't have to use Azure, but this is what we're working with today. So

Here, we've got a similar kind of app

right

You kind of used to this now - you know how next is all set up you guys are promised

And we're going to go into cosmos DB and create a collection

So here we've got I'm gonna call it cocktail finder

The collection ID is cocktails and the partition key is ID and here

I just I just stored three entries so that you can kind of see it. So it's not too much to discover here

But when I'm adding all of these things, I have Moscow Mule I have the ingredients. I have the directions and the type of glass

Anything with an underscore?

Prefixed in the key is not something I made up

That's something that as your adds in for you after you've created that

So that's all the things that don't have the underscore are things that I added

So we're going to go back to our function to our server list function and in integrate again

We're going to go over and page down until we get to as our cosmos DB and we're going to select that

so one of the bindings that we have in the function

the function really gives us this index J s file where you're gonna write your J s

And then it also gives us this function JSON which allows us to add any bindings that we need

So it's going to add in some prefilled data for us as soon as I click that integrate

But the things that I added in were that database name, which remember it was cocktail finder the partition the collection name

which is cocktails and the partition key, which was ID remember when I filled that all in

Cosmos TV so we just fill that in here. This is a zoomed in view. I don't know I added this slide

So here is what HCP trigger has out of the box, but we're going to change it slightly

So that we're adding this context rez and we're gonna say that the body is context

Bindings input document input document is where we're going to store all of that data

That's how we're retrieving all of the data from cosmos dB. So here if we're in the portal we can look at the files

Remember I mentioned there's function JSON and index J is a function

JSON has all of those entries here index J s is that function that we talked about? We're gonna run that

And then as you run that you can see the output and you can see

Everything's coming out and we have all of the access to everything that was in that cosmos dB

So here's like the world's most simple view app

We've got a you know a code pen demo that basically says new view for the view instance

I'm gonna store in data just info null so that I can fill it and

In created lifecycle method I'm going I'm using Axios to go over to that

API that we made before and we're going to store the response and you can see it's really messy right now, but don't worry

We're gonna do things with it. That won't make it super messy. We're just getting the data for now

success

Don't tell the porcupine what's gonna happen?

I mean, let's talk about this for a second because it's actually really important in a non serverless paradigm

We'd have to pick something like Express we have to set up endpoints

We have to give your web server secured access to the data's database server. We have to deploy all of it

We created an API in server list with a few button clicks and just a few modifications

This is a really big deal. This is not a lot of overhead. You can create a server list API in like five minutes

So now we have this super fun part where we're going to use that data to output to the page and make our things we

Like app so we go over here to our pages in

W it's very similar to the code pen demo where we've got that created lifecycle hook we're going into

We're using this tile Axios and we're getting the response and then in app drinks Inc. Drink single view

We're going to output all of the ingredients and all of the things that we have inside of that data

So here's what we get a nice API to traverse and create api's that are useful for people liking things and I like tacos

Okay, we have one last thing to do and then I'll set you free for the afternoon

So for the last thing we're gonna do we're going to make a crazy data

visualization with three Jas and some interesting data and we're going to use

Server lists to add more data as we push to github

So this won't work the same way, but now we've been using ACP triggers

But now we're going to basically make sure that it's helped that we're using a github webhook and every time we pushed a master server

This function does stuff for us because we're lazy programmers and we want the computer to do all the hard work for us

Right. We set it up once computer. Does the hard work we never have to think about it again

so as I mentioned before I work for Microsoft as a developer advocate and people often ask where my team is speaking so I made

This data visualization where you can kind of explore this

table as you're typing it kind of filters and stuff and you can see where we're speaking around the globe and we're not

Since we're kind of at the end of this talk, we're not gonna go through so much detail

But there's a demo and repo with open source code. I will tweet out the link for that later today

In a CSS tricks article, so I asked so the most challenging part of creating

This was not three jeaious was not view was not service function. It was getting all of my co-workers to write into an Excel document

where they were speaking so

Eventually that happened and what I was given was an Excel document where I could get JSON data filled with people

Where people were speaking and when in the conference name?

So this is what I started off with

The pay attention to this because we're gonna use it again in a second and we're gonna make the function this time

We're not gonna use the HP trigger. We're gonna use github webhook like I mentioned before

So here we're gonna trip retrieve the geo information for all of those things in the original data

So if you look back at the original data

Notice that we have the location is tel-aviv

But we don't have latitude and longitude and data visualizations can't just work off of the name of things

We have to go get the data the latitude and longitude from Google Maps API

so we're gonna go over here and we're also of course going to error if it doesn't go well, so

given an array of entries wrapped in an iterator

We're gonna walk over each one of them and populate the latitude and longitude using the Google Maps API

so note that we're also going to cache some locations as we make these API calls so we don't have

Redundant calls and after this we're going to check the cache to see if we already looked up this location as well

That's not shown here. That's in the repo. We don't have enough time to go over every single

Step. But so now you can see the function at work here

It's taking all of the locations in the github file and you can see how it's cashing each one

But it's also gathering the new ones and gonna go get the latitude and longitude for each one of those

So in our view X store, we have that JSON file, but as soon as we push the master

It's going to go through all of them

See if it already has those entries and if it doesn't it's going to update the file like that

So every time it sees one it's like oh you have no latitude and longitude. Here you go

And then all of the stuff is automatically updated and so is everything so is our data visualization and everything

So here remember how that table was being filtered as we typed if you're not familiar with view

This is a super cool thing because with a lot of other frameworks you have to add, you know

functionality in order to make that kind of stuff work

Down shift for react by Kent C dog Dodds is a really great way to get that working and react

But we have it kind of built into view

So it's using a computed property computed properties are really great. Because what you're doing is you're storing your data, right?

It's kind of like get initial state and react we have our data

But computed is another way of looking at that data. We're not actually modifying the original data

We're simply getting a new view that we've programmed into it

And that means we're also able to cache the logic based on the dependencies, which makes it super performant

You'll notice when you type into one of those inputs, it filters super fast as soon as you've typed something

It just goes right away. And that's really really cool part of you and using computed properties

So here's I'm using some reg X to make sure that I don't care about

Capitalization because people don't really care about capitalization as they type and then I'm basically filtering based on what they type

So here we also are making this entire table with just some V for directives

If you're familiar with angular directives, we'll be familiar with you. It's kind of like a for loop, you know, very basic

And here you can see it in action if I pick the conference and I start to type you see how quickly that

Update suggests on a couple of keystrokes that's all the code that it takes to make that work and I didn't add any

Dependencies in computer properties are so powerful

Especially if you have to look through a lot of data

Okay, so you might have noticed on our globe

We need a pin for each latitude and longitude, but that's not all we're doing we have to make it longer for repeat instances

So we'll check if the location already exists and if not, we'll increment it

Otherwise, we'll make new values for them

So we'll use this data in this format to feed into our globe visualization. And yes, it's not functional

But you can see here in well, maybe you can't see in the comment this way of writing

It is actually more performant than functional. If you don't believe me, we can arm-wrestle afterwards

I promise you I test it. Okay

So in three J s in order to work with it, we're going to mount it into a single element. That's how that works

We're going to mount the whole thing into a single Dom element

The code to create the globe is fairly large. So I'm going to use a mixin to create the whole thing

and if you're not familiar with mix-ins

They were deprecated and react a while ago view like some react doesn't whole thing. Anyway, this is not a political talk

on

Mounted it isn't important. We remember we were using created before that lifecycle method in order to call things

But we have to use mounted here because we have to make sure that it's mounted before we actually call that mixin

and one thing to note here is that I also noticed that

By loading the texture previously and then adding it into the mixin

It's slightly more performant because of the way that those in asynchronous calls work

So just letting you know that that is a little bit more performant way of handling three j/s

The other really cool thing about three Jas is you can change its geometry

Super simply not that you'd want to do this

But if you wanted to make an icosahedron instead of a sphere out of the earth

You could totally do that in one line of code just by changing it around three J

s might look a little tricky but once you get it working has so many so many cool abstractions, and it's

Super powerful and really fun to hook up with things like view

Server listen view allow us to accomplish a lot without a lot of infrastructure

It's so cool how these technologies work. So well together and allow us to accomplish a variety of tasks so quickly

I hope this helps you get get you paired with server list and view

technologies really fast in the future

Thank you so much

You