Vue.js @ When Vue Meet Graham

Case study focused on meetgraham.com.au and the use of Vue.js into the project.
---
Melbourne Vue.js Meetup: http://www.meetup.com/vuejs-melbourne/
Google Slides: http://bit.ly/2jwygV8
Presentation by: http://sylvainsimao.fr

Transcript

1. When Vue Meet Graham @VueJsAustralia
2. @maoosi @_maoosi Sylvain Simao Lead Developer | Meet Graham @ Clemenger BBDO
3. Meet Who?
5. meetgraham.com.au #
6. Hot Fact #1 The website is completely functional for blind users.
7. Hot Fact #2 Graham skin is made from silicone and his hair is real – some of which was ‘donated’ by our own team.
8. Hot Fact #3 9 million page views in the first 8 days – with no paid media spend.
9. The (vue.js) Stack
10. # vue.js core vue@1.0.21 vue-webpack-boilerplate vue-router vuex vuex-router-sync prerender-spa-plugin # dev eslint Babel webpack gulp phantomjs # libs gridle normalize.css particles.js spritz.js perfect-scrollbar swiper hammerjs Package.json
11. Challenge #1: Accessibility
12. Accessibility requirements • IE8+ browser support • WCGA 2.0 AA compliant • Still accessible if Javascript Disabled Problems • Vue.js 1.x does not support IE8 and below (ES5) • Vue.js does not work without Javascript enabled ?
13. End User Main Website <!--[if lte IE 9]> <meta http-equiv="refresh" content="0; url=/fallback/"> <![endif]--> Browser <=IE9 ? JS Enabled? Fallback Website <noscript> <meta http-equiv="refresh" content="0; url=/fallback/"> </noscript> yes no no yes User flow
14. Fallback Version • Static HTML files / No Javascript • Lighter version focused on content • Designed for IE8 • Shared content
16. Home.json > Home.vue > Json + Vue + Gulp = Shared content >
18. # Keyboard navigation + Screen-reader compatibility = Accessible for blind users v-on:keyup.enter v-bind:aria-hidden v-bind:tabindex
19. Challenge #2: SEO
20. SEO requirements • Crawlable by search engines Problems • Ajax + Preloader + Javascript = Troubles for most search engines • Vue.js 1.x does not include SSR support ?
21. Prerender • PhantomJS (Headless browser) • Static HTML Snapshots • Rules for Robots
22. index.html > nginx.conf > Ajax Fragment Meta Tag /?_escaped_fragment_=home
23. webpack.conf.js > Prerender Spa Plugin
24. Challenge #3: 360 viewer
25. Viewer requirements • 360 viewer with hotspots • Hotspots must follow the 360 rotation • Entrance animation ?
26. Sprite Test #1 What is the most efficient sprite-sheet layout? VS VS ? Horizontal Vertical Square Grid
27. Sprite Test #2 What is the most efficient file format? VS ? + Flat JPG PNG 8 Alpha Mask Transparent PNG 24
28. Sprite Test #3 What is the most efficient animation method? VS ? CSS Canvas
29. Spritz.js A small, modern, responsive, sprites animation library. maoosi/spritz.js
30. Sprite Hotspotter Handmade with Vue.js • Load Sprite • Add new hotspot • Delete hotspot • Positionate • Hide/Show • Export in JSON
31. Global States with VueX • Preloading • Keep-alive once loaded • Sound management • Component communication and two ways data-binding
32. Challenge #4: X-Ray
34. X-Ray requirements • Needs to be responsive • Circle automatically goes back to its initial position after a certain time ?
35. SKIN X-RAY X-RAY SKIN SVG VS Expectation vs Reality MASK
36. SVG Clipping & Masking + Vue.js data-binding
37. Retrospective
38. Why was Vue.js a good pick ? • Simplicity and ease of use • Flexibility (Sass / ES6 / Json Content / ...) • Stability and speed, even for high traffic websites
39. The FWA SOTD 28 August 2016 Score: 84 / Day: 3 Awwwards SOTD & Developer Award 7 September 2016 Score: 7.62 / Developer Award CSSDesignAwards WOTD 31 August 2016 Score: 7.70 / Code: 7.73 Honors & Awards
40. There’s no magic to Vue.js – it just provides an elegant codebase to help you getting things done right
45. QA (tech related) ?
46. #8 ranked Agency Globally and #1 Australian Creative Agency. https://careers.cle.ms
47. Modern invoicing and subscription billing
48. Thanks! @VueJsAustralia Want to give a talk? Please contact us on @VueJsAustralia