 pour le record. Merci. C'est pour ça. C'est pour ça ? Oui. Bonjour tout le monde. J'espère que vous avez passé un bon event. Maintenant, nous avons un bon présentation. Comment migrer de jQuery, pour réact. Et je pense que beaucoup de gens ont travaillé pour faire ça. Merci beaucoup pour la présentation. Bonjour tout le monde. Je suis avec le JavaScript room Et aujourd'hui, nous allons parler du processus pour le transformation du JavaScript legacy de celles qui ont été rendues sur une plus une application moderne réadiements. Je suis Amis et je travaille en peeling pour des trucs d'interviews. À mon point de vue, nous f margins des formations. c'est l'open source pour un tour de management, pour des services, des services physiques et des services virtuels. Forman a été installé en 2009, et en 2009, Rubian Race a été très populaire. Nous avons utilisé Rubian Race et nous avons utilisé le service d'entrée. Donc aujourd'hui, je vais commencer par les premières pièces. Qu'est-ce que vous devez faire ? Quelle est la première étape que vous devez faire pour commencer ce processus ? Pour commencer ce processus de transformation. Après cela, nous allons parler de la connexion, de comment communiquer entre tout le monde, entre le JavaScript de la législation et le monde nouveau. Après cela, nous allons parler de client-outings. Nous avons besoin de client-outings dans notre application moderne, en de la façon hybride. Et après cela, nous allons raconter des choses et nous allons parler de long-term goals. Donc, nous allons commencer par les premières pièces. Donc, premièrement, pourquoi réagir ? Pourquoi réagir ? Donc, nous avons plein de raisons pour cela. Je pense que la première raison, bien sûr, c'est de la performance. Réagir rendra seulement les éléments qui ont été changés. Donc, votre application web n'a pas besoin de réagir à chaque fois. Bien sûr, vous pouvez réagir les choses très vite. Dès que le mécanisme des compétences, vous pouvez commencer de petit à petit, et ensuite vous pouvez gagner des compétences compliquées après cela. Réagir est une grande communauté, et je n'ai pas besoin de mentionner cela bien sûr, et avec de grandes pièces. Et c'est complètement testable avec juste l'enzyme, et vous pouvez, juste avec un second, vous pouvez réagir les tests. Et bien sûr, les choses de réagir avec réagir. Vous pouvez voir, en fait, vous pouvez voir le code en réagir, et vous pouvez comprendre immédiatement ce qui se passe. Mais avec le JavaScript de la législation, c'est un peu difficile de le faire. Donc, c'est à moi de voir ce truc. Donc, c'est notre législation. C'est un file, un file de JavaScript. Comme vous pouvez le voir, c'est un très long file, plus que 800 lines, et c'est très difficile de débarter. Si vous changez quelque chose, si vous changez ce type de jQuery, autres fonctions peuvent être, vous savez, changer aussi. Donc, c'est vraiment difficile, c'est vraiment frustrant de débarter ce file, ou même de changer des choses, des petites choses, ou vous voulez faire un réfacteur, c'est vraiment frustrant de le faire. Donc, c'est la majorité de cette transformation. Donc, notre approche est de commencer par petit, ce qui veut dire l'approche du bottom-up. L'approche de la base de la base, comme le bottom-up, l'input, et vous pouvez gérer ces compétences, et vous composez de ces compétences, beaucoup plus, bien sûr, des compétences compliquées. Et avec ces compétences compliquées, bien sûr, vous pouvez atteindre et avoir une page compliquée. Donc, c'est notre spire, c'est notre logique, commence par petit, et puis, bien sûr, la scale-up. Mais, premièrement, let's imagine, nous avons juste écrit un component bottom-up. Nous avons besoin de combiner ce component dans notre page Rubion Rends. Donc, nous avons besoin d'une sorte de mécanisme de mountage pour mettre un nouveau code, un code client, un code rendering dans notre page Rubion Rends. Donc, nous avons besoin d'une sorte de mécanisme de mountage. Donc, nous avons cette fonction, cette mount, les compétences qu'on veut mettre dans notre page Rubion Rends. Mais premièrement, nous avons besoin d'un registre pour enregistrer ce component. Donc, nous avons un component enregistré. Donc, let's imagine, nous avons ce bouton que j'ai mentionné. Et nous avons besoin d'une sorte de mécanisme pour mettre un objectif dans notre registre. Et ensuite, nous pouvons monter avec le mountage. Donc, le mountage, comme vous pouvez le voir ici, est un module Rubion Rends. Et avec ça, nous pouvons monter les compétences, nous pouvons monter les compétences en notre page Rubion Rends. Donc, c'est bien. Mais, pour enregistrer vos propres compétences de scratch, vous pouvez utiliser d'autres libéraux. Donc, je ne sais pas si vous êtes familiar avec React Bootstrap, mais c'est vraiment très fameux. Et bien sûr, nous utilisons et nous contribuons à Patternfly. Donc, si vous avez des applications enterprise, Patternfly peut vous donner un très bon design et un très bon component. Et c'est un source ouvert, bien sûr. Donc, c'est la première étape que vous devez faire. Vous devez avoir une sorte de registre, et bien sûr, un mécanisme de mountage pour monter vos propres compétences. Qu'est-ce que vous devez communiquer entre ces mondes, entre l'un et l'autre mondial, ou on peut communiquer entre ces. Donc, nous utilisons pour cette étape, nous utilisons Redux. Et pourquoi Redux? Parce que Redux est très facile à comprendre ce qui se passe. Et bien sûr, avec Redux, vous pouvez accéder à la store. La store est votre client data. C'est comme votre store massive de votre client. Et vous pouvez invoquer des actions. Et quand vous avez appelé des actions, vous pouvez changer la store. Et si la store a été changée, cela empêche le component à être réendu. Donc, avec cela, nous pouvons contrôler nos propres compétences. Et bien sûr, nous pouvons aborder la store pour des changements. Et nous pouvons appeler une spécifique courbelle. Donc, nous utilisons un objectif spécial, un objectif globale, afin d'être la glu entre ces objets. Donc, comme vous pouvez le voir, chaque entrée ici peut être juste une fonction ES6 ou peut être une action que nous pouvons invoquer plus tard. Ou, comme vous pouvez le voir ici, nous avons des abonnés. Donc, nous pouvons abonner à la store. Si la store a été changée, nous pouvons gérer des callbacks. Ou, nous pouvons obtenir des données de la store. Donc, pour l'exemple, c'est une page dans notre application. Donc, ceci, le layout, comme vous pouvez le voir, la menu ici, et la barrière au top ici, est complètement basée sur le réacte. Et aussi, comme vous pouvez le voir ici, c'est encore un component de réacte. Mais au-delà de cela, ceci n'est pas un code réacte. Ceci est un rendement de plusieurs côtés. Les objets, les objets. Donc, afin de communiquer entre ces compétences de réacte, et ceci, comme vous pouvez le voir, c'est le même. Et nous avons besoin d'un moyen de communiquer entre ces compétences de réacte. Donc, nous avons utilisé cet écosystème. Nous avons utilisé ce mécanisme. Donc, comme vous pouvez le voir ici, ceci est un file, qui nous importe la store. Nous importe une action spécifique qui change le titre de la barrière. Et ensuite, nous pouvons juste invoquer ceci. Nous pouvons créer une fonction qui invoque ceci, qui dispatche cette action. Et avec ceci, nous pouvons réactement changer la barrière, le component de réacte. Donc, comme vous pouvez le voir ici, comme vous pouvez le voir ici, nous avons utilisé cette fonction de la barrière dans le JavaScript de la barrière. Donc, c'est jacquerie. Et nous pouvons juste appliquer les choses réactes dans la barrière de jacquerie, dans le code de la barrière de la barrière. Donc, une autre chose, comme vous pouvez le voir ici, nous pouvons abonner à la barrière. Et si la barrière a été changée, nous pouvons gérer cet écosystème. Et cet écosystème nous permet d'acheter la barrière, vérifier la dernière action, et vérifier si il y a des erreurs. Et si nous pouvons juste alterer et changer notre code de législation, nous avons utilisé plusieurs codes de législation. Donc, comme vous pouvez le voir ici et là, j'utilise jacquerie et ensuite je change mon code de législation. Je ne peux pas changer la barrière de réacte avec cela. Je peux changer seulement la barrière de législation parce que avec réacte je n'ai pas d'accès à l'actualité et je n'ai pas d'accès à l'actualité et nous parlerons de cela plus tard. Qu'est-ce qu'il y a d'autre façon? Qu'est-ce qu'on peut utiliser jacquerie à l'intérieur de notre component de réacte? Est-ce qu'on a besoin de tout? Donc, parfois, vous avez besoin de tout. Dans notre cas, nous avons utilisé la sélection 2. La sélection 2 est un jacquerie extensible. C'est une bonne chose. Une vraiment bonne chose qui vous donne beaucoup de features dans votre sélection. Et nous avons décidé, pour garder notre application unifiée, nous avons décidé d'utiliser la sélection 2 jacquerie, une extension dans nos sélectes, même dans la sélection de réacte. Donc, nous allons voir, comment cela s'occupe. Donc, comme je l'ai mentionné, nous avons l'actualité virtual et nous avons l'actualité actuelle. Donc, réacte utilise l'actualité virtual. Et nous avons besoin d'une référence afin de référer l'actualité actuelle. Nous avons besoin d'un point de point pour l'actualité actuelle. Donc, comme ça, nous avons le réacte ref. Donc, le réacte ref est une bonne chose que le réacte nous donne. Et comme vous pouvez le voir ici, cette chose, ce point de sélection est une référence à l'actualité actuelle. Donc, je peux appliquer la fonction jacquerie du réacte réacte. Donc, ce sont les sélectes, comme vous pouvez le voir ici, c'est rapide pour notre sélection dans notre application. Donc, ce point de sélection est la référence et nous pouvons initialiser cette référence. Donc, ici, comme vous pouvez le voir ici, nous avons à l'intérieur des sélectes d'input et ensuite, je mets ce sélect qui est l'actualité actuelle que je mets dans cet objectif. Donc, maintenant, j'ai une référence à mon actualité actuelle et je peux appliquer la fonction jacquerie à l'intérieur de ça. Donc, c'est la même chose. Et parfois, vous avez besoin de ça. Donc, c'est sur comment vous pouvez connecter, comment vous pouvez communiquer entre ces mots. Et c'est très important parce que, quand vous commencez à faire ce processus, vous n'aurez pas rewritten votre application en un jour. Donc, c'est vraiment important de avoir une sorte de communication. Qu'est-ce qu'il y a sur client routing ? On a besoin d'un client routing dans notre approche hybride. Donc, dans les RSA, nous utilisons les tourbouillons. Et les tourbouillons, en fait, c'est le sens et le looks d'un single page application. Donc, comment ça fonctionne ? En quelques mots, les tourbouillons justes les éléments du corps entre une nouvelle page et une nouvelle page, à l'aide d'un load full page, et ça fait que votre load est un peu plus rapide. Donc, vous avez le sens que vous avez une single page application. Mais qu'est-ce qu'il y a dans les tourbouillons et les réactions ? Est-ce que ça fonctionne ensemble ? Donc, on a essayé. Et oui, ça fonctionne ensemble. Mais qu'est-ce qu'il y a plein de réactions de tourbouillons et dans votre page, c'est basé sur les réactions de tourbouillons. Donc, vous n'avez pas de service à l'adranger. Donc, en ce cas, vous avez des bénéfices des tourbouillons ? Et l'answer pour ça n'est pas vraiment. Donc, ce tourbouillon est réacteur. Mais attendez un moment. Nous avons un service à l'adranger. Nous utilisons Rays, Rubian Rays. Et... Comment ça peut fonctionner dans notre application ? Donc, nous faisons des recherches, nous faisons un POC. Et nous avons réussi à combiner ces deux. Nous avons réussi à combiner entre client routing et service à routing. Donc, comment nous faisons-nous ? Donc, nous utilisons le contrôle réacteur. Un contrôle réacteur spécifique que vous pouvez imaginer après ça. Et ce contrôle réacteur rend un layout spécifique réacteur, qui est encore dans l'arrière du service. Ce qui est très petit. C'est un layout très lent. Ce n'est pas le layout que vous connaissez avec Rubian Rays. C'est un layout très lent, un layout très petit. Et après ça, dans les clients, nous avons le component root, qui est un component rapide. Et, bien sûr, nous avons un switcher pour changer, pour distinguer les pages, pour rendre la bonne page. Et bien sûr, si ce n'est pas une page réacte, nous devons prendre la page réelle. Nous devons rendre la page du service. Donc, nous devons utiliser un sort de mécanisme pour rendre le service, pour rendre les clients ensemble. Donc, c'est notre route, comme vous pouvez le dire, la route est rapide, notre layout, comme vous l'avez vu, et c'est notre switcher. Et avec le switcher, nous pouvons changer entre nos pages. Donc, comment le switcher ressemble? Le switcher ressemble à quelque chose comme ça. Donc, j'ai le switcher, et j'interroge mes routes entières, comme vous pouvez le dire, et mes routes, par contre, ces routes sont seulement les routes clientes, pas les routes sur le service, pas les routes sur le service. Donc, si j'ai une page dont j'aimerais rendre dans un rendering client, j'ai ce objectif et puis, comme vous pouvez le dire, j'ai rendu la page avec le rendering client. Donc, si cette page n'est pas réacte, qu'est-ce qui s'est passé si ma location locale, ma location locale n'est pas réacte base. Donc, j'ai une route différente, comme vous pouvez le dire, et avec la route différente, j'ai juste utilisé les doublets, comme vous pouvez le dire, et puis, un rendering service s'applique. Donc, nous avons un rendering client, nous avons un rendering client, et nous avons un rendering service, avec ces doublets. Donc, je vais vous montrer une démonstration de ça. Et, d'abord, regardez sur une page avec deux doublets, non avec un réacteur. Donc, comme vous pouvez le voir, le spinner ici, et vous pouvez voir que cette page n'est pas une application single-page. Ce n'est pas l'application single-page. Donc, let's have a look, let's skip a bit, avec le réacteur. La même page, c'est presque instant. Donc, comme vous pouvez le voir, c'est vraiment amusant d'utiliser le réacteur, même si la plupart de vos pages sont basées sur votre rendering service. Donc, vous pouvez scalez les choses, et commencez de plus en plus, commencez de 1 réacteur, et après ça, vous pouvez avoir, quand vous avez votre application, donc, c'est seulement un métro de temps que vous utilisez ces types de pages. Vous utilisez cette technologie. Donc, pour combien de temps vous allez, est-ce que vous avez assez ? Ce n'est pas la question de... La question c'est quelque chose, la question c'est, vous souhaitez réévaluer votre entire application ? C'est un task très dur. C'est un effort très dur. C'est vraiment un task de temps consommé. Donc, vous souhaitez réévaluer votre entire application ? Donc, j'espère que vous ne voulez pas faire cela en premier. Donc, dans notre approche, nous pensons que c'est vraiment mieux d'utiliser l'application single-page d'infrastructure, qui signifie, en premier, de faire votre effort dans l'infrastructure, et pas seulement de réévaluer votre application. Vous avez les bénéfices de React maintenant avec l'approche hybrid. Donc, quand vous avez l'infrastructure, qui signifie que vous avez un meilleur API, comme GraphQL, qui, bien sûr, utilise le client mieux, vous avez client routing, comme vous l'avez vu, et vous avez plein de components. Et quand vous étiez ces trois, il n'y a qu'un moment jusqu'à une application single-page. Donc, oui, ce n'est pas un moment dont vous souhaitez réévaluer votre application, vous allez l'enlever d'un task de réévaluer. Vous avez le plaisir de cette partie, mais vous avez toujours le sens d'utiliser la nouvelle technologie aujourd'hui et pas dans le prochain futur. Merci beaucoup. Qu'est-ce que vous avez fait ? Qu'est-ce que vous avez fait pour moi ? Qu'est-ce que vous avez fait ici ? Juste généralement. Dans cette page spécifique ? Non, comme avec les fourmands, vous avez testé comment c'était facilement, avec et sans les tourbillons ? Oui. Nous avons juste mis le React Auto, et c'est basé sur React, et c'est le client-side rendering. Nous n'avons pas d'utilisation d'une route au service pour obtenir l'HTML. Donc, c'est beaucoup plus vite que d'un JSON et d'un data, et vous n'avez pas de l'HTML du service, donc c'est beaucoup plus vite. C'est une application single-page. Une application single-page, oui. Donc, avec les apps single-page, généralement, ce qui se passe c'est qu'ils créent beaucoup, le load initial est possiblement long, et puis le data qui s'étend du service, les gens, généralement, ils ont besoin de tous les gens dans leur app et pas seulement 5, et ce qui s'est passé c'est qu'ils ont le load, ils ont le load sur le front-end, et puis ils ont le load sur le front-end, mais le rendering, c'est de passer les réquests du service, en ce cas, ça commence à être trop long, et j'ai vu tout ça, il y a beaucoup d'objets, donc comment vous faites ça ? C'est pour sûr que l'application single-page est comme l'application dans votre application, parce que vous avez le service, vous avez le back-end, et puis vous avez le client. C'est quelque chose d'autre. Ce n'est pas juste comme, il used to be to have full stack engineers who do both, we have some sort of application in our application. But you gain a lot from it. So, if you look at the in the next future, not what happened now, it probably for us, for our project, we took the hybrid approach because of that concern, because it's really, we don't like to distinguish between in our application into this back-end and client and we want to have something more hybrid, something that combine between this server-side rendering and client-side rendering. Yeah, we have the last question here. Could you share more about the price, how many working hours caused this relighting from jQuery to React ? So, again ? Could you share more about how many working hours caused this relighting from jQuery to React ? Okay. So, from jQuery to React, so, it's really a good question. From jQuery to React is something that you don't do instantly, it's something that you you join that technology because you want to gain something more. With jQuery, you cannot do, you can do the same things like you do with React but it takes you much more time. So, you have much more benefits with this ecosystem, with this of course a hybrid approach because you still enjoy from new technology, from React, from packages, from, you know, from new stuff, complicated stuff but you still