The first ever VueConf.US took place March 26-28th in New Orleans, bringing together the VueJS Core team and hundreds of Vue developers from around the world. The conference contained a single day of workshops, all taught by members of the VueJS core team, followed by two days of talks. Speakers announced new releases and project processes, explained Vue internals, and shared best practices.
Here's what went down in the first morning of talks.
Keynote - Maturing Project Processes
The conference kicked off with a keynote by Evan You, the creator of Vue, highlighting the growth of Vue since 2016 and highlighting new development and new project processes that are coming soon. You on Vue's growth:
In 2017 we've seen exponential growth, compared to 2016 it's even faster. In 2016 I thought we were already seeing explosive growth, but in 2017 it's been even faster.
We were the single most starred project on github on 2017
With growth of the Vue project comes process maturation. Along with tooling updates like rewriting vue-loader to make it play much more nicely with standard webpack configuration and vue-cli to improve upgradability, the big announcements of the talk were around new processes being adopted.
Vue will be moving to a standardized release cycle with new minor releases every three months and a minimum six-month notice prior to major releases. Along with this change, they will be shifting from a single release channel to four separated release channels. In addition, following the best practice examples of projects like Rust, Ember, and more recently React VueJS will be creating a formalized RFC process.
VueJS Internals - Under the Hood of the Vue Reactivity System
Gregg Pollack, founder of VueMastery.com, presented "Deciphering You", diving under the covers of the Vue.js reactivity system. He first taught the audience how to create a simple reactive system by implementing a simple dependency tracking class and using Object.defineProperty to set up getters and setters that hook into the dependency tracking.
Following that, he walked the audience through the VueJS source code, diving down through the call stack to find where Vue implements reactivity, using exactly the pattern he had just taught. This allows Vue to keep track of all the data dependencies of a function, automatically recomputing dependent values as data changes.
As a final layer, Pollack introduced the audience to how Vue renders templates, with a simple two-step process compiling templates to a render method, and then using the render method to generate virtual DOM nodes which the framework can translate into the browser. The fact that rendering boils down to a function means that it can plug into the exact same dependency tracking covered before, making template reactivity a natural consequence of core reactivity system.
Vue at Gitlab
Jacob Schatz, Frontend lead at Gitlab, presented a case study titled "How We Do Vue at Gitlab", describing how Gitlab adopted Vue, bringing it into a real life project. While many speakers assume developers are working on greenfields projects, Schatz was coming into a situation with a large existing application written with primary jQuery, and detailed the decision making and migration process. He described how prior to making a recommendation, the team evaluated multiple frameworks. On why they went with Vue, Schatz said:
Vue had the smallest learning curve for the largest amount of features.
All of these frameworks work, but when it comes to the scale of application you're going to be working on, will it still be effective? And Vue was easy the whole way
Working within a large, existing project, they didn't have the luxury of a complex front-end build process. Schatz detailed how after simply adding Vue to the page, they were able to step-by-step and component-by-component rewrite their application to use Vue without ever having to stop developing new features.
Vue in Motion
Rachel Nabors, author of "Animation at Work", presented a talk on implementing animations and transitions in Vue titled "Vue In Motion". Starting from an explanation of CSS transitions as event watchers for CSS properties, Nabors showed how the Vue
Next, she showed how to use transition groups for coordinating movements across multiple elements, and transition modes to determine order when replacing one element with another. For each set of transition CSS hooks, an equivalent set of JavaScript hooks is available using standard vue event binding. Instead of tying into a set of `leave` classes, you can simply bind to the 'leave' event with v-bind:leave="animationFunction".
Testing Vue Apps
In the final talk of the morning, Edd Yerburgh, Vue core team member and author of "vue-test-utils", spoke about testing Vue applications. He presented an adapted testing pyramid for the front end, consisting of end-to-end tests, snapshot tests, and unit tests.
Yerburgh proceeded to breakdown the pros and cons of each of these types of tests. End-to-end tests run code using a browser to get closest to the way a user would actually use the code, but can be difficult to debug and slow. On the other end of the spectrum, unit tests are easy to debug and fast, but can be fragile and sensitive to unimportant implementation details if not done carefully. Snapshot tests stake out the middle ground between E2E components and Unit tests in terms of speed and fragility. These take snapshots of rendered component code and then compare for changes. These tests are used to safeguard against unintended changes, preventing developers from accidentally changing rendered markup or unintentionally stripping out important CSS classes while changing functionality.
Throughout - A Big Emphasis on Community
Throughout the conference, emphasis on community was high, attendees were extremely positive, and "Vue" puns were rampant. When asked his thoughts on the conference, attendee Kelvin Spencer stated:
This conference has given me the perfect "Vue" of programming in the future
Other attendees agreed, also emphasizing how comfortable and welcoming the community was. Attendee Mike Skott said:
My favorite thing was meeting people - coming and being not afraid to approach strangers, knowing that we have something in common, and finding a lot of really great people.
Attendee Richard Tallent chimed in:
It's hard to pick a favorite talk - I have like 15 pages of notes. But what stood out the most was meeting the wide variety of developers and developer experiences, and everyone having a similar level of excitement about the platform and its possibilities.
All of the talks were recorded, and will be posted on VueMastery.com. InfoQ is covering VueConf with Q&A and summaries.
