The Front-end Stacks of our April fool SPA Tech Talk Tokyo #1 April 21st, 2016
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.
Back-end stacks • Codes are in Github. (Cool) • on AWS with CircleCI. (Okay..cool) • Possible to deploy via Slack. (Completely no idea…)
I can talk about my friends😊
Front-end stacks • 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. • https://webpack.github.io/docs/loaders.html
For example we can use Sass in JS !! Like below… 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)
So we… • 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.