View
30
Download
11
Tags:
Embed Size (px)
DESCRIPTION
Rakuten Technology Conference 2013 "HTML5 in Rakuten" HTML5 Project Team (Creative & Web Design Department) (Rakuten)
Citation preview
HTML5 in Rakuten
HTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
This presentation has animations and moviesThis version cannot show them correctly
2
HTML5 x Rakuten
3
Self Introduction
RoleHTML5 Project Team Leader(July 1st 2012 ~)
ExpertiseSoftware Engineer (HTML5 Objective-C PHP) UIUX Designer Technical Director
Contacttsutomuogasawaramailrakutencomogaoga
OgaTsutomu Ogasawara
4
HTML5 Project Team Overview
HTML5 Project Team
5
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
2
HTML5 x Rakuten
3
Self Introduction
RoleHTML5 Project Team Leader(July 1st 2012 ~)
ExpertiseSoftware Engineer (HTML5 Objective-C PHP) UIUX Designer Technical Director
Contacttsutomuogasawaramailrakutencomogaoga
OgaTsutomu Ogasawara
4
HTML5 Project Team Overview
HTML5 Project Team
5
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
3
Self Introduction
RoleHTML5 Project Team Leader(July 1st 2012 ~)
ExpertiseSoftware Engineer (HTML5 Objective-C PHP) UIUX Designer Technical Director
Contacttsutomuogasawaramailrakutencomogaoga
OgaTsutomu Ogasawara
4
HTML5 Project Team Overview
HTML5 Project Team
5
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
4
HTML5 Project Team Overview
HTML5 Project Team
5
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
5
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
6
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
7
HTML5 Project Team Overview
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Bu
sin
ess
Un
it
Web CreationUX DesignWeb AnalyticsSEOWeb PerformanceHTML5 Project
Creative amp Web Design Department (CWD)
InfrastructureDatabaseWeb ServiceSmart Device AppWeb APIetc
Development Unit (DU)
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
8
Our Mission
RampD
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
9
Our Mission
RampD Evangelization
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
10
Our Mission
RampD Evangelization Support
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
11
Our Mission
RampD Evangelization Support
Quality Performance Productivity
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
12
Our Mission
RampD Evangelization Support
Quality Performance Productivity
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
13
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
HTML5 Evangelization
Jose Manuel Segura AlvarezHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
15
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
Jose ManuelSegura Alvarez
Self Introduction
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Role HTML5 Evangelist
Previous experience
Mobile websites (dumb amp smart phones) desktop sites native smartphone Apps SEO server administration Wordpress
Contact joseseguramailrakutencomungatonipon
JoseSegura
ホセ
セグラ
Self Introduction
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
18
HTML5 cases in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
19
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
20
HTML5 cases in Rakuten
Situation of HTML5 services in Rakuten
Letrsquos see some cases
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
21
Technology Conference 2013
bull Media Queriesbull Canvasbull Web Storage
bull SVGbull CSS Animations
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
22
Rakuten Recipe
bull JavaScript menu to register recipesbull Web Storage
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
23
Rakuten Securities Kabu animation
bull CSS3 Animations
httpswwwrakuten-seccojpwebspecialbrand_town
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
24
Rakuten Card
bull HTML5 Forms
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
25
Rakuten Travel
bull Geolocation
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
26
Rakutencom Shopping Mobile site
bull Web Fonts
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
27
Rakutencom Shopping Mobile site
bull Web Fonts
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
28
Rakuten Product Microdata
bull Microdata
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
29
Rakuten Gateway
bull Web Fontsbull CSS Animationsbull Web Storage
Mon will give more details about this service in a few minutes
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
30
HTML5 in Rakuten2
HTML5 Project Team Activity3
Table of contents
About myself1
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
31
HTML5 Implementation Guide
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
32
Goal Expand the use of HTML5 in Rakuten
HTML5 Implementation Guide
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
33
11 Checklist
2 How to implement
3 HTML
5 CSS
11 HTML5 Merits
31 DOCTYPE and ltheadergt
32 Section and Outline
33 Elements and Attributes
34 Forms
35 Microdata
36 Multimedia
37 Graphics
38 Application Cache
51 CSS3
52 Web fonts
53 Media Queries
41 File API
42 Drag amp Drop
43 Web Storage
44 Geo Location API
4 JavaScript API
Know-how of HTML5 features is divided in
18 chapters1 Introduction
HTML5 Implementation Guide
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
34
bull Video codecs compatibility how to implement Drag amp Drop CSS3 features
HTML5 Implementation Guide example
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
35
How do we promote HTML5 in Rakuten
Team Activities
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
36
bull Presented at Asakai (weekly company-wide meeting)
bull Rakuten CTO Summit (yearly internal event)
bull Tech Talkbull this Tech Conference )
HTML5 Evangelization
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
37
bull HTML5 Knowledge Basebull HTML5 Implementation Guidebull HTML5 Project Team Portfoliobull Reports (How to code examples etc)bull EFO Activitybull Use Casesbull Resources
HTML5 Evangelization
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
38
HTML5 Evangelization
bull Internal Social Media
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
39
bull HTML5 EFO (Entry Form Optimization) promotion
HTML5 Evangelization
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
40
HTML5 is the present and future of the Internet
Rakuten will be actively using HTML5 and push its boundaries even further
Conclusion
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
41
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Gateway Web App Development
Tomoko MonzenHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
43
Introduction
MonTomoko Monzen
Role Web Designer amp Front-end Developer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact tomokomonzenmailrakutencom
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
44
My First Challenge in HTML5 Project Team
Web App That Feels Native
Introduction
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
45
Android Native App Web Site
Windows8Native App
Rakuten Gateway
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
46
Nat
ive
Native App to Web AppW
ebS
ite
Renewal
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
47
More users
Cross-Platform
Flexibility
Why Web App
WEBNative
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
48
Flat Design
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
49
Web Fonts
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
50
UI Scrolling
Scroll VerticallySwipe Horizontally
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
51
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
52
How to make Web App
bull Flat Design (iOS7)bull HTML5 CSS jQuery Web Fontsbull iScrollbull Effective Development
(Sass compass grunt script concatampuglify git)
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
53
Visit Rakuten Gateway
httpwwwrakutencojpcomgatewaysp
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
54
The future of Web Apps
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
55
THANK YOU
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Web Storage~ Over the Cross Origin ~
Ryosuke TsujiHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
57
Self Introduction
Role Front-end Engineer
Expertise HTML5CSS3JavaScriptnodejsJavaPythonPHPSQL
Contact ryosuketsujimailrakutencomthujikun
RyanRyosuke Tsuji
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
58
Kobo glo
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
59
Rakuten insurance
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
60
Rakuten card
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
61
Rakuten security
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
62
other smartphone sites
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
63
Web Storage
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
64
Web Storage
httpsrakutencojprakutencojp
rakutencomsubrakutencojp
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
65
Normal Way
ServerClient
rakutencojp
subrakutencojp
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
66
Over the Domain
rakutencojp
otherrakutencojp
iframe
Post Message API
subrakutencojp
ServerClient
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
67
Web Storage ~ Over the Domain ~
httpsrakutencojprakutencojp
rakutencom
subrakutencojp
otherdomaincom
iframe
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
68
Rakuten solar
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
69
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
70
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
71
Save data to iframe
var iframe = documentcreateElement(lsquoiframersquo)
iframestyledisplay = lsquononersquo
iframesrc = lsquohttpsotherrakutencojprsquo
documentbodyappendChild(iframe)
iframeaddEventListener(lsquoloadrsquo function()
setTimeout(function() iframecontentWindowpostMessage( JSONstringify(data) lsquohttpsotherrakutencojprsquo) 0))
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
72
Save data to iframe
rakutencojp otherrakutencojp
iframePost Message API
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
73
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragesetItem(datakey datavalue) setTimeout(function() esourcepostMessage(response eorigin) 0) )
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
74
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
75
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
76
Get data from iframe
almost same with save case~~~~~~~~~~~~~~~~~~~~~~~~~~~~iframecontentWindowpostMessage(data origin)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttpotherrakutencojprsquo) return false
callback(data)
)
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
77
Get data from iframe
rakutencojp otherrakutencojp
iframePost Message API
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
78
Save data to iframe
windowaddEventListener(lsquomessagersquo function(e) var data = JSONparse(edata)
if(eorigin == lsquohttprakutencojprsquo) return false
localStoragegetItem(datakey) setTimeout(function() esourcepostMessage(response eorigin) 0) )
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
79
Plugin
I created plugin as we can use it like native Web Storage
var crossOriginStorage = new ExtendedLocalStorage(iframe URL)
crossOriginStoragesetItem(key value callback)
crossOriginStoragegetItem(key callback)
crossOriginStorageremoveItem(key callback)
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
80
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Technology Conference Website
Shinsuke YamadaHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
82
Self-Introduction
MartyShinsuke Yamada
Role Web Designer amp Front-end Engineer
Expertise UIUX WebampApp DesignHTML5CSS3JavaScript
Contact shinsukeayamadamailrakutencom
Real Emmett ldquoDocrdquo Brown
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
83
Have you seen the website
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
84
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
85
top Speakers Timetable
Event reportAccess
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
86
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
87
Responsive web design
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
88
Interactive design
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
89
html5 technologies
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
90
html5 technologies
Responsiveweb design
Interactive design
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
91
Responsive web design
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
92
950px 640px
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
93
Media queries
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
94
PC
1 Exclusive
Tablet
Smartphone
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
95
Base style(PC)
2Overriding
Tablet
Smartphone
ComplicatedAnd
unmanageable
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
96
Syntactically Awesome Style Sheets
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
97
Sassrsquos features
bull Fully CSS3-compatiblebull Language extensions such as variables nesting
and mixinsbull Many useful functions for manipulating colors and
other valuesbull Advanced features like control directives for librariesbull Well-formatted customizable outputbull Firebug integration
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
98
3 Sass
Set variable amp import file
variable
import
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
99
3 Sass
PC
Tablet
Smartphone
Base
Coding into Condition branch
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
100
3 SassCompiled code
Donrsquot forget to
the compile
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
101
CSS Authoring Framework
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
102
Compassrsquos features
bull Experience cleaner markup without presentational classes
bull Itrsquos chock full of the webrsquos best reusable patternsbull It makes creating sprites a breezebull Compass mixins make CSS3 easybull Create beautiful typographic rhythmsbull Download and create extensions with ease
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
103
Retina displayPrevious display
Image handling for Retina
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
104
SVGScalable Vector Graphics
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
105
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
106
SVG compatibility table
httpcaniusecom
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
107
Library that detects browserrsquos HTML5 amp CSS3 features
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
108
Modernizr works
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
109
Interactive design
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
110
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
111
For Smartphone
Drag
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
112
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
113
ltcanvasgtwith
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
114
createjs sample
Output -gt
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
115
HTML5 technologies
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
116
Notification feature
Stored in Web storage
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Bookmark
Filter
Add bookmark
Details
For Smartphone
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
118
html5 technologies
Responsiveweb design
Interactive design
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
119
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
120
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
Technology Conference Sitetools amp Development Flow
Tsutomu OgasawaraHTML5 Project TeamCreative amp Web Design Department Rakuten Inchttpwwwrakutencojp
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
122
Requirements
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
123
Requirements
Frequent updates
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
124
Requirements
Frequent updatesSEO friendly
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
125
Requirements
Frequent updatesSEO friendlyWithout server-side script
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
126
Requirements
Frequent updatesSEO friendlyWithout server-side script
Generate static HTML filesfrom data and templates
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
127
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
128
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
129
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
130
Whatrsquos Template Engine
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
131
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
132
Whatrsquos Template Engine
[ name Hiroshi Mikitani img imgmickyjpg title Chairman amp CEO of Rakuten Inc name Jeff Patton title Agile Evangelist at Atlassian img imgjeffjpgrsquo ]
ltdiv class=speakersgt ltimg src=lt= img gt alt=lt= name gt gt ltdiv class=profilegt lth1 class=namegtlt= name gtlth1gt lth2 class=titlegtlt= title gtlth2gt ltdivgt ltdivgt
+
Speaker information in JSON format
HTML Template
ltdiv class=speakersgt ltimg src=imgmickyjpg alt=Hiroshi Mikitani gt ltdiv class=profilegt lth1 class=namegtHiroshi Mikitanilth1gt lth2 class=titlegtChairman amp CEO of Rakuten Inclth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltimg src=imgjeffjpg alt=Jeff Patton gt ltdiv class=profilegt lth1 class=namegtJeff Pattonlth1gt lth2 class=titlegtAgile Evangelist at Atlassianlth2gt ltdivgt ltdivgt
ltdiv class=speakersgt ltdivgt
Generated HTML
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
133
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
134
Whatrsquos PhantomJS
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
135
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
136
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Execute rdquophantom_configjsrdquo
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
137
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Load rdquocommonhtmlrdquo as a common template
bull Load a page templatebull Load databull Execute underscorejs to merge
the templates and the data
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
138
Whatrsquos PhantomJS
$ phantomjs phantom_configjs commonhtmlindex gt indexhtml
Command Script Template Page Generated HTML
bull Output merged HTML
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
139
Whatrsquos PhantomJS
+
indexhtml speakershtml timetablehtml
+ +
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
IndexTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
SpeakersTemplate
ltdiv class=spe ltimg src=lt= ltdiv class=rdquop lth1 class=rdquo lth2 class=rdquo ltdivgt ltdivgt
TimetableTemplate
[ name rsquoH img rsquoi title rsquoC name rsquoJ title rsquoA img rsquoi]
DataJSON
SpeakersSessionsPlacesUpdates
SEO
Friendly
+
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
140
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
141
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
142
Tools and flow
Data(JSON)
+
Template
HTMLHTMLHTML
Sass CSS
(Git)
JavaScript
(Server)
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
143
As a result
Frequently updateSEO friendlyWithout server-side script
We could develop efficiently with Front-end technologies
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
144
Todayrsquos Agenda
HTML5 Evangelization in RakutenJose Segura
Rakuten gateway Web App DevelopmentTomoko ldquoMonrdquo Monzen
Web Storage ~ Over the Origin ~Ryosuke ldquoRyanrdquo Tsuji
Tools amp Development FlowTsutomu ldquoOgardquo Ogasawara
Rakuten Technology Conference Web SiteShinsuke ldquoMartyrdquo Yamada
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
145
HTML5 in Rakuten
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
146
HTML5 in Rakuten
Rich UXPerformanceProductivity
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
147
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
148
Contents Contents Contents Contents
We Are Engineers
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
149
Contents Contents Contents Contents
Framework
We Are Engineers
Featurepart
Commonpart
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
150
Contents Contents Contents Contents
Framework
We Are Engineers
ImproveProductivity
Tools
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
151
Contents Contents Contents Contents
Framework
We Are Engineers
Automation
Tools
Environment
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
152
Contents Contents Contents Contents
Framework
We Are Engineers
MaximizePerformance
Tools
Environment
Process
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
153
Contents Contents Contents Contents
Framework
We Are Engineers
Tools
Environment
ProcessCMSCDN
Unit Test
Agile
154
We Are Engineers
Thank you
154
We Are Engineers
Thank you
Thank you