Front-end Stacks of our April fool SPA

The Front-end Stacksof our April fool SPA

April 21st, 2016Tech 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.”http://april2016.jobtalk.jp/

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)

Any assets in JavaScript.• We don’t need Gulp or Grunt.

• We never see ‘css’ file.

• Just run Webpack.

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.

Further information• Webpack — The Confusing Parts

• CSS Modules — Solving the challenges of CSS at scale

• Why I Left Gulp and Grunt for npm Scripts

• 【意訳】Webpackの混乱ポイント

• [意訳]CSSモジュール、あるいは大規模サイトにおけるCSSの課題解決

• [意訳]私がGulpとGruntを手放した理由

SNS & Contacts• Twitter @chuck0523

• Github chuck0523

• Gmail [email protected]

• Only you can free yourself (personal)

• MyTechBlog(programming)

More About Me

MyBlogs