The Front-end Stacks
of our April fool SPA
April 21st, 2016
Tech Talk Tokyo #1
Who I am
• Takashi Yoneyama (English name : chuck)
• Livesense, inc.(Tokyo, Japan)
• EastMeetEast, inc.(NewYork, USA)
• Junior Front-end Developer with 1.5 years exp.
• HTML, CSS, JS, Ruby, PHP, Swift, Elm.
What we made
A Single page application to list all
April fool websites.
“Fastest Summery of April fools in Japan.”
• Codes are in Github. (Cool)
• on AWS with CircleCI. (Okay..cool)
• Possible to deploy via Slack. (Completely no
• View layer is React.js
• Style by Sass.
• Bundle with Webpack.
• Data is contained in JSON.
Main trick is..
This time we tried to
let Webpack handle everything,
React, Sass, image, json, html.
We needed several “loaders” which Webpack uses
to load multiple types of assets.
• babel-loader for ES2015 and React.
• sass-loader, css-loader and style-loader for Sass.
• json-loader for json.
For example we can use Sass in JS !!
Because Webpack can understand and look for sass
file through sass-loader.
./style.scss (required into index.js)
./bundle.js (output file of bundling index.js)
• We don’t need Gulp or Grunt.
• We never see ‘css’ file.
• Just run Webpack.
• Highly recommend to use Webpack for building
SPA in the point of quickness and easiness.
• But also be careful to adopt ‘Any files in JS’ in
your massive application.
• Webpack — The Confusing Parts
• CSS Modules — Solving the challenges of CSS at scale
• Why I Left Gulp and Grunt for npm Scripts
SNS & Contacts
• Twitter @chuck0523
• Github chuck0523
• Gmail email@example.com
• Only you can free yourself
More About Me