Cooking Data/Story with web tools
Arvin Huang
-
NTOU CS, BS
-
NCKU CS, MS
-
Yahoo! Taiwan, F2E
-
TW/HK News
-
Techbridge newsletter/blog
Second largest branch in the world
More than 1,000 employees
Multinational software corporation in Taiwan
Yahoo Homepage
Yahoo News
Yahoo Sports
Y! Auction/Mall/Shop
Yahoo TV/Live
Yahoo App/Mweb
Yahoo Open Source
-
React-Intl (i18n)
-
Fluxible
-
Atomic CSS
-
AppDevKit
-
YangMingShan
-
TensorFlowOnSpark
-
...
What do you want to do with web tools?
( Javascript, HTML, CSS, etc )
Web Apps?
Mobile Apps?
Desktop Apps?
React + Redux
What's the magic of web?
A better/easier way to share stories
Easy to access
Not much burden
Spreading Fast
No app store, just browser.
One link, one click.
Never eat up the storage.
But come with...
source: http://www.cna.com.tw/news/aipl/201611280152-1.aspx
Fake/Bad News
But come with...
Content farm
Your idea will be buried
We need a better solution to be outstanding
How to tell a great story
Data support
Can be understood in short time.
Great User Experience
How to tell a great story
Data support
Can be understood in short time.
Great User Experience
Data visualization
Data sourcing
Progressive web app
with web tools
Data sourcing
Open Data
Open Data
Get your own data
reference: 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料
Get your own data
Get your own data
Get your own data
Get your own data
by your own parser
Manipulate DOM
Headless Browsing
Get your own data
by your own parser
Data Visualization
Why Data Visualization is important?
It's all about insight
Google Data Studio
PlotDB
Tableau
CartoDB
Leaflet.js
HighCharts
D3.js
D3-based reusable chart library
NVD3.js
C3.js
D4.js
react-d3
There are more...
source: https://goo.gl/Ax5M82
Example: 用數據看台灣
Progressive Web App
What PWA want to do?
- Add to Home Screen
- App-like
- Offline support
- Push notification
- Splash Screen
Why we need PWA?
- Provide user a better experience on the web.
- Fast install.
- Reduce storage required
- More rapid updates.
- More users will come.
- It's a Win-win game.
Browser support...
Service Worker
- Javascript worker - can't manipulate DOM directly
- Intercept network request
- Promise
- IndexDB, Cache Storage
check your current service-worker: chrome://serviceworker-internals
-
Instant access to Twitter
-
Fast to install, space- and data-friendly
-
One-tap access from your home screen
-
Push Notifications
-
Offline access
-
Safe browsing
Voot
(India's top video-on-demand products)
Results
- 80% reduction in page load time
- 39% increase in session time per user
- 19% reduction in bounce rate
- 77% increase in conversion from visitor to video viewer
- 15% increase in average daily video views per user
PWA resources
Offline Web Applications (udacity)
more tech details: http://slides.com/arvinh/progressive-web-app
Real world example
The Washington Post PWA
source: https://goo.gl/KJsDCx
Cooking Data with web tools
By arvinh
