[Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project
Post on 03-Jul-2015
652 Views
Preview:
DESCRIPTION
Transcript
Rakuten Front-end Framework
ProjectOctober 25th, 2014
Tsutomu Ogasawara / Hiroyuki Tanjo
Creative & Web Design Department
Rakuten Inc.
http://www.rakuten.co.jp/
Presentation Video: http://youtu.be/-d15atCdR0E
2
Self Introduction
Role Front-end Technology Team Leader
Organization Creative & Web Design Department
Expertise Software Engineer / UI Designer / Technical Director
Contacttsutomu.ogasawara@mail.rakuten.com
ogaoga
OgaTsutomu Ogasawara
3
Self Introduction
Creative &
Web Design
Department
Development
Unit
Infrastructure
Database
Web Service
Smart Device App
Web API
etc...
UX Design
Web Creation
Analytics
SEO
Performance
Mobile Strategy
Front-end Technology
4
Self Introduction
Creative &
Web Design
Department
Development
Unit
Business
Unit
6
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
7
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
8
Trend of Front-end
9
Trend of Front-end
Rich Contents
High Performance
Cross Platform
etc..
10
Trend of Front-end
Various issues became obvious.
Large-scale, complicated
JavaScript code.
Security threat.
Low web performance.
Compatibility problems.
etc...
11
Trend of Front-end
To solve the issues, developers around the
world have created many useful tools and
libraries.
12
Trend of Front-end in Rakuten
13
Trend of Front-end in Rakuten
Combination of tools and libraries was different
in each project.
Project Project Project Project Project ・・・
14
Trend of Front-end in Rakuten
Combination of tools and libraries was different
in each project.
Project Project Project Project Project ・・・We need to standardize tools to
improve our productivity,
and
keep flexibility for various projects.
15
Trend of Front-end in Rakuten
Additionally, we wanted to standardize
templates and UI components with approaches
like "HTML5 Boilerplate" and "Bootstrap".
Bootstrap
http://getbootstrap.com/
HTML5 Boilerplate: The web’s most popular front-end template
http://html5boilerplate.com/
16
Trend of Front-end in Rakuten
Staerted a project to standardize our tools and
libraries in order to improve our productivity
with front-end technologies.
17
Trend of Front-end in Rakuten
Started a project to standardize our tools and
libraries in order to improve our productivity
with front-end technologies.
Rakuten Front-end Framework
Project
18
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
19
What is "Rakuten Front-end Framework" ?
"Rakuten Front-end Framework" is
the activities to improve front-end
development environment in Rakuten
by utilizing the latest technologies.
20
What is "Rakuten Front-end Framework" ?
OgaTsutomu Ogasawara
Project Leader
/ Developer
TantanHiroyuki Tanjo
Lead Architect
/ Developer
21
What is "Rakuten Front-end Framework" ?
RFF consists of 4 parts:
Tools Libraries
Environment Operation
22
What is "Rakuten Front-end Framework" ?
Tools Libraries
Environment Operation
23
What is "Rakuten Front-end Framework" ?
Tools Libraries
Environment Operation
24
What is "Rakuten Front-end Framework" ?
RFF includes templates, UI components,
resources, common scripts, etc.
Standard
TemplatesUI Components Resources
25
What is "Rakuten Front-end Framework" ?
Tools Libraries
Environment Operation
26
What is "Rakuten Front-end Framework" ?
Tools Libraries
Environment Operation
27
What is "Rakuten Front-end Framework" ?
Tools Libraries
Environment Operation
28
Objective of RFF
We aim to
29
Objective of RFF
We aim to
Develop our useful tools by utilizing the
latest technologies to improve our
quality and productivity.
30
Objective of RFF
We aim to
Develop our useful tools by utilizing the
latest technologies to improve our
quality and productivity.
Deliver common libraries via the tools to
spread out our knowledge.
31
Objective of RFF
We aim to
Develop our useful tools by utilizing the
latest technologies to improve our
quality and productivity.
Deliver common libraries via the tools to
spread out our knowledge.
Contribute to the user experience of
Rakuten services.
32
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
33
RFF Tools
Tools Libraries
Environment Operation
34
RFF Tools
Developed 2 products.
Desktop Application
rff-guiCommand Line Tool
generator-rff
35
RFF Tools
1. Scaffolding2. Package
Management4. Build3. Preview
Desktop
Application
rff-gui
Yeoman Bower GruntBrowserSync
Command line
tool
generator-rff OR
36
RFF Tools / Scaffolding
1. Scaffolding2. Package
Management4. Build3. Preview
Yeoman Bower GruntBrowserSync
• Generate standard scaffold
• Customize
37
RFF Tools / Scaffolding
38
RFF Tools / Scaffolding
39
RFF Tools / Package Management
1. Scaffolding2. Package
Management
Yeoman Bower
• Generate standard scaffold
• Customize
• Install packages
• Resolve dependency
4. Build3. Preview
GruntBrowserSync
40
RFF Tools / Package Management
41
RFF Tools / Package Management
$ cat bower.json {"name": "rff-test","version": "0.0.0","dependencies": {"jquery": "~1.11.1","normalize.css": "~3.0.1"
},"devDependencies": {}
}
bower.json
$ bower install
$ tree src/bower_components -L 1src/bower_components├── jquery└── normalize.css
install command
installed libraries
42
RFF Tools / Preview
1. Scaffolding2. Package
Management
Yeoman Bower
• Generate standard scaffold
• Customize
• Install packages
• Resolve dependency
• Check locally
• Test multi browser
4. Build3. Preview
GruntBrowserSync
43
RFF Tools / Preview
44
RFF Tools / Build
1. Scaffolding2. Package
Management
Yeoman Bower
• Generate standard scaffold
• Customize
• Install packages
• Resolve dependency
• Check locally
• Test multi browser
• Convert files
• Push to servers
4. Build3. Preview
GruntBrowserSync
45
RFF Tools / Build
46
RFF Tools / Build
img img
.css
.scss
.less
.stylus
.coffee
.jade .html
.js .js
.css.css .css
.js
img
.html .html
.css
img
CSS Sprite
Compile
Compile Auto prefixer
Modify Links
Compile
Merge & Minify
Merge & Minify
Minify
Modify Links
Add Revision
Add Revision
Add Revision
src dist
47
RFF Tools / Build
img
.css
.html
.js .js
.css.css .css
.js
img
.html .html
.css
img
CSS Sprite
Compile
Compile Auto prefixer
Modify Links
Compile
Merge & Minify
Merge & Minify
Minify
Modify Links
Add Revision
Add Revision
Add Revision
dist
Git FTP
Push
Put
48
RFF Tools
"generator-rff" is very useful but it's hard to use
for non-engineers such as designers or
directors.
49
RFF Tools / rff-gui
We also developed the GUI application of
generator-rff, "rff-gui" for Mac & Windows.
50
RFF Tools / rff-gui
1. Scaffolding2. Package
Management
4. Build3. Preview
51
RFF Tools / rff-gui
node-webkit: An application runtime based on
Chromium and Node.js for Win, Mac and Linux.
52
RFF Tools / rff-gui
Mac or Windows or Linux
node-webkit
(Node.js + Chromium)
generator-rff
AngularJS Bootstrap
HTML / CSS / JavaScript
rff-gui
GUI Layer
53
RFF Tools / rff-gui
Benefits of rff-gui are:
Non-engineers can develop in the common
environment with engineers.
Easy to explain this project for
stakeholders by showing the visible app.
Good opportunity to improve our
development skills.
54
Other tools
grunt-charset
Grunt plugin to convert text encoding and
replace charset code in HTML and CSS.
grunt-appdmg
Grunt plugin to generate a disk image file for
OS X.
rff-doctor
Node module to verify the system
configuration.
55
Other tools
grunt-charset
Grunt plugin to convert text encoding and
replace charset code in HTML and CSS.
grunt-appdmg
Grunt plugin to generate a disk image file for
OS X.
rff-doctor
Node module to verify the system
configuration.
56
Other tools
grunt-charset
Grunt plugin to convert text encoding and
replace charset code in HTML and CSS.
grunt-appdmg
Grunt plugin to generate a disk image file for
OS X.
rff-doctor
Node module to verify the system
configuration.
57
Other tools
grunt-charset
Grunt plugin to convert text encoding and
replace charset code in HTML and CSS.
grunt-appdmg
Grunt plugin to generate a disk image file for
OS X.
rff-doctor
Node module to verify the system
configuration.
58
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
59
Self Introduction
Role Developer of RFF Components
Organization Creative & Web Design Department
Expertise Front-end Development / Graphic Design / Painting
Contacthiroyuki.tanjo@mail.rakuten.com
htanjo
TantanHiroyuki Tanjo
60
Demo Video
http://youtu.be/jGzqR6-jAYE
61
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
62
Case Examples
Already started using RFF for over 10 projects.
Rakuten CAFE Rakuten Energy (for Smartphone)
http://cafe.rakuten.co.jp/ http://energy.rakuten.co.jp/
63
Case Examples
Developer's voice:
We didn't have to write the grunt
configuration.
We don't have to take care of
performance because RFF
automatically optimized resources.
64
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
65
Future Plan
Tools Libraries
Environment Operation Keep improving based on developers'
feedback and technology trend.
Make rff-gui user-friendly.
66
Future Plan
Tools Libraries
Environment Operation Provide various libraries such as templates,
UI components, utilities, etc.
67
Future Plan
Tools Libraries
Environment Operation
Build the server-side environment to
automate our tasks such as build, test,
deploy, etc.
68
Future Plan
Tools Libraries
Environment Operation
Build the team to continuously develop
RFF, support developers and maintain
the environment.
69
Agenda
1. Trend of Front-end
2. What is"Rakuten Front-end Framework" ?
3. Technology of RFF
4. Demo
5. Case Examples
6. Future Plan
7. Wrap up
70
Wrap up
Utilize the latest technologies to improve our
quality and productivity.
71
Wrap up
Utilize the latest technologies to improve our
quality and productivity.
Launched the Rakuten Front-end Framework
which consists of Tools, Libraries,
Environment and Operation.
72
Wrap up
Utilize the latest technologies to improve our
quality and productivity.
Launched the Rakuten Front-end Framework
which consists of Tools, Libraries,
Environment and Operation.
RFF should be suitable for various projects,
useful for various people to become common.
73
Wrap up
Utilize the latest technologies to improve our
quality and productivity.
Launched the Rakuten Front-end Framework
which consists of Tools, Libraries,
Environment and Operation.
RFF should be suitable for various projects,
useful for various people to become common.
Developing by ourselves is very important to
improve our development environment.
74
Open Source
75
Open Source
Released some RFF tools as open sources on
GitHub!
https://github.com/rakuten-frontend
76
Rakuten Front-end Framework
77
Let's work together!
We are seeking
Front-end Engineers!
http://corp.rakuten.co.jp/careers/cwd/
78
Thank you!
top related