00:13good morning everyone I'm Sebastian I
00:16came here to talk today about rapid
00:19application development with
00:22HDMX and stateless uh Small Talk images
00:27in this talk I want to bring uh the this
00:30new cool way to work with small talk I
00:33think it's I I feel it great I feel it's
00:36interesting and I wanted to share how it
00:39uh how it is how it came to be uh how it
00:42is used for uh currently at least in my
00:45in my experience and what's the
00:47potential so let's explore this together
00:52please so a a little of Preamble on why
00:56why doing such a thing or why exploring
00:58this line of thought and this is stuck
01:01um In The Same Spirit you can send an
01:05unarmed Soldier to a battle because that
01:07will be C Marshall you should not send
01:10an engineer to the market without proper
01:14equip equipment so in 2023 what did that
01:19mean um I like uh a guy I like very much
01:23a guy that it his name is um Marcos
01:27lemones uh he's uh an entrepreneur
01:31billionaire entrepreneur but what I like
01:33about him is that he cares about
01:37businesses that are struggling and he
01:40kind of Envision how to save them how to
01:43make them survive and even Thrive uh
01:47even in those hard circumstances so he
01:49goes to the essentials and finds path
01:53from pathology to homeostasis from from
01:56what's wrong to to what works and one of
01:59the things that he brings up to is uh
02:02that he goes to the essentials people
02:04product and process all the time he
02:06talks about people product and process
02:08so we we need to work with great people
02:11uh select with great people bring the
02:14best on people find what's the the the
02:18best of the products that will work and
02:20find the process that helps two things
02:23to find this uh this product and to
02:30this uh in the market as a product so we
02:33are Engineers as small talkers uh so
02:35what's our part here where is kind of
02:38the three of them but let's focus a
02:40little bit in this talk uh on product
02:43and product Discovery and how this stack
02:45that I'm bringing will help on that
02:48because if we remember let's go to the
02:51next one thank you the if you rem if you
02:55remember in in in then Engles uh paper
02:59what are the Third first thing that you
03:00see in small talk is that it was created
03:03in the spirit of helping the creative
03:06everyone and we as an as Engineers uh
03:12what I want to bring here in this uh
03:16uh spirit and and and optimization with
03:19this stack is three things speed
03:21flexibility and cost the in the speed is
03:25in the maintain in the speed of
03:27maintaining um the development speed in
03:30flexibility is in architecting a system
03:33that has adaptability in mind that
03:35avoids vendor locking when excessive uh
03:42um um not have that dependency on the
03:46cloud that's often uh makes the costs uh
03:50go to the roof and and gives you more
03:54flexibility in options on how to
03:56deploy and the interoperability so you
04:00have a in in other words when you put
04:02all these things together you have
04:04flexibility you can change your mind
04:06this is important for the business and
04:08for for discovering the right product
04:10that works well so how so how we can
04:13navigate this with with technology the
04:18Practical consequence of having this
04:19thing is to do it in a way that doesn't
04:22have a astronomical budget you can keep
04:25cost uh low uh so you can do more
04:30experiments until you you find it uh
04:33working so but what's new really so we
04:37we with C side we already have a ways to
04:39do web applications and and develop so
04:42and and and c I already did uh a way to
04:46work allow with a a way to work with
04:49server side rendering like since years
04:53now but um the world has developed the
04:58engineering world had a developed a lot
05:00of uh stacks and variations and
05:04options and came with a lot of way to
05:07render the screen um but now after a lot
05:11of years it came back to realize that
05:14yeah maybe servers I rendering was
05:16actually good uh for many many cases and
05:21we have that like self-evident at this
05:24point with next Nel kit Quasar gby among
05:29the most wellknown uh some Stacks so but
05:35doing single page applications it can be
05:38messy or can be sometimes too much for
05:41some cases uh you have to load a whole
05:44lot of load of libraries before your
05:47application even even starts so that
05:49could be that could be leaving you out
05:53of a lot of opportunity in terms of what
05:56kind of product are you going to deliver
05:58if you if you if you require too much it
06:01might be a blocker for certain
06:02businesses let's next and there is
06:05another problem that some some got too
06:07enthusiastic thank you EST for the
06:11meme uh this is a meme that is is a it's
06:14a something that came to be well known
06:18because what you're see what we're
06:20seeing here is like the the Unholy mix
06:25of of having a component that can react
06:29to a presentation layer action that a
06:33click off a button uh but insert a a a
06:39uh command here from the front end it's
06:42too much it's too mixed too mixed
06:44concern to too too much
06:48um too much in that mix too much uh we
06:51we are having the again the the
06:53vulnerability of the of the early
06:56web and the web is is complex has many
07:00many parts uh database pipelines uh
07:04depending on each case is scaling
07:06differently even it's scalings
07:08horizontally but time uh is limited uh
07:11no one can learn all the skills
07:13sometimes you need someone that only
07:15takes care that this is even a structure
07:17that doesn't break uh so that's that's
07:21meaning that if you want to try a
07:22startup it will be like costly just to
07:26make that pipeline work why could be
07:29easier or cheaper go to the next one so
07:32you have to find some f you have to find
07:34some balance in the in the architecture
07:37you have microservices from
07:40microservices to the monolith and and in
07:43the middle mini Services the the
07:46microservices architecture will be
07:49sometimes complex to the bag if you have
07:51a a intercoupling not properly made uh
07:55or you have it's hard to follow where
07:59um and the monolith sometimes doesn't
08:02scale well so you have to see every
08:04every case can be a case uh but in in
08:08maybe you can start a startup with the
08:11monolith and then move move uh to a
08:13later stage scaling in in mini services
08:16so you have to see that so in all that
08:20the motivation as you can see now at
08:22this point was how can we have something
08:26that uh give us good economics to good
08:29product Discovery and for that uh in
08:33teams not only not only are composed of
08:35Engineers sometimes we have product
08:38people or designers so how we
08:41interoperate with them how we cross
08:43cross functionally operate with them
08:46efficiently let's go to the next one and
08:49as applicability if uh when I when I was
08:53thinking all these things uh I was
08:55thinking okay but what's the in what in
08:58which cases this could be a good fit uh
09:00well of course growing the small
09:02ecosystem because if you have more
09:04startups that it starts
09:06efficiently uh the ecosystem will be
09:09more fertile you you will have a a case
09:15having the next startup uh doing with a
09:19uh cheaper uh MVP uh all the MVPs the
09:24micras the every every every startup
09:28right consultancy service or when it's
09:32scales if you have a team you can you
09:34can start thinking software Factory and
09:37squats of players maybe you have like a
09:40guild of developers that are good
09:42interacting together because they know
09:44some the domain or there you have a
09:47developer that is also good with certain
09:49designer so it's not necessarily only
09:51small talkers um and the boot camps
09:55maybe oh if you have the right stack
09:58that is that it feels productive maybe
10:00you are being inclusive with people that
10:02feels comfortable to work with that kind
10:05of Stack think of that in in other
10:07communities outside outside our
10:09community so there are um other
10:13Frameworks that are that are popular
10:17that one of the reason that what they
10:19grew so fast was because it was easy for
10:21instructors to guide new developers in
10:24the new generation to do the next uh
10:27quick uh app and and and they made it
10:30feel uh empowered and and feel the power
10:33of building that little thing for their
10:37own so let's talk now about how this
10:42that the experiment is structured um
10:46what I did was see that HDMX was uh
10:50prioritizing uh using really HTML and
10:54using uh everything uh as much as it can
10:59and being backend agnostic you could put
11:02it whatever backend you want of course
11:04in this case uh experiment I try I Tred
11:07small talk and inside small talk I use
11:11model view presenter so there's a
11:13presentation layer there is the model
11:16logic and uh and the view layer uh it's
11:21mustache templates so I'm using
11:24templates in a way that will be familiar
11:27for other uh um uh Frameworks like like
11:32the ones that I was mentioning before
11:35based on JavaScript or or or even Ruby
11:39rails and also I included uh at least in
11:44in my implementation not in not in the
11:47framework itself I will gather I will
11:49gather input from the community for
11:51seeing if this should be part of not uh
11:54mapless models because mapless is this
11:56framework that I was uh
11:59creating to make data uh portable and
12:03agnostic from backends so you can save
12:06I'm app in in in in BOS SQL in Ries in
12:10gemstone will be interest it will be
12:14uh what else what else do we have
12:18pql SQL light was the last one so the
12:21the same buess you just send Save in
12:24different repo and it's transparent and
12:27not it's doesn't need the schema so if
12:31we are using if we are using
12:35um maybe we are having an application
12:38that also have resiliency in in what
12:40what's more convenient at the time uh
12:43going to a the cloth going to your own
12:45hosted uh group of servers uh migrating
12:49a application and making it uh gain
12:52disability with this
12:54so beside that we have models we have
12:58how to save it we have to go to Cache
13:00because if we save it in tradit we will
13:02be caching uh we have
13:05um a basic session when you visit a the
13:10web application you you get a session
13:13and you get a road presenter this road
13:17have uh any local state for that
13:21presentation later layer when it was
13:23rendered uh it will have re the routes
13:27resed from the a directory structure
13:30that is uh conventional for this uh
13:33there is a convention this framework is
13:35using which is in templates views you
13:38have um an index mustache that will be
13:43like the home and from there any sub uh
13:46directory from views it will be like
13:49routes and you will have your own uh sub
13:52uh index mustache that will be the helps
13:56uh templating that will render the that
13:59particular presenter we are we are going
14:01to see now an example an
14:04actions so so think of think of the
14:07presenter like this it's it's an object
14:09that knows how to render in HTML and how
14:13to react to actions so so from the user
14:16interface from the browser you get a
14:19stimuli you you get the clicks uh the
14:21inputs the submits and and the presenter
14:25can uh receive these actions do
14:27something and speed the the r HTF out
14:33next one let's take a look at it let
14:36let's take a look at at this one like
14:57fingers so we are going to see one
14:59example uh now that is the counter index
15:03uh mustache and you will see there is an
15:06index uh GS this index GS is like any
15:11JavaScript Behavior you might you might
15:14want to add to to to the presenter so in
15:19here you see uh you see the button and
15:27HDMX uh with a post to to to the counter
15:30in this case which is talking and it's
15:33targeting where the HTML is going to
15:37that that is going to be the result of
15:38that action what what what is going to
15:41do with that and and the headers are the
15:46see uh are the actual uh symbol that is
15:52going to match the selector that is
15:55performed in in in the presenter so you
15:58you can decrement in this case uh uh
16:03the the you you can zoom in and I'm
16:43all right so okay here what we are
16:46seeing here is the browser in far the
16:49categories presenters there and we are
16:52seeing here the welcome presenter
16:54showing that is the is the root uh of
16:58the of the whole application and what we
17:02are seeing here is the the action of
17:04opening the counter I'm going to demo
17:06this now but I want to show you the code
17:08how it looks because what's interesting
17:10here is that in the first render you get
17:13only the template render and kind of
17:16it but when you uh perform the first
17:20action which is this one and then you
17:23want to you want it to open the counter
17:26what you have is that it laely um
17:29creates the the counter presenter so the
17:32footprint the memory footprint should
17:34not be affected in advance it should be
17:38lazily uh growing as the load grows this
17:42this could this will be end up being
17:44important for for load and servers and
17:47and and Cloud costs so next
17:50one this is an example of an application
17:53that uh is a little startup that is uh
17:56going to be launching uh like it's it's
18:00it's being tested that it's being is
18:02going to be launched uh in the next
18:05weeks um what we are seeing here is a is
18:08an application that has a process to
18:11capture uh you can you can submit your
18:14own photo and have this super cool
18:16effect that you cannot do with AI
18:18because it's h it's always consistent
18:20and you cannot do that with so you will
18:23get this on your own photos and the and
18:27the the key thing here was that the the
18:31snappiness of the of the of the
18:34application needed to be uh super fast
18:38and the degree of detail of every step
18:42of the user interface needed to be a lot
18:48so the the libraries and the and
18:55the all the details on how the lb have
18:59to be loaded and how the every step
19:01needed to be H led to the next step um
19:06needed to be with different uh options
19:10of of of GS libraries and the degree of
19:15flexibility uh it's is not when you use
19:19other Frameworks you don't have that
19:21degree of of flexibility this is this is
19:24why uh this was kind of a use case for
19:27this uh for this kind uh of application
19:31thank thank you let me check here uh
19:34something I can show you liveing code
19:37here is this one is this one working
19:47um all right first here we see in this
19:55uh in this playground we have uh we have
19:58a helper to stop and reset the the
20:01service we have the a helper that
20:05installs the application because you got
20:07you you could have different
20:08applications in the in the frameware
20:11install and a restart command so let's
20:13let's restart this guy and let's uh take
20:17a a quick view here um on the
20:21structure beside the far image in the
20:24environment to develop the application
20:26you have the app you have templates
20:33folder by default I'm using as I as I
20:36was saying SQL light in in in
20:39mapless uh I included the docker
20:42container so you can you can you can
20:44doize the far image and and make and put
20:49there uh and you have the in the
20:53templates you have here the
20:57views the counter in this case is
21:01here and take a look at this one at this
21:04detail you have two templates here so in
21:07this counter so what's going on index is
21:11default that renders the whole uh
21:14counter component the call the
21:18whole presenter you have the
21:22two uh commands that are going to
21:24increment and decrement and you have the
21:27result here here which is only this
21:32thing that is a yeah it's a template so
21:35you have this replace on from the small
21:38to side uh with the real value after the
21:41acttion so let's see the let's see the
21:44code uh let's search for the
21:52here increment decrement so decrement is
21:59spected increment same thing when
22:01initializes the count is in zero just
22:06that so okay look at
22:16Host here we go so okay the first
22:19rendering is the render of the main it's
22:23asking for for an input when I send this
22:28in the welcome uh this is the model hold
22:31on this is the presenter
22:34cool when I send this
22:36input um I receive I receive
22:49username which is the this prompt usern
22:53here what I get is the post
22:59action saying set set user first name
23:03here so we have we what we have here is
23:07form uh submission so we have we have
23:13name and the user first name is a method
23:18here that will take from from the
23:22current request the the input and will I
23:29HTML so let's let's show
23:32it with one spell in
23:36the I think it's better to show it with
23:39with the to-do actually let me show you
23:44to-do to is cooler okay I'm going to
23:47send SE so it knows you have the counter
23:52works so let's go to the Todo the Todo
23:58uh but if you add the first one and you
24:02press Center you have the Hal here in
24:04this in the in the far side and here
24:08it's it's the it's the model so the
24:10model has is is in is creating a new
24:13model and adding it to the collection if
24:15I if I go with the play you have the the
24:18rest of it let me remove the C and at
24:26second the second and one thing that I
24:29wanted to show you is how little this
24:31thing goes on the on the network because
24:41have let's task here and we have yeah
24:462.7 case which is just the partial if
24:54the the content of it in every in every
25:01partial uh in a in a in a in the counter
25:05of Seaside this is about
25:082.7 uh K in the in the in the counter
25:14of right here let's take a look it's two
25:21bytes so it's really it's really it's
25:24really small so what I want to
25:32is how efficient this thing could
25:37be after this one um in the presentation
25:41you will you will be able to take a look
25:43at the numbers there but in it's it's a
25:45rough test uh five minutes test uh
25:49rendering the counter just the counter
25:51nothing else and you have there like uh
25:5410 workers at uh doing 10
25:5810 renders per second each one and the
26:03and the memory grew about 10% while
26:06doing that so and as a comparison in
26:09ride uh you saw how how little it was
26:14like to to render in the counter for
26:17example and you have double
26:20the uh the transactions per second per
26:22worker and the memory footprint it's uh
26:25it's not exactly the same but it it grew
26:28only uh five% in in this um in this test
26:33of course it's a simple test just to
26:37idea but yeah this this came from the
26:40from the rust Community actually is a
26:42great phrase that I want to bring to you
26:44uh Rel relability is crucial because
26:48otherwise we are predating uh Innovation
26:51we need to have um a reliable way to
26:55produce applications that to keep it
26:56running otherwise we don't have
26:59experience time resources to do uh what
27:03we were talking in in the previous talk
27:05about the the going out of the of the
27:07comfort zone of the safe Zone and
27:09experimenting with new things and new
27:12things that are to be desirable by
27:14people and this means successful
27:17products so let's go so how to do use
27:20these things stateless in mapless in in
27:23in sorry in small talk how how can we
27:28an image stateless during load and the
27:32ideas for that is if we use the session
27:39the presenters as mapless what we have
27:43is this little thing uh we
27:48have I actually have here a
27:55session a session here
28:00that is uh serialized as as Json so that
28:05was an old session that was serialized
28:07as a mapless very simple as as Json when
28:11that happens and when you move the
28:13because it's easy to save them in
28:17ends you can just choose R for example
28:20and you will have and um small images
28:25and you will have uh serialized the the
28:28session from the cookie in R are it's
28:31going to bring the the by key the the
28:36session deserialized with the presenters
28:38that were in use for that guy so it's
28:41very very uh easy to to move it in that
28:45direction um so it becames Tri trivially
28:50uh trivially uh implementable to keep it
28:54stateless um okay so the idea is uh also
29:01explore I I already started this work uh
29:03connecting it with WB sockets but
29:05websocket is kind of uh in in the later
29:09in later stages of of the of this life
29:13life cycle and there are new things
29:15coming like web transfer quick uh htb3
29:21are kind of going to be familiar to to
29:25all of us soon and we need to adapt to
29:28this uh soon the having the the
29:32presenters uh serial disable they are
29:36are going to to help on that so okay
29:40what to take away yes not the prob it's
29:43okay but what else I think I BR I bring
29:46to you today uh how we can uh use the
29:50rich ecosystem that is already there by
29:53having templates uh integrated we are
29:56going to have a way way to collaborate
29:58easily with the handouts of designers so
30:00cross functionality it is going to be
30:03easier for uh small talkers to to get a
30:07integrated work with designers we
30:09finally have ways to uh leverage copy
30:12paste there are plenty of examples of of
30:15uh HTML for example if you are using
30:17tawin you can copy paste an example of
30:20tawin quickly and adapt it to your forms
30:23and it will look great just from the
30:24start with very very few uh
30:27effort um of course we discuss SS series
30:31back we are we I I've shown here how
30:34HDMX is bringing a lead on this charge
30:38on on on having a a very lean uh
30:43frontend uh but all the rendering on the
30:46back end if you compare for example if
30:50um Ajax calls for for for other
30:53Frameworks maybe if if you if you
30:55traditionally use jig where you have
30:58already like 70k load in the front end
31:01uh when with HDMX you have 10 10K so
31:05it's 10K plus these little things of of
31:08render HTML so it's extremely efficient
31:10think on think on poor connections on on
31:13on 3G and and and stuff like
31:17that and how small talk is historically
31:20great for dominating complexity so so
31:23it's good that we push this complexity
31:25to there because with that
31:27we can we can chew the the complexity
31:30and and and and dominate it from the
31:32back end um it's a way to reinvent the
31:36model view presenter pattern which work
31:39well for decades no reason not to uh
31:42yeah that's the S spot for product
31:44Discovery small talk and
31:46HDMX I salute you guys for being here
31:49thank you for for the time for the
31:51attention I encourage you to take a look
31:53at the at the work there because there
31:55is a lot of potential there
