Entonces, aquí hay algunas tecnologías que utilizamos.
Voy a hablar solo de las que estoy relacionadas con la experiencia.
Entonces, primero de todo, Cassandra, que es una database de SQL,
que pedimos a ustedes a tener un recuerdo que va muy rápido,
alrededor de 10 milisegundos,
y que te ayuda a construir un website muy, muy rápido.
Usamos más para personalización, porque tenemos un gran cantidad de datos,
pero para mí, fue muy importante estar involucrado
y estar segura de que el servicio de personalización
no fue reduciendo la experiencia.
Entonces, con Cassandra, nos aseguramos de eso.
Y también, con Tracking, con Kafka,
estamos seguros de que publicamos mensajes muy, muy rápido,
así que no reducen la experiencia.
Redis para el cash distribuido.
Creo que lo sabéis, porque ha estado en el mercado por un tiempo.
Y después de esto, el stack del elástico,
no sólo utilizamos para la máquina de cierta,
pero también utilizamos para generar todos los lobos,
todos los tiempos de respuestas de nuestro recuerdo.
Y, por ejemplo, en la experiencia,
es muy importante el Redirect, el code HTTP 302.
Entonces, aquí podemos ver dónde vienen de nuestro Redirect
y cosas como eso.
Y, como sabéis, también Chrome está moviendo,
es lo que veo, sobre seguridad.
Entonces, si no tienes HTTPS en tu web
y el 31 de junio,
tendrás un muy grande, agudo y fatos
no seguros web en tu URL.
Entonces, con eso, podemos traer todos los requestos de HTTP
que vienen de nuestro web para poder spotarlos
y redirectarlos a una HTTPS.
Después de esta parte,
los tres son más o menos un bundle
que tenemos que poner juntos para tener continuidad.
Y, realmente, me gusta este, el SonarCube,
que ahora puedes viajar.
Vamos a hablar un poco de Dockeria,
porque el Dockeria está haciendo nuestra vida mucho más fácil
para las herramientas que no están en producción.
No tienes que ser seguro de que es stabilizado y algo así.
Y el SonarCube es muy impresionante,
porque es chequear el código.
Y puedes añadir algo también sobre la experiencia,
para que se sienta seguro de que todo el código
que estará llevado en tu plataforma
se sienta seguro de que alguien está haciendo
un request de SQL dentro de 4H,
removiendo la obligación del código
y cosas así.
Entonces, con eso, puedes tener una primera barrera
para el código que va en vivo
que podría reducir la experiencia.
Y después, aquí estamos hablando
puramente y profundamente sobre la experiencia.
Gmator, es para hacer algunos tests.
Pero ahora estamos usando Octoperf.
Entonces, no sé quién es aquí
haciendo muchos tests en su website.
Sí, sí.
Entonces, ¿qué es útil para hacer muchos tests?
Primero, usaremos en dos fases.
La primera en el ambiente de tejer.
Hacemos un test de estrés
y después hacemos otro test de estrés.
Y después, con AppDynamics,
podemos comparar la experiencia
de unos dos tiempos.
Así que, como el test de estrés
es lo mismo,
podemos decir que,
para el mismo número de requests,
la experiencia aumenta,
el número de aumentos,
cosas así.
Y decir que, no para este release,
podemos spotar el botón de botones
justo ahí.
Esto es muy importante
para poder spotar la cuestión de experiencia
antes de ir en vivo.
Porque cuando es vivo, es muy tarde
y te lo dices.
Y después, te dices
un comentario sobre tu botón
y el botón.
Después, también tienes la sintetica.
Entonces, es usted haciendo
algunos requests a su website
de una ocasión para ver
cómo su website está comportando.
Esto es, por ejemplo,
en AppDynamics, estamos haciendo escenarios.
Estamos comprando el website,
ir a la página,
elegir una categoría,
una otra categoría,
y después decimos que este
es el canal para comprar algo.
Y queremos que estén seguros
para que este pueda ser logrado en menos de
16 segundos.
Y esto es muy importante.
Y después tienes el real user monitoring,
que es sobre el real user.
Te traes para insertar, por ejemplo,
AppDynamics o parte de Google Analytics.
Y puedes traer
el real behavior de las personas.
Esto es muy importante, por ejemplo,
para Brasil,
para que no tengas la misma network que lo hacemos.
Y después,
actualmente,
Sitsped IO,
que te permiten
analizar cada página de su website.
Y esto es muy importante.
¿Tienes preguntas, por lo tanto?
Ok.
Entonces, este es el problema
que he tenido con Sitsped IO.
Entonces,
con una página single
de AppDynamics,
puedes taxarlos.
Actualmente,
si no tienes ningún APM
ahora mismo,
te directaré
a New Relic,
que ha implementado en las últimas noticias
una parte del real user monitoring
solo para
una página single.
Hemos utilizado New Relic
antes, por qué sé eso.
Actualmente, con AppDynamics,
no tienes este nivel,
tienes que codificar
en cada página
y puedes hacer lo mismo
con Google Analytics.
Sí.
¿Qué es esta cosa?
Este es Cilex.
Es un framework,
un framework PHP
para hacer algunos APIs.
No sé si estás interesado en PHP.
¿Cuál lenguaje usas?
¿Tienes otras preguntas?
No.
Entonces, continuamos.
Entonces, me gusta
este mensaje.
Actualmente, es lo que intento hacer
cada vez que intento
mejorar algo en el web,
porque quieres saber si
lo que deberías cambiar
tiene un impacto o no en el website.
Después, no es relacionado
con la presentación, pero después
puedo mostrarles un ejemplo
de algo que he comprado
y que veamos el efecto
y es muy importante.
Entonces, lo que puedes compro,
puedes optimizar.
Esto es un mensaje
idaglorico.
Si estás
muy
manteniendo en contacto
con las experiencias,
podrías ver su nombre
y os recomiendo
seguir sus acuerdos en Twitter
donde puedes encontrar
muchas cosas muy, muy interesantes.
Entonces, vamos a
ir dentro de un cispidario
ahora mismo.
¿Quién es el?
He already tried cispidario.
Sé que hay algunos.
Algunos de vosotros.
Ok.
So, it was a while ago
or it was recently.
Ok.
So, I spoke just before
I was speaking with some people
who tried it
and we will speak about it after.
But as you can see here
this was when I prepared
the presentation one month ago
and I'm sure that we have a lot more
of contribution and a lot more
of commits because
the development
pace is really, really amazing.
Actually, just before the presentation
I updated all the cispidario stuff
so maybe nothing will work.
We will have a look.
But yeah,
now it's really much easier
to install and you can have
everything set up in less than 5 minutes.
So yes, big community
and it's a set of tools.
The tool cispidario
and after you can use
other tools, other plugins.
So let's speak first about cispidario.
I don't know if you are used to
to play with webpatch test.
I know that you do.
But this is more or less some features
that we have in webpatch test.
For now, it's not a full feature.
For instance,
here you can
you simulate mobile
or use real mobile.
You know, you plug your iPhone
or your Android on your computer
and after it's the real device
that is running the test.
What is good with that
is that you also simulate the hardware.
So if you have a lot of images,
you are simulating the graphical device
and everything like this.
So it's better than a simulation.
For now, only supported by
Firefox and Chrome.
For the real mobile, only Android
for now, iPhone is coming very fast.
Boundless simulation,
still better to do it without simulation
but still a feature that we want to have.
And this is really important.
As it's a non-premise software,
you can integrate it into
Jenkins, Gulp and Grunt.
So this is really important
because you can track the performance
of your website in staging environments.
Selenium integration.
So you can really use
the script that you have with Selenium
and update them directly in
ctp.io to both your website.
So it's let's work to do.
And if you don't have any Selenium jobs,
maybe you should do have someone
or you can just use the coding function.
The coding function is browsing
the page and going through every page.
So it's really fast to do
the first configuration.
You can just tell ctp.io
to do a coding of a depth
of three, three levels
and you will browse all the pages
on your website.
And after the third party integration,
and it's one of the most
important features that we have
because you all know that the API
of webpash test sometimes is tricky.
It's not linking well
your analysis to your account
and stuff like that.
So with webpash test you have
the direct integration with webpash test
you just have to put your key
and when you run one test for ctp.io
you will run another one for webpash test.
The same for Google page speed insight.
And after you can also
integrate it with Slack
in order to put some alerts
and after you can use
custom plugins or plugins
for instance, for an e-commerce
website, one timing
that is really important
is on the listing
product.
It's to have the first product displayed.
This is one very important time
but it's something that
allow you to say
ok, the customer already have one
product and begin to be less frustrated.
And after the different reports
that generate ctp.io
the third one is
the one that is a very nice feature.
Unitary reports
it's more or less what you have
when you execute a webpash test
instance.
So here you can have
all the history kept on your browser.
It's not like webpash test
sometimes they erase all the data
that you have
that are older than six months.
You have the coach.
The coach is really nice.
According to the feature, all the information
that you retrieved from the analysis
it will tell you
how to optimize performance, accessibility
for SEO
and bad practices.
And this is really nice because it's not saying
in your website
this and this and this and this
is really terrible, it's a bad website.
This thing is saying
ok, you can improve doing that
and you have a big paragraph
so if you are not used to work with performance
you will learn a lot about it
and a lot about issues that you are doing in your website.
We will have an example just after
but it's really helping you
to see how to improve this
and what are the best processes.
And after it's what I really like
it's a historical dashboard.
Every test that you do
all the information is sent
into a database that we will see later
and after from a client
you can see historically your performance
you can see historically a lot of metrics
like the number of images in your pages
the size of the images, a lot of information
and this is really good
when you have some performance decrease
you can track down what happened on your website
and I have an example just after.
And after it's multi pages
and multi websites
you will see during the demo
but here you can change the website
that you are looking at
you can change the pages that you are looking at
so you can have a custom analysis
for your website in Spain
and for the one page
or for the product listing page
or your web mobile
and you can switch
so it's really nice.
Any question?
With stateful websites?
With stateful websites?
Can you log in?
You will have it in the demo
so as you can start
Selenium script before analyzing your website
so actually I had an issue with that
I will speak about it during the demo
because I was not able
to clean the cache of the browser
so I had to
to put the cookies directly
I will show you just after
and if I forget
don't hesitate to stop me
and to remind me the question
don't hesitate to stop me when I'm speaking
because I'm very talkative
and sometimes you can last a long
so stop me as we are not so much
it will not be an issue
So more or less the architecture
about web page test
Here you have your instance of web page
sorry
I said web page test
Here you have your sit speed IO
you tell him to go to test
your website
so he is initiating a web browser
going into your website
and retrieving all the metrics
and after he sends all the metrics
to graph it
just after he calls
the API of web page test
and the API of Google page speed
and tells them to analyze your website
the same page
so this is good because you are
controlling web page test
and Google page insight
and after what you do
if your sit speed IO server
is open to the exterior
web page test
and Google send a request saying
I have finished and after you did not
the report and you send it into graph it
this will not be
shown in the demo because it is only
on my local device
so it's not open to the
exterior
after
the freaky guy
the freaky performance guy
go on his laptop
connect to graph it
which is a client doing request to graph it
and you are able to display all the historical information
so I will go quickly
into the pro and the cons
first the pro
it's a very quick installation
it's made with docker compose
without the YAML file
you do docker compose
up and it's already done
you have started all the architecture
this is a feature that is really cool
and you don't have it in a lot of open source projects
it's the historical data
normally it's a feature
that's only available
in SAS platform where you pay
so tool integration
so remotely using web page test
and stuff like that
so the performance budget
so this is really important
during the validation of your release
you can put in your configuration
a performance budget
someone wants me to explain
what is the performance budget
or you are cool with that
yeah
it's for instance
a lot of metrics
a lot of KPIs that you want
your website to respect
for instance you can say
time on this page has to be
3 seconds
the maximum number of images
that we can have on the website
on one page of the website is
126
the maximum number of set parties
that we can integrate is
10 which is already a lot
so putting those
performance budget
you are not the guy saying
to the development team
no no no you are not putting that in production
if you don't want it
you already said
the company politic is this
so if you want to add another set party
you have to remove another one
and this is good because you are not the guy
going after everybody and saying
I don't want you to do that
it's the performance budget
and it's also automatic
during the release validation
so it's not too bad
a new features
every version
add a lot of new features
for instance
I added the link
of the new version that I just released
2 weeks ago
so I had to update everything for the presentation
adding
video recording of the page loading
and
based on the video
there is a tool looking
in the video
the speed index
the speed index is when you begin to have
more or less
fully rendered
it analyses the video
and see if you have every space of the page
of the viewport
filled with stuff
so this is really powerful
but I didn't manage to have it work
because I adjust half an hour before the presentation
the cons
it's already young
and you have a lot of breaking changes
and I saw that just before the presentation
actually
when I did the biggest
upgrade it was between the version 3
and the version 4
and I lost all my history because the data was not compatible
the new version was changing the format of the data
this is
a bad thing
you don't have the compare function
I don't know if you are used to
to play with webpatch test
but in webpatch test you can
tag 2 tests
and do a compare
I encourage you to try this
because it's really funny you can generate
a video of your website
on the 25
of September
and you can see
all visually your performance improved
you can also have the waterfall view
and see what are the new
requests that
slow down your web and stuff like that
so this could be
a very nice feature
if they can add it
now it's not fully featured
like you can supply your iPhone
to do real test with an iPhone
there are no scheduler for the test
so you have to
write a script
with all the command line
with the test that you want to do
and do it in a front tab
a little bit ugly but
it's still working
and
in the new version
of
we will be able to add alerts
that is to say
if your response time is above 10 seconds
you are able to trigger an alert
so this is nice
so now it's time for the demo
if you have no questions
no
ok
so
as you don't have any desk
maybe I will do it only on my computer
but you just have to configure it
it's really quick
so
first you install docker
and docker compose
after you download this file
you run this command line
and you are ready to test your website
after you just have to run this command line
replacing this URL
by the URL of your website
and you can access all the data from this dashboard
so
I will do a little demo
if I find my mouse
so
I will do a very risky stuff
maybe I will mess up the presentation
I close all the docker
I will be
in order to be sure that I'm not
telling you lies
I will stop everything
ok everything is stopped
so now in this file
I have my docker compose
and after some scripts
to do the login
and here it's where I generate
all my results
this folder is a little bit different
is what you have to install
in order to record
a video of your website loading
ok so now
let's see
if we don't have any demo effect
you start all the dockers
they are mounting special
special location
in your drive
so you are not losing any data
ok so now it's
no errors
nah it seems to be good
cool
so when you do that
it's running after at all the start up
of your computer
you don't have to do anything more
everything is already settled
so now
let's try to test the website
can anyone give me a website
can anyone give me a website that you want to test?