The first ever VueConf.US took place March 26-28 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. Previously InfoQ published a summary of the morning sessions from March 27, a summary of the afternoon sessions from March 27, and an interview with Gregg Pollack of Vue Mastery.
This is a summary of the sessions from March 28. Presentations covered advanced Vue Patterns, Design Systems with Vue, using TypeScript with Vue, comparisons between Vue and React, Server Side Rendering with Vue, Vue Storybook, and rapid prototyping with Vue Single File Components.
Seven secret patterns Vue consultants don't want you to know
Chris Fritz, Vue consultant and core team member, kicked off the day with a talk about seven patterns for improving the way developers write Vue code, divided into three categories: 'Productivity Boosts', 'Radical Tweaks', and 'Unlocked Possibilities'.
One of the immediate productivity boosts was the ability to pass objects to watchers, allowing you to configure them to run immediately on pageload and eliminate a common pattern of duplication between watchers and mounted hooks.
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true,
},
}
Additional productivity boosts included automatic component and module registration. Listed under radical tweaks were possibilities such as Lazy-loaded routes and building transparent wrapper components. Finally, under 'Unlocked Possibilities' Fritz brought up powerful tools like building multi-root components with functional components and rendering non-HTML elements like map layers utilizing render functions that return ull.
Agile design systems in Vue
The second talk was by Miriam Suzanne, web consultant, writer, and creator of the Suzy grid system. She spoke about design systems, and how to build them into your development process. Breaking down the concept of design as seperate from development, Suzanne stated:
A design system is always going to be an integration of design and code. It's never going to be one or the other. It's not just how does the letter 'm' work, it's how are you going to build the sign the 'm' is on?
Similar to creating documentation to an API, Suzanne advocated creating styleguides as a way to communicate about and share design patterns:
If you have patterns in your application, and you don't tell people those patterns exist, those patterns won't exist two hours later.
To keep styleguides from falling out of date, she highlighted the importance of baking styleguide generation into tooling, with every new addition to stylesheets automatically being added to the styleguide.
Vue and TypeScript: up and running
Daniel Rosenwasser, program manager at Microsoft, presented on the value of using TypeScript in JavaScript development and Vue in particular. Said Rosenwasser:
A type system can tell you not just what you shouldn't be doing, but maybe predict what you want you want to be doing as well.
Rosenwaser then walked through what it took to bring types to Vue, pointing out that it was extremely challenging due to the level of metaprogramming involved. The TypeScript and Vue teams worked together, making multiple changes to both TypeScript and Vue through several releases, but today it is possible to use TypeScript with Vue simply by using vue-cli preset and adding types to computed properties.
Migrating types to existing projects is still more challenging, but the team is working on guides to make this more approachable. For more information, developers can check out the Vue documentation on TypeScript.
A React point of Vue
The next speaker was Divya Sasidharan, a web developer at Lucro Global LLC. Sasidharan spoke about philosophical differences she discovered when switching from React to Vue:
In Vue, the way that we write our code is very declarative. There's a clear separation of concerns, whereas in React and JSX it can be a little difficult to read as the logic is right in the markup
Throughout the talk, Sasidharan presented approaches from React and contrasted them to Vue, highlighting the declarative approach Vue takes in each. She closed the talk by showing how even for functionality that doesn't naturally fit into this paradigm like web maps that use a single canvas element, it is possible to create a declarative "vue-like" approach by utilizing render functions that return null but apply layers to a shared canvas.
Vue and SSR: the best practices
Opening the afternoon sessions after another series of lightning talks was Sebastien Chopin, author of Nuxt.js. Chopin highlighted that the phrase "server side rendering" missed the point a little bit - web applications have rendered on the server since the beginning - but that the truly new functionality is truly shared code between server and client, along with transparent client-side hydration of a single-page application on top of server-side rendered content.
Chopin highlighted the benefits of this approach, which he labeled 'Universal' JavaScript, as easier SEO and social sharing implementation, and faster time to initial load than single-page applications. At the same time, by hydrating a single-page application after render, Universal JavaScript apps still enable benefits of a SPA in terms of complete client-side control, faster page transitions, and lower data requirements.
Through the remainder of the talk, Chopin walked the audience through a series of examples showing the choices and steps needed to take advantage of Vue's serverside rendering capabilities to create Universal Javascript applications. He then showed how the Nuxt.js framework makes adopting all of the best practices as simple as installing a starter template with vue init nuxt-community/starter-template .
A short synopsis of Vue Storybook
Next on the agenda, Peter Finn of SalesLoft spoke about Vue Storybook. Storybook is UI Development environment that enables building out components in what is essentially an interactive styleguide. The library gained initial popularity with React, but Finn highlighted how a Vue port has been developed, making it straighforward to use with Vue.js.
The talk walked through the features of Storybook, showing how it facilitates isolated UI testing and the documentation of UI components. Finn then turned to some of the changes the use of Storybook can enable in the organization, and brought up the possibility of "UI-driven development" as an alternative to test-driven development or other processes.
Prototyping with Vue single file components
Closing out the conference was Pine Wu of the VS Code team at Microsoft. Pine's talk, which judging by the twitter comments was one of the most popular of the conference, covered a new, under-development prototyping tool called Proun.
Proun, the name taken from an artistic style that Wu stated was 'the intermediate state between art & architecture', is an in-editor prototyping tool integrated with VS Code. The tool is not yet available for public use, but Wu showed how it will enable extremely rapid iteration on Vue single file components, allowing a developer to change their code and immediately see the changes without having to hop back and forth between editor, browser, and developer tools. The simplicity and efficiency of the process brought the audience to spontaneously applaud. Said Wu:
The tools I use fundamentally change the way I think about things. I really like the idea of making tools that help you build things more simply, and because of these tools you start building more simple things.