J s L A.

My name is Jason, Laura, and I'm not gonna move my laptop in fear of messing up the h in my connection.

But I'm here live with a bunch of people at Code Smith's office and Venice.

Say hello.

Hey, I'm not alone.

All right.

Uh, I'm gonna share my screen, eh?

Uh huh.

And present.

All right.

Just infinite instead of the extreme.

Okay, Um uh, Sahara.

And tonight we're gonna learn how to build a tender tender, like a carousel.

So this app that you see on the right this evil tender, you might see some faces or some things that you recognize evil characters.

Eso We're gonna build this app.

It has a like and no button.

Um, we can say yes or no on then.

It has swiping as well.

So if we swipe left, there's this little no intimation that comes up.

Or if we swipe right, it'll be the little like And then when we let go, we go to the the next character.

Um, So that's what we're gonna build before we get into it.

I want to say thank you to our sponsors.

So, uh, here here, where we're hosting tonight is folk Smith.

You're not familiar with coats?

Matt's definitely checking out its midst.

Io.

They're not a boot camp.

They focused on programmers who especially self taught.

If you're like me and self taught, and then you wanna kind of up your skills and go to that next level, it's like developing your suffer, engineering your programming, your machine learning skills.

That's all things that they focus on.

So definitely check out code.

Smith thought Io.

They have offices obviously here in L.

A and then New York and then Oxford University as well.

On then, my employer would like to think them eyes.

But Toby were jobs fits consulting company.

We have a wide variety of plants, from small nonprofits and start ups to Fortune 500 companies that we saw on every sign NBA's with and can't talk about.

Um, we build APS for them.

We have a team of developers.

I'm one of them, uh, and an awesome user experience team.

So we tackle design way tackle building applications from both like the design and development, So check out the Toby dot com and that brings me to why we're here today and what I do s I said I'm chasing.

I'm part of the 14 that develops a bunch of open source text for Toby That includes can just Andrea steals gas.

That's ever so we're gonna use Candy s today.

Thio kind of give us the tools to build our application.

And Candace is a client side JavaScript framework.

It has its roots going back 10 years ago, and a friend were called Java script in D.

C.

So it's been around a long time, but it makes it really easy from to build is simple web widgets all the way up to scaling to larger applications.

And this is how we build absent.

But Toby, um, so has three main principles.

And make sure that my screen this is large, as it could be.

Okay, um so basically, but the core concept of kanji s is you build components and the components is a A tag, a custom element tax.

So when you put that tag anywhere in each to Mel that that tank gets upgraded into a custom element or into a component, it's rendered with a view, so you'll see between the tick marks.

This is what we call I can stash you who's seen, like handlebars or mustache before?

Yeah, OK, so it's a very it's a similar syntax where wherever you have double double curly braces like this, that means that that value is gonna be replaced with something dynamic.

So we've got the double curlies and counts.

Um, and Can Stash also has a binding syntax for listening to events.

Eso this on colon will listen.

Thio click events, DoubleClick mass out just any don't event that you can think of, you can put their on.

And then when that event happens on the element, then, um then a method fires, then the last part.

So that's so, uh, custom elements are with tanks.

They're rendered with a view, and then the third part is that's backed by a view model.

So of you model is just a model for your view, like you're providing whatever properties and methods that you need in your view.

So in this case, we have account property that starts off with an initial value, or it's a fault value of zero, and then we have an increment method so that When the button this clicks, it will call this method and the model on we can put whatever logic we went in there.

So in this case, we're just implementing our account on dhe.

That's it.

This this is how we build, like, simple widgets.

This is how we scale up to you entire web applications that are built from these principles that you have custom elements that are components that have a view that are rendered with a view model for all of the properties in actions.

That's it.

Any any questions, comments before we move on?

Yeah.

You know, I would do best in this.

I love you.

Yeah.

So, um, view and react and angular and kanji s and number like that, there's Yeah, there's so and so when Toby started 10 years ago, there was no view or angular or emperor or react.

So we started developing our own framework.

And from there it's grown into what we have today with Kant.

Yes.

So yeah, yeah.

Um, there's other companies that contribute to you kanji s and other frameworks, but were the major contributor.

So, um, and white like the maybe a little bit.

Yeah, we can definitely get into, like, specific stuff.

Like, what are the trade offs?

And and, uh, why you would pick?

Hopefully from just going through the going through the building and application today, you'll get feels for like, oh, what you like about this framer.

Hopefully it's all what you like about this, Rick.

Um, cool.

Any other questions?

No.

Okay.

Uh, so take your laptops.

Everyone's connected to you.

The internet.

Uh, go ahead and go to candy.

It's dot com and on the left hand side, uh, that's candy S e a N J s stuck on, um, And then on the left hand side, you'll see a, uh, a guide slink and then under the recipes section, uh, there's a tinder carousel.

