VueJs Amsterdam 2019 – Résumé de l'expérience et des discussions (partie 1)

VueJs Amsterdam est l’une des plus grandes conférences Vue. Il comprend un jour de FrontEndDeveloperLove et deux jours de discussion avec Vue. Apprenez-en plus sur l'événement et sur les excellents conférenciers.

Pour la première fois de ma vie, j'ai enfin pu assister à une grande conférence de développement. Auparavant, je regardais habituellement des conférences en ligne et assistais de temps en temps à des rencontres locales. Cependant, après avoir beaucoup entendu parler des conférences précédentes Vue.Js Amsterdam j'ai décidé d'assister à la conférence suivante en personne. En tant que personne extrêmement passionnée par la programmation et particulièrement par Vue, j'étais enthousiaste à l'idée de vivre la conférence moi-même. J'avais beaucoup entendu parler de la grande salle et de l'écran géant lors des précédentes éditions de VueAmsterdam et j'avais hâte de la voir moi-même.

La conférence consistait en une journée FrontEndDeveloperLove et deux journées en discussions avec Vue. Outre un site exceptionnel, il y avait aussi des haut-parleurs et des développeurs de logiciels impressionnants, tels que le créateur de Vue.js, Evan You et d'autres membres de l'équipe principale de Vue, les frères Nuxt ou des mentors de VueSchool et de VueMastery.

Il était 7 h 30 et les organisateurs achevaient les derniers préparatifs pour commencer l’événement, alors que les premiers participants attendaient déjà à l’entrée du théâtre d’Amsterdam pour assister à l’une des meilleures conférences Vue. Finalement, au bout de quelques minutes, l’un des organisateurs a demandé à tout le monde de faire la queue et a ensuite remis un petit drapeau d’amour JS. (Le mien est malheureusement décédé en rentrant chez moi.)

Après quelques minutes supplémentaires à l'extérieur, nous avons pu enfin entrer et choisir le lieu. nos badges.

Après avoir obtenu mon badge et jeté un coup d’œil dans les environs, à l’époque et Après avoir voyagé à Amsterdam, la première chose à laquelle j'ai pensé était de savoir comment me procurer un café pour me réveiller. Pour être honnête, je n'ai jamais bu de café de pire qualité dans ma vie, mais bon, ça m'a réveillé instantanément, donc objectif atteint. Outre le café, les participants se sont vus proposer diverses boissons allant du thé à l’eau, du Coca-Cola et du jus de fruits, ainsi que des muffins, des brownies et des croissants. Pour être honnête, je m'attendais à ce que le petit-déjeuner soit différent de celui des friandises principalement sucrées.

Vers 8 h 45, les portes du théâtre s'ouvrirent enfin et Tout le monde a commencé à s'asseoir et à attendre la première conversation. Quand je suis rentré à l'intérieur, j'ai tout de suite pensé «Waouh, c'est un écran immense." Dans ce cas, les gens en ligne n'exagéraient pas, et ce que j'ai vu sur des vidéos

Une fois le compte à rebours terminé et que l’organisateur a accueilli tous les participants, le premier orateur est présenté – Johannes Ewald, un membre principal de l'équipe webpack, avec une conférence sur l'avenir des bundles JavaScript.

L'avenir des bundles JavaScript de Johannes Ewald

J'ai trouvé cette discussion très intéressante, car humoristique. montre comment le développement des sites Web a changé. Il y a quelques années à peine, les développeurs devaient simplement créer un fichier HTML avec un fichier de style pour CSS et un fichier script pour le code JavaScript. Cependant, le flux de travail actuel du développement front-end nécessite de nombreuses bibliothèques, telles que Webpack pour le groupage de modules, Babel pour la transpilation de code afin que nous puissions utiliser les nouvelles fonctionnalités les plus récentes d'ECMAScript, et bien plus encore. Parfois, la simple configuration d'un projet peut prendre des heures avant que la première ligne du code de site Web soit écrite. Cependant, Johannes a souligné que nous n'aurions peut-être pas besoin d'outils supplémentaires, car la plupart des navigateurs Evergreen prennent en charge la quasi-totalité des fonctionnalités d'ECMAScript 2015, ainsi que des modules JavaScript, qui peuvent être utilisés pour conserver votre code dans des fichiers séparés et uniquement importés en cas de besoin. Cependant, les spécificateurs de module nus et les extensions de fichier facultatives ne sont pas pris en charge.

