[Music]
hello and welcome to a live stream of
dungeons la my name is jason lahara and
i'm not going to move my laptop
in fear of messing up the hdmi
connection but i'm here live with a
bunch of people at codesmith's office in
venice say hello
hey
i'm not alone all right uh and i'm gonna
share my screen
uh
and present all right just infinite
infinity of screen okay
um so yeah uh my name is chase lahar and
uh tonight we're going to learn how to
build a
tender tinder-like uh carousel so this
app that you see on the right this evil
tinder uh you might see some faces or
some things that you recognize um some
evil characters uh so we're gonna build
this app it has uh a uh like and note
button um that we can say yes or no uh
and then it has swiping as well so if we
swipe left uh there's this little nope
animation that comes up where if we
swipe right uh 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 um before we get into
it i wanna say thank you to our sponsors
so uh here is uh here where we're
hosting tonight is code smith if you're
not familiar with uh codesmith
definitely check them out good smith dot
io um they are not a boot camp they
focused on
programmers who um especially self
taught if you're like me and self taught
and then you want to kind of up your
skills and go to that next level of like
developing your software engineering
your programming your
machine learning skills that's all
things that they focus on
so definitely check out codesmith.io
they have offices obviously here in la
and then new york and then oxford
university as well
and then my employer i'd like to thank
them uh is betovi we're a javascript uh
consulting company we
have a wide variety of clients from
small non-profits and startups to
fortune 500 companies that
we saw and we sign ndas with and can't
talk about um we build apps for them
we have a team of developers i'm one of
them
and an awesome user experience team um
so we tackle design uh we we tackle
building applications from both like the
design and the development so check out
thetobii.com
and that brings me to like why we're
here today and what i do uh so i said
i'm jason i'm part of the core team that
develops a bunch of open source tech for
betovi uh that includes canjs john js
clgs et cetera so we're going to use kjs
today
to
kind of give us the tools to build our
application um and k andreas is
a client-side javascript framework it
has its roots going back 10 years ago in
a framework called javascript and bc so
it's been around a long time um but it
makes it really easy
from to build simple widgets all the way
up to scaling to large applications and
this is how we build
uh apps at bitobi um so it has three
kind of main principles um and
make sure that my screen is as large as
it can be okay
um so basically the the core concept of
kjs is you build components and a
component is a
a tag a custom element tag so when you
put that tag anywhere in html that that
tag gets upgraded into a custom element
or into a component
and it's rendered with a view so you'll
see between the tick marks this is what
we call a can stash view who's seen uh
like handlebars or mustache before
yeah okay so
um it's a very it's a similar syntax
where wherever you have
double curly braces like this
that means that that value is going to
be replaced with something dynamic so
we've got the double curlies and count
and kinsash also has a binding syntax
for listening to events
so this on colon
will listen to click events double click
mouse out just any dom event that you
can think of you can put there
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 tags they're
rendered with a view and then the third
part is um that's backed by a view model
so a view model it's 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 uh that starts off with
an initial value or a default value of
zero and then we have an increment
method
so that when um the button is clicked
it'll call this method in the view model
and we can put whatever logic we want in
there so in this case we're just
incrementing our our count
um and that's it this this is how we
build like simple widgets this is how we
scale up to
entire
web applications that are built from
these principles so if you have custom
elements that are components
that have a view uh that are rendered
with a via model for all of the
properties and actions
that's it any any questions comments
before we move on
yeah so um view and react in angular and
kmjs and ember like there there's
yeah there's
so so when um the toby started 10 years
ago there was no view or angular or
ember or react so we started developing
our own framework and from there it's
grown into what we have today with canjs
so yeah
yeah um there's other companies that
contribute to
um canjs and other frameworks um but
we're the major contributor so
um and why like the
um maybe a little bit
yeah um and we can definitely get into
like specifics of like what are the
trade-offs and and um
like why you would pick hopefully from
just going through the
um going through the um building an
application today you'll get a feel for
like
oh what you like about this framework
hopefully it's all what you like about
this room
um
cool any other questions
no okay uh so take your laptops
everyone's connected to the internet uh
go ahead and go to candidates.com
and
uh on the left hand side
uh that's kjscanjs.com
um and then on the left-hand side you'll
see a
a guides link and then under the recipes
section
there's a tinder carousel
when you click on that you'll end up on
this page you can also search for it if
you're feeling fancy search for tinder
it'll come up
can i have
a
stop
when that page when everyone's on that
page
go to kjs.com and then guides and then
under the recipe section there's the
tinder carousel
everyone good
do you have another browser do you have
um
uh firefox or chrome installed
you don't okay
um
we're just looking here i mean that
could be pretty good
yeah
that that might be the issue yeah um if
you're able to download um a newer
version of like chrome or firefox
um
and go from there
um
cool sounds good
um okay so basically how tonight is
gonna work is we're gonna go through all
of these steps of building the app that
i demoed a little bit earlier so we'll
uh we'll set everyone up and then we'll
go through these steps of like showing a
current and a next profile image adding
the um i think it was a heart i can't
remember what is the like button yeah
the like button will add the
um the x note button and make those work
we'll um make the
like sliding and tracking mouse events
work um we'll have the overlays we're
going to do those all in
in steps
so i'm gonna talk about the the problem
that we want to
tackle
the
um give you everything you need to know
to try it out on your own and then i'm
gonna give you guys five or ten 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
uh copy buttons in the like upper right
of all of the code examples so
don't fret if you
it 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 setup section you can
do that from like clicking the nav or
this nav or just scrolling down to the
setup section and you'll see
an almost completely blank
code pen and click on the edit on
codepen
button in the upper right of that so
they'll open a codepen um the html field
should be blank the css we're not going
to worry about styles at all that's just
there for us to utilize
uh so i'm going to collapse that
um but our js let me bump this up js
we're going to write a lot of js in here
so um we'll we'll expand that up
um
cool everyone have their their code pen
open you don't have to sign up or
anything just open it we'll edit away
um cool so let's go through
uh what the javascript does
it's
fairly straightforward who has seen the
es6 import syntax before who has seen
this like import
yeah so
um until recently the best way to load
scripts was with a script tag and
that
puts something on the window and you
start using it
which isn't great for maintainability or
modularity or what have you um so in
canjs you can use the um the native
import statements this isn't running
through like
uh
webpack or steel.js or any of the other
bundlers
it'll load this file and then import
this module out of it so components is
basically all we need to build a kjs
application
um so we're gonna we're gonna make heavy
use of uh of component tonight um so the
first thing that i want to do is kind of
similar to what we had on the home page
i want us to
create a component
we're going to create an evil
tinder custom element
and when that is in our html i want it
to render
uh
to render this html so
you might tell me okay well i can put
that html in there and then it's done
but we're going to want to make this
dynamic we like right now
the current and the next it's all
hardcore coded in there so that's why
we're going to want to have that as a
component in our javascript
uh so what do we need to know okay so
we've been through some of this already
so we can use components and we'll use
component.extend
and we'll set evil tender as the
excuse me as the tag
so when we have
you know brackets evil tinder in our
html the component will take over
um and then in our view we want
everything up here so i would make heavy
use of this copy button you can copy
copy that html and you're going to want
to put it in your view and then
viewmodel we don't need it yet there's
nothing dynamic yet but go ahead and
toss that in there because we're going
to be adding properties and methods and
stuff
pretty soon
so go ahead take a couple minutes on
your own
to create the evil tinder components
that has
this html rendered as its view and then
we'll go over a solution together in
a few minutes
do you want to try to
okay
and always feel free to raise your hands
if you have any questions throughout the
night
i'm happy to help
foreign
okay
uh
it might just be the styles
[Music]
oh here we go
okay austin thank you
is
i'm sorry
i think the browser is just old enough
that yeah
that's not gonna load
sorry about that
who feels like they're coming to a
solution they've got got it working
got one two three four
five
it's most people
okay cool let's let's go through a
solution together
um
who wants to get me started
who can give me step one
or their step one there's no
it's no actual step one
yeah let's do it okay
all right so what are the three things
uh which is evil tinder
all right
i'm gonna totally copy paste this
from over here
if you're ever frustrated with the
alignments in
um in the editor
um at least on a mac you can
hold down the shift key and then click
to another
um another like place on the document
and then you can
tab everything all at once
that's why um okay so we've got our view
and then what's our last thing
yeah let's add that
it's just gonna be an empty object
okay we don't have anything rendered yet
what's our last step
yeah
so in our html we'll put
evil tinder
boom all right
i'm gonna collapse this because we
we don't need this anyway all right all
right so we've got our
uh we've got our custom element we've
got our view
it's actually rendering and page this
looks good who has questions comments
anything you guys want to talk about
before we move on to the next step
nope cool
all right so
uh if you okay so if you keep scrolling
down on the page uh you'll see the the
solution uh section um i'm gonna just
add a habit i'm gonna copy paste this
every time just to make sure i have
exactly what's uh what's there so i'm
gonna i'll delete what's in the
javascript and paste in and then i it's
probably exactly the same uh but to make
sure we're naming things the same
um okay
uh
next okay so we wanna show so right now
in
um in our app we have this um
this current image and this next image
hardcoded and we want to make this
dynamic so we want to have an array of
images so these are all of the urls to
the different characters that we have so
instead of having these hard-coded we
want to put this
in our viewmodel and then show a current
image and a next image so our current
image will just be whatever is first in
the array and then the next image is
what's next in the array um
so what do we need to know okay so
um
we we already actually talked about this
a little bit so when we have properties
in our view model
those are made available to us in our
view so in this example we add a
profiles property
basically all of the the keys and this
object
are the properties that we want to make
available
so we have this profiles property that's
available to our view and then
this bit is kjs specific so we're saying
the default or the initial value for
this property is going to be what's
returned by this function um so this
little bit of syntax is the like is the
like getter syntax in es5 es6 yes
yes what i i don't remember which uh
which spec this was added in um so this
is saying okay this this default is a
function that returns um returns an
array um so in this case we just have an
abbreviated version we just have the
uh an array of a couple of things um
and then
uh
the
next thing about that is
the um so in this example the profiles
in the view comes from the view model
and then there are helpers for
um being able to like do stuff in the
template so we're not gonna go through
all of the docs but there's uh helpers
like if and each and things to um to be
able to like do loops or conditionals or
that sort of thing the other question
yeah sorry can you go over that again
yeah so this so this view model has all
of the like properties and actions that
are made are made available to our view
and then so for properties um they
basically have a like type definition so
um this is kind of like setting up what
that property is going to be like
so we have a this default getter is
basically whatever the initial value is
for the property um there's a couple of
other we'll we'll kind of get into a few
other things
that we can put in this type definition
of like
getters and setters and and that sort of
thing but to start off we're just going
to have uh this default method does that
make more sense yeah does it um does it
have anything to do like is there any
cores issue if it's getting
images from a different source
uh there shouldn't be and um we uploaded
all of these images to github's uh
server specifically because their server
is meant for
putting images you know wherever you
want um so that's why
there shouldn't be any issues with
loading these
good questions yeah
yeah okay so basically um in our stash
templates wherever we have
um curly braces or double curlies um
that's where like stash is taking over
and it's going to do something special
so like here we have the double curlies
and then we're just printing a
property value and that's kind of the
most simple case and then second to that
is whenever we have the
hash this means okay i'm calling like a
helper function um that's
that's made available by the like
templating engine um so
there's a bunch of different helpers
like each hash if
uh
just various things um and we'll we'll
go through a few of these
does that make more sense sweet
cool
any other questions before we
okay
so
we've talked about
um
we the images that we want to show
we've talked about adding something to
our view model to make it available to
our view
um
and uh there's so one more
kind of syntax that you can have in your
view model is this getter syntax so this
isn't specific to ks if you've seen the
getter syntax and
again es5 es6 i don't remember which
spec
um this is just saying okay
this is a property name and then this is
a like getter function for that so
whatever is returned in this function is
going to be the value of that property
um so we could have done the same thing
up here where this could have been like
get profiles and then just returned the
array um it's a same
or a similar idea
um so this is going to be helpful for us
because
you can imagine there's a current
profile you might want to make a next
profile and then
this is how you can get something from
the profiles array and um and return it
as the value
so you can create a like next profile
property that gets the like second thing
cool any questions before
i let you loose
no
okay
take a few minutes uh
try and make
the
um let me go back to the html try and
make this
uh
this current image and this next image
dynamic
with stuff that you put in our in the
view model so you don't want to have the
hard-coded like image source here
you want to have that be some value that
you get from the view model
and again please just put up your hand
if you have any questions i'm happy to
explain more
um
oh
all right
okay
uh
foreign
um
foreign
okay
so
uh
um
who feels like they're starting to come
to
a little bit of a solution
yeah all right we'll go through it
together then
um
who wants to get me started where where
should i start from here
the images
change the word sources
okay
uh sorry say that again
so
is
okay
should we do the same for
this guy
uh
i'm gonna call this next profile.image
okay
i like where this is setted what's next
did you need to create
yeah let's do it so
uh should we start with profiles or the
current profile in next profile getters
uh
oh
all right let's do that so we'll do
get
uh current profile
uh so this is a kind of standard syntax
uh getter uh so in here we can return
whatever we run we want uh who's who's
got a line for me
should we return uh
yeah so
we'll need to define this profiles
proper property but yeah
so this top profiles.get
we'll do the same thing for uh next
profile
um so we'll have a getter for it
and then we'll return the stop profile
so i've got
one
since that's the second thing in the
profiles array uh and what's our last
one
it's the last little bit that we need
all right
yeah
so
uh we could
say like get profiles
and
return
this array so that's one way of doing it
what we showed in the like what you need
to know was a little bit of a different
syntax
of
saying okay we're going to have a
profiled property and then this object
is what defines what that property is
like so
in here
this syntax kind of gives us a lot more
options of what we can do so we could
have the same thing as the getter syntax
uh
with a
with a get method that returns the array
uh i think what we actually want to do
is just
define a
default value
which is going to be the array so the
difference in like a default versus uh
get is that this is saying the this is
an initial value it's not going to
change you can modify this property
but
if you need an initial value or a
default value then here's one for you
whereas the get is saying
anytime you access this property here's
what your
here's what we're going to return
um okay so
uh see if this actually works so in the
in the problem section
it says
um we can kind of play around with the
consoles to see if this like actually
made it dynamic right it looks the same
i guess we could
one way we could do it is we could
remove stuff from here and see if it
updates correctly okay so that's that's
one way of testing it another way is
uh codepen makes a console available to
us so in the bottom left there's this
console button you don't have to do this
you don't have to follow along along but
i want to show it um so
it has there's this console button that
pops open this little section and then
we can
paste in what we had before so this is
saying
document.queryselector this is like a
native dom api
native browser api that says i want to
give you a css selector and i want i i
want a single element that matches that
selector i want the first element that
matches that selector so we're getting
our evil tinder uh custom element um and
then on it is a viewmodel property and
then we've got all of the data that's in
our viewmodel so the same thing that's
rendering the view is in this viewmodel
property so we're accessing profiles and
then we can call shift
which
i have a hard time
bringing
and splice the array methods shift is
the one that pops off the first thing uh
from the
the first index of an array or zero
index of an array
so when we run that in our console um
that'll actually like
modify our viewmodel which updates the
view automatically i'm going to do that
again do that a couple times we're going
to write code that does
the same thing
uh any questions before we move on to
uh probably adding like and note buttons
any questions before we move on
no cool okay um if you want to you can
do the same thing that i'm going to do
every time under the solution there's
the copy button
and i'm going to replace all of this i
think it was i think it was basically
the same thing
in a different order but same code
um
okay
we're gonna add a like button okay so
when someone clicks on the like button
which is this this heart this green
heart button uh at the bottom uh we
wanna console log
liked and then we want to remove the
first profile image the same thing that
we were doing in the console earlier we
want to remove the first profile image
so it comes off the stack
and then show the next one in the list
so what do we need to know well uh just
like the example on the home page we can
use on
colon syntax to listen to whatever event
so we can listen for
click events on that like button um and
then
inside here is the method in the view
model that we want called so this isn't
going to like call that method as the
template is being rendered it'll call it
once
once the button has been clicked
so in our view model we can define
a an action or a method like this and
this is just kind of standard syntax for
um for defining a a method so um we can
have do something it can take arguments
so like in this example we're passing
dance
uh from the view into the view model and
then when that button is collected we'll
make the alert um and then the last
thing shift shift is what you're looking
for to pop off the
zero index uh
of something in an array
um that's it go ahead and take a couple
minutes any questions before we
break for hack
no okay cool so you want to make this
you want to make this like button
actually like do something
so
all right
come on
um
uh
who feels like they've come to a
solution
take another minute and then we'll go
through a solution together
so
here
foreign
all right
who wants to get me started with a
solution
what should i do first
uh
define the function in your viewmodel
let's do it what do we want to call it
um
i'll go with likes profile
okay
uh so we've got our
method
uh inside here what do we want to do
yeah oh you want console.log as well we
can do both
so we'll do a console log uh i think we
have all caps liked
and then
um this dot profile slash shift so um we
haven't quite gone over it nope
nope
oh that was exciting
we're
we're having screen issues all right
there we go
that's okay
uh let me switch back to
not showing my face
sweets
and then let's
not have this be a million times smaller
oh
sorry guys
uh
[Music]
sweet okay
all right
i think we're back on track
i get this right okay
uh okay so um one thing we haven't like
100
talked about but now is as good of a
time as ever so this this
inside the
inside of like these scatters and this
action this always refers to an instance
of this
view model so essentially what ks does
is it takes this viewmodel
object and it uses it as
uh as like the base for creating new
instances of the v model for each
component so
in our app we only have the one instance
of
um we only have this like one evil
tinder but if we had multiple evil
tinders in here
they would each have their own instance
of the view model so if we
swiped on i don't know if i can actually
show this
so if we like
um
oh we uh can i show this not yet okay um
so if we like made modifications in one
component it wouldn't affect the other
it's a new instance of the view model
for every
every like html custom elements that's
in the page um so that's what the this
refers to
um
that's what the this refers to inside
here
um so okay so last thing we need to do
is actually hook this up
um so on our like button
i'm gonna add the on colon click
and we're gonna call like profile so now
when we click on
uh when we click on the heart uh we've
got the first one disappearing and then
in our console we can open up the
the uh codepen console and we'll see
lights lights light
for every time let me clear that for
every time that we click on the like
cool any questions
any comments
nope
okay
let's create a nope button i'll give you
guys a minute or two and do basically
the same thing just hook up the note
button maybe add a console log that says
noped
uh
actually i'm gonna copy paste the
solution so we're all on the same page
yeah this one had its method called like
so go ahead and create a
working note button
so
where's there no button working
sweet
let's make this one work okay so
just we'll have our note method let's
say
note
um we're going to do the same this
profile shift we're not doing anything
special there we're just removing the
top one and then
on our
disk button we're going to say on click
nope
and call that method then when we open
the console
we should see when we click liked we've
got liked and when we click nope we've
got
notes
sweet any questions
all right now we're gonna make this
more interactive not just button clicks
now when we swipe on these images we're
actually gonna move them left and right
so
let's go through what we need to know
for that oh actually i'm gonna like
always i'm gonna copy the solution make
sure we're all on the same page
sweet okay um
so dragon move the profile to the left
and right so
when
as the user drags left or right the
image will essentially kind of just move
left and right we're not going to do
um we're going to keep it simple we're
not going to do like complete tracking
of like wherever your your mouse or your
finger moves
we're just going to move
move horizontally
we want it working on desktop and mobile
so if you were to pull out your phone
this would actually like work on your on
your ios or android device um
and the element that we want to move is
the current one so we're gonna
specifically
like we specifically want this div to be
the thing that we're moving back and
forth we don't want to move
like anything else in our uh in the dawn
um so what do we need to know okay so
the first thing is that the way that
we're gonna move it is just with css um
so we're gonna
assign a left style
essentially to the image to
to move it back and forth so essentially
this would be similar to
if you oh that is not readable
oh that's also not readable
um
move
this
okay so
this is the same as saying
this this div that is the you can kind
of see on the right that it's
highlighting the current image so this
div is what we want to manipulate to
move back and forth so if we if we give
it a left of 100 pixels you can see that
it'll it'll jump that way and then as we
as we change this value that's how we
can have the image like be moving and
then essentially if we
go into negative values it's the same as
like swiping left so positive negative
values are all allowed here so we want
to do this except with javascript and we
want to be able to
have that actually track where the where
the mouse is moving
um so to do that
um
oh sorry last thing is that so we can
um so in our in our view model we can
have like a
left property or how far we have moved
property and then render that in the in
the view
with the double curlies so
just like a normal html attribute
and then inside there we'll have the
double curlies for the viewmodel
property
so we'll do that we'll define
how far we have moved as a number again
the viewmodel is just
whatever is to the right here is just
saying
like a type definition so this is a
shorthand to say
number or string or at any value or what
have you
the next thing is that we're going to
need to listen for when
the
when the current element moves that
current div when it moves um so kenjus
has this way of um of listening for
events or
let me take a step back kjs
has a way of being letting your code be
notified when
the custom element has come alive or
it's been inserted into the page so
all of these view models are like new
unique instances and when a new one is
created for an element that's in the
page this connected callback
uh method is called on your viewmodel
and it's give and you're given the
custom elements so in our case this l
would be this l variable would be the
evil tinder custom element
um so this matches the custom elements
spec so
this isn't
basically ks matches what is
um what is specified in the custom
elements spec um so connected callback
lets us know okay our element has been
inserted into the dom which means we can
start like doing dom related things um
so we can get a reference to our
to that div to this
where is it to this uh current div
by using
the query selector
method that's on every html dom element
um
um so that's how we can get a reference
to current
and then
kjs gives us a way to listen to
events and before i get into the kanji s
part i want to talk about
um i want to talk about events so
for years there were just desktop
browsers that had events like mouse over
mouse out mouse move mouse mouse all the
things right and then
started having mobile browsers and there
was a different api that was implemented
that were all touch events so instead of
mouse
mouse events it was all touch events
and eventually
most of the browsers came to a consensus
to implement uh what's called the
pointer events api so this is uh
this is a standard api that essentially
melds together the mouse and touch
events
and puts it into pointer events so like
mouse down there's a pointer down or
mouse move there is a pointer move of
course not all devices are going to fire
all of the same events right like
there's um for stuff that would be
related to hover you don't have like a
hover state in
on mobile right but
um for
um for things where there are there is
an analogy there's uh pointer events
um every browser except one has
implemented the spec
that one browser is safari it's not
internet explorer it's safari actually i
don't know if internet explorer ever
supported it i know edge supports
pointer events uh safari on desktop and
mobile uh they so far they have refused
to implement this spec um so we can use
what's called a polyfill who's who's
heard of the term polyfill before okay a
few people so a polyfill basically says
okay i'm going to write javascript to
mimic the same apis that are native to a
browser if they were to implement
those apis so
um
in our codepen i actually already set
this up so under settings you'll under
javascript i added this pepj
pointer event
uh
i can't remember what the p stands for
uh it's a polyfill for uh for safari so
that's already loaded if you pulled it
out on your on your phone um on an ios
device it would just work um so we're
gonna be able to use these pointer
events and just not give any cares about
safari support
so
we can listen to these events with some
apis that kjs provides
so
this dot listen to
is an api inside of our view model that
lets us provide the three things the
object that we want to listen to the
events that we want to listen that are
being dispatched from that object and
then a callback when those events fire
so
in our case we want to listen for
um we want to listen on the current div
whenever there's a pointer down which is
like a mouse down or a touchdown um i
don't know if the event is actually
called touchdown but uh we want to
listen to a pointer down event and then
when that happens we'll we'll have our
code um we'll have a callback called um
we already talked about the oh the p
stands for polyfold uh pointer event
polyfill that's pepjs
um
there's a couple of attributes that we
need um so you noticed earlier when i
was when i was dragging with our code as
is like the browser will be helpful and
be like oh you're
you're like dragging an image let me
give you that to you so you can put it
somewhere else or whatever we want to we
do not want the browser to do that so
there's a couple of attributes that we
can that we can add so there's a touch
action on um on mobile devices
and then draggable or draggable false
is what we can use for desktop
browsers to say don't give me the
default dragging behavior let us handle
it on our own
um and then
the
so inside we we already talked about
like listening to pointer down events so
inside of our callback um we have access
to this event variable that's passed
through our callback
event has the super
useful property of client x
which is the current position of the
pointer device mouse or finger or what
have you
so this is what we can use to see where
the mouse is
currently so that's going to be super
helpful because when
there's a pointer down event
we can grab the
event.clientx and have that be our
starting place and then when we receive
any other pointer events for the
um for the movement of the mouse
that's how we can calculate the delta
between our starting place and then
wherever the user currently is which is
how we can do the the left positioning
essentially
so
this will be so in pointer down we can
listen for
that to find out the like initial value
and then we can listen to pointer move
to
when the like mouse is actually moving
or your finger is actually moving across
the screen
uh this is a little bit different so
pointer move so
here we're listening on documents
anyone want to guess why we would listen
on document instead of currents
it will be for
a while and then eventually you're going
to be moving off of it
and or you would otherwise be moving off
of where it is initially positioned
and then
you lose track of those events um so
that's why we want to listen anywhere in
our in the
document body we want to listen for a
pointer move um and that gives us access
to that same client
on the event
um okay
so what would happen if you put it as
fun
yeah which i think for us it matters
that if you start dragging and then if
you drag off of where the
um the image would be positioned then
you're not going to get those events
fired so that's why it matters in our
case
uh that was a lot
that we just went over so i want to take
a quick recap so what we what we want to
do right now is
um we want to add that style
that left style
so that we can move the
move the current image left or right and
then we want to
set up this
the property in our view model we want
to set up our connected callback so that
we can add these
this dot listen to callbacks and we want
to listen to pointer down as our start
pointer move
for
um as the user is moving um and there's
a couple of html attributes that you'll
need to add to the image to make sure
that you don't get the like default
dragon behavior
um
it's gonna be real awkward because at
this point there's no like pointer up or
whatever the event is for like letting
go so when you have this working
it's just gonna keep on like after
pointer down it's just gonna keep on
following your mouse that's okay we're
gonna we'll we'll do that in the next
step
any questions
for you
back on your own
cool we'll take longer for this we'll
we'll take like
at least five or ten minutes
and please feel free to raise your hands
if you have questions
uh
thank
foreign
so
i
uh
okay
oh
um
uh
um
we have ours here
um
in terms of like what actually happens
when you're swiping
um i'm sure so
um
they
i'm guessing that they're loading the
um
so they've got their like back ends api
service um for actually like getting all
the profiles it wouldn't surprise me if
a lot of the
basic mechanics of like
fetching a list of like 10 or 20
like profiles
is similar to how like we have our array
of files and then as people are um
swiping they're doing the same thing of
like
you know removed from their list of like
local profiles that the device has
and then
um you know when a person likes her
or swipes left or right and they're
sending that
they're making api calls so we put a
console on but they'd be making
an api call to say okay this person
likes or didn't like and it's been a
while since i've used tinder but
if i remember correctly
it'll immediately tell you if it's a
match yeah okay
so
they could do that a couple different
ways where maybe
after the swipe is when they make an api
call to know
if it was a match or not or maybe they
already know
maybe they already have it in clients
that
if they swipe right it'll be a match
or
if they swipe no then it just keeps on
going through this and then it would so
then there would probably be a different
api for the messaging part where it's
like okay
both the wicked witch and them both
swipe right and so then that would grant
them access to
position yeah whatever yeah exactly that
would be my guess
else has questions that i can help
yeah i just have a question on i know
it's
certainly connected but that's
uh
like a reserved word by the framework
so what if
you just add
oh yeah
you could
you could actually start breaking
the logic up so
like we're just gonna throw everything
into connected callback but remember so
this this this is the instance of the
view model
so you could have other methods uh that
are defined in the model that you call
from connected callback
having like just like
yeah
okay gotcha yeah for sure
all right we'll start going through a
solution together
um
who wants to get me started what should
we do first
uh you can change markups
yeah let's do it
what am i changing
um so adding the style
uh
uh property value
yeah so uh what was this called how far
we moved maybe
that's fine i'll run with this all right
uh so we okay so we add the style
property to the current
div the class current div uh so we'll
have this how far we moved
uh property in our view model let's go
ahead and add that so
at the bottom i'm just going to tack
things on to the bottom so at the bottom
we're going to have how far we moved and
it's a number
uh we won't do anything with that uh
okay what's next
what should we do next
yeah let's do that because otherwise
we're not gonna actually be able to drag
so uh touch action it's
touch action none and then draggable
false
okay
sweet uh what's next
and that turns off the default
properties
yeah so now so like with draggable false
now when we drag we don't get the like
default browser
um behavior if we remove the draggable
that's that's where it like
it'll
show the dragged image for us
yeah let's do it okay so
we're gonna say connect it
connected callback
we're given the element which is the
the evil tinder custom element
um so in here we're gonna want to listen
for
the pointer down and the pointer move
events
um so let's say let's not listen to
um oh first we're going to need
the current element
so we'll say current
is
l dot query selector
basically this is saying like we could
do
document.queryselector and then this
would give us
all of the dot or the first dot current
in the entire document but we want it
specifically for our element for our
custom elements so if there were
multiple instances of it in the page
then we'd get the right one
um so we're going to do currents and
then we're going to listen to we want to
listen on current
for the pointer
down
and then we have our callback
so when
this is called that's when the user
actually presses down
okay
what should we do next
define a variable to
factor x
yeah okay so
we could do
uh like
um
uh what how how do we want to do this
let's call it start so that's where
we're starting
okay
so we'll have start x
and then we'll assign
start x to
client x is that right client x
okay cool
okay so now we have when
when the user presses down
what's next
yeah let's do that so i'm gonna
copy paste this
move around
okay so now we have
we want to listen to pointer move
and then this is where we can set the
how far we moved
property so
how far we moved is
the
current
is the current client x minus our
starting
plan
x
okay so that should update as we
um
as we move
is that it is that everything we need
hey
yeah that's working
and as expected we can't let go or just
forever forever holding on to it
okay cool was there anything else that
we needed to add i think that was it
yeah
who has questions about what we just did
questions okay it's either a really good
sign or a really bad sign
okay
i'm gonna
uh as always i'm gonna go down to the
solution i'm gonna copy and replace
everything in here
uh
just to make sure everything's
consistently named
um okay
the next thing that we're gonna do is we
wanna show the
the like and then
[Music]
go a certain do is when the user goes
more than 100 pixels to the right
that means they're swiping right and we
want to show the like animation and then
on the other side if we go
negative 100 pixels then we want to show
the
the nope animation so we'll start off
with just the like
and the way we do do this is we already
have the like css and the styling and
i'm just going to hack this in here real
quick this is not what you're going to
do it's similar though uh okay so we're
going to
we have this results div and then if we
if we have it with
liking
if we have it with the liking class
uh that means that it'll
show up
i think so i need to save
oh thank you
okay
there we go
thank you good catch
um okay so when the div the result div
has liking it'll show the like uh when
it has
nope
what is the class we'll get to that
later
noping is it noping
yeah it's an open there we go okay
so
obviously we want that to be dynamic so
we only want to show we only want to
have this liking
class there
when they're actually liking
so we can do that with the
hash if syntax
so this says if
the
this value in your viewmodel is truthy
if it's true or some true like value
then go ahead and add this class and
then we can define a property
for
um for liking for
determining if we've moved more than 100
pixels
give you guys a minute to do this on
your own
while you're at it go ahead and do the
noping as well
liking and noping
uh
wow
all right
uh
okay
uh
who has a solution for liking and
opening
okay we'll take another minute or two
[Music]
now
okay
all right who wants to get me started
with the solution
go for it
um so
in that div class result instead
yeah we can call it enough statement
uh
what are we gonna
uh
double up on liking
okay so
when liking is true we'll have we'll add
this liking class
which means
i should have minimized this earlier
uh
which means
down here we can have our
uh liking
we'll add it with the rest of the
getters
so we can have our liking gutter and
then
here we'll return if
um
what's our property name how far we
moved
what do we want to return this dot how
far we moved is
greater
greater than
equal to 100 yeah cool we'll do the same
thing for noping
like a noping
and it's going to be
negative 100 is that right okay cool
uh and then we'll add our noping class
up here too so
we've got liking
and we've got
noping
all right let's give this a spin
there we go beautiful and then if we go
to the right we still need to add that
that down
or listen listening for up not down but
listening for up but when we move
where's the boundary
when we move far enough we've got both
cool
any questions
comments
well i'm gonna do the same thing as
as always i'm gonna
oh i'm actually gonna go down so these
were two different sections i'm gonna go
past noping
make sure i have
everything up to date um okay now we're
going to get to when we
release our mouse we want to let go and
either if we've swiped far enough right
then we want to
um then we want to log liking and if
we've swiped far enough to the left uh
then we want to log nope or noping
um so
and then
do nothing if we haven't dragged more
than 100 pixels in either direction
right so if we drag far enough in either
direction then we'll like or not
um and then the last little bit is we
want to make sure that we reset things
so that when the user
has another pointer down
that it's brand new and we're not
maintaining any of the state from the
previous mousing around
um so what do we need to know okay so
we've got our pointer up
event for
listening for
mouse up um and then our last thing is
um we have this listens to and then the
opposite
opposite of that is stop listening so
this is a kjs api that says i want to
remove the event listeners from
a particular object or i want to remove
a specific event listener from a
specific object
so when we
in our code right now
we've got this
listened to
on the documents as
we're moving around but we don't need
that listener anymore
when the mouse has gone up right so when
it's down that's when we care about the
pointer move events but as soon as they
go up we don't care how they're moving
their mouse uh around the screen because
it shouldn't be moving anything right we
only care if they've started a pointer
down so
um so that's the that's the last little
bit so that leaves a lot of logic up to
you guys for
what should go in the callback for a
pointer up and when you call stop
listening
um so i'll leave you to it for
for a few minutes
if you have questions please just raise
your hand
[Music]
okay
thank you
rails
oh
um
now
[Applause]
hey
uh
oh
foreign
[Applause]
so
hmm
it feels like they're
coming up with a solution
fish
you guys want another minute
we'll go through cool
okay
plus
so
want me to move those out of the way
oh yeah please do
thank you yeah
[Music]
all right
who wants to get me started on
a solution
what should i do first
pointer up
yeah okay so
i'm gonna
steal some of this code
okay so i'm going to listen to
pointer up
on
not the document
or sorry not current
but on the document for the same reason
that we listen to point or move wherever
i'm going to listen to uh pointer up
wherever they've ended up on the
document
okay
uh what's next
i think we have to redefine how far we
have moved
yeah so
i'm just gonna steal that code and then
update it here so we're gonna update
this dot how far we have moved with the
current client x minus the starting x um
and then
what that does is
when
um we haven't gotten into kgs's
observables and how like all of this
stuff works um
what when you set this property anything
that
depends on this property's value will be
rerun and updated
to have the new value so when we call
this dot how far we have moved and give
it a new value anything
oh oh dear
anything that
oh that is not what i wanted um anything
that depends on it is going to be
updated so
like and nope methods no but inside here
inside of our liking getter and our
noping gutter
um this will because this value changed
these getters will be rerun and those
values will be updated
um so that's kind of how we get all of
the
um dynamic parts of kjs is that it
figures out
everything that your code depends on all
of the observables and then when one of
them changes it only updates the things
that are listening to it so when
how far we have moved changes that
doesn't mean that the getter for current
profile and next profile are going to
rerun that's only going to happen when
something inside it like the stop
profiles changes
so
given that we've updated this what can
we do now
so you want to check if it's greater
than or equal to 100.
yeah so so we could write out
um what is it uh
this how far we have moved is greater
than or equal to 100 that would mean
that we would do we would say is it
liking or is it like
uh like
okay and then we could do
if
uh
that is less than or equal to
negative 100
and then do this dot
nope nope is that right okay so we could
do that but since
the
since this has updated
everything that depends on it we can
just do
this dot liking
and this dot
no pin because those those properties in
our view model are automatically going
to be updated with the latest
so we can we can reuse stuff that's in
rfp model whenever we want
um okay so
um and then our our else case is
essentially we do nothing
um we we don't like or nope if neither
of those conditions are true um what's
last
or second to last i guess
yeah we'll reset yeah we'll kind of
reset everything so we'll
we'll say how far we moved is zero and
then we'll
uh stop listening as well so this dot
stop listening
to the document
so the
both the pointer up and the pointer move
listeners are going to be torn down when
we call stop listening it's going to
tear down all of the document related
listeners that we set up
and it'll keep this one
because the
element is still alive um
one nice thing is
you don't have to manually with this
like listen to
um
syntax with kjs usually you'd have to
call
like add event listener and then remove
event listener to tear everything down
correctly like if the element is removed
from the page um
with kjs's like this dot listen to when
this component gets torn down it'll
remove all of the listeners on that
component and then any of its children
as well so that's why we don't have to
do any stop listening to
current
uh will it work
can i let go it might be too small
oh
not quite
did it not refreshing
you're out of the
what's it called
[Music]
i just uh sorry i just uh
removed everything that i had just done
all right uh let's go through this so
uh yes you're right i had to find
pointer up uh outside of the pointer
down but i actually needed it inside of
the
inside of pointing her down so
um
uh so it would be updated correctly
cool so this should work correctly now
there we go
[Music]
sweet
any questions comments yeah
so um
the if statements that are on 82 to
86 yeah how are those
um
how are those compared to the ones in
the
classroom
so the um
the markup up here the if liking and if
noping is that what you're referring to
um
pretty similar because the
the if um stash helper is basically
serving the same purpose as like if
javascript statements um the kind of big
difference is that in
our template this is being rendered with
our viewmodel so we could do
this.liking and this dot noping it's
redundant right because our current
context is the viewmodel anyway
and otherwise they're the same and then
down here
the
the connected callback gets
um
with the viewmodel instance as the this
or as the current scope or context which
is why we can do like this dot liking in
this dot nokia
because yeah like on 83 we have like
this that like and then above it we have
the
get
get like get nothing which defined like
the parameters for left right
um
so you wait
this code would be optimized because you
put all of the things for those
um in the javascript
like in the in the heat model instead of
putting it in well you wouldn't put it
like all of that other stuff yeah so
that's actually a really good point so
um
one of the things that we advocate for
is building unit testable view models
that have all of your logic so your view
um like our view is
pretty
straightforward in that it has
minimal conditionals and it's basically
just printing out values and then
listening to events um so it's not as as
complex
our view model kind of contains all of
that logic so we can create a new
instance of the view model in a unit
test and then test like okay if i set
these properties that it does certain
things or you can call different methods
um and it's just it's easier to have
that kind of in the view model and
testing it versus
rendering a whole component and then
um you know simulating
different states and events and that
sort of thing
and then
have you had apps that you've worked on
multiple javascript files for this yeah
so
um
most of them have like every component
has its own
um will have its own file um we usually
like when you're actually building apps
you break this off the template into a
different file so you get like syntax
highlighting and stuff like that um so
yeah
we we heavily promote having like a
folder for each component that has the
javascript and the template and its
tests
and like a demo page and
kind of all of the stuff related to a
single component
yeah
cool any other questions
um
how would you handle
getting an api
working with this one you know like
instead of having your images obviously
this year
but if you want to grab those somewhere
like asynchronously or something
yeah so um
can the type definitions have
um
a few different ways that you can define
values so
we we talked about
default
let's say we wanted to
have this be asynchronous
so we could
the api for that is
um
basically
the our get function is given the last
value that it was set to and then a
function for updating that value so we
could do
whatever like ajax request
um to get the data and then
um you know resolve with that data and
then
this
uh this property would be updated with
um with that data
yep
and you can go from really simple like
i i should have said like
you know just using the fetch api to do
something like that or use whatever
utility that you want to kns provides
stuff for
modeling your data similar to like how a
view model models data
excuse me modeling the server data and
then doing fancy things for like
when if you define an endpoint that is
rest liked then kgs can do special
things of like all right i can assume
that when i do a get request it'll be a
list of this and when i have that the
instances will be created into like real
model objects that have whatever
properties that you define and just go
down the rabbit hole but
the most simple thing would be like in a
getter to
have fetch and then get the data
good question
cool
any others
all right we'll wrap up there's one more
step
uh
when we you'll notice that there's a
bunch of characters here but
we eventually
to get to the end and it's just a broken
image
right because
eventually
we get to
we get to current profile but there's
there's no there's nothing in profiles
left right so let's fix that
um so what do you need to know
um
page there's a url for an empty profile
and then you basically want to define
that property and then use that
when you've run out of images
give you guys a couple minutes and we'll
go through a solution
okay
so
uh
wow
[Music]
oh
um yeah so authentication is
uh interesting because there's a lot of
different parts to it right because
most mostly in an app you have like a
single session for the logged in user
um so
you could
um
you could create
a
like a view model essentially or a model
object that represents the user or their
session
and then on that you could have all of
the requests for like
signing in or doing whatever you need to
to authenticate them
and then that that object you would
probably pass around in your application
because there'd probably be lots of
components that
would want access to the current user's
information
um so we didn't get into it at all uh
today but
let me expand this a little bit um
because we only talked about like having
this one custom element that essentially
when you build um kjs applications it's
just
many and many of these custom elements
and you pass data between them um so the
syntax is like html where you could say
like on evil tender if i wanted to pass
in the session i could
say um session colon from and then the
um like session object that's in the
like outer context whatever is rendering
that component would provide
the session so like if this let's say
this is going to be recursive but let's
say
like in this view
we had
another
component then in the view model we
could have a session defined and then
we'd be able to pass that to a child's
component for them to be able to like
see the user's info or what have you
in their
own profile
yeah so most applications yeah so
most of the time you have like one
like top level
app component
um that has
usually it's routing info
and um session info
kind of gets stored in that top level
app component
and then
elements of
like a
good question
uh let's get to a solution who wants to
get me started
um
we could define
the
or do you change the uh current profile
next clip functions for methods
yeah let's do it uh how are we changing
them
um so actually i see here that they just
they didn't work yeah what did you do it
wasn't working for me i tried that okay
so i'm not sure why
uh but yeah i see they're doing horror
which is gonna return the empty profile
um
if
so i'm guessing you had something like
assigning profile to a variable and then
if profile return it
and then otherwise
like
return an empty profile something like
that
am i totally off base of what you were
trying
yeah okay cool yeah which totally works
you can assign
assign it to a variable check if it
is truthy
and otherwise return another property
the shorter syntax that the guide shows
is saying
return this or
return that value which in javascript
it'll be if this is a falsie value then
it'll fall through to the other side of
the or condition
so it's just a shorter way of doing that
same
if else syntax so we can do those for
both of it for both uh current profile
and next profile and then i'm just gonna
steal this
uh
this definition oh that's not right
okay
um
so we can define our empty profile
that's an object that has image
now when we get to the bottom
of this
we should see
there we go
and we see our empty profile
sweet
any any questions or comments before we
go
all right
i want to thank everyone who is here
obviously you guys asked a lot of great
questions
um so thank you for coming everyone
who's watching on the live stream
uh or watching afterwards thanks for
watching and we'll be back in a month
we do uh one of these every like five or
six weeks um and we're always building
new apps for these so if there's
something that you're interested in like
and learning how to build uh let me know
uh either in the dungeon sla uh meetup
group uh leave a comment there or talk
to me afterwards or message me on meetup
so uh thanks and we'll see you next
month bye
hey i'm vj thanks for coming to the
meetup today i'm the organizer for
javascript la i wanted to just
personally thank you for watching this
video if you found it useful i'd love
for you to subscribe to our channel
we're slowly but surely making lots of
little video content for you guys to
enjoy and soak up especially if you want
to get better at programming
i'd love for you to be on our slack
channel too over 800 users the link is
right here js join jsjo.in if you forget
it's really simple if you have questions
for this meetup or you know questions
you didn't get to ask or because you
couldn't make it
we'd love to have you just posted on our
slack group so if you're a newbie don't
worry it's a good place to go there's a
lot of great engineers all connected
around la and orange county so i hope to
see you there