VueJs Amsterdam is one of the biggest Vue conferences. It comprises one day of FrontEndDeveloperLove and two days of Vue talks. Get to know more about the event and what great speakers presented.
For the first time in my life, I was finally able to attend a big dev conference. Before, I usually just watched talks online and attended local meetups from time to time. However, after hearing a lot about previous Vue.Js Amsterdam conferences, I decided to attend the next one in person. As a person who is extremely passionate about programming and especially about Vue, I was excited about experiencing the conference myself. I heard a lot in the past about the great venue and huge screen during previous VueAmsterdams and was looking forward to seeing it myself.
The conference consisted of one day of FrontEndDeveloperLove and two days of Vue talks. Besides an amazing venue, there were also impressive speakers and software maintainers like creator of Vue.js Evan You and other Vue core team members, Nuxt brothers, or mentors from VueSchool and VueMastery.
It was 7:30 a.m. and organizers were finishing the last preparations to start the event, while the first participants already waited at the entrance of Amsterdam Theatre to attend one of the best Vue conferences. Finally, after a few minutes, one of the organizers asked everyone to queue up and after that handed out little JS love flags. (Mine unfortunately died on the way back home.)
After a few more minutes of standing outside, we could finally enter the venue and pick up our badges.
After getting my badge and having a look around the area, at that time and after travelling to Amsterdam, the first thing I thought about was where can I get a coffee to wake myself up. To be honest, I never drank worse coffee in my life, but, well, it did wake me up instantly so objective achieved. Besides coffee, participants were offered various drinks ranging from tea to water, Coke and juice, as well as muffins, brownies, and croissants to eat. To be honest, I did expect something different for a breakfast than mainly sugary treats.
At around 8:45 a.m., the doors to the theatre finally opened and everyone started to proceed to take their seats and wait for the first talk. When I entered inside, I immediately thought “Wow, that is a huge screen.” In this case, people online did not exaggerate, and what I have seen on videos from the last conference was true.
With help of bundlers, we have not only module bundling, but, for instance, with webpack we can use various loaders and tools to improve development experience and efficiency as well as optimize the application better. Modern CLIs like Vue’s CLI, which is using webpack under the hood, have a lot of features out of the box, like running our app on a dev server, hot module replacement, tree-shaking, dead-code elimination, minification, compression, and more. ECMAScript modules do allow importing modules in the browser, but it requires use of ‘real path’ instead of a nice shortcut like ‘@’ which is usually used to target the ‘src’ folder.
Nevertheless, there are quite a few interesting proposals being discussed, and one of them is ‘import-maps’ (https://github.com/WICG/import-maps), which would allow bare import specifiers such as ‘import moment from ‘moment’ and a few other useful things. Allegedly, Blink team is intending to implement it.
Other proposals that Johannes also mentioned are:
HTML Modules - https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-proposal.md
CSS Modules - https://github.com/w3c/webcomponents/issues/759
JSON Modules - https://github.com/whatwg/html/issues/4315
ES Module Integration - https://github.com/WebAssembly/esm-integration/tree/master/proposals/esm-integration
Asset references - https://github.com/sebmarkbage/ecmascript-asset-references
ImportAs proposal - https://github.com/AshleyScirra/import-as-and-html-modules
These proposals could benefit developers in that there would be no need for configuring loaders to handle specific file types as they would be supported natively. Johannes also underlined that custom language support for npm modules would make sharing frontend components easier, and features as such would bring us a step closer to no-config development. However, nothing comes for free, as these proposals would be doing transformations on run time. Therefore, browsers would have more things to process, and, thus, applications would be a bit slower while bundlers do the job on build time.
Next Johannes mentioned a new HTTP feature, H2 push, that allows the server to push resources proactively to the client. In theory it is a great feature, but in practice the implementation is still inconsistent and there are bottlenecks that were not solved yet. For instance, not everything should be pushed to the client, as some of the resources can already be cached and, in such a scenario, a user would be getting a resource that is unnecessary. Static analysis or even real-time data could potentially be used to provide more information about what resources should be prioritized. Guess.js could be used for enabling data-driver user-experiences on the web.
In conclusion, if you are making a small website, then you can go old-school style and create simple HTML, CSS, and JS files and use ES5 code for compatibility with older browsers like IE. However, if you are doing anything more than that, then various tools like webpack and Babel are a must, especially if you want to make the most out of your application in terms of optimizations, speed, caching, new language features, and custom DSLs like JSX or Vue’s Single File Components.
For more, the recap continues in part two.
Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue, our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.
Thomas Findlay is a web and mobile developer, mentor, technical writer and consultant with almost six years of experience. He specializes in frontend web technologies including Vue.js, React.js, React Native for mobile applications, along with backend: PHP, Laravel, Python, Flask, Node.js and Express.js. Thomas has designed and developed websites and mobile applications for individuals and small and large businesses. Learn more about Thomas at https://www.codementor.io/thomas478
Subscribe to be the first to get our expert-written articles and tutorials for developers!