Greetings, all! My name is Nick, and I'm a software engineer in the Engineering Group here at M3. Today we're going to mix things up a little by delivering the first ever edition of the M3 Tech Blog written primarily in English!
英語が苦手な方もいるかと思うので、日本語でのサマリーも混ぜます！
- Keynote
- Next-level Vue Animations
- Unit Testing a Vuex Store
- Nuxt.js 2.0
- A Deep Dive in SFC Compilation
- Vue CLI 3 and its Graphical User Interface
- Other Presentations
- Vue Fes Reject Conference
- We're hiring!
11月3日Vue Fes Japanが秋葉原にて開催されました。日本のVue.jsコミュニティーだけでなく、海外からVue core teamのメンバーが登壇しました！
On November 3rd, 2018, the very first large scale Vue conference, Vue Fes, was held in Tokyo. Members of the Vue core team convened from around the world and joined the local Japanese community for a day of presentations about the Javascript framework, Vue.js. M3 participated as a sponsor, and I was lucky enough to have the chance to attend.
As an English speaker I seized the opportunity to attend the presentations given by the core team members, and they were packed with great information. I'll use this space to share the content of and reflections on the presentations themselves.
Keynote
Vue製作者Evan You氏による今後のVue: より速く、より小さく、よりメンテナンスしやすく、よりネイティブ向けに作りやすい
Vue 3.0では、
- パフォーマンスの改善（2倍早くなる！）
- TypeScriptの強化
- Tree shaking等の最適化によるバンドルの縮小
- 新APIの提供によるネイティブアプリ開発のシンプル化
等、を進めています。楽しみにしています！
The day started with a keynote address from the creator of Vue, Evan You. In it, he talked about the progress the team has made on the next major iteration of Vue, version 3. In particular, he outlined four specific goals for the future of Vue:
- Faster
- Smaller
- More maintainable
- Easier to develop native applications
Vue 3.0 is looking to be much more performant, with speed increases of up to 100% for some uses as well as smaller bundles with things like tree shaking. Additionally, 3.0 is a rewrite that will improve the architecture of the Vue app and make it more maintainable for the authors (and maybe easier to contribute to?) while preserving the old API and maintaining backward compatibility as much as possible. In the process they're improving support for TypeScript, too! On the native front, they will be exposing new APIs that make it easier to render to native applications.
Bonus!
最近話題のhooks APIやtime slicingも実験的にサポートします！
Evan also mentioned experimental support for two Hot New Features: hooks and time slicing!
The big news in the front-end framework community lately is around hooks, a new API being introduced into React that allows for easier sharing of state manipulation logic between components without using mixins.
Time slicing is a way of diving CPU-intensive tasks into smaller increments to prevent long hangs when rendering.
Next-level Vue Animations
CSS, SVGプロのSarah DrasnerがVueでアニメーションを使いこなすためのtipsやUI/UXデザインについて発表しました。和訳されたスライドもあるのでご覧ください！
Sarah Drasner was kind enough to upload her slides (in Japanese), so follow along here:
Sarah is an absolute wizard when it comes to making cool things on the web with CSS and JS. Just take a look at one of her creations here, borrowing a character from the Pixar movie, Wall-E.
The thesis of Sarah's talk was that effective use of animations in user interfaces is essential for creating pleasant, understandable user experiences. She illustrates this by showing how sudden, jarring interface changes can be stressful and degrade the overall experience, contrasting with live examples of interfaces that flow seamlessly between contexts and use animations not only to enhance presentation but also understandability.
She then ties this into an explanation of how to use the Vue animation system, and offers some particularly cool examples using the under-utilized javascript hooks in the Vue transition system to make text bounce around the page.
Unit Testing a Vuex Store
Vue Test Utilsを作ったEdd Yerburghの発表では、Vuex storeの書き方について話しました。日本語のスライドがないのですが、Vue Test Utilsのドキュメントを読めばそれに近い内容になっているかと思います！
Edd Yerburgh is the creator of Vue Test Utils and author of the (currently early access, but still very good) book, Testing Vue Applications.
You can follow his slides here (English only, unfortunately):
In his talk, Edd walks through how to use his testing library to perform a specific task, in this case testing a Vuex store. Vuex is a state management library for Vue in the vein of React/Redux. Central state is manipulated from the client through actions which commit mutations to the state, and the client can then access the state through getter functions.
He discusses setting up a store for testing using a local Vue instance and the tradeoffs between fine-grained testing of each component vs. taking a higher-level integration test approach to testing stores. The crux is that testing, for example, an action only and making sure the output is as expected can often be enough, especailly on smaller projects. As applications get larger, though, it may be worth it to invest the extra time and effort in testing each getter and mutation individually as well, even though it can create brittle tests that make it harder to change code in the long run.
Nuxt.js 2.0
Nuxt.jsを作ったChopin兄弟のSébastien氏が登壇しました。スライドがネットにアップロードされていないようですが、この発表もNuxt.js入門的なテーマだったので、Vue Test Utilsみたいにドキュメントが充実していると思います。ちなみにNuxt.jsチームは最近ドキュメントの質と翻訳に力を入れているそうです。
Sébastien Chopin, one of the co-creators of the framework Nuxt.js, took to the stage to talk about the newest version of Nuxt.js released in late September.
(Unfortunately it seems slides are not available for this talk)
Nuxt.js is a framework built on top of Vue that makes it easier to build entire applications. You can use it in a universal application mode, which optionally includes a user-selectable API server like Express or Apollo and delivers server side rendering out of the box. You can also use it in SPA mode to deliver a true single page application. You can even use it to do static site generation. The talk was largely an introduction to the framework itself and how to get started with it.
Nuxt.js 2.3.0 will be out soon, featuring a --modern flag allowing for smaller build with fewer polyfills that can take advantage of newer browser features. He also reaffirmed the team's commitment to Vue 3.0 support!
A Deep Dive in SFC Compilation
Vue compilerを担当しているRahul Kadyanによる、VueのSFC（single file component）のコンパイラーについての発表です。スライドはネットになかったですが、Githubに自分でビルドできるスライドと日本語訳があるので見てみてください！VueのHTML, CSS, JS入りのファイルをどのようにコンパイルするか解説しました。
Rahul Kadyan works on the compiler side of Vue, and his talk gave a high-level overview of the "what" of Vue SFC compilation (rather than the "how").
Again I couldn't find slides uploaded anywhere, but it seems you can build them yourself from this repository (with Japanese translation)
One of the major selling points of Vue is that you can write a component's template, style, and code all in a single .vue file. This structure is referred to as a single-file component, or SFC. Rahul's talk focused on the process that goes into ingesting a .vue file and spitting out the final code that can be understood and run by the Vue runtime. He also talks about ways that the compiler can optimize code, like with reducing the rendering of static content.
It's a really complex topic with lots of helpful diagrams, so I wholly recommend checking out the slides!
Vue CLI 3 and its Graphical User Interface
Vue CLIを担当しているGuillaume Chauの発表です。最近Vue CLI 3がリリースされて、新規のVueプロジェクトが非常に管理、メンテナンスしやすくなりました。CLIだけでなく、充実したGUIアプリも付いています。今回はVue CLIと特にGUIについでの話です。日本語のスライドが付いています！
Guillaume Chau brought us a very detailed talk about Vue CLI 3, and particularly the GUI that they built for it.
Vue CLI 3 is an amazing project that is a major upgrade over its predecessor. Previous iterations of Vue CLI were barebones: you were prompted for a few preferences and library choices up front, but ultimately the tool would set up some project scaffolding for you, eject you right out of the command line and wish you good luck from there. Adding or changing libraries and preferences from there is possible, but can involve a lot of headaches as you scour the internet and try to figure out the exact configuration options that you need.
Vue CLI 3 fixes this by providing a fully-fledged Vue project management solution, with an intuitive interface, a robust plugin ecosystem, and the ability to manage and modify your Vue project long-term from within the CLI app itself, making it easier to, for example, add the Jest testing library after the fact, or any other of a number of features.
The real belle of the ball, however, is the GUI. While it can be used entirely from the command line, Vue CLI 3 comes packed with a beautiful browser-based interface (built on Vue, of course) that allows setup and modification of your project as well as fine-grained statistics about your build.
Other Presentations
英語ネイティブの僕は英語での発表を中心に聴きましたが、日本人による日本語での発表もあったので、こちらでまとめます！
I chose to attend the Vue core team presentations, but members of the Japanese Vue community also participated.
- Vue.jsとWeb Componentsのこれから (Takanori Oki)
- Vue Designer: デザインと実装の統合 (katashin)
- Atomic Design のデザインと実装の狭間 (菅原 孝則)
- note のフロントエンドを Nuxt.js で再構築した話 (福井 烈)
- 1年間単体テストを書き続けた現場から送る Vue Component のテスト (土屋 和良)
Vue Fes Reject Conference
エムスリーエンジニア鈴木さんがVue Fes Reject Conferenceに登壇しました！
Kenta Suzuki, another M3 engineer, also presented at the Vue Fes Reject Conference! He talked about porting a legacy app to Vue and Nuxt.js.
v-beer pic.twitter.com/8axYwpx1uG
— Vue.js (@vuejs) November 3, 2018
Thanks to the organizers, the sponsors, the presenters and the attendees for a great conference! I'm already looking forward to next year.
We're hiring!
一緒に今度のVue Fes Japanに行く仲間を募集しているので、Vueが好きな方カジュアル面談に来てみませんか？英語でも日本語でも歓迎します！
At M3 we use Vue to deliver powerful front-end user experiences. We could always use more members on our team, so why not stop by for a chat?