Avec l'aide des bundles, nous avons non seulement le bundling en module, mais, par exemple, avec Webpack, nous pouvons utiliser différents chargeurs et outils pour améliorer l'expérience de développement et l'efficacité, ainsi que pour optimiser l'application. Des CLI modernes, telles que la CLI de Vue, qui utilise Webpack sous le capot, offrent de nombreuses fonctionnalités telles que le lancement de notre application sur un développeur. Remplacement de module chaud, serveur, suppression d'arborescence, élimination de code mort, minification, compression, etc. Les modules ECMAScript permettent d'importer des modules dans le navigateur, mais nécessitent l'utilisation de "chemin réel" au lieu d'un joli raccourci du type "@". qui est généralement utilisé pour cibler le dossier 'src'.

Néanmoins, plusieurs propositions intéressantes sont en cours de discussion, l'une d'elles étant les “cartes d'importation” ( https://github.com/WICG / import-maps ), qui autoriserait des spécificateurs d'importation nus tels que 'import moment de "moment" et quelques autres choses utiles. L'équipe de Blink aurait l'intention de la mettre en œuvre.

Les autres propositions mentionnées par Johannes sont également les suivantes:

HTML Modules – https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-proposal.md
Modules CSS – https://github.com/w3c/webcomponents / issues / 759
Modules JSON – https://github.com/whatwg/html/issues/4315
Intégration du module ES – https://github.com/WebAssembly/esm- integration / tree / master / propositions / esm-integration
Références concernant l'actif – https://github.com/sebmarkbage/ecmascript-asset-references
Proposition ImportAs – https: // github. com / AshleyScirra / modules-import-as-and-html

Ces propositions pourraient être utiles aux développeurs car il ne serait pas nécessaire de configurer les chargeurs pour gérer des types de fichiers spécifiques car ils seraient pris en charge de façon native. cust La prise en charge par om du langage pour les modules npm faciliterait le partage des composants frontaux et les fonctionnalités en tant que telles nous rapprocheraient du développement sans configuration. Cependant, rien n'est gratuit, car ces propositions entraîneraient des transformations à l'exécution. Par conséquent, les navigateurs auraient plus de choses à traiter et, par conséquent, les applications seraient un peu plus lentes, tandis que les bundles effectueraient le travail au moment de la compilation.

Une autre alternative aux chargeurs est la méthode 'babel-plugin-macros' ( https: //github.com/kentcdodds/babel-plugin-macros/blob/master/README.md). C'est un plugin qui peut être utilisé pour évaluer le code lors de la compilation. Pour être honnête, cela m'a rappelé un peu le Prepack de Facebook, un outil permettant d'optimiser le code JavaScript.

Néanmoins, Même si les chargeurs pourraient bientôt être remplacés par ces propositions, il restera encore des éléments difficiles à remplacer, tels que HMR, qui est désormais essentiel pour une grande expérience de développement. »Johannes espère qu'un jour nous disposerons d'une plate-forme unifiée avec des API indépendantes. Par exemple, javascript-standard-library est une proposition intéressante qui pourrait aider à résoudre ce problème ( https://github.com/tc39/proposal-javascript-standard-library#standard-library-proposal ). [19659003] Ensuite, Johannes mentionna une nouvelle fonctionnalité HTTP, H2 Push, qui permettait au serveur de transférer des ressources au client de manière proactive. En théorie, c’est une fonctionnalité intéressante, mais en pratique, son implémentation est toujours incohérente et il existe des goulots d’étranglement qui n’ont pas encore été résolus Par exemple, tout ne doit pas être poussé à la cli En effet, certaines des ressources peuvent déjà être mises en cache et, dans un tel scénario, un utilisateur obtiendrait une ressource inutile. Une analyse statique ou même des données en temps réel pourraient éventuellement être utilisées pour fournir plus d'informations sur les ressources à hiérarchiser. Guess.js pourrait être utilisé pour permettre aux utilisateurs de bases de données de vivre leurs expériences sur le Web.

En conclusion, si vous êtes Si vous créez un petit site Web, vous pourrez alors utiliser le style traditionnel et créer de simples fichiers HTML, CSS et JS, et utiliser le code ES5 pour la compatibilité avec les anciens navigateurs tels que IE. Cependant, si vous faites autre chose, des outils tels que Webpack et Babel sont indispensables, en particulier si vous souhaitez tirer le meilleur parti de votre application en termes d'optimisation, de rapidité, de mise en cache, de nouvelles fonctionnalités linguistiques et de DSL personnalisés, tels que JSX ou les composants à fichier unique de Vue.

Pour plus d'informations sur Vue

Découvrez l'interface utilisateur de Kendo pour Vue notre bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. composants dont vous aurez besoin, des grilles et graphiques aux programmateurs et cadrans.