you've done this to me a bunch of times
now on camera so now it's your turn at
the end of the day I want you to do the
intro all right hey I'm markovansky CEO
from the Masters my background is
building uis I've built like over a
hundred large user interfaces in my
Consulting career and I think the most
famous project that I created was the
jQuery UI day picker and so I've been in
the game a long time built a lot in
vanilla JavaScript built a lot in with
you know every framework probably on the
the back end and the front end so got a
lot of experience building software and
I I love coding to this day and it's so
what you're trying to say is that you
are a front-end Master you could say
that yeah
I'm gonna be in that hot seat again here
soon mark
yeah right there
I know I I don't know how I feel about
it but I'm gonna be there soon yeah
teaching uh blazingly fast JavaScript is
that even possible well bun has
definitely changed the landscape a lot I
just try I literally tried dropping in
an application the application I'm going
to be using on front end Masters I
dropped it in just to see and it's
legitimately the same as like four or
five perf improvements their integration
with set timeout and Promises is so good
that it actually makes promises usable
again the thing is if you have a really
hot path and Promises
like if you have a series of awaits it
destroys your performance it's shocking
how bad it can actually be
absolutely
which I did yeah and then you're
teaching uh htmx after that right we're
doing a little hdmax a little short htmx
course
um I'm trying to still figure out what
application can I do that makes sense
in like a three to four hour
kind of window you know because you can
it's not like you can do a whole bunch
especially you know you're doing a
little bit of go laying trying to keep
that simple plus a little bit of that
you know there's just a lot of things
you have to do to build any one thing
yeah and I don't know much about htmax
maybe you can enlighten me but as far as
I know it's kind of a DSL like for in
HTML for Network requests right so and
then it also has like some interactivity
stuff with CSS but in general
you know it's it's more
the server that's handling everything
right in that case that's pretty fair
that's a fair take that's a fair take uh
effectively it just has a couple data
attributes or attributes on HTML to turn
them into points of change in your
application
and so it can say
where to get the change how to swap in
the change how to reduce the change if
needed and then any version or any
interactivity you want
you can just you can just do that in
JavaScript right so you just have your
JavaScript like so you can build web
components and then your web components
can emit events and htmx can create
server requests based on custom events
it can create them based on right right
so well I guess that is it's a DSL for
essentially like interacting with the
server with data attributes or custom
attributes yeah that's fair which like
our our video player for instance our
promo player we have data attributes on
our promo player or our video player can
be embedded in a lot of different ways
and we'll have data attributes that'll
Define like hey here are the end points
yeah kind of thing and so we can just
kind of
pop in a new video and put it in a
different context it can
we can edit annotations we can you know
obviously have the video player like the
courses player the promo player all this
kind of thing and
um the thing with that though when
you're marking things up with a
declarative
you know I look at like Tailwind as
something similar for CSS right it's
like a set of utilities declarative apis
for you know styling your page in this
case it's declarative attributes for
interacting with the server but then
like what are the Escape hatches
you know that's always like the Crux of
this stuff like how much can you do with
this
data attribute building
the situation and then like what are the
Escape patches because
you know any DSL
like the good ones might handle like 80
of your use case
but then that other 20 or whatever like
I think in hdmax it's like the on
attribute or something like that you can
actually do even more than that this
right here here's an article where
someone made htmx for all their outer
app and everything they thought was
complicated they put into react
so it's like it's just that nice and so
react ends up creating a bunch of
children and ends up emitting custom
events and then the custom event is
listened to Via both htmx and react
depending on how they wanted to do how
they wanted to you know go do something
right so it's a HTML DSL for interacting
with the server so the the server
interaction piece now you're offloading
the hdmax and then the client piece
you're using react or whatever exactly
exactly so it doesn't it doesn't
eliminate the need for like any sort of
UI framework if you're going to do
anything really
complex
I don't think a UI framework even makes
sense this that's my personal take is
that it never actually did make sense to
begin with uh in the sense that you can
break down everything you
at least this is personal opinion here
you can prove me wrong
um which is that you can break down
pretty much everything you do into a
series of server actions and showing it
to the client any of the transitions the
highlighting the the doing things almost
all of that could either be server
driven or just some small bit of you
know JavaScript to make it interactive
right you want something that pops up as
a model well the reality is Modells are
50 of the reason why front-end sucks
because you've created a state in your
application that's virtually impossible
to recreate with a URL and so now you're
just like okay what have I done is this
actually a good idea and what my example
of that is that when you hit the Tweet
button while navigating your home page
you cannot recreate that state Again by
Just Simply Having twitter.com right
because there's an offset into some
dynamically generated list that's below
your model and all that kind of stuff
and so htmx just says if you want to do
those things you kind of got to just go
off and just write your JavaScript for
it if you don't everything else just
works
right so there's like they're Spinners
that's what I'm talking about like 80 of
your app you can is interacting with the
server it can be handled by hdmax and
then like if you have something very
specific that's really client-side heavy
you're gonna need something right and in
our case we don't use a framework so
we're we're obviously you're literally
the perfect candidate
yeah there's no there's no framework at
all on front of masters.com or the new
search thing that we're maybe going to
talk about today that's all custom built
the player the video player the courses
player it uses a
video JS under the hood for some of the
but we can we might rip that out because
at this point like even video is pretty
cross browser we only had that in for
like cross browser stuff so
but yeah everything is custom the only
thing that we implemented
um
we're talking about like DSL htmx being
a DSL for server
communication but um I think for HTML
itself if you want to render Dynamic
HTML
um we use lit HTML so we for like our
data grid component and our search
uh we use lit HTML because you can just
basically create template strings and
throw it at the
uh the page and render it and it's it's
super fast there's no
jsx there's no like X extra data
structures being created it's just like
the perfect
I don't know yeah so if you need to
render on the client like that's the
only thing that we do so here's an
example of htmx this is a purely
client-side interactivity point I'm
doing right here it's Conway's Game of
Life
there you go we're playing Conway's Game
of Life I can pause it and then I can
actually just save
that when installed into a database
so that is htmx this is just the you
know so you can separate out the two
right they're pretty easy to make into
two different items
so it's pretty cool I feel like this is
as good of an example of client-side
interactivity you can theoretically make
yeah and so you wrote The Game of Life
and just pure JavaScript right yeah I
just wrote in JavaScript attached to the
page this is before I try to I think a
web component could be pretty fun to
make this happen I don't know I'm kind
of in between on how exactly you want to
do it but
it's interesting yeah just simple
JavaScript to generate everything
yeah web components are like good to
have like a declarative like I said
we're talking about uh hdmax being like
declarative attributes to talk with the
server like obviously the component
model is cool to like
uh encapsulate code and be able to yeah
have an API of different attributes to
you know have it behave in different
ways but
the only down behind every htmx I would
really say is that when you're first
using it
you have such a react brain that I think
it's really hard like I think you
honestly would have no problem you'd use
it and go okay this makes sense this is
how I do it okay yeah yeah and you just
literally fly through it because you
don't use a framework at front end
Masters at all so therefore you're just
fine whereas you know if all you've ever
done is react htmx is like a really big
jump and it feels Arcane and it feels
wrong and it feels Incorrect and it
feels all these things just because
you're just simply not used to it
yeah I mean you're not used to the fact
that the server has all the control
right where you're the server is running
all the HTML and hdmax right so like if
you transition to something else the
server is kind of the source of Truth
Versus like worrying about client-side
rendering and that kind of thing yeah or
you want to give us a quick uh like
three minute on this little exploration
sale
yeah sure uh yeah we're doing a hundred
dollars off yearly memberships so that's
obviously cool
um and we launched uh
the search feature so if you go to I
mean it's better if you're logged in
but if you're if you go to front of
masters.com and you hit the search icon
or whatever uh we built this
you know super fast search that searches
everything across the platform and uh
the team built it in
go uh with um
AWS open search
and then again the
the client is is vanilla JavaScript with
and someone was talking about lit
uh lit element and we don't use lit
element we only use the lit HTML package
which is the renderer it's it's like
three kilobytes that's that's like the
only
dependency that we have on on the search
and the entire search this interface the
ability to you can click into like see
where it says matches 21 or whatever
yeah
you can click in there and you can see
exactly where oh camel is mentioned in
each video and you can click into that
very specific part of the transcript so
that's super cool so you can actually go
straight to that oh I'm not logged in
but you could go straight to that point
within the video
yeah within the video and so and this
search is embedded everywhere on the
site as well as inside the video player
so if you want to search a course or you
want to search across the whole platform
and again it's like
a thousand lines of client-side
JavaScript like that's it and this three
kilobyte lit HTML package
and then it's built on you know go in
the AWS open search so it's just like
look at that super super fast and
lightweight that's me talking about lrus
I remember saying this
there you go that's actually super cool
yeah go by the way
yeah so yeah the whole site yeah people
constantly ask like how is the site so
fast like
we get tons of comments on Twitter and
Linkedin and all over the place like and
so that's it it's uh
as little JavaScript as possible
and rendering as much
keep it all in the go land and keep it
fast and and go to like we we keep to
the standard libraries as much as
possible
so it's it's that same philosophy like
our CTO kind of has the the same
philosophy uh on the back end is is I do
on the front end and and you know our
entire engineering team obviously
yep all right so what I I got an
important question I get this constantly
yeah everyone even just today they said
I can't buy a subscription to a place
called front end Masters it's just front
end
yeah I mean we started there right so I
spoke at like 60 different conferences
and met everybody in front end and like
taught workshops we're talking about 12
years ago yeah you wrote jQuery date
picker right yeah
anyone that's from that era knows date
picker and it is clearly the greatest
plug-in of all time
well it solved 100 of everybody's use
cases at the time right so it's like it
had every option in the world we're
talking about like declarative you know
markup like in this case it was like you
know a Json object that you could just
throw up you know there's like 50 60
options and they all work together and
they handle every single possible use
case and so obviously the code itself
was like ended up being bloated and we
kind of split it apart and all that kind
of stuff but that's that's 15 years ago
you know 16 years ago something like
that when I think it was like 2000
six or 2007 when I wrote it in vanilla
JavaScript and then jQuery came out and
I was like this is amazing like because
I wrote all these components and
back when you had to smooth things over
with all the crazy yeah there's no
Sizzle backs and all that kind of stuff
yeah
yeah if you don't know what Sizzle is it
just shows that you just don't know the
Pains of growing up there was no Sizzle
at one point you had to make everything
work yourself
absolutely Dustin Diaz's post like top
10 JavaScript functions from like 2005
was like my Bible it was like amazing
anyways so
this is like way way back in the day but
yeah Jake were you I did picker and all
this other stuff
uh you know interacting with uh you know
components and all that kind of stuff so
that's my background
uh teaching on on JavaScript uh back
then and so yeah that's where front end
Masters came from right it was was it
was all about front end and over the
years
over the last 10 years obviously our
audience has grown people have become
leaders and organizations it was just
wild and like you know they're asking
for fundamentals and taking our approach
to you know the server and devops and
all those other places so yeah we have
all that content we have rust we have
Docker and containers and we have all
this other stuff but it's like
man we spent a lot of money to try to
Rebrand and the people are asking like
millions of dollars for these domains
you know and you got to get the social
accounts to go with them and all this
kind of stuff it's you got millions and
then more millions and then more
Millions
absolutely so so without Towers it's an
identity crisis but it is an identity
crisis without telling any of the names
you were going to choose
estimate how much it would have cost you
to be able to switch to a name that's
more generic if you will
oh well the one that we loved it was uh
well over 2 million and that's just for
the site right
so the domain yeah basically he said
we'll start at seven figures
and I was like start at seven figures
are you kidding for this domain so
yikes so it's like okay
if you search on front of Masters or
search front of Masters across Twitter
across LinkedIn across whatever Google
whatever like we've got a well-loved
brand right like people people love the
quality of these courses and so it's
like
to switch is a big thing it's it's a lot
of time and effort from the entire depth
team and
yeah obviously a lot of money if you
want a good domain and a good brand
like and people are just asking
exorbitant amounts for these domains
these days insane so yeah yeah I assume
backend Masters was too expensive as
well
uh back-end Masters does not sound like
a training website for coding
it doesn't have that ring of educational
Pursuit does it
it does not uh
yeah I mean we even looked at we bought
Dev so we have devmasters.com that's a
great one but like there's a company in
Irving California that has like a
training platform or training like
in-person thing and they I think they do
some online things called Dev Masters so
it's like if we rebranded there then
we're gonna get sued it's just like yeah
what do you do man what do you do when
you have a loved brand and people don't
care it seems like people don't care
except for when they first hear about it
you know they first hear about like oh
there's a go course or whatever like you
know initially but in general like our
customers are watching the heck out of
all that content go rust Docker whatever
they're learning it on there so so how
come you don't have uh any little blips
here to help people understand that
right Advance your skills typescript go
rust docker
yeah I think we were uh we changed the
title on like our
our Twitter and all that other stuff to
like front end to full stack and even
when you click join but
where does customer acquisition come
from now
um big red yeah mostly that's where it
comes from big red button
most yeah mostly word of mouth I'd say
it's like at this point 40 percent
word of mouth and I think it's like 30
percent
you know Google and people searching Us
in various
platforms and that kind of thing and
then like
10 social media and the
paid like we do just a couple paid
sponsors and obviously we we donate more
to open source than we spend on you know
sponsors that's good I think that's a
good move um because open source there's
there's only an article every 15 minutes
describing and lamenting this current
situation of Open Source so that's
probably a good move to keep doing that
all right I got I got a good question
for you as a front-end master
what do you think is the most important
thing you should consider when creating
a front end
that's a heavy question
um I think when you're choosing your
tools like like we were talking about
hdmax right like what are the what are
the needs of my app and as it grows like
how do I extend this
like what is my plan to extend it what
is my plan to customize it like you can
start as high level as bootstrap as you
want and like in certain circumstances
and you can get a UI going and it just
works right or or Tailwind is like one
set lower like Shad CDN or whatever that
uh whatever it is it's like a UI
component Library there's all these
layers of abstraction right and whether
using react and you're creating your own
uh your own components and you're
thinking about your apis and that kind
of thing it's like what level of
abstraction are you gonna go and then
as the needs of your app change like how
are you going to extend things right how
are you going to handle that 10 of use
cases uh that are difficult in your app
like and really think about those I
think that's that's where like the
hardest part of I think front end
you know so in our case we chose zero
abstraction we just want to build right
on language patterns because guess what
the code I wrote and uh you know two
thousand
2014 or 2017 or whatever like I still
look at that and I'm like that's great
like we can use some new new features or
whatever from the language and uh it
just lives forever right and so that's
the the uh level of abstraction we
didn't need
the quick wins that you get from
Frameworks in the early stage we'd
rather like think about the problem
ahead of time and just use language
patterns and principles uh to address
things
and then that code will live forever and
it's easily extensible and now it's like
we dropped in the search this search
works with the courses player and so now
we have two custom systems that work
together we don't look at the code and
be like oh yuck it's like no that code
is really fast in performance so we
chose
you know zero abstraction but you can go
one layer deeper and you can go with you
know htmx or then you can go a layer
further and go with you know something
like svelte or whatever
and then uh obviously if you need
something from this giant react
ecosystem or your company uses it or
whatever like you need to be awesome at
that and and understand you know when it
makes sense to use various patterns and
how you're going to escape
um when you know the component API
doesn't match
what you need now how do you escape out
of that and how do you create something
custom to fulfill the the difficult use
cases in their app and so I think that
that's what you have to really consider
when it comes to a front end and
choosing
you know understanding what layer of uh
abstraction you're willing to deal with
and then understanding when things get
hard like where are the Escape hatches
and how can you make those like
difficult use cases uh work yeah you
know we have a lot of those at Netflix
um you know because what people don't
realize is that apps live on until the
company dies effectively
and you rarely get to rewrite very few
companies get the chance to just full
rewrite and so I mean I'm still
considering edge cases when I have to do
some underlying you know performance
Feature work whatever for uh using
unsafe component uh components will
Mount component will receive properties
right we still have a bunch of
class-based components and sometimes
that's the only thing that makes sense
and even though it's not supported in
current version of react we have to make
things supported we have to make things
work out even at that like very far
layer and so it just goes to show that
it's not as simple as people you know
make it and that the needs of your
application or the requirements of the
framework can change underneath you and
now you have to deal with the complexity
of that and so I I get why you'd want to
you know I get why the no framework
choice
can probably in the long run be the best
choice
but I think it's very hard and it's just
not a um
it's not really part of the Zeitgeist at
all to think of things from first
principles but more to think of them
from you know starting way out and like
okay the default choices reacts just
because it's the most popular I'll start
there and then as the problems come up
you have to find exceptionally clever
Solutions around making these two things
communicate like communicating from the
search bar to a video player is
non-trivial in react there's quite a few
layers of abstraction you're gonna have
to hop through to be able to make these
things you know run whether you're doing
you know some
there's a lot there's a lot of things
context would probably be your friend
there but nonetheless you still have to
do a bunch of kind of weird tree
visualizations to make all that stuff
work which is just much harder yeah I
mean that that course as player is
completely customizable you can open and
close drawers you can you know now you
can search and click through you can
take notes you can do all this stuff
right and it's it's like
uh because all that's built you know
custom like it's like it's easy to to
see underneath like every line that
makes that happen yeah right and so
there's no like oh why did this thing
like render a bunch of times and like
we're in an infinite Loop or why are we
out of memory or whatever you know why
why is uh Chrome eating the memory on my
computer or whatever uh because there's
no like double upping what you know
all these libraries talking to each
other in jsx and you know hopping
between Frameworks and all that kind of
stuff it's just like hey look this is
where it happens here's the exact lines
and so yeah people I think the
yeah like you said it's not part of the
Zeitgeist because it's it's not
you know it's just like that's not how
we do things like it's too hard right or
whatever but
I think uh in the long run it's paid off
a ton for us well hey thank you very
much Mark
have a have a beautiful day
you too
bye