Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-end Stacks of our April fool SPA


Published on

for TeckTalkTokyo#1

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Front-end Stacks of our April fool SPA

  1. 1. The Front-end Stacks of our April fool SPA April 21st, 2016 Tech Talk Tokyo #1
  2. 2. 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.
  3. 3. What we made A Single page application to list all April fool websites.
  4. 4. “Fastest Summery of April fools in Japan.”
  5. 5. Back-end stacks • Codes are in Github. (Cool) • on AWS with CircleCI. ( • Possible to deploy via Slack. (Completely no idea…)
  6. 6. I can talk about my friends😊
  7. 7. Front-end stacks • View layer is React.js • Style by Sass. • Bundle with Webpack. • Data is contained in JSON.
  8. 8. Main trick is.. This time we tried to let Webpack handle everything, React, Sass, image, json, html.
  9. 9. 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. •
  10. 10. For example we can use Sass in JS !! Like below… Because Webpack can understand and look for sass file through sass-loader.
  11. 11. ./style.scss (required into index.js) ./bundle.js (output file of bundling index.js)
  12. 12. Any assets in JavaScript. • We don’t need Gulp or Grunt. • We never see ‘css’ file. • Just run Webpack.
  13. 13. 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.
  14. 14. 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を手放した理由
  15. 15. SNS & Contacts • Twitter @chuck0523 • Github chuck0523 • Gmail • Only you can free yourself (personal) • MyTechBlog(programming) More About Me MyBlogs