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:
- node.js: server-side JavaScript used to build the application
- JavaScript ES6 modules (see previous 勉強会!)
- React
- React Hot Loader
- Redux: architecture to manage application state
- redux-form: used to bind forms to Redux state
- Webpack: bundle JS and CSS code, web server in development
- Babel converts ES6 code to ES5 code
- React-router for client side routing
- Autoprefixer and PostCSS to process CSS code
- npm scripts (see Glitter package.json)
- Testing with Mocha and jsdom
- Linting with ESLint, following Airbnb styleguide
The result
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!