A presentation for 第3回【関西ITベンチャー】 event.
Why and how we built a new web application using the latest web technologies.

Context

zenlogic.jp provides hosting web services.
In 2016 January, we released a new version of the web application used to registers new customers.

Goals

Improve the user experience (UX):
- Fast application
- Easy to use (instant feedback)
- Less steps, less clicks
- Mobile-friendly
For developers :
- use the latest technologies (npm modules, Javascript ES6, React, Redux...)
- speed up development with "Hot Reload" feature
For maintenance and safe deploy:
- We want automatic tests for JavaScript too.

Technologies

Before: classic web application, with pages rendered by Ruby on Rails assets pipeline
After: single-page application (SPA) built with node.js tools

The new front-end stack:

The result

Link

On mobile screens

On desktop screen

About testing

Testing front-end code is important, testing is not only for back-end code!
We added more than 100 tests to be sure that nothing is broken when a new feature is added.

About linting

We use ESLint to check the code before deploying, following Airbnb styleguide rules.
Goals:

catch potential bugs
keep a uniform coding style

The end

Thank you for your attention!