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
?
Slide 13
Slide 13 text
End User
Main
Website
Browser
<=IE9 ?
JS
Enabled?
Fallback
Website
yes
no
no
yes
User flow
Slide 14
Slide 14 text
Fallback Version
● Static HTML files / No Javascript
● Lighter version focused on content
● Designed for IE8
● Shared content
SEO requirements
● Crawlable by search engines
Problems
● Ajax + Preloader + Javascript
= Troubles for most search engines
● Vue.js 1.x does not include SSR support
?
Slide 21
Slide 21 text
Prerender
● PhantomJS (Headless browser)
● Static HTML Snapshots
● Rules for Robots
Slide 22
Slide 22 text
index.html >
nginx.conf >
Ajax Fragment Meta Tag
/?_escaped_fragment_=home
Slide 23
Slide 23 text
webpack.conf.js >
Prerender Spa Plugin
Slide 24
Slide 24 text
Challenge #3:
360 viewer
Slide 25
Slide 25 text
Viewer requirements
● 360 viewer with hotspots
● Hotspots must follow the 360 rotation
● Entrance animation
?
Slide 26
Slide 26 text
Sprite Test #1
What is the most efficient sprite-sheet layout?
VS VS
?
Horizontal
Vertical
Square Grid
Slide 27
Slide 27 text
Sprite Test #2
What is the most efficient file format?
VS
?
+
Flat JPG PNG 8 Alpha Mask Transparent PNG 24
Slide 28
Slide 28 text
Sprite Test #3
What is the most efficient animation method?
VS
?
CSS Canvas
Slide 29
Slide 29 text
Spritz.js
A small, modern, responsive,
sprites animation library.
maoosi/spritz.js
Slide 30
Slide 30 text
Sprite Hotspotter
Handmade with Vue.js
● Load Sprite
● Add new hotspot
● Delete hotspot
● Positionate
● Hide/Show
● Export in JSON
Slide 31
Slide 31 text
Global States with VueX
● Preloading
● Keep-alive once loaded
● Sound management
● Component communication and two ways
data-binding
Slide 32
Slide 32 text
Challenge #4:
X-Ray
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
X-Ray requirements
● Needs to be responsive
● Circle automatically goes
back to its initial position
after a certain time
?
Slide 35
Slide 35 text
SKIN
X-RAY
X-RAY
SKIN
SVG
VS
Expectation vs Reality
MASK
Slide 36
Slide 36 text
SVG Clipping
& Masking
+
Vue.js
data-binding
Slide 37
Slide 37 text
Retrospective
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
There’s no magic to Vue.js – it just provides an elegant
codebase to help you getting things done right
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
QA
(tech related)
?
Slide 46
Slide 46 text
#8 ranked Agency Globally and #1 Australian Creative Agency.
https://careers.cle.ms
Slide 47
Slide 47 text
Modern invoicing and subscription billing
Slide 48
Slide 48 text
Thanks!
@VueJsAustralia
Want to give a talk? Please contact us on @VueJsAustralia