Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 78 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a [Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project (20)

Anuncio

Más de Rakuten Group, Inc. (20)

Más reciente (20)

Anuncio

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

  1. 1. Rakuten Front-end Framework Project October 25th, 2014 Tsutomu Ogasawara / Hiroyuki Tanjo Creative & Web Design Department Rakuten Inc. http://www.rakuten.co.jp/ Presentation Video: http://youtu.be/-d15atCdR0E
  2. 2. 2 Self Introduction Oga Tsutomu Ogasawara Role Front-end Technology Team Leader Organization Creative & Web Design Department Expertise Software Engineer / UI Designer / Technical Director Contact tsutomu.ogasawara@mail.rakuten.com ogaoga
  3. 3. 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. 4. 4 Self Introduction Creative & Web Design Department Development Unit Business Unit
  5. 5. 5 Self Introduction http://tech.rakuten.co.jp/ 2012 2013 2014
  6. 6. 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. 7. 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. 8. 8 Trend of Front-end
  9. 9. 9 Trend of Front-end  Rich Contents  High Performance  Cross Platform  etc..
  10. 10. 10 Trend of Front-end Various issues became obvious.  Large-scale, complicated JavaScript code.  Security threat.  Low web performance.  Compatibility problems.  etc...
  11. 11. 11 Trend of Front-end To solve the issues, developers around the world have created many useful tools and libraries.
  12. 12. 12 Trend of Front-end in Rakuten
  13. 13. 13 Trend of Front-end in Rakuten Combination of tools and libraries was different in each project. Project Project Project Project Project ・・・
  14. 14. 14 Trend of Front-end in Rakuten Combination of tools and libraries was different in each project. We need to standardize tools to Project Project Project Project Project ・・・ improve our productivity, and keep flexibility for various projects.
  15. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 20 What is "Rakuten Front-end Framework" ? Oga Tsutomu Ogasawara Project Leader / Developer Tantan Hiroyuki Tanjo Lead Architect / Developer
  21. 21. 21 What is "Rakuten Front-end Framework" ? RFF consists of 4 parts: Tools Libraries Environment Operation
  22. 22. 22 What is "Rakuten Front-end Framework" ? Tools Libraries Environment Operation
  23. 23. 23 What is "Rakuten Front-end Framework" ? Tools Libraries Environment Operation
  24. 24. 24 What is "Rakuten Front-end Framework" ? RFF includes templates, UI components, resources, common scripts, etc. Standard Templates UI Components Resources
  25. 25. 25 What is "Rakuten Front-end Framework" ? Tools Libraries Environment Operation
  26. 26. 26 What is "Rakuten Front-end Framework" ? Tools Libraries Environment Operation
  27. 27. 27 What is "Rakuten Front-end Framework" ? Tools Libraries Environment Operation
  28. 28. 28 Objective of RFF We aim to
  29. 29. 29 Objective of RFF We aim to  Develop our useful tools by utilizing the latest technologies to improve our quality and productivity.
  30. 30. 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. 31. 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. 32. 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. 33. 33 RFF Tools Tools Libraries Environment Operation
  34. 34. 34 RFF Tools Developed 2 products. Desktop Application rff-gui Command Line Tool generator-rff
  35. 35. Desktop Application rff-gui 35 RFF Tools Command line tool generator-rff OR 1. Scaffolding 2. Package Management 3. Preview 4. Build Yeoman Bower BrowserSync Grunt
  36. 36. 36 RFF Tools / Scaffolding 1. Scaffolding 2. Package Management 3. Preview 4. Build Yeoman Bower BrowserSync Grunt • Generate standard scaffold • Customize
  37. 37. 37 RFF Tools / Scaffolding
  38. 38. 38 RFF Tools / Scaffolding
  39. 39. 39 RFF Tools / Package Management 1. Scaffolding 2. Package Management Yeoman Bower • Generate standard scaffold • Customize 3. Preview 4. Build BrowserSync Grunt • Install packages • Resolve dependency
  40. 40. 40 RFF Tools / Package Management
  41. 41. 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 1 src/bower_components ├── jquery └── normalize.css install command installed libraries
  42. 42. 42 RFF Tools / Preview 1. Scaffolding 2. Package Management Yeoman Bower • Generate standard scaffold • Customize 3. Preview 4. Build BrowserSync Grunt • Install packages • Resolve dependency • Check locally • Test multi browser
  43. 43. 43 RFF Tools / Preview
  44. 44. 44 RFF Tools / Build 1. Scaffolding 2. Package Management Yeoman Bower • Generate standard scaffold • Customize 3. Preview 4. Build BrowserSync Grunt • Install packages • Resolve dependency • Check locally • Test multi browser • Convert files • Push to servers
  45. 45. 45 RFF Tools / Build
  46. 46. src dist 46 RFF Tools / Build img img .css .scss .less .stylus .coffee Compile Auto prefixer Minify .css .css .css .js .js .jade .html img .css .js img Add Revision Add Revision Add Revision .html .html CSS Sprite Compile Modify Links Compile Merge & Minify Merge & Minify Modify Links
  47. 47. 47 RFF Tools / Build img .css Compile Auto prefixer Minify .css .css .css .js .js .html img .css .js img Add Revision Add Revision Add Revision .html .html CSS Sprite Compile Modify Links Compile Merge & Minify Merge & Minify Modify Links dist Git FTP Push Put
  48. 48. 48 RFF Tools "generator-rff" is very useful but it's hard to use for non-engineers such as designers or directors.
  49. 49. 49 RFF Tools / rff-gui We also developed the GUI application of generator-rff, "rff-gui" for Mac & Windows.
  50. 50. 50 RFF Tools / rff-gui 1. Scaffolding 2. Package Management 3. Preview 4. Build
  51. 51. 51 RFF Tools / rff-gui node-webkit: An application runtime based on Chromium and Node.js for Win, Mac and Linux.
  52. 52. 52 RFF Tools / rff-gui HTML / CSS / JavaScript AngularJS Bootstrap generator-rff node-webkit (Node.js + Chromium) Mac or Windows or Linux rff-gui GUI Layer
  53. 53. 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. 54. 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. 55. 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. 56. 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. 57. 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. 58. 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. 59. 59 Self Introduction Tantan Hiroyuki Tanjo Role Developer of RFF Components Organization Creative & Web Design Department Expertise Front-end Development / Graphic Design / Painting Contact hiroyuki.tanjo@mail.rakuten.com htanjo
  60. 60. 60 Demo Video http://youtu.be/jGzqR6-jAYE
  61. 61. 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. 62. 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. 63. 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. 64. 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. 65. 65 Future Plan Tools Libraries Environment Operation  Keep improving based on developers' feedback and technology trend.  Make rff-gui user-friendly.
  66. 66. 66 Future Plan Tools Libraries Environment Operation  Provide various libraries such as templates, UI components, utilities, etc.
  67. 67. 67 Future Plan Tools Libraries  Build the server-side environment to automate our tasks such as build, test, deploy, etc. Environment Operation
  68. 68. 68 Future Plan Tools Libraries  Build the team to continuously develop RFF, support developers and maintain the environment. Environment Operation
  69. 69. 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. 70. 70 Wrap up  Utilize the latest technologies to improve our quality and productivity.
  71. 71. 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. 72. 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. 73. 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. 74. 74 Open Source
  75. 75. 75 Open Source Released some RFF tools as open sources on GitHub! https://github.com/rakuten-frontend
  76. 76. 76 Rakuten Front-end Framework
  77. 77. 77 Let's work together! We are seeking Front-end Engineers! http://corp.rakuten.co.jp/careers/cwd/
  78. 78. 78 Thank you!

Notas del editor

  • 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.
  • 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.
  • 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.
  • Usually, we release services and applications, in collaboration with the development unit and business units.
  • 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.
  • 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.
  • First of all, let me talk about the trend of front-end.
  • Last year, we explained about our HTML5 activities in this conference.
  • I said, HTML5 allowed us to develop rich contents and applications, for various platforms.
  • In the meantime, various issues became obvious, such as large-scale development, complicated source code, security, performance, compatibility, and so on.
  • To solve the issues, many developers around the world, have created so many useful tools and libraries.
  • In Rakuten, we have already started using those useful tools to develop efficiently. However,
  • 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.
  • We needed to standardize the tools to improve our productivity, and we also needed to keep flexibility for various project style.
  • Additionally, we wanted to standardize not only tools, but also template and UI components like HTML5 boilerplate and bootstrap, to keep consistency.
  • 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,
  • Rakuten Front-end Framework Project.
  • So, let me explain what “Rakuten Front-end Framework” is.
  • Rakuten Front-end Framework is the activities to improve front-end development environment in Rakuten by utilizing the latest technologies.
  • 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.
  • RFF consists of 4 parts.
  • 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.
  • The second one is "Libraries".
  • 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.
  • 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.
  • 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.
  • These are 4 main elements of RFF.
  • Through the Rakuten Front-end Framework, we aim to
  • Develop our useful tools, by utilizing the latest technologies to improve our quality and productivity.
  • Then, deliver common libraries through the tools, to spread out our knowledge.
  • Finally, we want to contribute to the user experience of Rakuten services.

    This is the objective of Rakuten Front-end Framework.
  • Next topic is the technology of RFF.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • You can install major libraries by using Bower.
    Over 18,000 libraries are registered in the official site.
  • You can immediately use bower, because the configuration file "bower.json" is already integrated in generator-rff.
  • Next one is Preview.

    You can quickly check the contents which you edited, by using a local Web server
  • 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.
  • The last one is Build.

    After checking the contents, we should build files to distribute.
    We use Grunt for the build phase.
  • 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.
  • 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.
  • 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.
  • 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.
  • So, we also developed the GUI desktop application of generator-rff. It's "rff-gui".
  • It has almost same as generator-rff functionalities.
  • 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.
  • 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.
  • 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.
  • Furthermore, we developed other utilities.
  • 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.

  • 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.
  • 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.
  • So, let's take a look at the demo.

    I want to hand over the microphone to Tantan.
  • 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.
  • Thank you Tantan,
    As you can see, RFF tools are very useful for Web development.


    Next, I want to introduce our case examples.
  • We've already started using RFF for over 10 projects.
    Rakuten Cafe and Rakuten Energy smartphone site were developed by using RFF tools.
  • The developers said like this.

    RFF is a good tool because we didn't have to take care of the grunt configuration and performance.
  • About Future Plan.
  • 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.
  • 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.
  • About environment,

    we would like to build the server-side environment, based on Jenkins, in order to automate build, test, and deploy.
  • 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.

  • Wrap up.
  • In this session, I mentioned

    We must utilize the latest technologies to improve our quality and productivity.
  • So we launched Rakuten Front-end Framework which consists of Tools, Libraries, Environment and Operation.
  • 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.
  • And, developing by ourselves is very important to efficiently improve our development environment.
  • And I have one announcement.
  • 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.
  • 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.
  • 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.
  • Thank you so much for coming to our session today.

×