Rebuilding Tech in Asia's Frontend with React

Slides for my talk during ReactJS Singapore Jan 2016 meetup.

Links TLDR if you're lazy to download the PDF:

Dev Tools:
- webpack: https://webpack.github.io/
- bootstrap-loader: https://github.com/shakacode/bootstrap-loader
- Babel: https://babeljs.io/
- react-transform-hmr: https://github.com/gaearon/react-transform-hmr
- ESLint: http://eslint.org/
- eslint-config-techinasia: https://github.com/techinasia/eslint-config-techinasia

Core Libraries:
- lodash: https://lodash.com
- react-router: https://github.com/rackt/react-router
- react-helmet: https://github.com/nfl/react-helmet
- Fetch API (polyfill): https://github.com/github/fetch

Starting Boilerplate:
- https://github.com/gaearon/flux-react-router-example

Migrating from Flux to Redux:
- http://rackt.org/redux/docs/recipes/MigratingToRedux.html

Testing:
- mocha: https://mochajs.org
- karma: https://karma-runner.github.io/0.13/index.html
- sinon: http://sinonjs.org/
- expect: https://github.com/mjackson/expect
- enzyme: https://github.com/airbnb/enzyme

Prerender.io: https://prerender.io/

Tech in Asia stuff:
- Join Us: https://www.techinasia.com/join
- Developer complimentary passes give-away for Tech in Asia Singapore 2016: https://www.techinasia.com/developers-free-passes-tech-asia-singapore-2016

Transcript

1. Rebuilding Tech in Asia's Frontend
2. Melvin Lee Web Engineer, Tech in Asia • • zy.sg @zyml github.com/zyml
3. Rebuilding Tech in Asia Launched: 16 Dec, 2015
4. Before... 2 separate platforms, serving content within itself: for editorial content app for startups database WordPress Laravel
5. After serving editorial content via REST API REST service for startups database + ??? application calling the respective APIs WordPress Laravel React
6. Dev Tools for bundling all our assets for our custom Bootstrap theme for our ES2015+ goodies (and compiling JSX) for hot reloading with our for linting webpack bootstrap-loader Babel 5 6 react-transform-hmr ESLint own extended rules
7. Core Libraries for array/object management & FP for routing for ʳ‡–ƒʴ management for AJAX calls lodash react-router react-helmet Fetch API      IHWFK XUO WKHQ U !UMVRQ  WKHQ GDWD !FRQVROHORJ GDWD  FDWFK H !FRQVROHORJ %RRR     
8. Starting Boilerplate https://github.com/gaearon/flux-react-router-example
9. Flux Architecture Modified Flux architecture based on boilerplate One foot into : Action Creators Actions Dispatcher Reducers Stores Components migrating to Redux
10. Higher-Order Components Prefer composition over inheritance Use ES2015 classes responsibly
11.       H[SRUWGHIDXOWIXQFWLRQZUDS6RPHWKLQJ ^ UHWXUQ :UDSSHG&RPSRQHQW  !^ UHWXUQFODVV6RPH&RPSRQHQWH[WHQGV&RPSRQHQW^  UHQGHU ^ UHWXUQ:UDSSHG&RPSRQHQW^WKLVSURSV`^WKLVVWDWH`! ` ` ` ` FODVV)RR&RPSRQHQWH[WHQGV&RPSRQHQW^` H[SRUWGHIDXOWZUDS6RPHWKLQJ )RR&RPSRQHQW      
12. Testing + for browser-based testing for test spies, stubs & mocks for assertion for JSX testing mocha karma sinon mjackson/expect airbnb/enzyme       LPSRUW^VKDOORZ`IURP HQ]\PH  GHVFULEH 0\&RPSRQHQW!   !^ LW UHQGHUVWKUHH)RR!FRPSRQHQWV   !^ FRQVWZUDSSHU VKDOORZ 0\&RPSRQHQW!  H[SHFW ZUDSSHUILQG )RR WRKDYHOHQJWK   `  `     
13. Search Engine Optimization https://prerender.io/
14. Still loads to do & play around! (Slowly) migrate to Redux Optimize DOM rendering (infinite scroll) Making code base universal (isomorphic) ready Normalizing our store data Finish working on ??? features
15. We're hiring too :) https://www.techinasia.com/join
16. Tech in Asia Singapore 2016 12 - 13 April 2016 · Suntec City Convention Centre https://www.techinasia.com/developers-free-passes-tech- asia-singapore-2016
17. The End Questions?