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

Editor's Notes

• #2: Welcome to the Rakuten Technology Conference, and welcome to our session. In this session, we would like to talk about Rakuten Front-end Framework Project.
• #3: Before we begin, let me introduce myself. I am Tsutomu Ogasawara, a leader of Front-end Technology Team, in Creative & Web Design Department. I joined Rakuten in July 2012. Before Rakuten, I worked for a Web service company as a technical director and UI designer. and worked for an electronics company as a UI designer and software engineer. And my hobby is iOS app development.
• #4: Our department is Creative & Web Design Department. We are responsible for UX area, such as UX Design, visual & interaction design, analytics, SEO, Performance, mobile strategy and Front-end Technology.
• #5: Usually, we release services and applications, in collaboration with the development unit and business units.
• #6: Our team, Front-end Technology Team has been developed and designed the conference sites. You can see the timetable and speakers' information. Please check it out.
• #7: Here is the agenda. The purpose of our presentation is to tell you how we have developed the framework to improve our development environment. So let's get started.
• #8: First of all, let me talk about the trend of front-end.
• #9: Last year, we explained about our HTML5 activities in this conference.
• #10: I said, HTML5 allowed us to develop rich contents and applications, for various platforms.
• #11: In the meantime, various issues became obvious, such as large-scale development, complicated source code, security, performance, compatibility, and so on.
• #12: To solve the issues, many developers around the world, have created so many useful tools and libraries.
• #13: In Rakuten, we have already started using those useful tools to develop efficiently. However,
• #14: The knowledge of configuration was not shared because combination of tools was different in each project like this. So we needed to configure the tools, at the beginning of every project. However, that’s not efficient.
• #15: We needed to standardize the tools to improve our productivity,and we also needed to keep flexibility for various project style.
• #16: Additionally, we wanted to standardize not only tools, but also template and UI components like HTML5 boilerplate and bootstrap, to keep consistency.
• #17: Considering these situations, we started a project to standardize our development tools and libraries, in order to improve our productivity, with the latest front-end technologies. That is,
• #18: Rakuten Front-end Framework Project.
• #19: So, let me explain what “Rakuten Front-end Framework” is.
• #20: Rakuten Front-end Framework is the activitiesto improve front-end development environment in Rakutenby utilizing the latest technologies.
• #21: This is the member of the project. I am the project leader. And, Hiroyuki Tanjo is the lead architect of RFF. He is a front-end engineer in our department. We started the project from February.
• #22: RFF consists of 4 parts.
• #23: The first one is "Tools". This is the main part of the framework based on open sources, such as yeoman, grunt, bower, and so on. It allows us to develop web contents efficiently. We will explain the details, later.
• #24: The second one is "Libraries".
• #25: We would like to develop common resources such as standard templates, common UI components, icons, common scripts in order to keep consistency in Rakuten. We will deliver these resources through the RFF tools.
• #26: The third one is "Environment" To distribute the tools and libraries, we should utilize server-side solutions such as github and npm. And we will introduce Jenkins for automations such as build, test and deploy. Not only front-end tools, but It's also very important to utilize such environment to be used widely.
• #27: The last one is "Operation". This is not a technical thing, but we think it is also very important in order to expand the project. We provided documentations, briefing sessions, workshop, technical support, and so on.
• #28: These are 4 main elements of RFF.
• #29: Through the Rakuten Front-end Framework, we aim to
• #30: Develop our useful tools, by utilizing the latest technologies to improve our quality and productivity.
• #31: Then, deliver common libraries through the tools, to spread out our knowledge.
• #32: Finally, we want to contribute to the user experience of Rakuten services. This is the objective of Rakuten Front-end Framework.
• #33: Next topic is the technology of RFF.
• #34: Since we started the project in February, we've mainly developed the tools. In this part, I would like to talk about the inside of RFF tools.
• #35: We developed 2 products, generator-rff and rff-gui. generator-rff is a Yeoman generator which provides a scaffolding of project, including HTML, CSS, JavaScript and cofiguration files. And rff-gui is the GUI version of generator-rff.
• #36: Basically both tools have same functionalities. So, if you love command line interface, you can use generator-rff. If you hate it, you can use rff-gui. There are mainly 4 steps in the tools, Scaffolding, Package Management, Preview and Build. Let's take a look at each step.
• #37: First step is Scaffolding. It generates template files and configurations we need on the launch of project, in order to keep consistency of development method, and directory structure. We adopted "Yeoman" as the scaffolding tool.
• #38: Yeoman is a major scaffolding tool for front-end development. In the official site, over 1000 generators are provided. generator-rff is just a Yeoman generator.
• #39: We provide customize options in the tools, to be suitable for various projects in Rakuten. I will show how to customize the scaffolding in the actual demo, later.
• #40: Next one is the package management. We utilize various open source libraries, such as jQuery, AngularJS, and so on. So we adopted Bower to manage the libraries. Bower is a famous package management tool developed by Twitter. It enables us to easily install appropriate version of packages.
• #41: You can install major libraries by using Bower. Over 18,000 libraries are registered in the official site.
• #42: You can immediately use bower, because the configuration file "bower.json" is already integrated in generator-rff.
• #43: Next one is Preview. You can quickly check the contents which you edited, by using a local Web server
• #44: BrowserSync is an open source local Web server. You can check the contents quickly, and you don't have to reload the browser, because the contents is reloaded automatically. And it's not just a local server, as the name suggests, it has synchronizing functions. For example, if you scroll down a page on a browser, the same page on another browser automatically scrolls down synchronously. It's very useful, especially for responsive web design, but It's hard to explain the actual behavior in words. So we will show the demo, later.
• #45: The last one is Build. After checking the contents, we should build files to distribute. We use Grunt for the build phase.
• #46: Grunt is a very famous task runner tool. There are so many various task plugins, in the official site. For example, compilers of meta languages such as Sass, LESS, Stylus, CoffeeScript, and so on. And file manipulation tasks such as merge, minify, convert, validate, and so on.
• #47: This shows the build flow we configured in RFF. As you can see, there are various converting tasks in the process. Finally the distribution files are generated through the process from the source files. It's hard to edit the Grunt configuration file, to execute complicated process like this. So we standardized the configuration, not to duplicate works, on each project.
• #48: In the latest version, 0.4, we added, a deployment feature. You can push to any Git repository, or, upload to a FTP server by using a Grunt command.
• #49: As I mentioned, we developed our tools which are suitable for our development environment, by integrating various open-source tools. generator-rff is very useful for us but, it's little hard for non-engineers to understand, because it's a command line tool.
• #50: So, we also developed the GUI desktop application of generator-rff. It's "rff-gui".
• #51: It has almost same as generator-rff functionalities.
• #52: To develop it, we adopted "node-webkit", which is an application runtime, based on WebKit and node.js. It enables us to develop desktop applications for Mac, Windows and Linux.
• #53: This shows the layer of the app. As you can see, the GUI layer is made with Web technologies such as HTML, CSS and JavaScript. So we use open source libraries, such as AngularJS and Bootstrap. And we can use node modules for the logic layer, because this runtime is based on node.js. generator-rff is also a part of the logic layer. This runtime allows us to develop cross platform applications, with one source code.
• #54: rff-gui provides unexpected benefits. At the beginning of the RFF project, we set the target user to only front-end engineers. But by using rff-gui, non-engineers can also develop in common development environment, with engineers. And it was easy to explain this project for stakeholders, by showing the actual visible app instead of the command line. And it's a good opportunity to improve our development skills, through the development.
• #55: Furthermore, we developed other utilities.
• #56: grunt-charset is a grunt plugin to convert text encoding of files, and replace charset code in HTML and CSS. There are some non UTF-8 services in Rakuten. Developers don't have to take care of the text encoding by using this plugin.
• #57: grunt-appdmg is also a grunt plugin which generates a disk image file for Mac OS X. We developed the plugin in order to release rff-gui as a binary.
• #58: rff-doctor is a node module to verify the system configuration. It helps you check whether required modules are installed or not in your PC.
• #59: So, let's take a look at the demo. I want to hand over the microphone to Tantan.
• #60: I’m Hiroyuki Tanjo, the main developer of RFF. I joined Rakuten in 2009 as a new graduate. I have been involved in many kinds of Rakuten services, and recently I worked as the lead front-end developer of Global Rakuten Ichiba project. Now I’m often in GitHub for developing RFF, or I’m in deviantART as a painter in private.
• #62: Thank you Tantan, As you can see, RFF tools are very useful for Web development. Next, I want to introduce our case examples.
• #63: We've already started using RFF for over 10 projects. Rakuten Cafe and Rakuten Energy smartphone site were developed by using RFF tools.
• #64: The developers said like this. RFF is a good tool because we didn't have to take care of the grunt configuration and performance.
• #65: About Future Plan.
• #66: Regarding Tools, We will keep improving generator-rff, based on developers' feedback and technology trend. The current version of rff-gui is little bit complicated. So we will improve the UI to be user-friendly.
• #67: Libraries, We are preparing to release common UI components, internally. Then we will provide CSS and JavaScript of the components through the RFF tools. And we would like to develop, more common well-used scripts and styles.
• #68: About environment, we would like to build the server-side environment, based on Jenkins, in order to automate build, test, and deploy.
• #69: About operation, Currently we are only 2. I would like to involve other engineers and designers to the project, in order to continuously develop RFF. And we would like to build team, to support developers, and maintain the environment.
• #70: Wrap up.
• #71: In this session, I mentioned We must utilize the latest technologies to improve our quality and productivity.
• #72: So we launched Rakuten Front-end Framework which consists of Tools, Libraries, Environment and Operation.
• #73: RFF should be suitable for various projects, and useful for various people to become common in Rakuten. Therefore, we developed the GUI application for non engineers.
• #74: And, developing by ourselves is very important to efficiently improve our development environment.
• #75: And I have one announcement.
• #76: I'm happy to announce that we've just released, some of RFF tools, as open-source on GitHub. We have developed the tools on internal git repository so far. But from today, we develop them on GitHub. I think this is a small contribution to the open source community. We will keep contributing through the project. Please try it and give us feedback.
• #77: Today I talked about Rakuten Front-end Framework. This project is, just at the beginning stage, of front-end evolution in Rakuten. We will keep developing RFF, and improving our service quality and productivity, so that, we can contribute to the best user experience of Rakuten services. To achieve it, we need more front-end engineers.
• #78: We, Creative & Web Design Department is seeking talented front-end engineers, who are interested in cutting-edge technologies. If you are interested in our project, please let us know. We can talk indivisually after the session or beer bash.
• #79: Thank you so much for coming to our session today.