[Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project

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

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

[email protected]

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

5

Self Introduction

http://tech.rakuten.co.jp/

2012 2013 2014

http://tech.rakuten.co.jp/

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




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


Combination of tools and libraries was different

in each project.

Project Project Project Project Project ・・・

14


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


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


Staerted a project to standardize our tools and

libraries in order to improve our productivity

with front-end technologies.

17


Started a project to standardize our tools and

libraries in order to improve our productivity

with front-end technologies.


Project

18

Agenda




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


OgaTsutomu Ogasawara

Project Leader

/ Developer

TantanHiroyuki Tanjo

Lead Architect

/ Developer

21


RFF consists of 4 parts:

Tools Libraries

Environment Operation

22


Tools Libraries


23


Tools Libraries


24


RFF includes templates, UI components,

resources, common scripts, etc.

Standard

TemplatesUI Components Resources

25


Tools Libraries


26


Tools Libraries


27


Tools Libraries


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




Deliver common libraries via the tools to

spread out our knowledge.

31

Objective of RFF

We aim to




Deliver common libraries via the tools to

spread out our knowledge.

Contribute to the user experience of

Rakuten services.

32

Agenda




4. Demo

5. Case Examples

6. Future Plan

7. Wrap up

33

RFF Tools

Tools Libraries


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


Management4. Build3. Preview

Yeoman Bower GruntBrowserSync

• Generate standard scaffold

• Customize

37


38


39

RFF Tools / Package Management


Management

Yeoman Bower


• Customize

• Install packages

• Resolve dependency

4. Build3. Preview

GruntBrowserSync

40


41


$ 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


Management

Yeoman Bower


• Customize



• Check locally

• Test multi browser

4. Build3. Preview

GruntBrowserSync

43

RFF Tools / Preview

44

RFF Tools / Build


Management

Yeoman Bower


• Customize



• 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


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-appdmg


OS X.

rff-doctor


configuration.

56

Other tools

grunt-charset



grunt-appdmg


OS X.

rff-doctor


configuration.

57

Other tools

grunt-charset



grunt-appdmg


OS X.

rff-doctor


configuration.

58

Agenda




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

[email protected]

htanjo

TantanHiroyuki Tanjo

60

Demo Video

http://youtu.be/jGzqR6-jAYE




61

Agenda




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




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


Build the server-side environment to

automate our tasks such as build, test,

deploy, etc.

68

Future Plan

Tools Libraries


Build the team to continuously develop

RFF, support developers and maintain

the environment.

69

Agenda




4. Demo

5. Case Examples

6. Future Plan

7. Wrap up

70

Wrap up

Utilize the latest technologies to improve our


71

Wrap up



Launched the Rakuten Front-end Framework

which consists of Tools, Libraries,

Environment and Operation.

72

Wrap up






RFF should be suitable for various projects,

useful for various people to become common.

73

Wrap up






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

https://github.com/rakuten-frontend

76


77

Let's work together!

We are seeking

Front-end Engineers!

http://corp.rakuten.co.jp/careers/cwd/

http://corp.rakuten.co.jp/careers/cwd/

78

Thank you!

[Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project

Technology

Transcript of [Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project