When you click on that, you'll end up on this page You can also search for If you're feeling fancy, search for gender, it will come up.

Can I have some?

When that page in, everyone's on that page.

Kenji s dot com and then guides.

And then under the recipe section, there's the gender gender carousel.

Everyone get Look here.

Okay.

Yeah, that's great.

Yeah, Yeah, were grand.

What?

Do you have another brother Do you have Firefox, sir?

Graham Spaulding?

No, Um, we just got here that I couldn't breathe.

Yeah, that that maybe if you're able thio a newer version that's like from, or Firefox and go from there.

Um, are you just didn't call?

It sounds good.

Um okay, so basically, how tonight it is gonna work is we're gonna go through all of these steps of building that app that I don't move it a little bit earlier.

So we'll, uh, we'll set everyone up, and then we'll go through the steps of, like, showing a current and next profile image, adding the I think it was a heart I can't remember.

What is the light button?

Yeah, the like button will add the, um, the X note button and make those work will make the like, sliding and tracking mass events work.

We'll have the overlays were gonna do those all in in steps, So I'm gonna talk about the problem that we want.

Thio tackle the give you everything you need to know to try it out on your own.

And then I'm gonna give you guys five or 10 minutes for each step to actually try it.

on your own hack away, See if you can get it working, and then we'll go over a solution together.

And after that, um, the site has these really handy copy buttons in the upper right of all of the code examples.

So don't fret.

If you didn't come up with a solution on your own, it's really easy to just, like copy paste and get up to speed.

So, uh, go down to the set up section.

You can do that from, like, clicking the knave or this snap or just strolling down to the set up section and you'll see an almost completely blank, uh, could pen and click on the edit on coat pin, um, button in the upper right of that so they'll open a good pen.

Um, the H e mail of field should be blanked.

The CSS We're not gonna worry about Stiles at all.

That's just there for us to utilize s.

I'm gonna collapse that, um But R j s me jx forget.

Right?

A lot of gas in here, So, um, we'll we'll expand.

Um, school.

Everyone have their They're cooked an open.

You don't have to sign up for anything just open and pull at it away.

Um, cool.

So let's go through what?

The Java script does its fairly straightforward Who has seen the Yes, six imports in tax before.

Who has seen this, Like import?

Yeah.

So, um, until recently, the best wayto load scripts was with a script tagged and that put something on the window and you start using it, which isn't great for maintain ability or modularity or what have you eso in candy?

Yes.

You can use the native import statements.

This isn't running through like, uh, Web Packers steel dress or any of the other bundlers.

It'll load this file and then import this module out of its components is basically all we need to build a candy ass application.

Um, so we're gonna we're gonna make heavy use of of components plants.

So the first thing that I want to dio is kind of similar to what we had on the home page.

I want Thio create a components were going to create an evil, tinder custom elements.

And when that is in our reach, Jim Bell, I wanted to render, uh, to render this each time out so you might tell me.

Okay, well, I can put that html in there, and then it's done rights.

We're gonna want to make this dynamic.

We like, right now, the currents and the next it's all hard court.

Coat it in there.

So that's why we're gonna want to have that as a component in our job description s.

So what do we need to know?

OK, so we've been through some of this already, so we can use components, and we'll use component that extends.

And we'll set evil tender as the excuse me as the tab.

So when we have brackets evil tender in our HTML, the component will take over on.

And then, in our view, we want everything up here.

So I would make heavy use of this coffee button you can copy.

Copy that.

HTML.

And you're gonna want to put it in your view and then the model.

We don't need it yet.

There's nothing dynamic yet, but go ahead and toss that in there because we're gonna be adding properties and methods and stuff on pretty soon s o.

Go ahead, take a couple of minutes on your own.

Thio, create the evil tender components that has this Each game I'll rendered as its view And then we'll go vers solution together and a few minutes.

Do you want to try toe and always feel free to raise your hands If you have any questions throughout the nights Happy.

I'm sorry.

Uh, yeah, we're going.

I'm trying naturally.

Try and see if you get it, You might just do we really see changes you?

Oh, she's you way.

Okay, Austin thinking I think the pressure's just hold it.

It's not going to live.

Sorry about that.

It feels like they're coming to a solution.

They've got.

Got it working.

I got 1234 five.

It's most people.

Okay, cool.

Let's let's go into a solution together.

Um, who wants to get me started?

You could give me stuff.

One.

Are there some one?

There's No, it's no actual step one.

All right.

Yeah.

Okay.

All right.

So what are the three things?

Uh, which is evil?

Tender.

Right.

Come with you.

You sweet.

Gonna totally copy.

Baseless.

From over here.

If you're ever frustrated with the alignments in in the editor, at least on a Mac, you can hold down the shift key and then click Thio another another like place in the documents.

And then you can tab everything all at once.